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" /> - Clovapatra + 안녕! 클로바파트라
diff --git a/fe/src/hooks/useRoomsSSE.ts b/fe/src/hooks/useRoomsSSE.ts index 00ebcec..f74274d 100644 --- a/fe/src/hooks/useRoomsSSE.ts +++ b/fe/src/hooks/useRoomsSSE.ts @@ -19,7 +19,7 @@ export const useRoomsSSE = () => { setRooms(sseData.rooms); setPagination(sseData.pagination); - if (!sseData.rooms.length && userPage > 0) { + if (sseData.pagination.totalPages === 1 && userPage > 0) { setUserPage(sseData.pagination.currentPage - 1); return; } 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..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: @@ -48,12 +56,12 @@ const EndScreen = () => { }; return ( -
-
+
+
@@ -62,8 +70,7 @@ const EndScreen = () => { 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 }} @@ -91,7 +98,6 @@ const EndScreen = () => { ))}
- { ))}
- { if (!turnData && !rank.length) return; return ( -
+
{gamePhase === 'intro' && ( { }; return ( -
+
{isHost ? (
); 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 ( -
+
{players.map((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 (
-
+
{ return (
-
+
{isEmpty ? (