Merge branch 'feat/#91' into develop

2023-Summer-Bootcamp-TeamD · Aug 3, 2023 · e73e252 · e73e252
2 parents 26eb728 + d4fa1f1
commit e73e252
Show file tree

Hide file tree

Showing 11 changed files with 147 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "html2canvas": "^1.4.1",
     "husky": "^8.0.3",
     "lint-staged": "13.2.3",
+    "lodash.debounce": "^4.0.8",
     "lottie-web": "^5.12.2",
     "msw": "^1.2.2",
     "react": "^18.2.0",
@@ -46,6 +47,7 @@
     "@jest/globals": "^29.6.2",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.3",
+    "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^20.4.5",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",

diff --git a/src/App.tsx b/src/App.tsx
@@ -13,7 +13,6 @@ export default function App() {
     <QueryClientProvider client={queryClient}>
       <GlobalStyle />
       {elem}
-      <ReactQueryDevtools />
     </QueryClientProvider>
   );
 }
diff --git a/src/components/Game/GameBoard/CanvasDrawingApp/index.tsx b/src/components/Game/GameBoard/CanvasDrawingApp/index.tsx
@@ -21,6 +21,7 @@ import {
 import useDidMountEffect from '@/hooks/useDidMountEffect';
 import html2canvas from 'html2canvas';
 import { restFetcher } from '@/queryClient';
+import debounce from 'lodash.debounce';
 
 type Props = {
   setCurrentFocus: React.Dispatch<React.SetStateAction<string>>;
@@ -55,6 +56,23 @@ const CanvasDrawingApp = forwardRef<ClearCanvasHandle, Props>((props, ref) => {
   const roundGameInfo = useRecoilValue(roundGameState);
   const nickname = useRecoilValue(nicknameState);
 
+  const [windowSize, setWindowSize] = useState({ width: 0, height: 0 });
+
+  // 창 크기 변화 이벤트 핸들러
+  const handleWindowResize = () => {
+    setWindowSize({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
+
   //그리기 시작
   const startDrawing = (event: React.MouseEvent<HTMLCanvasElement>) => {
     const { offsetX, offsetY } = event.nativeEvent;
@@ -250,8 +268,8 @@ const CanvasDrawingApp = forwardRef<ClearCanvasHandle, Props>((props, ref) => {
       <Result>{roundGameInfo.word && `정답 : ${roundGameInfo.word}`}</Result>
       <canvas
         ref={canvasRef}
-        width={675}
-        height={475}
+        width={500}
+        height={275}
         onMouseDown={startDrawing}
         onMouseMove={draw}
         onMouseUp={stopDrawing}

diff --git a/src/components/Game/GameBoard/index.tsx b/src/components/Game/GameBoard/index.tsx
@@ -22,10 +22,16 @@ export default GameBoard;
 const Board = styled.div`
   box-shadow: 5px 7px 12px -9px #000000;
   position: relative;
-  width: 70rem;
-  height: 50rem;
+  width: 700px;
+  height: 500px;
   background-color: #1c3b3e;
   border: 5px solid #8e5501;
   border-radius: 10px;
   padding: 1rem;
+
+  @media (max-width: 768px) {
+    margin: 0 auto;
+    width: 85%;
+    height: 275px;
+  }
 `;
diff --git a/src/components/Game/GameNav/index.tsx b/src/components/Game/GameNav/index.tsx
@@ -95,7 +95,10 @@ const Nav = styled.div`
   color: black;
   font-size: 3rem;
   padding-top: 3rem;
-  margin-left: 5rem;
+
+  @media (max-width: 768px) {
+    justify-content: center;
+  }
 `;
 
 const Clock = styled.div`
@@ -109,6 +112,7 @@ const Clock = styled.div`
   justify-content: center;
   border-radius: 10px;
   box-shadow: 5px 7px 12px -9px #000000;
+  margin-right: 2.5rem;
 
   & > span:nth-child(1) {
     font-size: 3rem;
@@ -117,6 +121,17 @@ const Clock = styled.div`
   & > span:nth-child(2) {
     font-size: 3.8rem;
   }
+
+  @media (max-width: 768px) {
+    min-width: 20rem;
+    height: 10rem;
+    & > span:nth-child(1) {
+      font-size: 3rem;
+    }
+    & > span:nth-child(2) {
+      font-size: 4rem;
+    }
+  }
 `;
 
 const Users = styled.div`
@@ -126,7 +141,23 @@ const Users = styled.div`
   height: 10rem;
   box-shadow: 5px 7px 12px -9px #000000;
   border-radius: 10px;
-  min-width: 475px;
+  min-width: 47.5rem;
+  overflow-x: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media (max-width: 768px) {
+    min-width: 35rem;
+    height: 10rem;
+    margin-left: 0;
+    & > span:nth-child(1) {
+      font-size: 0.1rem;
+    }
+    & > span:nth-child(2) {
+      font-size: 1.9rem;
+    }
+  }
 `;
 
 const User = styled.div<{ nickname: string; drawer: string }>`
@@ -142,4 +173,16 @@ const User = styled.div<{ nickname: string; drawer: string }>`
   & > div:nth-child(2) {
     font-size: 5rem;
   }
+
+  /* @media (max-width: 768px) {
+    min-width: 30rem;
+    height: 10rem;
+    margin-right: 5rem;
+    & > span:nth-child(1) {
+      font-size: 0.1rem;
+    }
+    & > span:nth-child(2) {
+      font-size: 1.9rem;
+    } */
+  /* } */
 `;
diff --git a/src/components/Game/UsersChat/MyMessage/index.tsx b/src/components/Game/UsersChat/MyMessage/index.tsx
@@ -37,6 +37,12 @@ const MyMessageBox = styled.div`
     align-items: end;
     margin-right: 0.5rem;
   }
+
+  @media (max-width: 768px) {
+    & > div > span {
+      font-size: 1.8rem;
+    }
+  }
 `;
 
 const ChatBox = styled.div`
@@ -51,4 +57,10 @@ const ChatBox = styled.div`
   box-sizing: border-box;
   font-size: 1.6rem;
   padding: 0 1rem;
+
+  @media (max-width: 768px) {
+    font-size: 2.2rem;
+    max-width: 20rem;
+    height: 4.5rem;
+  }
 `;
diff --git a/src/components/Game/UsersChat/OtherMessage/index.tsx b/src/components/Game/UsersChat/OtherMessage/index.tsx
@@ -46,6 +46,16 @@ const OtherChat = styled.div`
     align-items: flex-end;
     margin-left: 0.5rem;
   }
+
+  @media (max-width: 768px) {
+    & > div > p {
+      font-size: 3rem;
+    }
+
+    & > span {
+      font-size: 3rem;
+    }
+  }
 `;
 
 const Profile = styled.div`
@@ -85,6 +95,12 @@ const ChatBox = styled.div`
   box-sizing: border-box;
   font-size: 1.6rem;
   padding: 0 1rem;
+
+  @media (max-width: 768px) {
+    font-size: 2.2rem;
+    max-width: 20rem;
+    height: 4.5rem;
+  }
 `;
 
 const Content = styled.div`
@@ -100,4 +116,10 @@ const Content = styled.div`
     opacity: 0.8;
     margin-left: 0.5rem;
   }
+
+  @media (max-width: 768px) {
+    & > div > span {
+      font-size: 1.8rem;
+    }
+  }
 `;
diff --git a/src/components/Game/UsersChat/chatInputView.tsx b/src/components/Game/UsersChat/chatInputView.tsx
@@ -110,7 +110,6 @@ export default ChatInputView;
 const ChatInputBox = styled.div`
   display: flex;
   height: 5rem;
-  background-color: blue;
 
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;

diff --git a/src/components/Game/UsersChat/index.tsx b/src/components/Game/UsersChat/index.tsx
@@ -39,4 +39,11 @@ const ChatRoom = styled.div`
   background-color: white;
   border-radius: 10px;
   color: black;
+  margin-right: 5rem;
+
+  @media (max-width: 768px) {
+    margin: 0 auto;
+    width: 85%;
+    height: 35rem;
+  }
 `;
diff --git a/src/pages/Game/index.tsx b/src/pages/Game/index.tsx
@@ -207,6 +207,7 @@ const Game = () => {
 export default Game;
 
 const GamePage = styled.div`
+  overflow-x: hidden;
   width: 100vw;
   height: 100%;
   background-image: linear-gradient(to bottom, #faf1e5 60vh, #c9cb81 40vh);
@@ -228,10 +229,17 @@ const Section = styled.section`
     height: calc(100vh - 120px);
     color: white;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     padding-top: 3rem;
     z-index: 2;
   }
+
+  @media (max-width: 768px) {
+    & > div {
+      flex-direction: column;
+      justify-content: flex-start;
+    }
+  }
 `;
 
 const waveAnimation = keyframes`
@@ -254,6 +262,11 @@ const WaveText = styled.span`
   margin-right: 0.8rem;
   margin-top: 1rem;
   animation: ${waveAnimation} 1.5s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
+  @media (max-width: 768px) {
+    font-size: 3rem;
+    color: black;
+    margin-bottom: 1rem;
+  }
 `;
 
 const Cursor = styled.img<{ xy: { x: number; y: number } }>`