From dc1bd3bcba412f647822cefcb5d2fe9d14091e48 Mon Sep 17 00:00:00 2001
From: Nahyun <from.owol@gmail.com>
Date: Wed, 4 Dec 2024 15:58:12 +0900
Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20sseData=20rooms.length=EA=B0=80?=
 =?UTF-8?q?=20=EC=95=84=EB=8B=8C=20totalPages=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/src/hooks/useRoomsSSE.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/fe/src/hooks/useRoomsSSE.ts b/fe/src/hooks/useRoomsSSE.ts
index 00ebcec..3aeefef 100644
--- a/fe/src/hooks/useRoomsSSE.ts
+++ b/fe/src/hooks/useRoomsSSE.ts
@@ -19,7 +19,9 @@ export const useRoomsSSE = () => {
         setRooms(sseData.rooms);
         setPagination(sseData.pagination);
 
-        if (!sseData.rooms.length && userPage > 0) {
+        console.log(sseData.pagination.totalPages);
+
+        if (sseData.pagination.totalPages === 1 && userPage > 0) {
           setUserPage(sseData.pagination.currentPage - 1);
           return;
         }

From c1927adc36be268d8c4c2fcc51096196ea987c7e Mon Sep 17 00:00:00 2001
From: Nahyun <from.owol@gmail.com>
Date: Wed, 4 Dec 2024 17:55:01 +0900
Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EB=B0=98=EC=9D=91=ED=98=95=20UI=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/src/index.css                              | 35 +++++++++++++++++--
 .../pages/GamePage/GameScreen/EndScreen.tsx   |  9 ++---
 .../pages/GamePage/GameScreen/PlayScreen.tsx  |  2 +-
 .../pages/GamePage/GameScreen/ReadyScreen.tsx | 28 +++++++++++----
 .../pages/GamePage/PlayerList/PlayerList.tsx  |  2 +-
 fe/src/pages/GamePage/index.tsx               |  2 +-
 fe/src/pages/RoomListPage/index.tsx           |  2 +-
 7 files changed, 60 insertions(+), 20 deletions(-)

diff --git a/fe/src/index.css b/fe/src/index.css
index 3504613..7aad113 100644
--- a/fe/src/index.css
+++ b/fe/src/index.css
@@ -90,8 +90,17 @@
   box-sizing: border-box;
 }
 
-html,
-body,
+html {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  overflow-x: hidden;
+}
+
 #root {
   height: 100%;
 }
