🔀 Merge pull request #18 from GleamingStar/dev

1.0.0 배포

Author: GleamingStar

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
-package-lock.json
+package-lock.json
+.env

README.md

@@ -1,10 +1,29 @@
 # web-catchmind
-#### 웹 캐치마인드 클론 프로젝트
+#### 캐치마인드 웹 게임 프로젝트
 
+## 👉 [AWS 배포 링크](http://52.79.242.136/)
 
-### 🛠 기술스택
-<img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=TypeScript&logoColor=white"/> <img src="https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=React&logoColor=white"/> <img src="https://img.shields.io/badge/styled--components-DB7093?style=flat-square&logo=styled-components&logoColor=white"/> <img src="https://img.shields.io/badge/express-000000?style=flat-square&logo=express&logoColor=white" /> <img src="https://img.shields.io/badge/Socket.IO-010101?style=flat-square&logo=Socket.io&logoColor=white" />
-<img src="https://img.shields.io/badge/Webpack-8DD6F9?style=flat-square&logo=Webpack&logoColor=white" /> <img src="https://img.shields.io/badge/Babel-F9DC3E?style=flat-square&logo=Babel&logoColor=white" />
 
 ### 🎨 Preview
-### 🚀 To Do
+![GIF 2022-03-10 오후 4-11-13](https://user-images.githubusercontent.com/70461368/157608424-98bd63ae-835d-43ac-8759-6850d27ee27b.gif)
+
+### 👀 How To Play
+- 닉네임을 정한 후 입장해주세요
+- 방을 선택해 입장해주세요
+  - 만약 방이 없다면, 새로운 방을 만들어주세요
+- 2명 이상이 방에 있다면, 게임 시작 버튼을 눌러 게임을 시작해주세요
+- 출제자는 제시어를 보고 그림을 그려주시고, 나머지는 주어진 그림으로 제시어를 맞춰주세요  
+
+
+### 🛠 Tech Stack
+<img src="https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=TypeScript&logoColor=white"/> <img src="https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=React&logoColor=white"/> <img src="https://img.shields.io/badge/styled--components-DB7093?style=flat-square&logo=styled-components&logoColor=white"/> <img src="https://img.shields.io/badge/express-000000?style=flat-square&logo=express&logoColor=white" /> <img src="https://img.shields.io/badge/Socket.IO-010101?style=flat-square&logo=Socket.io&logoColor=white" />
+<img src="https://img.shields.io/badge/Webpack-8DD6F9?style=flat-square&logo=Webpack&logoColor=white" /> <img src="https://img.shields.io/badge/Babel-F9DC3E?style=flat-square&logo=Babel&logoColor=white" />
+### 🚀 To Do
+- [ ] 문제 목록 추가
+- [ ] 모바일 반응형 디자인 및 터치 지원
+- [ ] [`<Entrance />`](https://github.com/GleamingStar/web-catchmind/issues/13) 기능 및 디자인 개선
+- [ ] [`<Lobby />`](https://github.com/GleamingStar/web-catchmind/issues/11) 디자인 개선
+- [ ] [`<Game />`](https://github.com/GleamingStar/web-catchmind/issues/17) 기능 및 디자인 개선
+- [ ] [최적화](https://github.com/GleamingStar/web-catchmind/issues/15) 
+- [ ] [리팩토링](https://github.com/GleamingStar/web-catchmind/issues/16)
+- [ ] README 개선

package.json

@@ -1,7 +1,7 @@
 {
   "name": "catch-mind",
-  "version": "0.0.1",
-  "description": "web catchmind",
+  "version": "1.0.0",
+  "description": "drawing and guessing game web application",
   "scripts": {
     "start": "webpack --mode development --config ./webpack.server.js && node dist/server.js",
     "build": "webpack --mode production --config ./webpack.server.js && webpack --config ./webpack.client.prod.js && node dist/server.js",
@@ -13,9 +13,9 @@
     "axios": "^0.25.0",
     "dotenv": "^16.0.0",
     "express": "^4.17.2",
-    "express-session": "^1.17.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "recoil": "^0.6.1",
     "socket.io": "^4.4.1",
     "socket.io-client": "^4.4.1",

src/client/App.tsx

@@ -1,9 +1,14 @@
+import { lazy, Suspense } from 'react';
 import { RecoilRoot } from 'recoil';
 import GlobalStyle from './config/GlobalStyle';
+const Main = lazy(() => import('./components/Main'));
 
 const App = () => (
   <RecoilRoot>
     <GlobalStyle />
+    <Suspense fallback={<></>}>
+      <Main />
+    </Suspense>
   </RecoilRoot>
 );
 

src/client/atom/accountAtom.tsx

@@ -0,0 +1,7 @@
+import { atom } from 'recoil';
+import { TUser } from 'shared/types';
+
+export const accountAtom = atom<TUser>({
+  key: 'account',
+  default: null,
+});

src/client/atom/alertAtom.tsx

@@ -0,0 +1,12 @@
+import { atom } from 'recoil';
+import { LOGIN_ALERT_MESSAGE, ROOM_ALERT_MESSAGE } from 'shared/constant';
+
+export const loginAlertAtom = atom({
+  key: 'loginAlert',
+  default: LOGIN_ALERT_MESSAGE.NONE,
+});
+
+export const roomAlertAtom = atom({
+  key: 'roomAlert',
+  default: ROOM_ALERT_MESSAGE.NONE,
+});

src/client/atom/canvasAtom.tsx

@@ -0,0 +1,47 @@
+import { atom, selector } from 'recoil';
+import { TColor } from 'shared/types';
+
+export const contextAtom = atom<CanvasRenderingContext2D>({
+  key: 'canvas',
+  default: null,
+});
+
+export const toolAtom = atom<'pencil' | 'eraser'>({
+  key: 'tool',
+  default: 'pencil',
+});
+
+export const thicknessAtom = atom<number>({
+  key: 'thickness',
+  default: 2,
+});
+
+export const colorAtom = atom<TColor>({
+  key: 'color',
+  default: 'black',
+});
+
+const pencilInlineSVG = (currentColor: string) =>
+  `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='${currentColor}' class='bi bi-pencil' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/%3E%3C/svg%3E`;
+const eraserInlineSVG =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-eraser' viewBox='0 0 16 16'%3E%3Cpath d='M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828l6.879-6.879zm2.121.707a1 1 0 0 0-1.414 0L4.16 7.547l5.293 5.293 4.633-4.633a1 1 0 0 0 0-1.414l-3.879-3.879zM8.746 13.547 3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293l.16-.16z'/%3E%3C/svg%3E";
+
+export const cursorSelector = selector({
+  key: 'cursor',
+  get: ({ get }) => (get(toolAtom) === 'pencil' ? pencilInlineSVG(get(colorAtom)) : eraserInlineSVG),
+});
+
+export const toggleCanvasModalAtom = atom<number>({
+  key: 'toggleCanvasModal',
+  default: 1,
+});
+
+export const isThicknessOnSelector = selector<boolean>({
+  key: 'isThicknessOn',
+  get: ({ get }) => get(toggleCanvasModalAtom) === 0,
+});
+
+export const isPaletteOnSelector = selector<boolean>({
+  key: 'isPaletteOn',
+  get: ({ get }) => get(toggleCanvasModalAtom) === 1,
+});

src/client/atom/chatAtom.tsx

@@ -0,0 +1,7 @@
+import { atom } from 'recoil';
+import { TChat } from 'shared/types';
+
+export const chatLogAtom = atom<Array<TChat>>({
+  key: 'chatLog',
+  default: [],
+});

src/client/atom/gameAtom.tsx

@@ -0,0 +1,29 @@
+import { atom, selector } from 'recoil';
+import { MAX_SET_TIMER } from 'shared/constant';
+import { TGame } from 'shared/types';
+import { accountAtom } from './accountAtom';
+
+export const gameAtom = atom<TGame>({
+  key: 'game',
+  default: null,
+});
+
+export const answerSelector = selector<string>({
+  key: 'answer',
+  get: ({ get }) => get(gameAtom)?.answer,
+});
+
+export const scoreSelector = selector({
+  key: 'score',
+  get: ({ get }) => (get(gameAtom) === null ? [] : [...get(gameAtom).score].sort((a, b) => b.value - a.value)),
+});
+
+export const timerAtom = atom<number>({
+  key: 'timer',
+  default: MAX_SET_TIMER,
+});
+
+export const isPainterSelector = selector({
+  key: 'isPainter',
+  get: ({ get }) => (get(accountAtom)?.id === get(gameAtom)?.painter.id) === (get(gameAtom) !== null),
+});

src/client/atom/headerAtom.tsx

@@ -0,0 +1,16 @@
+import { atom, selector } from 'recoil';
+
+export const toggleHeaderModalAtom = atom<number>({
+  key: 'toggleHeaderModal',
+  default: 0,
+});
+
+export const isUserListOnSelector = selector<boolean>({
+  key: 'isUserListOn',
+  get: ({ get }) => get(toggleHeaderModalAtom) === 1,
+});
+
+export const isScoreBoardOnSelector = selector<boolean>({
+  key: 'isScoreBoardOn',
+  get: ({ get }) => get(toggleHeaderModalAtom) === 2,
+});