🔀 Merge pull request #41 from GleamingStar/dev/1.0.3

1.0.3 배포

Author: GleamingStar

README.md

@@ -2,9 +2,10 @@
 
 #### 캐치마인드 웹 게임 프로젝트
 
-## 👉 [AWS 배포 링크](http://52.79.242.136/)
+## 🚀 [AWS 배포 링크](http://52.79.242.136/)
 
 ### 🎨 Preview
+
 <img src="https://user-images.githubusercontent.com/70461368/159423207-dd813ec6-cd7e-43c9-9793-20cac7c3df96.gif" alt="desktop gif">
 <img src="https://user-images.githubusercontent.com/70461368/159423334-9f85ae12-f498-4b01-9b39-cf1fb9cdaaf2.png" style="width:200px;" alt="mobile">
 
@@ -21,11 +22,14 @@
 <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
+### 🏗️ To Do
 
 - [ ] 문제 목록 추가
-- [ ] [`<Entrance />`](https://github.com/GleamingStar/web-catchmind/issues/13) 기능 및 디자인 개선
-- [ ] [`<Lobby />`](https://github.com/GleamingStar/web-catchmind/issues/11) 디자인 개선
-- [ ] [최적화](https://github.com/GleamingStar/web-catchmind/issues/15)
+- [ ] [1.0.4 업데이트](https://github.com/GleamingStar/web-catchmind/issues/39)
+  - 👷 GitHub Action 자동배포 적용
+  - ⚡️ `draw` 소켓이벤트 최적화
+  - ⬆️ React 18 적용
 - [ ] 리팩토링
 - [ ] README 개선
+
+### 🌱 What I Learned

package.json

@@ -1,6 +1,6 @@
 {
   "name": "catch-mind",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "drawing and guessing game web application",
   "scripts": {
     "start": "webpack --mode development --config ./webpack.server.js && node dist/server.js",
@@ -10,12 +10,10 @@
   "author": "GleamingStar ([email protected])",
   "license": "MIT",
   "dependencies": {
-    "axios": "^0.25.0",
     "dotenv": "^16.0.0",
     "express": "^4.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

@@ -6,7 +6,7 @@ const Main = lazy(() => import('./components/Main'));
 const App = () => (
   <RecoilRoot>
     <GlobalStyle />
-    <Suspense fallback={<></>}>
+    <Suspense fallback={null}>
       <Main />
     </Suspense>
   </RecoilRoot>

src/client/atom/accountAtom.tsx

@@ -1,18 +1,35 @@
-import { atom } from 'recoil';
+import { atom, selector } from 'recoil';
 import socket from 'client/config/socket';
+import { PROFILE_IMAGE_SIZE } from 'shared/constant';
 import { TUser } from 'shared/types';
+import { makeHash } from 'shared/util';
+
+export const userNameAtom = atom({
+  key: 'userName',
+  default: '',
+});
+
+export const imageUrlAtom = atom({
+  key: 'imageUrl',
+  default: makeHash(32),
+});
+
+export const userImageSelector = selector({
+  key: 'userImage',
+  get: ({ get }) => `http://gravatar.com/avatar/${get(imageUrlAtom)}?d=identicon&s=${PROFILE_IMAGE_SIZE}`,
+});
 
 export const accountAtom = atom<TUser>({
   key: 'account',
   default: null,
   effects: [
     ({ setSelf, resetSelf }) => {
       socket.on('login/success', setSelf);
-      socket.on('disconnect', resetSelf)
-      
+      socket.on('disconnect', resetSelf);
+
       return () => {
         socket.off('login/success', setSelf);
-        socket.off('disconnect', resetSelf)
+        socket.off('disconnect', resetSelf);
       };
     },
   ],

src/client/atom/canvasAtom.tsx

@@ -1,7 +1,7 @@
 import { atom, selector } from 'recoil';
 import socket from 'client/config/socket';
-import { CANVAS_SIZE } from 'shared/constant';
-import { TCanvas, TColor } from 'shared/types';
+import { CANVAS_SIZE, LANDSCAPE_WIDTH, PORTRAIT_WIDTH } from 'shared/constant';
+import { TCanvas } from 'shared/types';
 
 const isMobileChrome = /Chrome/g.test(navigator.userAgent) && /Mobile Safari/g.test(navigator.userAgent);
 
@@ -29,7 +29,7 @@ export const contextAtom = atom<CanvasRenderingContext2D>({
 
         const reset = () => ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
 
-        const MobileChromeReset = () => {
+        const mobileChromeReset = () => {
           reset();
           ctx.beginPath();
           ctx.moveTo(0, 0);
@@ -39,7 +39,7 @@ export const contextAtom = atom<CanvasRenderingContext2D>({
           ctx.closePath();
         };
 
-        const resetHandler = isMobileChrome ? MobileChromeReset : reset;
+        const resetHandler = isMobileChrome ? mobileChromeReset : reset;
 
         socket.on('canvas/reset', resetHandler);
 
@@ -56,7 +56,8 @@ export const contextAtom = atom<CanvasRenderingContext2D>({
 });
 
 const width = window.innerWidth;
-const defaultLeftSpace = width > 800 ? (width - 800) / 2 : width > 500 ? (width - 500) / 2 : 0;
+const defaultLeftSpace =
+  width > LANDSCAPE_WIDTH ? (width - LANDSCAPE_WIDTH) / 2 : width > PORTRAIT_WIDTH ? (width - PORTRAIT_WIDTH) / 2 : 0;
 
 export const leftSpaceAtom = atom({
   key: 'leftSpace',
@@ -68,18 +69,20 @@ export const toolAtom = atom<'pencil' | 'eraser'>({
   default: 'pencil',
 });
 
-export const thicknessAtom = atom<number>({
+export const thicknessAtom = atom({
   key: 'thickness',
   default: 2,
 });
 
-export const colorAtom = atom<TColor>({
+export const colorAtom = atom({
   key: 'color',
-  default: 'black',
+  default: '#000000',
 });
 
-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 pencilInlineSVG = (color: string) =>
+  `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23${color.slice(
+    1
+  )}' 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";
 

src/client/atom/gameAtom.tsx

@@ -2,6 +2,7 @@ import { atom, selector } from 'recoil';
 import socket from 'client/config/socket';
 import { MAX_SET_TIMER } from 'shared/constant';
 import { TGame } from 'shared/types';
+import { debounce } from 'shared/util';
 import { accountAtom } from './accountAtom';
 
 export const gameAtom = atom<TGame>({
@@ -78,23 +79,20 @@ export const isEndAtom = atom({
   default: false,
   effects: [
     ({ setSelf, resetSelf }) => {
-      const RESET_TIMER = 5000;
-
-      let timer;
+      const debouncedReset = debounce(resetSelf, 5000);
 
       const endHandler = () => {
-        clearTimeout(timer);
         setSelf(true);
-        timer = setTimeout(resetSelf, RESET_TIMER);
+        debouncedReset();
       };
 
       socket.on('game/end', endHandler);
-      socket.on('room/leave', resetSelf)
+      socket.on('room/leave', resetSelf);
       socket.on('game/set/start', resetSelf);
-      
+
       return () => {
         socket.off('game/end', endHandler);
-        socket.off('room/leave', resetSelf)
+        socket.off('room/leave', resetSelf);
         socket.off('game/set/start', resetSelf);
       };
     },

src/client/atom/miscAtom.tsx

@@ -1,6 +1,7 @@
 import { atom } from 'recoil';
 import socket from 'client/config/socket';
-import { LOGIN_ALERT_MESSAGE, ROOM_ALERT_MESSAGE } from 'shared/constant';
+import { LANDSCAPE_WIDTH, LOGIN_ALERT_MESSAGE, ROOM_ALERT_MESSAGE } from 'shared/constant';
+import { debounce } from 'shared/util';
 
 export const loginAlertAtom = atom({
   key: 'loginAlert',
@@ -70,6 +71,8 @@ export const zoomOutAlertAtom = atom({
   default: visualViewport.width < 499,
   effects: [
     ({ setSelf }) => {
+      if (visualViewport.width > 499) return;
+
       const evCache: Array<PointerEvent> = [];
       let prevDiff = -1;
 
@@ -130,14 +133,11 @@ export const zoomOutAlertAtom = atom({
 
 export const isPortraitAtom = atom({
   key: 'isPortrait',
-  default: window.innerWidth < 800,
+  default: window.innerWidth < LANDSCAPE_WIDTH,
   effects: [
     ({ setSelf }) => {
-      let timer;
-      const resizeHandler = () => {
-        clearTimeout(timer);
-        timer = setTimeout(() => setSelf(window.innerWidth < 800), 100);
-      };
+      const resizeHandler = debounce(() => setSelf(window.innerWidth < LANDSCAPE_WIDTH), 100);
+
       window.addEventListener('resize', resizeHandler);
 
       return () => {

src/client/components/Main.tsx

@@ -1,21 +1,23 @@
 import styled from 'styled-components';
-import { lazy, Suspense, useEffect } from 'react';
+import { lazy, Suspense, useCallback, useEffect } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { accountAtom } from 'client/atom/accountAtom';
 import { leftSpaceAtom } from 'client/atom/canvasAtom';
 import { currentRoomIndexAtom } from 'client/atom/roomAtom';
+import { LANDSCAPE_WIDTH, PORTRAIT_WIDTH } from 'shared/constant';
+import { debounce, throttle } from 'shared/util';
 import Entrance from './entrance/Entrance';
 const Lobby = lazy(() => import('./lobby/Lobby'));
 const Game = lazy(() => import('./game/Game'));
 
 const MainWrapper = styled.div`
   position: relative;
 
-  width: 800px;
+  width: ${LANDSCAPE_WIDTH}px;
   height: 600px;
 
-  @media screen and (max-width: 800px) {
-    width: 500px;
+  @media screen and (max-width: ${LANDSCAPE_WIDTH}px) {
+    width: ${PORTRAIT_WIDTH}px;
     min-height: 700px;
     height: calc(var(--vh, 1vh) * 100);
   }
@@ -26,36 +28,30 @@ const MainWrapper = styled.div`
   user-select: none;
 `;
 
-const throttle = (callback, delay) => {
-  let previousCall = new Date().getTime();
-
-  return (...args) => {
-    const time = new Date().getTime();
-
-    if (time - previousCall >= delay) {
-      previousCall = time;
-      callback(...args);
-    }
-  };
-};
-
 const Main = () => {
   const isLogined = useRecoilValue(accountAtom) !== null;
   const isInRoom = useRecoilValue(currentRoomIndexAtom) !== null;
   const setLeftSpace = useSetRecoilState(leftSpaceAtom);
 
-  useEffect(() => {
-    let timer;
+  const setHeight = useCallback(
+    throttle(() => document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`), 20),
+    []
+  );
+
+  const setLeft = useCallback(
+    debounce(() => {
+      const width = window.innerWidth;
+      if (width > LANDSCAPE_WIDTH) setLeftSpace((width - LANDSCAPE_WIDTH) / 2);
+      else if (width > PORTRAIT_WIDTH) setLeftSpace((width - PORTRAIT_WIDTH) / 2);
+    }, 250),
+    []
+  );
 
-    const resizeHandler = throttle(() => {
-      document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
-      clearTimeout(timer);
-      timer = setTimeout(() => {
-        const width = window.innerWidth;
-        if (width > 800) setLeftSpace((width - 800) / 2);
-        else if (width > 500) setLeftSpace((width - 500) / 2);
-      }, 250);
-    }, 100);
+  useEffect(() => {
+    const resizeHandler = () => {
+      setHeight();
+      setLeft();
+    };
 
     window.addEventListener('resize', resizeHandler);
 
@@ -66,7 +62,7 @@ const Main = () => {
 
   return (
     <MainWrapper>
-      <Suspense fallback={<></>}>{isLogined ? isInRoom ? <Game /> : <Lobby /> : <Entrance />}</Suspense>
+      <Suspense fallback={null}>{isLogined ? isInRoom ? <Game /> : <Lobby /> : <Entrance />}</Suspense>
     </MainWrapper>
   );
 };

src/client/components/common/Playing.tsx

@@ -1,12 +1,11 @@
 import styled from 'styled-components';
-import { BsBrush, BsEasel } from 'react-icons/bs';
 
 const PlayingWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
 `;
-const Brush = styled.div`
+const BrushWrapper = styled.div`
   position: absolute;
   top: -5px;
   left: 5px;
@@ -37,11 +36,37 @@ const Brush = styled.div`
 
 const Playing = ({ size }: { size: number }) => (
   <PlayingWrapper title="게임중">
-    <BsEasel size={size} />
-    <Brush>
-      <BsBrush size={size * 0.75} />
-    </Brush>
+    <Easel size={size} />
+    <BrushWrapper>
+      <Brush size={size * 0.75} />
+    </BrushWrapper>
   </PlayingWrapper>
 );
 
+const Easel = ({ size }: { size: number }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    fill="currentColor"
+    className="bi bi-easel"
+    viewBox="0 0 16 16"
+  >
+    <path d="M8 0a.5.5 0 0 1 .473.337L9.046 2H14a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1.85l1.323 3.837a.5.5 0 1 1-.946.326L11.092 11H8.5v3a.5.5 0 0 1-1 0v-3H4.908l-1.435 4.163a.5.5 0 1 1-.946-.326L3.85 11H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h4.954L7.527.337A.5.5 0 0 1 8 0zM2 3v7h12V3H2z" />
+  </svg>
+);
+
+const Brush = ({ size }: { size: number }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    fill="currentColor"
+    className="bi bi-brush"
+    viewBox="0 0 16 16"
+  >
+    <path d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.067 6.067 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.118 8.118 0 0 1-3.078.132 3.659 3.659 0 0 1-.562-.135 1.382 1.382 0 0 1-.466-.247.714.714 0 0 1-.204-.288.622.622 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896.126.007.243.025.348.048.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04zM4.705 11.912a1.23 1.23 0 0 0-.419-.1c-.246-.013-.573.05-.879.479-.197.275-.355.532-.5.777l-.105.177c-.106.181-.213.362-.32.528a3.39 3.39 0 0 1-.76.861c.69.112 1.736.111 2.657-.12.559-.139.843-.569.993-1.06a3.122 3.122 0 0 0 .126-.75l-.793-.792zm1.44.026c.12-.04.277-.1.458-.183a5.068 5.068 0 0 0 1.535-1.1c1.9-1.996 4.412-5.57 6.052-8.631-2.59 1.927-5.566 4.66-7.302 6.792-.442.543-.795 1.243-1.042 1.826-.121.288-.214.54-.275.72v.001l.575.575zm-4.973 3.04.007-.005a.031.031 0 0 1-.007.004zm3.582-3.043.002.001h-.002z" />
+  </svg>
+);
+
 export default Playing;