@@ -102,10 +111,30 @@ body {
 
 .app {
   @apply flex flex-col mx-auto justify-center max-w-[1074px] lg:px-0 p-8;
+  height: 100%;
 }
 
 .game-wrapper {
-  @apply relative w-full min-h-screen;
+  @apply relative w-full;
+  min-height: 100vh;
+}
+
+@media (min-width: 768px) {
+  .game-wrapper {
+    height: 100vh;
+    overflow: hidden;
+  }
+}
+
+@media (max-width: 767px) {
+  .game-wrapper {
+    height: auto;
+    overflow-y: visible;
+  }
+
+  body {
+    overflow-y: auto;
+  }
 }
 
 .game-wrapper::before {
diff --git a/fe/src/pages/GamePage/GameScreen/EndScreen.tsx b/fe/src/pages/GamePage/GameScreen/EndScreen.tsx
index ee2bb96..233186d 100644
--- a/fe/src/pages/GamePage/GameScreen/EndScreen.tsx
+++ b/fe/src/pages/GamePage/GameScreen/EndScreen.tsx
@@ -48,14 +48,13 @@ const EndScreen = () => {
   };
 
   return (
-    <div className="relative h-[27rem] bg-white rounded-lg overflow-hidden">
-      <div className="relative w-full h-full flex items-center justify-center">
+    <div className="relative h-[27rem] md:h-[calc(100vh-20rem)] md:min-h-[27rem] md:max-h-[34rem] bg-white rounded-lg overflow-hidden">
+      <div className="h-full w-full flex items-center">
         <Lottie
           animationData={podiumAnimation}
           loop={false}
-          className="w-full max-w-2xl absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+          className="w-full max-w-2xl absolute left-1/2 transform -translate-x-1/2"
         />
-
         <div className="absolute inset-0 pointer-events-none">
           {rank.slice(0, 3).map((playerName, index) => (
             <motion.div
@@ -91,7 +90,6 @@ const EndScreen = () => {
             </motion.div>
           ))}
         </div>
-
         <motion.div
           className="absolute top-4 right-4 bg-white/90 p-4 rounded-lg shadow-lg"
           initial={{ opacity: 0, y: -20 }}
@@ -111,7 +109,6 @@ const EndScreen = () => {
             ))}
           </div>
         </motion.div>
-
         <motion.div
           className="absolute bottom-4 right-4 z-10"
           initial={{ opacity: 0, y: 20 }}
diff --git a/fe/src/pages/GamePage/GameScreen/PlayScreen.tsx b/fe/src/pages/GamePage/GameScreen/PlayScreen.tsx
index 56a1caf..69400f7 100644
--- a/fe/src/pages/GamePage/GameScreen/PlayScreen.tsx
+++ b/fe/src/pages/GamePage/GameScreen/PlayScreen.tsx
@@ -106,7 +106,7 @@ const PlayScreen = () => {
   if (!turnData && !rank.length) return;
 
   return (
-    <div className="relative h-[27rem] bg-white rounded-lg overflow-hidden">
+    <div className="relative h-[27rem] md:h-[calc(100vh-20rem)] md:min-h-[27rem] md:max-h-[34rem] bg-white rounded-lg overflow-hidden">
       <AnimatePresence mode="wait">
         {gamePhase === 'intro' && (
           <motion.div
diff --git a/fe/src/pages/GamePage/GameScreen/ReadyScreen.tsx b/fe/src/pages/GamePage/GameScreen/ReadyScreen.tsx
index b001607..75c77cb 100644
--- a/fe/src/pages/GamePage/GameScreen/ReadyScreen.tsx
+++ b/fe/src/pages/GamePage/GameScreen/ReadyScreen.tsx
@@ -46,7 +46,7 @@ const ReadyScreen = () => {
   };
 
   return (
-    <div className="h-[27rem] bg-white rounded-lg flex flex-col items-center justify-center space-y-4">
+    <div className="relative h-[27rem] md:h-[calc(100vh-20rem)] md:min-h-[27rem] md:max-h-[34rem] bg-white rounded-lg flex flex-col items-center justify-center space-y-4">
       {isHost ? (
         <Button
           size="lg"
@@ -69,13 +69,27 @@ const ReadyScreen = () => {
       )}
 
       {!canStartGame ? (
-        <p className="font-galmuri text-sm text-muted-foreground mt-2">
-          모든 플레이어가 준비를 완료해야 게임을 시작할 수 있습니다.
-        </p>
+        <>
+          <p className="font-galmuri text-md text-muted-foreground mt-2 hidden md:inline">
+            모든 플레이어가 준비를 완료해야 게임을 시작할 수 있습니다.
+          </p>
+          <p className="font-galmuri text-md text-muted-foreground mt-2 md:hidden">
+            모든 플레이어가 준비를 완료해야
+            <br />
+            게임을 시작할 수 있습니다.
+          </p>
+        </>
       ) : (
-        <p className="font-galmuri text-sm text-muted-foreground mt-2">
-          모든 플레이어가 준비 완료되었습니다. 게임을 시작해 주세요!
-        </p>
+        <>
+          <p className="font-galmuri text-md text-muted-foreground mt-2 hidden md:inline">
+            모든 플레이어가 준비 완료되었습니다. 게임을 시작해 주세요!
+          </p>
+          <p className="font-galmuri text-md text-muted-foreground mt-2 md:hidden">
+            모든 플레이어가 준비 완료되었습니다.
+            <br />
+            게임을 시작해 주세요!
+          </p>
+        </>
       )}
     </div>
   );
diff --git a/fe/src/pages/GamePage/PlayerList/PlayerList.tsx b/fe/src/pages/GamePage/PlayerList/PlayerList.tsx
index 02ae2c3..7c408d4 100644
--- a/fe/src/pages/GamePage/PlayerList/PlayerList.tsx
+++ b/fe/src/pages/GamePage/PlayerList/PlayerList.tsx
@@ -10,7 +10,7 @@ const PlayerList = ({ players }: PlayerListProps) => {
   const emptySlots = RULES.maxPlayer - players.length;
 
   return (
-    <div className="grid grid-cols-2 gap-4">
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
       {players.map((player) => (
         <Player key={player.playerNickname} {...player} />
       ))}
diff --git a/fe/src/pages/GamePage/index.tsx b/fe/src/pages/GamePage/index.tsx
index b7fc787..2e5dec6 100644
--- a/fe/src/pages/GamePage/index.tsx
+++ b/fe/src/pages/GamePage/index.tsx
@@ -108,7 +108,7 @@ const GamePage = () => {
 
   return (
     <div className="game-wrapper">
-      <div className="h-screen relative p-4">
+      <div className="relative overflow-y-auto p-6 mt-2 min-h-screen">
         <div className="space-y-6">
           <GameScreen />
           <PlayerList
diff --git a/fe/src/pages/RoomListPage/index.tsx b/fe/src/pages/RoomListPage/index.tsx
index b72044f..cc5af86 100644
--- a/fe/src/pages/RoomListPage/index.tsx
+++ b/fe/src/pages/RoomListPage/index.tsx
@@ -36,7 +36,7 @@ const RoomListPage = () => {
 
   return (
     <div className="game-wrapper">
-      <div className="flex-1">
+      <div className="relative overflow-y-auto p-6 mt-2 min-h-screen flex-1">
         <RoomHeader />
         <SearchBar />
         {isEmpty ? (

From 50bb6d2a6065b8cad49b45c48bb6b1854369498a Mon Sep 17 00:00:00 2001
From: Nahyun <from.owol@gmail.com>
Date: Wed, 4 Dec 2024 18:03:02 +0900
Subject: [PATCH 3/5] =?UTF-8?q?chore:=20=ED=83=80=EC=9D=B4=ED=8B=80?=
 =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fe/index.html b/fe/index.html
index 0b9e79e..f7326da 100644
--- a/fe/index.html
+++ b/fe/index.html
@@ -10,7 +10,7 @@
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Clovapatra</title>
+    <title>안녕! 클로바파트라</title>
   </head>
   <body>
     <div id="root"></div>

From 462fd9ee03e17244759f103acc760023600ef603 Mon Sep 17 00:00:00 2001
From: Nahyun <from.owol@gmail.com>
Date: Wed, 4 Dec 2024 20:23:35 +0900
Subject: [PATCH 4/5] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20console.log=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/src/hooks/useRoomsSSE.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/fe/src/hooks/useRoomsSSE.ts b/fe/src/hooks/useRoomsSSE.ts
index 3aeefef..f74274d 100644
--- a/fe/src/hooks/useRoomsSSE.ts
+++ b/fe/src/hooks/useRoomsSSE.ts
@@ -19,8 +19,6 @@ export const useRoomsSSE = () => {
         setRooms(sseData.rooms);
         setPagination(sseData.pagination);
 
-        console.log(sseData.pagination.totalPages);
-
         if (sseData.pagination.totalPages === 1 && userPage > 0) {
           setUserPage(sseData.pagination.currentPage - 1);
           return;

From c0d674aeff730956db907662f7c8bb3065a0f973 Mon Sep 17 00:00:00 2001
From: Nahyun <from.owol@gmail.com>
Date: Wed, 4 Dec 2024 20:24:08 +0900
Subject: [PATCH 5/5] =?UTF-8?q?chore:=20=EC=8B=9C=EC=83=81=EB=8C=80=20?=
 =?UTF-8?q?=EB=8B=89=EB=84=A4=EC=9E=84=20=EC=9C=84=EC=B9=98=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

완벽하게 커스텀하기 어려움
---
 fe/src/pages/GamePage/GameScreen/EndScreen.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/fe/src/pages/GamePage/GameScreen/EndScreen.tsx b/fe/src/pages/GamePage/GameScreen/EndScreen.tsx
index 233186d..53f8f6f 100644
--- a/fe/src/pages/GamePage/GameScreen/EndScreen.tsx
+++ b/fe/src/pages/GamePage/GameScreen/EndScreen.tsx
@@ -29,11 +29,19 @@ const EndScreen = () => {
   };
 
   const positions = {
-    0: { top: '18%', left: '49.7%' },
-    1: { top: '54%', left: '34.5%' },
+    0: { top: '20%', left: '49.5%' },
+    1: { top: '54%', left: '38.5%' },
     2: { top: '68%', left: '60.5%' },
   };
 
+  const getRelativePosition = (index: number) => {
+    const position = positions[index as keyof typeof positions];
+    return {
+      top: `calc(${position.top})`,
+      left: `calc(${position.left})`,
+    };
+  };
+
   const getDelay = (index: number) => {
     switch (index) {
       case 2:
@@ -55,14 +63,14 @@ const EndScreen = () => {
           loop={false}
           className="w-full max-w-2xl absolute left-1/2 transform -translate-x-1/2"
         />
+
         <div className="absolute inset-0 pointer-events-none">
           {rank.slice(0, 3).map((playerName, index) => (
             <motion.div
               key={`rank-${index}-${playerName}`}
               className="absolute"
               style={{
-                top: positions[index as keyof typeof positions].top,
-                left: positions[index as keyof typeof positions].left,
+                ...getRelativePosition(index),
                 transform: 'translate(-50%, -120%)',
               }}
               initial={{ opacity: 0, y: 10 }}