From 6de7adb0dcb99ae50b567d415f8a93bc0fe862c6 Mon Sep 17 00:00:00 2001
From: kimnamheeee <nami200284@snu.ac.kr>
Date: Wed, 11 Feb 2026 17:33:47 +0900
Subject: [PATCH 01/10] style(game-setup): fix teamSidebar style

---
 .../app/create/components/questionList.tsx    | 23 ++---------
 service/app/src/app/game/[gameId]/layout.tsx  |  2 +-
 .../[gameId]/setup/components/teamSidebar.tsx | 27 +++++--------
 .../app/src/app/game/[gameId]/setup/page.tsx  |  2 +-
 .../src/shared/ui/floatingAddButton/index.tsx | 40 +++++++++++++++++++
 5 files changed, 56 insertions(+), 38 deletions(-)
 create mode 100644 service/app/src/shared/ui/floatingAddButton/index.tsx

diff --git a/service/app/src/app/create/components/questionList.tsx b/service/app/src/app/create/components/questionList.tsx
index 3abbf1ae..527d6b79 100644
--- a/service/app/src/app/create/components/questionList.tsx
+++ b/service/app/src/app/create/components/questionList.tsx
@@ -1,12 +1,10 @@
 "use client"
 
-import { PrimaryBoxButton } from "@ject-5-fe/design/components/button"
-import { StickyActionBar } from "@ject-5-fe/design/components/stickyActionBar"
-import { Add } from "@ject-5-fe/design/icons"
 import { useRef } from "react"
 import { useShallow } from "zustand/react/shallow"
 
 import { useListboxNavigation } from "@/shared/lib/useListBoxNavigation"
+import { FloatingAddButton } from "@/shared/ui/floatingAddButton"
 
 import { useCreateGameStore } from "../store/useCreateGameStore"
 import { Question } from "./question"
@@ -35,10 +33,10 @@ export function QuestionList() {
   )
 
   return (
-    <div className="flex h-full min-h-0 w-[420px] flex-col bg-background-tertiary px-[32px] py-[16px]">
+    <div className="relative flex h-full min-h-0 w-[420px] flex-col bg-background-tertiary px-32 py-16">
       <div
         ref={listboxRef}
-        className="flex flex-col gap-24 overflow-y-auto"
+        className="flex flex-col gap-24 overflow-y-auto pb-[140px]"
         role="listbox"
         aria-label="문제 목록"
         tabIndex={0}
@@ -75,20 +73,7 @@ export function QuestionList() {
         })}
       </div>
 
-      <StickyActionBar
-        position="sticky"
-        edge="bottom"
-        className="mt-auto px-[32px] pb-[16px]"
-        contentClassName="w-full"
-      >
-        <PrimaryBoxButton
-          className="aspect-square size-64 rounded-full"
-          onClick={addQuestion}
-          aria-label="문제 추가"
-        >
-          <Add className="size-full" />
-        </PrimaryBoxButton>
-      </StickyActionBar>
+      <FloatingAddButton onClick={addQuestion} ariaLabel="문제 추가" />
     </div>
   )
 }
diff --git a/service/app/src/app/game/[gameId]/layout.tsx b/service/app/src/app/game/[gameId]/layout.tsx
index fe610461..fbe8de7f 100644
--- a/service/app/src/app/game/[gameId]/layout.tsx
+++ b/service/app/src/app/game/[gameId]/layout.tsx
@@ -34,7 +34,7 @@ export default async function GameLayout({
 
   return (
     <GameProvider initialGameDetail={gameDetail.data}>
-      <div className="flex h-screen w-screen flex-col bg-background-primary">
+      <div className="flex h-screen w-screen flex-col bg-background-primary pt-[90px]">
         {children}
       </div>
     </GameProvider>
diff --git a/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx b/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx
index da316a17..3958819e 100644
--- a/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx
+++ b/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx
@@ -1,11 +1,11 @@
 "use client"
 
-import { PrimaryBoxButton } from "@ject-5-fe/design/components/button"
 import { PlayerStatus } from "@ject-5-fe/design/components/playerStatus"
-import { StickyActionBar } from "@ject-5-fe/design/components/stickyActionBar"
 import { v4 as uuidv4 } from "uuid"
 import { useShallow } from "zustand/react/shallow"
 
+import { FloatingAddButton } from "@/shared/ui/floatingAddButton"
+
 import { useGameStore } from "../../store/useGameStore"
 import { generateTeamName } from "../../utils/generateTeamName"
 import { MAX_TEAMS } from "../../utils/teamValidation"
@@ -29,30 +29,23 @@ export function TeamSidebar() {
   }
 
   return (
-    <aside className="flex h-full w-[420px] flex-col overflow-hidden bg-background-tertiary pt-[25px]">
-      <div className="flex min-h-0 flex-1 flex-col items-stretch gap-6 overflow-y-auto px-[35px] pb-28">
+    <aside className="absolute bottom-32 left-20 top-20 flex w-[400px] flex-col overflow-hidden rounded-20 bg-background-tertiary">
+      <div className="flex max-h-full flex-col items-center gap-24 overflow-y-auto px-24 pb-[140px] pt-28">
         {teams.map((team) => (
           <PlayerStatus
             key={team.id}
             name={team.name}
             score=""
             scoreView={false}
-            className="h-[118px] shrink-0"
+            className="h-[118px] w-[350px] shrink-0"
           />
         ))}
       </div>
-      <StickyActionBar className="mt-auto" contentClassName="w-full">
-        <PrimaryBoxButton
-          type="button"
-          size="xl"
-          _style="solid"
-          className="w-full"
-          disabled={teams.length >= MAX_TEAMS}
-          onClick={handleAddTeam}
-        >
-          참가자 및 팀 추가하기
-        </PrimaryBoxButton>
-      </StickyActionBar>
+      <FloatingAddButton
+        onClick={handleAddTeam}
+        ariaLabel="참가자 및 팀 추가"
+        disabled={teams.length >= MAX_TEAMS}
+      />
     </aside>
   )
 }
diff --git a/service/app/src/app/game/[gameId]/setup/page.tsx b/service/app/src/app/game/[gameId]/setup/page.tsx
index eabc1fba..2919d36a 100644
--- a/service/app/src/app/game/[gameId]/setup/page.tsx
+++ b/service/app/src/app/game/[gameId]/setup/page.tsx
@@ -37,7 +37,7 @@ export default function GameSetupPage() {
   return (
     <>
       <GameNavigation />
-      <section className="flex flex-1 overflow-hidden">
+      <section className="relative flex flex-1 overflow-hidden">
         <TeamSidebar />
         <div className="flex h-full flex-1 flex-col items-center justify-center">
           <div className="flex max-h-full min-w-[452px] flex-col items-center justify-start overflow-y-auto">
diff --git a/service/app/src/shared/ui/floatingAddButton/index.tsx b/service/app/src/shared/ui/floatingAddButton/index.tsx
new file mode 100644
index 00000000..e85520ec
--- /dev/null
+++ b/service/app/src/shared/ui/floatingAddButton/index.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import { PrimaryBoxButton } from "@ject-5-fe/design/components/button"
+import { Add } from "@ject-5-fe/design/icons"
+import { cn } from "@ject-5-fe/design/utils/cn"
+import type { ComponentPropsWithoutRef } from "react"
+
+interface FloatingAddButtonProps
+  extends Omit<ComponentPropsWithoutRef<typeof PrimaryBoxButton>, "children"> {
+  ariaLabel: string
+  containerClassName?: string
+}
+
+export function FloatingAddButton({
+  ariaLabel,
+  className,
+  containerClassName,
+  ...props
+}: FloatingAddButtonProps) {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute inset-x-0 bottom-0 z-40 flex flex-col items-center px-32 pb-32 pt-80",
+        containerClassName,
+      )}
+    >
+      <div className="absolute inset-x-0 bottom-0 h-[124px] rounded-20 bg-gradient-to-b from-transparent from-0% to-background-tertiary to-[41.35%]" />
+      <PrimaryBoxButton
+        className={cn(
+          "pointer-events-auto relative aspect-square size-64 rounded-full",
+          className,
+        )}
+        aria-label={ariaLabel}
+        {...props}
+      >
+        <Add className="size-full" />
+      </PrimaryBoxButton>
+    </div>
+  )
+}

From 47c51bc3210a1fb8fef9f2c742f6567bd61fe19d Mon Sep 17 00:00:00 2001
From: kimnamheeee <nami200284@snu.ac.kr>
Date: Wed, 11 Feb 2026 18:04:42 +0900
Subject: [PATCH 02/10] feat(game-setup): fix teaminputfor, gamenavigation
 layout

---
 .../setup/components/gameNavigation.tsx       | 15 +---
 .../setup/components/teamInputForm.tsx        | 74 ++++++++++---------
 .../[gameId]/setup/components/teamSidebar.tsx |  4 +-
 .../app/src/app/game/[gameId]/setup/page.tsx  |  4 +-
 .../app/src/widgets/components/homeButton.tsx | 53 +++++++++----
 .../src/components/navigation/index.tsx       |  2 +-
 6 files changed, 86 insertions(+), 66 deletions(-)

diff --git a/service/app/src/app/game/[gameId]/setup/components/gameNavigation.tsx b/service/app/src/app/game/[gameId]/setup/components/gameNavigation.tsx
index 8a7484a6..28117dd2 100644
--- a/service/app/src/app/game/[gameId]/setup/components/gameNavigation.tsx
+++ b/service/app/src/app/game/[gameId]/setup/components/gameNavigation.tsx
@@ -1,28 +1,19 @@
 "use client"
+
 import { SecondaryPlainIconButton } from "@ject-5-fe/design/components/button"
 import { Navigation } from "@ject-5-fe/design/components/navigation"
 import { Cross } from "@ject-5-fe/design/icons"
-import Image from "next/image"
 
 import { useGameEntryNavigation } from "@/entities/game/hooks/useGameEntryNavigation"
 import { ThemeToggle } from "@/shared/themeToggleButton"
+import { HomeButton } from "@/widgets/components/homeButton"
 
 export function GameNavigation() {
   const { goBackToEntry } = useGameEntryNavigation()
 
   return (
     <Navigation
-      leftContent={
-        <SecondaryPlainIconButton asChild onClick={goBackToEntry}>
-          <Image
-            src="/logo.svg"
-            alt="홈 로고"
-            className="size-full"
-            width={268}
-            height={60}
-          />
-        </SecondaryPlainIconButton>
-      }
+      leftContent={<HomeButton onClick={goBackToEntry} />}
       centerContent={
         <h1 className="typography-heading-lg-semibold whitespace-nowrap text-text-primary">
           참가자 설정
diff --git a/service/app/src/app/game/[gameId]/setup/components/teamInputForm.tsx b/service/app/src/app/game/[gameId]/setup/components/teamInputForm.tsx
index 70aadee2..163a4be4 100644
--- a/service/app/src/app/game/[gameId]/setup/components/teamInputForm.tsx
+++ b/service/app/src/app/game/[gameId]/setup/components/teamInputForm.tsx
@@ -54,7 +54,7 @@ export function TeamInputForm() {
 
   return (
     <form
-      className="flex w-full flex-col gap-6"
+      className="flex size-full flex-col"
       onSubmit={(e) => {
         e.preventDefault()
         if (teams.length >= MAX_TEAMS) return
@@ -66,48 +66,50 @@ export function TeamInputForm() {
         })
       }}
     >
-      {teams.map((team, index) => {
-        const name = `team-${team.id}-${index}`
-        const state = teamErrors[team.id] ? "error" : "default"
-        return (
-          <TextField.Root name={name} state={state} key={team.id}>
-            <TextField.InputWrapper>
-              <TextField.Input
-                value={team.name}
-                onChange={(e) => {
-                  const value = e.target.value
-                  if (value.length > MAX_TEAM_NAME_LENGTH) return
-                  updateTeamName(team.id, value.trim())
-                }}
-                maxLength={MAX_TEAM_NAME_LENGTH}
-              />
-              <DestructiveSolidIconButton
-                type="button"
-                aria-label="clear input"
-                onClick={() => {
-                  if (teams.length > MIN_TEAMS) {
-                    removeTeam(team.id)
-                  }
-                }}
-              >
-                <Trash />
-              </DestructiveSolidIconButton>
-            </TextField.InputWrapper>
-            {teamErrors[team.id] && (
-              <TextField.ErrorText>{teamErrors[team.id]}</TextField.ErrorText>
-            )}
-          </TextField.Root>
-        )
-      })}
+      <div className="flex min-h-0 flex-1 flex-col gap-24 overflow-y-auto pb-24">
+        {teams.map((team, index) => {
+          const name = `team-${team.id}-${index}`
+          const state = teamErrors[team.id] ? "error" : "default"
+          return (
+            <TextField.Root name={name} state={state} key={team.id}>
+              <TextField.InputWrapper>
+                <TextField.Input
+                  value={team.name}
+                  onChange={(e) => {
+                    const value = e.target.value
+                    if (value.length > MAX_TEAM_NAME_LENGTH) return
+                    updateTeamName(team.id, value.trim())
+                  }}
+                  maxLength={MAX_TEAM_NAME_LENGTH}
+                />
+                <DestructiveSolidIconButton
+                  type="button"
+                  aria-label="clear input"
+                  onClick={() => {
+                    if (teams.length > MIN_TEAMS) {
+                      removeTeam(team.id)
+                    }
+                  }}
+                >
+                  <Trash />
+                </DestructiveSolidIconButton>
+              </TextField.InputWrapper>
+              {teamErrors[team.id] && (
+                <TextField.ErrorText>{teamErrors[team.id]}</TextField.ErrorText>
+              )}
+            </TextField.Root>
+          )
+        })}
+      </div>
       <PrimaryBoxButton
         type="button"
         size="xl"
         _style="solid"
-        className="w-full"
+        className="mt-24 w-full shrink-0"
         disabled={!isGameReady}
         onClick={handleStartGame}
       >
-        게임 시작
+        게임 시작하기
       </PrimaryBoxButton>
     </form>
   )
diff --git a/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx b/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx
index 3958819e..445da4ce 100644
--- a/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx
+++ b/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx
@@ -29,7 +29,7 @@ export function TeamSidebar() {
   }
 
   return (
-    <aside className="absolute bottom-32 left-20 top-20 flex w-[400px] flex-col overflow-hidden rounded-20 bg-background-tertiary">
+    <aside className="absolute bottom-32 left-20 top-20 flex flex-col overflow-hidden rounded-20 bg-background-tertiary md:w-[334px] lg:w-[400px]">
       <div className="flex max-h-full flex-col items-center gap-24 overflow-y-auto px-24 pb-[140px] pt-28">
         {teams.map((team) => (
           <PlayerStatus
@@ -37,7 +37,7 @@ export function TeamSidebar() {
             name={team.name}
             score=""
             scoreView={false}
-            className="h-[118px] w-[350px] shrink-0"
+            className="shrink-0 py-40"
           />
         ))}
       </div>
diff --git a/service/app/src/app/game/[gameId]/setup/page.tsx b/service/app/src/app/game/[gameId]/setup/page.tsx
index 2919d36a..afc5cf0d 100644
--- a/service/app/src/app/game/[gameId]/setup/page.tsx
+++ b/service/app/src/app/game/[gameId]/setup/page.tsx
@@ -39,8 +39,8 @@ export default function GameSetupPage() {
       <GameNavigation />
       <section className="relative flex flex-1 overflow-hidden">
         <TeamSidebar />
-        <div className="flex h-full flex-1 flex-col items-center justify-center">
-          <div className="flex max-h-full min-w-[452px] flex-col items-center justify-start overflow-y-auto">
+        <div className="flex h-full flex-1 flex-col items-center justify-center py-80">
+          <div className="flex h-full min-w-[452px] flex-col items-center justify-start">
             <TeamInputForm />
           </div>
         </div>
diff --git a/service/app/src/widgets/components/homeButton.tsx b/service/app/src/widgets/components/homeButton.tsx
index 8675b594..572c42e2 100644
--- a/service/app/src/widgets/components/homeButton.tsx
+++ b/service/app/src/widgets/components/homeButton.tsx
@@ -1,23 +1,50 @@
 import Image from "next/image"
 import Link from "next/link"
 
-interface HomeButtonProps {
+interface HomeButtonBaseProps {
   className?: string
 }
 
-export const HomeButton = ({ className = "" }: HomeButtonProps) => {
+interface HomeButtonLinkProps extends HomeButtonBaseProps {
+  href?: string
+  onClick?: never
+}
+
+interface HomeButtonClickProps extends HomeButtonBaseProps {
+  href?: never
+  onClick: () => void
+}
+
+type HomeButtonProps = HomeButtonLinkProps | HomeButtonClickProps
+
+export const HomeButton = ({
+  className = "",
+  href,
+  onClick,
+}: HomeButtonProps) => {
+  const buttonClassName = `flex shrink-0 cursor-pointer flex-col items-center justify-center gap-2.5 p-3.5 focus:outline-none ${className}`
+
+  const logoImage = (
+    <Image
+      src="/logo.svg"
+      alt="홈 로고"
+      className="size-full"
+      width={268}
+      height={60}
+    />
+  )
+
+  if (onClick) {
+    return (
+      <button type="button" className={buttonClassName} onClick={onClick}>
+        {logoImage}
+      </button>
+    )
+  }
+
   return (
-    <Link
-      className={`flex shrink-0 cursor-pointer flex-col items-center justify-center gap-2.5 p-3.5 focus:outline-none ${className}`}
-      href="/"
-    >
-      <Image
-        src="/logo.svg"
-        alt="홈 로고"
-        className="size-full"
-        width={268}
-        height={60}
-      />
+    <Link className={buttonClassName} href={href ?? "/"}>
+      {logoImage}
     </Link>
   )
 }
diff --git a/shared/design/src/components/navigation/index.tsx b/shared/design/src/components/navigation/index.tsx
index 672cd28c..d784c1e1 100644
--- a/shared/design/src/components/navigation/index.tsx
+++ b/shared/design/src/components/navigation/index.tsx
@@ -28,7 +28,7 @@ export const Navigation = ({
       <div className="flex shrink-0 items-center justify-start">
         {leftContent}
       </div>
-      <div className="hidden lg:flex lg:flex-1 lg:items-center lg:justify-center">
+      <div className="flex flex-1 items-center justify-center">
         {centerContent}
       </div>
       <div className="flex shrink-0 items-center justify-end gap-16">

From 8bd979e3a6e045b8fe7dc2b3efbf2a0daa3f54ec Mon Sep 17 00:00:00 2001
From: kimnamheeee <nami200284@snu.ac.kr>
Date: Wed, 11 Feb 2026 18:25:54 +0900
Subject: [PATCH 03/10] feat(component): update playerStatus component
 functionality

---
 .../src/components/playerStatus/index.tsx     |  76 ++---
 .../src/stories/playerStatus.stories.tsx      | 272 ++++++++----------
 2 files changed, 157 insertions(+), 191 deletions(-)

diff --git a/shared/design/src/components/playerStatus/index.tsx b/shared/design/src/components/playerStatus/index.tsx
index d28acfac..2e9a308a 100644
--- a/shared/design/src/components/playerStatus/index.tsx
+++ b/shared/design/src/components/playerStatus/index.tsx
@@ -19,51 +19,55 @@ export const PlayerStatus = ({
   onScoreDecrease,
   className,
 }: PlayerStatusProps) => {
+  if (!scoreView) {
+    return (
+      <div
+        className={cn(
+          "flex w-full items-center justify-center rounded-12 bg-background-primary py-40",
+          className,
+        )}
+        role="group"
+        aria-label={`${name} 카드`}
+      >
+        <span className="block w-[145px] truncate text-center font-pretendard text-[33px] font-normal leading-[120%] text-text-primary">
+          {name}
+        </span>
+      </div>
+    )
+  }
+
   return (
     <div
       className={cn(
-        "flex min-h-[40px] w-full items-center justify-center rounded-12 bg-background-primary px-20",
+        "relative flex w-full items-center overflow-hidden rounded-12 bg-background-primary py-40",
         className,
       )}
       role="group"
       aria-label={`${name} 점수 카드`}
     >
-      <div className="flex h-10 min-h-10 max-w-[310px] flex-1 items-center justify-center gap-20">
-        <h3
-          className={`typography-heading-xl-medium flex h-[40px] min-w-0 items-center text-center ${scoreView ? "flex-1" : "w-full"}`}
-        >
-          <span className="block w-full truncate">{name}</span>
-        </h3>
-
-        {scoreView && (
-          <div className="flex h-[40px] w-[138px] items-center justify-between gap-16">
-            <SecondaryPlainIconButton
-              size="lg"
-              onClick={onScoreDecrease}
-              aria-label={`${name} 점수 감소`}
-            >
-              <Minus />
-            </SecondaryPlainIconButton>
+      <SecondaryPlainIconButton
+        size="lg"
+        className="group absolute inset-y-0 left-0 z-10 flex h-auto w-1/2 cursor-pointer items-center justify-center gap-16 rounded-l-12 rounded-r-none transition-colors hover:bg-[#FFC7C8] active:bg-[#FF6467]"
+        onClick={onScoreDecrease}
+        aria-label={`${name} 점수 감소`}
+      >
+        <Minus className="size-32 shrink-0" />
+        <span className="block w-[100px] truncate text-center font-pretendard text-[33px] font-light leading-[120%] text-text-primary">
+          {name}
+        </span>
+      </SecondaryPlainIconButton>
 
-            <div className="flex h-[40px] items-center justify-center">
-              <span
-                className="typography-heading-lg-semibold"
-                aria-label={`${name} 현재 점수`}
-              >
-                {score}
-              </span>
-            </div>
-
-            <SecondaryPlainIconButton
-              size="lg"
-              onClick={onScoreIncrease}
-              aria-label={`${name} 점수 증가`}
-            >
-              <Add />
-            </SecondaryPlainIconButton>
-          </div>
-        )}
-      </div>
+      <SecondaryPlainIconButton
+        size="lg"
+        className="group absolute inset-y-0 right-0 z-10 flex h-auto w-1/2 cursor-pointer items-center justify-between rounded-l-none rounded-r-12 px-20 transition-colors hover:bg-[#BDDCFF] active:bg-[#51A2FF]"
+        onClick={onScoreIncrease}
+        aria-label={`${name} 점수 증가`}
+      >
+        <span className="typography-heading-lg-semibold text-text-primary">
+          {score}
+        </span>
+        <Add className="size-32 shrink-0" />
+      </SecondaryPlainIconButton>
     </div>
   )
 }
diff --git a/shared/design/src/stories/playerStatus.stories.tsx b/shared/design/src/stories/playerStatus.stories.tsx
index e11a669b..af4a5835 100644
--- a/shared/design/src/stories/playerStatus.stories.tsx
+++ b/shared/design/src/stories/playerStatus.stories.tsx
@@ -10,122 +10,61 @@ const meta = {
     docs: {
       description: {
         component: `
-## 🎯 PlayerStatus 컴포넌트 - 게임 플레이어 상태 카드
+## PlayerStatus 컴포넌트 - 게임 플레이어 상태 카드
 
-게임 내 플레이어/팀의 상태를 표시하고 점수를 관리하는 핵심 컴포넌트입니다. **상태 기반 반응형 레이아웃**을 통해 다양한 게임 상황에 대응합니다.
+게임 내 플레이어/팀의 상태를 표시하고 점수를 관리하는 핵심 컴포넌트입니다.
 
-### 🏗️ 주요 특징
+### 주요 특징
 
-- **상태 기반 레이아웃**: \`scoreView\` prop에 따른 자동 레이아웃 전환
-- **접근성 최적화**: 스크린리더 및 키보드 네비게이션 완벽 지원  
-- **긴 텍스트 안전성**: 팀명 overflow 시 자동 truncate 처리
-- **인터랙티브 점수 조작**: 실시간 점수 증감 버튼
+- **좌우 분할 인터랙션**: 왼쪽 절반 클릭 시 점수 감소, 오른쪽 절반 클릭 시 점수 증가
+- **hover/active 시각적 피드백**:
+  - 감소 영역: hover \`#FFC7C8\`, active \`#FF6467\`
+  - 증가 영역: hover \`#BDDCFF\`, active \`#51A2FF\`
+- **접근성 최적화**: 스크린리더 및 키보드 네비게이션 지원
+- **긴 텍스트 처리**: 팀명 overflow 시 자동 truncate
 
-### 📱 언제 사용하나요?
+### 레이아웃
 
-- **게임 진행 중**: 플레이어별 점수 표시 및 실시간 조작
-- **팀 관리 화면**: 점수 없이 팀명만 깔끔하게 표시
-- **사이드바/목록**: 플레이어 상태 요약 정보 제공
-- **점수판**: 게임 결과 및 순위 표시
-
-### ⚠️ 주의사항 & Best Practices
-
-#### 📏 **레이아웃 제약사항**
-- 카드 고정 너비: **350px**
-- 내부 콘텐츠 최대 너비: **310px**
-- 점수 섹션 고정 너비: **138px** (버튼 + 점수 영역)
-
-#### 🎨 **팀명 처리 규칙**
-\`\`\`typescript
-// ✅ 권장: 적절한 길이
-<PlayerStatus name="A팀" />
-<PlayerStatus name="우승팀" />
-
-// ⚠️ 긴 이름: 자동 truncate 적용
-<PlayerStatus name="아주아주긴팀이름입니다정말긴팀이름" />
-// → "아주아주긴팀이름입니..."로 표시
+#### scoreView=true (게임 진행 중)
+\`\`\`
+┌─────────────────────────────────────┐
+│  [−] [팀이름]  │  [점수]  [+]       │
+│   ← 클릭: 감소  │  클릭: 증가 →     │
+└─────────────────────────────────────┘
+\`\`\`
 
-// 🔥 특수문자 지원
-<PlayerStatus name="🔥Team Alpha™" />
+#### scoreView=false (팀 설정 화면)
 \`\`\`
+┌─────────────────────────────────────┐
+│            [팀이름]                 │
+└─────────────────────────────────────┘
+\`\`\`
+
+### 사용 예시
 
-#### 🎮 **점수 관리 패턴**
-\`\`\`typescript
+\`\`\`tsx
 // 게임 진행 중 - 점수 조작 가능
-<PlayerStatus 
+<PlayerStatus
+  name="A팀"
+  score="0점"
   scoreView={true}
   onScoreIncrease={() => updateScore(+1)}
   onScoreDecrease={() => updateScore(-1)}
 />
 
 // 팀 설정 화면 - 이름만 표시
-<PlayerStatus scoreView={false} />
-
-// 게임 결과 - 점수만 표시 (조작 불가)
-<PlayerStatus 
-  scoreView={true}
-  // onScore* props 제거하면 버튼 비활성화
+<PlayerStatus
+  name="A팀"
+  score=""
+  scoreView={false}
 />
 \`\`\`
 
-### 🔗 관련 컴포넌트
-
-- \`SecondaryPlainIconButton\`: 점수 증감 버튼
-- \`Add\`, \`Minus\`: 점수 조작 아이콘  
-- \`GameSetup\`: PlayerStatus를 활용하는 상위 컴포넌트
-
-### 🎯 접근성 (A11y) 상세
-
-#### **ARIA 라벨링 시스템**
-\`\`\`typescript
-// 카드 전체 그룹 식별
-role="group" 
-aria-label="{팀명} 점수 카드"
-
-// 점수 증감 버튼 명확한 설명
-aria-label="{팀명} 점수 증가"
-aria-label="{팀명} 점수 감소"
-
-// 현재 점수 상태 알림
-aria-label="{팀명} 현재 점수"
-\`\`\`
-
-#### **키보드 네비게이션**
-- \`Tab\`: 점수 버튼 간 순차 이동
-- \`Space/Enter\`: 버튼 활성화
-- \`Shift+Tab\`: 역순 이동
-
-#### **스크린리더 지원**
-- 카드 진입 시: "{팀명} 점수 카드"
-- 버튼 포커스: "{팀명} 점수 증가 버튼"
-- 점수 변경 시: 자동 상태 업데이트 알림
-
-### 🔄 Figma 디자인 대비 주요 개선사항
-
-#### 1. **반응형 레이아웃 시스템**
-**변경 전 (Figma)**: 고정된 \`padding: 39px 20px\`  
-**변경 후 (현재)**: 상태별 동적 레이아웃 
-
-\`\`\`css
-/* scoreView=true: 좌우 공간 분할 */
-.team-name { flex: 1; text-align: center; }
-.score-section { width: 138px; }
+### 접근성 (A11y)
 
-/* scoreView=false: 전체 중앙 정렬 */
-.team-name { width: 100%; text-align: center; }
-\`\`\`
-
-#### 2. **E2E 테스트 친화적 접근성**
-**추가된 기능**: 테스트 자동화를 위한 접근성 강화
-- 컴포넌트별 명확한 \`role\` 속성
-- 버튼별 고유 \`aria-label\` 제공
-- 상태 변경 감지 가능한 구조
-
-#### 3. **확장 가능한 토큰 시스템**
-**개선된 부분**: Design Token 기반 스타일링
-- \`typography-heading-xl-medium\`: 팀명 스타일
-- \`typography-heading-lg-semibold\`: 점수 스타일  
-- \`background-primary\`: 카드 배경 토큰
+- \`role="group"\`: 카드 전체 그룹 식별
+- \`aria-label\`: 각 버튼에 명확한 설명 제공
+- 키보드: Tab으로 버튼 간 이동, Space/Enter로 활성화
         `,
       },
     },
@@ -142,21 +81,28 @@ aria-label="{팀명} 현재 점수"
     },
     scoreView: {
       description: `점수 조작 UI 표시 여부
-- \`true\`: 점수와 증감 버튼 표시 (게임 진행 중)
-- \`false\`: 팀명만 중앙 정렬로 표시 (팀 관리 화면)`,
+- \`true\`: 좌우 분할 클릭 영역으로 점수 조작 (게임 진행 중)
+- \`false\`: 팀명만 중앙 정렬로 표시 (팀 설정 화면)`,
       control: "boolean",
     },
     onScoreIncrease: {
-      description: "점수 증가 버튼 클릭 시 호출되는 함수",
+      description: "오른쪽 영역 클릭 시 호출 (점수 증가)",
     },
     onScoreDecrease: {
-      description: "점수 감소 버튼 클릭 시 호출되는 함수",
+      description: "왼쪽 영역 클릭 시 호출 (점수 감소)",
     },
     className: {
-      description: "추가 CSS 클래스 (선택사항)",
+      description: "추가 CSS 클래스",
       control: "text",
     },
   },
+  decorators: [
+    (Story) => (
+      <div className="w-[350px]">
+        <Story />
+      </div>
+    ),
+  ],
 } satisfies Meta<typeof PlayerStatus>
 
 export default meta
@@ -171,19 +117,27 @@ export const Default: Story = {
     onScoreIncrease: () => console.log("점수 증가"),
     onScoreDecrease: () => console.log("점수 감소"),
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "기본 상태입니다. 왼쪽 절반을 클릭하면 점수 감소, 오른쪽 절반을 클릭하면 점수 증가합니다. hover/active 시 배경색이 변경됩니다.",
+      },
+    },
+  },
 }
 
 export const NameOnly: Story = {
   args: {
     name: "B팀",
-    score: "0점",
+    score: "",
     scoreView: false,
   },
   parameters: {
     docs: {
       description: {
         story:
-          "팀 관리 화면이나 점수가 필요 없는 상황에서 사용. 팀명이 카드 중앙에 배치됩니다.",
+          "팀 설정 화면에서 사용. 팀명만 중앙에 표시되고, 점수 조작 UI는 숨겨집니다.",
       },
     },
   },
@@ -208,7 +162,7 @@ export const HighScore: Story = {
 
 export const LongTeamName: Story = {
   args: {
-    name: "아주아주아주아주긴팀이름입니다정말긴팀이름",
+    name: "아주아주아주아주긴팀이름입니다",
     score: "7점",
     scoreView: true,
     onScoreIncrease: () => console.log("점수 증가"),
@@ -218,7 +172,7 @@ export const LongTeamName: Story = {
     docs: {
       description: {
         story:
-          "팀명이 매우 길 경우 자동으로 truncate 처리되어 레이아웃이 깨지지 않습니다.",
+          "팀명이 길 경우 자동으로 truncate 처리되어 레이아웃이 깨지지 않습니다.",
       },
     },
   },
@@ -227,24 +181,23 @@ export const LongTeamName: Story = {
 export const LongTeamNameOnly: Story = {
   name: "Long Team Name (No Score)",
   args: {
-    name: "정말정말정말정말정말긴팀이름테스트용도입니다",
-    score: "0점",
+    name: "정말정말정말정말정말긴팀이름",
+    score: "",
     scoreView: false,
   },
   parameters: {
     docs: {
       description: {
-        story:
-          "점수가 숨겨진 상태에서도 긴 팀명이 적절히 처리되는지 확인할 수 있습니다.",
+        story: "점수가 숨겨진 상태에서도 긴 팀명이 적절히 truncate 처리됩니다.",
       },
     },
   },
 }
 
-export const SpecialCharacters: Story = {
+export const InteractionStates: Story = {
   args: {
-    name: "🔥이모지가 포함된 팀명",
-    score: "3점",
+    name: "B팀",
+    score: "0점",
     scoreView: true,
     onScoreIncrease: () => console.log("점수 증가"),
     onScoreDecrease: () => console.log("점수 감소"),
@@ -252,63 +205,72 @@ export const SpecialCharacters: Story = {
   parameters: {
     docs: {
       description: {
-        story: "이모지나 특수 문자가 포함된 팀명도 정상적으로 처리됩니다.",
+        story: `hover/active 상태를 테스트해보세요.
+
+**왼쪽 영역 (점수 감소)**
+- hover: 옅은 빨강 (#FFC7C8)
+- active: 진한 빨강 (#FF6467)
+
+**오른쪽 영역 (점수 증가)**
+- hover: 옅은 파랑 (#BDDCFF)
+- active: 진한 파랑 (#51A2FF)`,
       },
     },
   },
 }
 
-export const AllStates: Story = {
-  name: "All States Comparison",
+export const AllStatesComparison: Story = {
   args: {
     name: "비교용",
     score: "0점",
     scoreView: true,
   },
-  render: () => (
-    <div className="flex flex-col gap-4">
-      <div className="text-sm font-medium text-gray-600">점수 표시 상태</div>
-      <div className="flex flex-col gap-2">
-        <PlayerStatus
-          name="시작팀"
-          score="0점"
-          scoreView={true}
-          onScoreIncrease={() => console.log("점수 증가")}
-          onScoreDecrease={() => console.log("점수 감소")}
-        />
-        <PlayerStatus
-          name="중간팀"
-          score="15점"
-          scoreView={true}
-          onScoreIncrease={() => console.log("점수 증가")}
-          onScoreDecrease={() => console.log("점수 감소")}
-        />
-        <PlayerStatus
-          name="매우긴팀이름테스트매우긴팀이름테스트매우긴팀이름테스트"
-          score="20점"
-          scoreView={true}
-          onScoreIncrease={() => console.log("점수 증가")}
-          onScoreDecrease={() => console.log("점수 감소")}
-        />
-      </div>
-
-      <div className="mt-4 text-sm font-medium text-gray-600">팀명만 표시</div>
-      <div className="flex flex-col gap-2">
-        <PlayerStatus name="A팀" score="0점" scoreView={false} />
-        <PlayerStatus
-          name="매우긴팀이름테스트매우긴팀이름테스트매우긴팀이름테스트"
-          score="0점"
-          scoreView={false}
-        />
-        <PlayerStatus name="🏆Champions" score="0점" scoreView={false} />
+  decorators: [
+    () => (
+      <div className="flex w-[400px] flex-col gap-16">
+        <div className="text-sm font-medium text-gray-600">
+          점수 표시 상태 (scoreView=true)
+        </div>
+        <div className="flex flex-col gap-8">
+          <PlayerStatus
+            name="A팀"
+            score="0점"
+            scoreView={true}
+            onScoreIncrease={() => console.log("점수 증가")}
+            onScoreDecrease={() => console.log("점수 감소")}
+          />
+          <PlayerStatus
+            name="우승팀"
+            score="15점"
+            scoreView={true}
+            onScoreIncrease={() => console.log("점수 증가")}
+            onScoreDecrease={() => console.log("점수 감소")}
+          />
+          <PlayerStatus
+            name="매우긴팀이름테스트"
+            score="20점"
+            scoreView={true}
+            onScoreIncrease={() => console.log("점수 증가")}
+            onScoreDecrease={() => console.log("점수 감소")}
+          />
+        </div>
+
+        <div className="mt-16 text-sm font-medium text-gray-600">
+          팀명만 표시 (scoreView=false)
+        </div>
+        <div className="flex flex-col gap-8">
+          <PlayerStatus name="A팀" score="" scoreView={false} />
+          <PlayerStatus name="매우긴팀이름테스트" score="" scoreView={false} />
+          <PlayerStatus name="Champions" score="" scoreView={false} />
+        </div>
       </div>
-    </div>
-  ),
+    ),
+  ],
   parameters: {
     docs: {
       description: {
         story:
-          "다양한 상태의 PlayerStatus를 한 번에 비교해볼 수 있습니다. QA 테스트 시 참고용으로 활용하세요.",
+          "다양한 상태의 PlayerStatus를 한 번에 비교해볼 수 있습니다. hover/active 효과도 테스트해보세요.",
       },
     },
   },

From a4d8d759648f3548281946c5cc13d647137d5ecc Mon Sep 17 00:00:00 2001
From: kimnamheeee <nami200284@snu.ac.kr>
Date: Wed, 11 Feb 2026 21:34:19 +0900
Subject: [PATCH 04/10] feat(component): update scoreboardSidebar layout

---
 service/app/src/app/game/[gameId]/layout.tsx  |  2 +-
 .../play/components/gamePlayNavigation.tsx    | 17 +++-----------
 .../play/components/scoreboardSidebar.tsx     | 22 +++++++++++--------
 .../app/src/app/game/[gameId]/play/page.tsx   | 12 +++++-----
 .../src/components/playerStatus/index.tsx     |  8 +++----
 5 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/service/app/src/app/game/[gameId]/layout.tsx b/service/app/src/app/game/[gameId]/layout.tsx
index fbe8de7f..2e651c5d 100644
--- a/service/app/src/app/game/[gameId]/layout.tsx
+++ b/service/app/src/app/game/[gameId]/layout.tsx
@@ -34,7 +34,7 @@ export default async function GameLayout({
 
   return (
     <GameProvider initialGameDetail={gameDetail.data}>
-      <div className="flex h-screen w-screen flex-col bg-background-primary pt-[90px]">
+      <div className="relative flex h-screen w-screen flex-col bg-background-primary pt-[90px]">
         {children}
       </div>
     </GameProvider>
diff --git a/service/app/src/app/game/[gameId]/play/components/gamePlayNavigation.tsx b/service/app/src/app/game/[gameId]/play/components/gamePlayNavigation.tsx
index 35ed7d9f..2a14c9b7 100644
--- a/service/app/src/app/game/[gameId]/play/components/gamePlayNavigation.tsx
+++ b/service/app/src/app/game/[gameId]/play/components/gamePlayNavigation.tsx
@@ -1,9 +1,9 @@
 import { SecondaryPlainIconButton } from "@ject-5-fe/design/components/button"
 import { Progress } from "@ject-5-fe/design/components/progress"
 import { Cross } from "@ject-5-fe/design/icons"
-import Image from "next/image"
 
 import { ThemeToggle } from "@/shared/themeToggleButton"
+import { HomeButton } from "@/widgets/components/homeButton"
 
 interface GamePlayHeaderProps {
   currentRound: number
@@ -17,20 +17,9 @@ export const GamePlayHeader = ({
   onExit,
 }: GamePlayHeaderProps) => {
   return (
-    <header className="mx-auto flex h-[110px] w-full shrink-0 items-center justify-between">
+    <header className="absolute inset-x-0 top-0 mx-auto flex h-[90px] w-full shrink-0 items-center justify-between">
       <div className="flex w-[420px] items-center gap-[10px] self-stretch px-[40px]">
-        <button
-          onClick={onExit}
-          className="flex h-[60px] w-[268px] flex-col items-center justify-center gap-2.5 p-3.5"
-        >
-          <Image
-            src="/logo.svg"
-            alt="홈 로고"
-            className="size-full"
-            width={268}
-            height={60}
-          />
-        </button>
+        <HomeButton onClick={onExit} />
       </div>
 
       <div className="flex flex-1 items-center justify-center">
diff --git a/service/app/src/app/game/[gameId]/play/components/scoreboardSidebar.tsx b/service/app/src/app/game/[gameId]/play/components/scoreboardSidebar.tsx
index 008138a4..abae01a6 100644
--- a/service/app/src/app/game/[gameId]/play/components/scoreboardSidebar.tsx
+++ b/service/app/src/app/game/[gameId]/play/components/scoreboardSidebar.tsx
@@ -1,6 +1,7 @@
 import { PrimarySolidIconButton } from "@ject-5-fe/design/components/button"
 import { PlayerStatus } from "@ject-5-fe/design/components/playerStatus"
 import { Hidden, Show } from "@ject-5-fe/design/icons"
+import { cn } from "@ject-5-fe/design/utils/cn"
 import { useState } from "react"
 
 import type { Team } from "../../store/useGameStore"
@@ -21,21 +22,24 @@ export const ScoreboardSidebar = ({
   const clampScore = (value: number) => Math.max(-100, Math.min(100, value))
 
   return (
-    <div className="flex max-h-[940px] w-[400px] min-w-[400px] flex-col rounded-[20px] bg-background-tertiary px-24">
-      <div className="relative flex items-center justify-center py-20">
-        <span className="typography-heading-sm-extrabold w-full text-center text-text-primary">
-          점수판
-        </span>
+    <aside
+      className={cn(
+        "absolute left-20 top-20 flex w-full flex-col overflow-hidden rounded-20 bg-background-tertiary md:w-[330px] lg:w-[400px]",
+        isSidebarOpen && "bottom-32",
+      )}
+    >
+      <div className="relative flex shrink-0 items-center justify-center p-24">
+        <span className="typography-heading-sm-extrabold">점수판</span>
         <PrimarySolidIconButton
-          className="right-0 top-16"
           onClick={() => setIsSidebarOpen(!isSidebarOpen)}
           aria-label="점수판 토글"
+          className="absolute right-24"
         >
           {isSidebarOpen ? <Show /> : <Hidden />}
         </PrimarySolidIconButton>
       </div>
       {isSidebarOpen && (
-        <div className="flex max-h-[850px] flex-1 flex-col items-center gap-24 overflow-y-scroll pb-48">
+        <div className="flex min-h-0 flex-1 flex-col items-center gap-24 overflow-y-auto px-24 pb-24">
           {teams.map((team) => (
             <PlayerStatus
               key={team.id}
@@ -49,11 +53,11 @@ export const ScoreboardSidebar = ({
                 const newScore = clampScore(scores[team.id] - 1)
                 onUpdateTeamScore(team.id, newScore)
               }}
-              className="min-h-[118px]"
+              className="shrink-0"
             />
           ))}
         </div>
       )}
-    </div>
+    </aside>
   )
 }
diff --git a/service/app/src/app/game/[gameId]/play/page.tsx b/service/app/src/app/game/[gameId]/play/page.tsx
index c3b5d314..63dab6d6 100644
--- a/service/app/src/app/game/[gameId]/play/page.tsx
+++ b/service/app/src/app/game/[gameId]/play/page.tsx
@@ -60,13 +60,11 @@ const ScoreboardGame = () => {
           })
         }
       />
-      <div className="absolute left-[20px] top-[110px] z-10">
-        <ScoreboardSidebar
-          teams={teams}
-          scores={scores}
-          onUpdateTeamScore={updateTeamScore}
-        />
-      </div>
+      <ScoreboardSidebar
+        teams={teams}
+        scores={scores}
+        onUpdateTeamScore={updateTeamScore}
+      />
       <div>
         <GamePlayContent
           currentQuestion={currentQuestion}
diff --git a/shared/design/src/components/playerStatus/index.tsx b/shared/design/src/components/playerStatus/index.tsx
index 2e9a308a..af9c6d72 100644
--- a/shared/design/src/components/playerStatus/index.tsx
+++ b/shared/design/src/components/playerStatus/index.tsx
@@ -39,7 +39,7 @@ export const PlayerStatus = ({
   return (
     <div
       className={cn(
-        "relative flex w-full items-center overflow-hidden rounded-12 bg-background-primary py-40",
+        "flex w-full shrink-0 overflow-hidden rounded-12 bg-background-primary",
         className,
       )}
       role="group"
@@ -47,19 +47,19 @@ export const PlayerStatus = ({
     >
       <SecondaryPlainIconButton
         size="lg"
-        className="group absolute inset-y-0 left-0 z-10 flex h-auto w-1/2 cursor-pointer items-center justify-center gap-16 rounded-l-12 rounded-r-none transition-colors hover:bg-[#FFC7C8] active:bg-[#FF6467]"
+        className="flex h-auto w-1/2 cursor-pointer items-center justify-between rounded-l-12 rounded-r-none px-20 py-40 transition-colors hover:bg-[#FFC7C8] active:bg-[#FF6467]"
         onClick={onScoreDecrease}
         aria-label={`${name} 점수 감소`}
       >
         <Minus className="size-32 shrink-0" />
-        <span className="block w-[100px] truncate text-center font-pretendard text-[33px] font-light leading-[120%] text-text-primary">
+        <span className="typography-heading-lg-regular block w-[100px] truncate text-center">
           {name}
         </span>
       </SecondaryPlainIconButton>
 
       <SecondaryPlainIconButton
         size="lg"
-        className="group absolute inset-y-0 right-0 z-10 flex h-auto w-1/2 cursor-pointer items-center justify-between rounded-l-none rounded-r-12 px-20 transition-colors hover:bg-[#BDDCFF] active:bg-[#51A2FF]"
+        className="flex h-auto w-1/2 cursor-pointer items-center justify-between rounded-l-none rounded-r-12 px-20 py-40 transition-colors hover:bg-[#BDDCFF] active:bg-[#51A2FF]"
         onClick={onScoreIncrease}
         aria-label={`${name} 점수 증가`}
       >

From f49466c1cfee6aa8eb8a9439ed498a74c80c68ff Mon Sep 17 00:00:00 2001
From: kimnamheeee <nami200284@snu.ac.kr>
Date: Wed, 11 Feb 2026 21:59:33 +0900
Subject: [PATCH 05/10] feat(gameplay): adjust page layout

---
 .../[gameId]/play/components/scoreboardSidebar.tsx   |  2 +-
 service/app/src/app/game/[gameId]/play/page.tsx      | 12 ++++++------
 shared/design/src/components/playerStatus/index.tsx  |  4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/service/app/src/app/game/[gameId]/play/components/scoreboardSidebar.tsx b/service/app/src/app/game/[gameId]/play/components/scoreboardSidebar.tsx
index abae01a6..ad8ce686 100644
--- a/service/app/src/app/game/[gameId]/play/components/scoreboardSidebar.tsx
+++ b/service/app/src/app/game/[gameId]/play/components/scoreboardSidebar.tsx
@@ -24,7 +24,7 @@ export const ScoreboardSidebar = ({
   return (
     <aside
       className={cn(
-        "absolute left-20 top-20 flex w-full flex-col overflow-hidden rounded-20 bg-background-tertiary md:w-[330px] lg:w-[400px]",
+        "absolute left-20 top-[10px] flex w-[246px] flex-col overflow-hidden rounded-20 bg-background-tertiary md:w-[330px] lg:w-[400px]",
         isSidebarOpen && "bottom-32",
       )}
     >
diff --git a/service/app/src/app/game/[gameId]/play/page.tsx b/service/app/src/app/game/[gameId]/play/page.tsx
index 63dab6d6..53a0962d 100644
--- a/service/app/src/app/game/[gameId]/play/page.tsx
+++ b/service/app/src/app/game/[gameId]/play/page.tsx
@@ -60,12 +60,12 @@ const ScoreboardGame = () => {
           })
         }
       />
-      <ScoreboardSidebar
-        teams={teams}
-        scores={scores}
-        onUpdateTeamScore={updateTeamScore}
-      />
-      <div>
+      <div className="relative flex-1">
+        <ScoreboardSidebar
+          teams={teams}
+          scores={scores}
+          onUpdateTeamScore={updateTeamScore}
+        />
         <GamePlayContent
           currentQuestion={currentQuestion}
           currentRound={currentRound}
diff --git a/shared/design/src/components/playerStatus/index.tsx b/shared/design/src/components/playerStatus/index.tsx
index af9c6d72..fe1ae926 100644
--- a/shared/design/src/components/playerStatus/index.tsx
+++ b/shared/design/src/components/playerStatus/index.tsx
@@ -47,7 +47,7 @@ export const PlayerStatus = ({
     >
       <SecondaryPlainIconButton
         size="lg"
-        className="flex h-auto w-1/2 cursor-pointer items-center justify-between rounded-l-12 rounded-r-none px-20 py-40 transition-colors hover:bg-[#FFC7C8] active:bg-[#FF6467]"
+        className="flex h-auto w-1/2 cursor-pointer items-center justify-between rounded-l-12 rounded-r-none py-40 transition-colors hover:bg-[#FFC7C8] active:bg-[#FF6467] md:px-16 lg:px-20"
         onClick={onScoreDecrease}
         aria-label={`${name} 점수 감소`}
       >
@@ -59,7 +59,7 @@ export const PlayerStatus = ({
 
       <SecondaryPlainIconButton
         size="lg"
-        className="flex h-auto w-1/2 cursor-pointer items-center justify-between rounded-l-none rounded-r-12 px-20 py-40 transition-colors hover:bg-[#BDDCFF] active:bg-[#51A2FF]"
+        className="flex h-auto w-1/2 cursor-pointer items-center justify-between rounded-l-none rounded-r-12 px-20 py-40 transition-colors hover:bg-[#BDDCFF] active:bg-[#51A2FF] md:px-16 lg:px-20"
         onClick={onScoreIncrease}
         aria-label={`${name} 점수 증가`}
       >

From 7814d6696cb9daf4afff054f7added89cad7618f Mon Sep 17 00:00:00 2001
From: kimnamheeee <nami200284@snu.ac.kr>
Date: Thu, 19 Feb 2026 14:29:07 +0900
Subject: [PATCH 06/10] feat(gameplay): update gameplay ui

add new button / keyboard control features
---
 .../play/components/gamePlayContent.tsx       | 130 +++++++++---------
 .../play/components/scoreboardSidebar.tsx     |   2 +-
 .../app/src/app/game/[gameId]/play/page.tsx   |  13 +-
 .../app/game/[gameId]/play/schemas/index.ts   |   4 +
 .../[gameId]/setup/components/teamSidebar.tsx |   2 +-
 .../src/components/playerStatus/index.tsx     |   4 +-
 6 files changed, 83 insertions(+), 72 deletions(-)

diff --git a/service/app/src/app/game/[gameId]/play/components/gamePlayContent.tsx b/service/app/src/app/game/[gameId]/play/components/gamePlayContent.tsx
index 656a15ca..269cae1f 100644
--- a/service/app/src/app/game/[gameId]/play/components/gamePlayContent.tsx
+++ b/service/app/src/app/game/[gameId]/play/components/gamePlayContent.tsx
@@ -1,15 +1,12 @@
 import Image from "next/image"
-import Link from "next/link"
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 
 import type { GameQuestion } from "@/entities/game/model"
-
-import { QuestionNavigationButton } from "./questionNavigationButton"
-
 interface GamePlayContentProps {
   currentQuestion: GameQuestion
   currentRound: number
-  totalRounds: number
+  showAnswer: boolean
+  onShowAnswer: () => void
   onPrevQuestion: () => void
   onNextQuestion: () => void
 }
@@ -17,73 +14,80 @@ interface GamePlayContentProps {
 export const GamePlayContent = ({
   currentQuestion,
   currentRound,
-  totalRounds,
+  showAnswer,
+  onShowAnswer,
   onPrevQuestion,
   onNextQuestion,
 }: GamePlayContentProps) => {
-  const [showAnswer, setShowAnswer] = useState(false)
+  const [imageWidths, setImageWidths] = useState<Record<number, number>>({})
+  const currentImageWidth = imageWidths[currentRound] ?? null
 
-  useEffect(() => {
-    setShowAnswer(false)
-  }, [currentRound])
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === "ArrowRight") {
+        if (showAnswer) {
+          onNextQuestion()
+        } else {
+          onShowAnswer()
+        }
+      }
 
-  return (
-    <div className="flex w-full flex-1 flex-col items-center justify-center gap-[68px]">
-      <h1 className="typography-heading-4xl-extrabold max-w-[1080px] text-center text-text-primary">
-        {currentQuestion.questionText}
-      </h1>
+      if (e.key === "ArrowLeft" && currentRound > 1) {
+        onPrevQuestion()
+      }
+    },
+    [showAnswer, currentRound, onNextQuestion, onPrevQuestion, onShowAnswer],
+  )
 
-      {currentQuestion?.imageUrl && (
-        <div className="relative mx-auto w-[600px] overflow-hidden rounded-lg">
-          <Image
-            src={currentQuestion.imageUrl}
-            alt="문제 이미지"
-            width={600}
-            height={400}
-            className="object-cover"
-          />
-        </div>
-      )}
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [handleKeyDown])
 
-      <div className="flex items-center justify-center gap-6">
-        <QuestionNavigationButton
-          direction="prev"
-          onClick={onPrevQuestion}
-          disabled={currentRound <= 1}
-        />
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-[70px] sm:max-w-[642px] md:max-w-[1080px]">
+      <div className="flex flex-col items-center gap-40">
+        <h1 className="text-center text-text-primary sm:typography-heading-3xl-extrabold md:typography-heading-4xl-extrabold">
+          {currentQuestion.questionText}
+        </h1>
 
-        <div className="flex flex-col items-center gap-16">
-          {showAnswer ? (
-            <div
-              onClick={() => setShowAnswer(false)}
-              className="typography-heading-3xl-semibold inline-flex w-[572px] cursor-pointer flex-row items-center justify-center gap-12 rounded-12 border-[3px] border-border-interactive-secondary bg-background-interactive-inverse px-32 py-12 text-text-interactive-secondary hover:bg-background-interactive-secondary-hovered active:border-none active:bg-background-interactive-secondary-pressed"
-            >
-              {currentQuestion?.questionAnswer}
-            </div>
-          ) : (
-            <div
-              onClick={() => setShowAnswer(true)}
-              className="typography-heading-3xl-semibold inline-flex w-[572px] cursor-pointer flex-row items-center justify-center gap-8 rounded-12 border-[3px] border-transparent bg-background-interactive-primary px-32 py-12 text-text-interactive-inverse hover:bg-background-interactive-primary-hovered active:border-transparent active:bg-background-interactive-primary-pressed"
-            >
-              정답 보기
-            </div>
-          )}
+        {currentQuestion?.imageUrl && (
+          <div
+            className="flex h-[246px] items-center justify-center overflow-hidden rounded-lg sm:h-[406px] md:h-[499px]"
+            style={currentImageWidth ? { width: currentImageWidth } : undefined}
+          >
+            {showAnswer ? (
+              <div className="flex size-full items-center justify-center rounded-12 border-2 border-border-interactive-secondary bg-background-interactive-inverse px-32 py-12 text-text-interactive-secondary sm:typography-heading-3xl-semibold md:typography-heading-4xl-semibold">
+                {currentQuestion?.questionAnswer}
+              </div>
+            ) : (
+              <Image
+                src={currentQuestion.imageUrl}
+                alt="문제 이미지"
+                width={0}
+                height={0}
+                sizes="100vw"
+                className="h-full w-auto"
+                onLoad={(e) => {
+                  const img = e.currentTarget
+                  setImageWidths((prev) => ({
+                    ...prev,
+                    [currentRound]: img.offsetWidth,
+                  }))
+                }}
+              />
+            )}
+          </div>
+        )}
+      </div>
 
-          {currentRound === totalRounds && (
-            <Link
-              href="./result"
-              className="typography-heading-3xl-semibold inline-flex w-[572px] cursor-pointer flex-row items-center justify-center gap-8 rounded-12 border-[3px] border-transparent bg-background-secondary px-32 py-12 text-text-interactive-inverse hover:bg-background-interactive-primary-hovered active:border-transparent active:bg-background-interactive-primary-pressed"
-            >
-              결과 화면으로 이동하기
-            </Link>
-          )}
+      <div className="flex flex-col items-center gap-16">
+        <div
+          onClick={() => (showAnswer ? onNextQuestion() : onShowAnswer())}
+          className="typography-heading-3xl-semibold inline-flex w-[572px] cursor-pointer flex-row items-center justify-center gap-8 rounded-12 border-[3px] border-transparent bg-background-interactive-primary px-32 py-12 text-text-interactive-inverse hover:bg-background-interactive-primary-hovered active:border-transparent active:bg-background-interactive-primary-pressed"
+        >
+          {showAnswer ? "다음" : "정답은?"}
         </div>
-
-        <QuestionNavigationButton
-          direction="next"
-          onClick={onNextQuestion}
-          disabled={currentRound >= totalRounds}
-        />
       </div>
     </div>
   )
diff --git a/service/app/src/app/game/[gameId]/play/components/scoreboardSidebar.tsx b/service/app/src/app/game/[gameId]/play/components/scoreboardSidebar.tsx
index ad8ce686..031dd8ab 100644
--- a/service/app/src/app/game/[gameId]/play/components/scoreboardSidebar.tsx
+++ b/service/app/src/app/game/[gameId]/play/components/scoreboardSidebar.tsx
@@ -24,7 +24,7 @@ export const ScoreboardSidebar = ({
   return (
     <aside
       className={cn(
-        "absolute left-20 top-[10px] flex w-[246px] flex-col overflow-hidden rounded-20 bg-background-tertiary md:w-[330px] lg:w-[400px]",
+        "absolute left-20 top-[10px] flex w-[246px] flex-col overflow-hidden rounded-20 bg-background-tertiary sm:w-[330px] md:w-[400px]",
         isSidebarOpen && "bottom-32",
       )}
     >
diff --git a/service/app/src/app/game/[gameId]/play/page.tsx b/service/app/src/app/game/[gameId]/play/page.tsx
index 53a0962d..07c4825d 100644
--- a/service/app/src/app/game/[gameId]/play/page.tsx
+++ b/service/app/src/app/game/[gameId]/play/page.tsx
@@ -15,7 +15,7 @@ import { gamePlaySchema } from "./schemas"
 
 const ScoreboardGame = () => {
   const router = useRouter()
-  const [{ q: currentRound }, setSearchParams] =
+  const [{ q: currentRound, answer: showAnswer }, setSearchParams] =
     useTypedSearchParams(gamePlaySchema)
 
   const { gameDetail, teams, totalRounds, updateTeamScore, scores } =
@@ -42,7 +42,7 @@ const ScoreboardGame = () => {
       router.push("./result")
       return
     }
-    setSearchParams({ q: (currentRound + 1).toString() })
+    setSearchParams({ q: (currentRound + 1).toString(), answer: "" })
   }
 
   const { goBackToEntry } = useGameEntryNavigation()
@@ -60,7 +60,7 @@ const ScoreboardGame = () => {
           })
         }
       />
-      <div className="relative flex-1">
+      <div className="relative flex flex-1 items-center justify-center">
         <ScoreboardSidebar
           teams={teams}
           scores={scores}
@@ -69,10 +69,13 @@ const ScoreboardGame = () => {
         <GamePlayContent
           currentQuestion={currentQuestion}
           currentRound={currentRound}
-          totalRounds={totalRounds}
+          showAnswer={showAnswer}
+          onShowAnswer={() => {
+            setSearchParams({ q: currentRound.toString(), answer: "true" })
+          }}
           onPrevQuestion={() => {
             if (currentRound <= 1) return
-            setSearchParams({ q: (currentRound - 1).toString() })
+            setSearchParams({ q: (currentRound - 1).toString(), answer: "" })
           }}
           onNextQuestion={handleNextQuestion}
         />
diff --git a/service/app/src/app/game/[gameId]/play/schemas/index.ts b/service/app/src/app/game/[gameId]/play/schemas/index.ts
index 1ff12a2e..1f1fe010 100644
--- a/service/app/src/app/game/[gameId]/play/schemas/index.ts
+++ b/service/app/src/app/game/[gameId]/play/schemas/index.ts
@@ -2,4 +2,8 @@ import { z } from "zod"
 
 export const gamePlaySchema = z.object({
   q: z.string().default("1").transform(Number),
+  answer: z
+    .string()
+    .optional()
+    .transform((v) => v === "true"),
 })
diff --git a/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx b/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx
index 445da4ce..858d4daf 100644
--- a/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx
+++ b/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx
@@ -29,7 +29,7 @@ export function TeamSidebar() {
   }
 
   return (
-    <aside className="absolute bottom-32 left-20 top-20 flex flex-col overflow-hidden rounded-20 bg-background-tertiary md:w-[334px] lg:w-[400px]">
+    <aside className="absolute bottom-32 left-20 top-20 flex flex-col overflow-hidden rounded-20 bg-background-tertiary sm:w-[334px] md:w-[400px]">
       <div className="flex max-h-full flex-col items-center gap-24 overflow-y-auto px-24 pb-[140px] pt-28">
         {teams.map((team) => (
           <PlayerStatus
diff --git a/shared/design/src/components/playerStatus/index.tsx b/shared/design/src/components/playerStatus/index.tsx
index fe1ae926..af9c6d72 100644
--- a/shared/design/src/components/playerStatus/index.tsx
+++ b/shared/design/src/components/playerStatus/index.tsx
@@ -47,7 +47,7 @@ export const PlayerStatus = ({
     >
       <SecondaryPlainIconButton
         size="lg"
-        className="flex h-auto w-1/2 cursor-pointer items-center justify-between rounded-l-12 rounded-r-none py-40 transition-colors hover:bg-[#FFC7C8] active:bg-[#FF6467] md:px-16 lg:px-20"
+        className="flex h-auto w-1/2 cursor-pointer items-center justify-between rounded-l-12 rounded-r-none px-20 py-40 transition-colors hover:bg-[#FFC7C8] active:bg-[#FF6467]"
         onClick={onScoreDecrease}
         aria-label={`${name} 점수 감소`}
       >
@@ -59,7 +59,7 @@ export const PlayerStatus = ({
 
       <SecondaryPlainIconButton
         size="lg"
-        className="flex h-auto w-1/2 cursor-pointer items-center justify-between rounded-l-none rounded-r-12 px-20 py-40 transition-colors hover:bg-[#BDDCFF] active:bg-[#51A2FF] md:px-16 lg:px-20"
+        className="flex h-auto w-1/2 cursor-pointer items-center justify-between rounded-l-none rounded-r-12 px-20 py-40 transition-colors hover:bg-[#BDDCFF] active:bg-[#51A2FF]"
         onClick={onScoreIncrease}
         aria-label={`${name} 점수 증가`}
       >

From efe567766fd3c479b4c03920bfbdb93b86e6fb64 Mon Sep 17 00:00:00 2001
From: kimnamheeee <nami200284@snu.ac.kr>
Date: Thu, 19 Feb 2026 14:29:41 +0900
Subject: [PATCH 07/10] chore(token): update breakpoint token values

---
 shared/design/src/tokens/variables.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/shared/design/src/tokens/variables.json b/shared/design/src/tokens/variables.json
index aca6adc4..2a80b525 100644
--- a/shared/design/src/tokens/variables.json
+++ b/shared/design/src/tokens/variables.json
@@ -870,19 +870,19 @@
               "name": "breakpoint/sm",
               "type": "number",
               "isAlias": false,
-              "value": 960
+              "value": 961
             },
             {
               "name": "breakpoint/md",
               "type": "number",
               "isAlias": false,
-              "value": 1440
+              "value": 1441
             },
             {
               "name": "breakpoint/lg",
               "type": "number",
               "isAlias": false,
-              "value": 1920
+              "value": 1921
             }
           ]
         }

From 4e8c7d67a9e9a2ae21ecde1899d2abd2d3167136 Mon Sep 17 00:00:00 2001
From: kimnamheeee <nami200284@snu.ac.kr>
Date: Thu, 19 Feb 2026 15:37:58 +0900
Subject: [PATCH 08/10] feat(gameresult): update layout

---
 .../result/components/gameResultContent.tsx   |  6 +--
 .../components/gameResultNavigation.tsx       | 42 +++++++------------
 2 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/service/app/src/app/game/[gameId]/result/components/gameResultContent.tsx b/service/app/src/app/game/[gameId]/result/components/gameResultContent.tsx
index c6bb3a2c..63e9a515 100644
--- a/service/app/src/app/game/[gameId]/result/components/gameResultContent.tsx
+++ b/service/app/src/app/game/[gameId]/result/components/gameResultContent.tsx
@@ -17,9 +17,9 @@ export const GameResultContent = ({
   }, [teams, scores])
 
   return (
-    <div className="flex flex-1 flex-col items-center justify-center gap-10">
+    <div className="flex flex-1 flex-col items-center justify-center gap-40">
       {/* Winner Title */}
-      <div className="flex h-[96px] items-center justify-center gap-2.5 rounded-[15px] bg-blue-400 px-32 py-8">
+      <div className="flex items-center justify-center rounded-[15px] bg-blue-400 px-32 py-20">
         <h2 className="typography-heading-3xl-semibold text-neutral-white">
           🎉 이번 게임의 Winner는?
         </h2>
@@ -30,7 +30,7 @@ export const GameResultContent = ({
         {topTeams.map((team) => (
           <div
             key={team.id}
-            className="flex items-center justify-center gap-[30px] rounded-[10px] bg-gray-100 px-[110px] py-[18px]"
+            className="flex items-center justify-center gap-[30px] rounded-[10px] bg-gray-100 px-[110px] py-12"
           >
             <span className="text-[57px] font-extrabold text-blue-700">
               {team.name}
diff --git a/service/app/src/app/game/[gameId]/result/components/gameResultNavigation.tsx b/service/app/src/app/game/[gameId]/result/components/gameResultNavigation.tsx
index 4d78cac0..cfb0451c 100644
--- a/service/app/src/app/game/[gameId]/result/components/gameResultNavigation.tsx
+++ b/service/app/src/app/game/[gameId]/result/components/gameResultNavigation.tsx
@@ -2,6 +2,7 @@ import {
   PrimaryBoxButton,
   SecondaryPlainIconButton,
 } from "@ject-5-fe/design/components/button"
+import { Navigation } from "@ject-5-fe/design/components/navigation"
 import { Cross } from "@ject-5-fe/design/icons"
 import Image from "next/image"
 
@@ -17,30 +18,20 @@ export const GameResultNavigation = ({
   onPreviousQuestion,
 }: GameResultNavigationProps) => {
   return (
-    <div className="mx-auto flex h-[110px] w-full shrink-0 items-center justify-between">
-      <div className="flex w-[420px] items-center gap-[10px] self-stretch px-[40px]">
-        <button
-          onClick={onExit}
-          className="flex h-[60px] w-[268px] flex-col items-center justify-center gap-2.5 p-3.5"
-        >
-          <Image
-            src="/logo.svg"
-            alt="홈 로고"
-            className="size-full"
-            width={268}
-            height={60}
-          />
+    <Navigation
+      leftContent={
+        <button onClick={onExit}>
+          <Image src="/logo.svg" alt="홈 로고" width={268} height={60} />
         </button>
-      </div>
-
-      <h1 className="typography-heading-lg-semibold whitespace-nowrap text-center text-text-primary">
-        게임 종료
-      </h1>
-
-      <div className="flex w-[420px] flex-col items-end justify-center gap-2.5">
-        <div className="flex items-center justify-end gap-4 px-10">
+      }
+      centerContent={
+        <h1 className="typography-heading-lg-semibold whitespace-nowrap text-text-primary">
+          게임 종료
+        </h1>
+      }
+      rightContent={
+        <>
           <ThemeToggle />
-
           <PrimaryBoxButton
             size="sm"
             _style="solid"
@@ -48,7 +39,6 @@ export const GameResultNavigation = ({
           >
             이전 문제
           </PrimaryBoxButton>
-
           <SecondaryPlainIconButton
             size="lg"
             onClick={onExit}
@@ -56,8 +46,8 @@ export const GameResultNavigation = ({
           >
             <Cross />
           </SecondaryPlainIconButton>
-        </div>
-      </div>
-    </div>
+        </>
+      }
+    />
   )
 }

From f269263a6c3a79719f5ef4bf19711202dd0548bf Mon Sep 17 00:00:00 2001
From: kimnamheeee <nami200284@snu.ac.kr>
Date: Thu, 19 Feb 2026 16:01:11 +0900
Subject: [PATCH 09/10] test(gameplay): update test scenarios based on new
 layout and functionality

---
 .../play/__tests__/game-play-e2e-scenarios.md |  88 ++++++---
 .../[gameId]/play/__tests__/game-play.spec.ts | 169 ++++++++++++++----
 .../[gameId]/play/__tests__/gamePlayPOM.ts    | 104 ++++++-----
 .../play/components/gamePlayContent.tsx       |   8 +-
 .../[gameId]/setup/components/teamSidebar.tsx |   2 +-
 5 files changed, 262 insertions(+), 109 deletions(-)

diff --git a/service/app/src/app/game/[gameId]/play/__tests__/game-play-e2e-scenarios.md b/service/app/src/app/game/[gameId]/play/__tests__/game-play-e2e-scenarios.md
index 848bdc76..038aa85a 100644
--- a/service/app/src/app/game/[gameId]/play/__tests__/game-play-e2e-scenarios.md
+++ b/service/app/src/app/game/[gameId]/play/__tests__/game-play-e2e-scenarios.md
@@ -4,6 +4,7 @@
 
 - **URL**: `/game/[gameId]/play`
 - **핵심 기능**: 게임 진행, 문제 네비게이션, 점수 관리, 정답 확인
+- **조작 방식**: 버튼 클릭 또는 키보드 (Enter, →, ←)
 
 ## 테스트 시나리오
 
@@ -11,12 +12,11 @@
 
 - **홈 로고**: 클릭 시 나가기 다이얼로그 표시 → "네" 클릭 시 홈 이동
 - **프로그레스바**: 현재 라운드/전체 라운드 비율로 진행률 표시
-- **이전 문제 버튼**: 첫 번째 문제에서는 숨김 처리
-- **다음 문제 버튼**: 항상 표시
 - **게임 종료 버튼**: Cross 아이콘, 클릭 시 나가기 다이얼로그
 - **문제 텍스트**: 현재 라운드의 질문 표시
 - **문제 이미지**: 이미지가 있는 경우 표시, 없는 경우 숨김
-- **정답 보기 버튼**: 기본 상태에서 표시
+- **"정답은?" 버튼**: 정답 숨김 상태에서 표시
+- **"다음" 버튼**: 정답 공개 상태에서 표시
 
 ### 2. 점수판 기능
 
@@ -33,33 +33,37 @@
 - **점수 범위 제한**: -100점 ~ +100점 범위 내에서만 조정 가능
 - **점수 표시**: "X점" 형태로 표시
 
-### 3. 문제 네비게이션
+### 3. 정답 공개 및 문제 이동
 
-#### 3.1 이전 문제
+#### 3.1 버튼 클릭 조작
 
-- **첫 번째 문제**: "이전 문제" 버튼 숨김
-- **두 번째 문제 이상**: "이전 문제" 버튼 표시
-- **이전 문제 이동**: 클릭 시 이전 라운드로 이동, 프로그레스바 감소
-- **정답 상태 초기화**: 이전 문제 이동 시 정답 숨김 상태로 리셋
+- **"정답은?" 버튼 클릭**: 정답 공개, URL에 `answer=true` 추가, "다음" 버튼 표시
+- **"다음" 버튼 클릭**: 다음 문제로 이동, 정답 숨김 상태로 시작
 
-#### 3.2 다음 문제
+#### 3.2 키보드 조작
 
-- **중간 문제**: "다음 문제" 버튼 클릭 시 다음 라운드로 이동
-- **마지막 문제**: "다음 문제" 버튼 클릭 시 결과 페이지(`/game/[gameId]/result`)로 이동
-- **정답 상태 초기화**: 다음 문제 이동 시 정답 숨김 상태로 리셋
+| 키 | 정답 숨김 상태 | 정답 공개 상태 |
+|---|---|---|
+| Enter | 정답 공개 | 다음 문제 (정답 숨김) |
+| → (ArrowRight) | 정답 공개 | 다음 문제 (정답 숨김) |
+| ← (ArrowLeft) | 이전 문제 (정답 숨김) | 이전 문제 (정답 숨김) |
 
-### 4. 정답 확인 기능
+- **1번 문제에서 ← 키**: 무반응 (이전 문제 없음)
+- **마지막 문제 정답 공개 후 Enter/→**: 결과 페이지(`/game/[gameId]/result`)로 이동
 
-#### 4.1 정답 보기
+### 4. 문제 네비게이션
 
-- **정답 보기 버튼**: 클릭 시 정답 텍스트 표시
-- **정답 숨기기 버튼**: 정답이 표시된 상태에서 클릭 시 정답 숨김
-- **정답 텍스트**: `currentQuestion.questionAnswer` 표시
+#### 4.1 이전 문제
 
-#### 4.2 정답 상태 유지
+- **1번 문제**: ← 키 입력 시 무반응
+- **2번 문제 이상**: ← 키 입력 시 이전 라운드로 이동
+- **정답 상태 초기화**: 이전 문제 이동 시 정답 숨김 상태로 시작
 
-- **라운드 변경 시**: 이전/다음 문제 이동 시 정답 상태 초기화
-- **페이지 새로고침**: 정답 상태 유지 (Zustand persist)
+#### 4.2 다음 문제
+
+- **중간 문제**: Enter/→ 키 또는 "다음" 버튼으로 다음 라운드 이동
+- **마지막 문제**: 결과 페이지로 이동
+- **정답 상태 초기화**: 다음 문제 이동 시 정답 숨김 상태로 시작
 
 ### 5. 나가기 기능
 
@@ -77,15 +81,15 @@
 ### 6. 프로그레스바 동작
 
 - **진행률 계산**: `(currentRound / totalRounds) * 100`
-- **첫 번째 문제**: 0% 또는 최소값
-- **마지막 문제**: 100% 또는 최대값
-- **중간 문제**: 해당 라운드에 맞는 진행률 표시
+- **다음 문제 이동**: 진행률 증가
+- **이전 문제 이동**: 진행률 감소
 
 ### 7. URL 파라미터 동작
 
-- **라운드 변경 시**: `?q=${newRound}` 형태로 URL 업데이트
-- **이전 문제**: `router.replace()` 사용하여 히스토리 스택에 추가하지 않음
-- **다음 문제**: `router.replace()` 사용하여 히스토리 스택에 추가하지 않음
+- **라운드 변경**: `?q=${round}` 형태로 URL 업데이트
+- **정답 공개**: `?q=${round}&answer=true` 형태로 URL 업데이트
+- **정답 숨김**: `answer` 파라미터 제거
+- **초기 상태**: query parameter 없음 (1번 문제, 정답 숨김)
 
 ### 8. 게임 상태 관리
 
@@ -94,15 +98,41 @@
 - **게임 상세 정보**: 문제 목록과 질문/답변 데이터 관리
 - **상태 지속성**: 페이지 새로고침 시에도 상태 유지 (팀 구성은 reload 후에도 유지, 점수는 이탈/종료 시 초기화됨)
 
+## 구현된 테스트 목록
+
+### 게임 진행 - 기본 UI
+- [x] 1번 문제: '정답은?' 버튼이 표시되어야 한다
+- [x] 홈 로고 클릭 시 나가기 다이얼로그가 뜨고, '아니요' 클릭 시 페이지에 머문다
+- [x] 게임 종료 아이콘 클릭 시 나가기 다이얼로그가 뜬다
+- [x] 점수판을 접고 다시 펼칠 수 있어야 한다
+- [x] 팀 점수를 클릭 당 +1, -1씩 조정할 수 있다
+
+### 게임 진행 - 버튼 클릭 조작
+- [x] '정답은?' 버튼 클릭 시 정답이 공개되고 '다음' 버튼이 표시된다
+- [x] 정답 공개 후 '다음' 버튼 클릭 시 다음 문제로 이동한다
+
+### 게임 진행 - 키보드 조작
+- [x] Enter 키로 정답을 공개할 수 있다
+- [x] → 키로 정답을 공개할 수 있다
+- [x] 정답 공개 후 Enter 키로 다음 문제로 이동할 수 있다
+- [x] 정답 공개 후 → 키로 다음 문제로 이동할 수 있다
+- [x] ← 키로 이전 문제로 이동할 수 있다 (2번 문제에서)
+- [x] 1번 문제에서 ← 키는 무반응이다
+- [x] 이전 문제로 돌아가면 정답 숨김 상태로 시작한다
+
+### 게임 진행 - 문제 이동 및 진행률
+- [x] 다음 문제로 이동하면 진행률이 증가한다
+- [x] 이전 문제로 이동하면 진행률이 감소한다
+
 ## 우선순위
 
-- **Critical**: 문제 네비게이션, 정답 확인, 나가기 기능
+- **Critical**: 정답 공개/숨김, 문제 네비게이션, 키보드 조작, 나가기 기능
 - **High**: 점수 관리, 프로그레스바, 기본 UI 렌더링
 - **Medium**: 점수판 펼침/접음, URL 파라미터
 
 ## 테스트 데이터 요구사항
 
-- **최소 2개 이상의 문제가 있는 게임**
+- **최소 3개 이상의 문제가 있는 게임** (진행률 테스트를 위해)
 - **이미지가 있는 문제와 없는 문제 혼재**
 - **기본 A팀, B팀 설정**
 - **다양한 점수 범위 테스트 (-100 ~ +100)**
diff --git a/service/app/src/app/game/[gameId]/play/__tests__/game-play.spec.ts b/service/app/src/app/game/[gameId]/play/__tests__/game-play.spec.ts
index 9ce75d04..eb22f1be 100644
--- a/service/app/src/app/game/[gameId]/play/__tests__/game-play.spec.ts
+++ b/service/app/src/app/game/[gameId]/play/__tests__/game-play.spec.ts
@@ -3,40 +3,28 @@ import { expect, test } from "@playwright/test"
 import { GameSetupPOM } from "../../setup/__tests__/gameSetupPOM"
 import { GamePlayPOM } from "./gamePlayPOM"
 
-// E2E: 이미지 맞추기 게임 - 두 번째 문제 플로우 (503/504/505)
+// E2E: 게임 플레이 페이지 테스트
 // guides/playwright-convention.mdc 및 test-convention.mdc 준수
 
-test.describe("게임 진행 - 두 번째 문제 플로우", () => {
+test.describe("게임 진행 - 기본 UI", () => {
   let pageObj: GamePlayPOM
   let setupPage: GameSetupPOM
 
   test.beforeEach(async ({ page }) => {
-    // Given: /setup에서 게임 시작을 통해 playing 상태로 전환
     setupPage = new GameSetupPOM(page)
     await setupPage.goto("1")
     await setupPage.startGame()
-
-    // When: /play로 이동 (초기 1번 문제)
     pageObj = new GamePlayPOM(page)
   })
 
-  test("1번 문제: 이전 버튼은 비활성화되고 다음 버튼은 활성화되어야 한다", async () => {
-    await expect(pageObj.prevQuestionButton).toBeDisabled()
-    await expect(pageObj.nextQuestionButton).toBeEnabled()
+  test("1번 문제: '정답은?' 버튼이 표시되어야 한다", async () => {
+    await expect(pageObj.showAnswerButton).toBeVisible()
+    await expect(pageObj.nextQuestionButton).not.toBeVisible()
 
     const progress = await pageObj.getProgressValue()
     expect(progress).not.toBeNull()
   })
 
-  test("2번 문제: 이전/다음 버튼이 모두 활성화되어야 한다", async ({
-    page,
-  }) => {
-    await pageObj.goToNextQuestion()
-    await expect(page).toHaveURL(/\?q=2/)
-    await expect(pageObj.prevQuestionButton).toBeEnabled()
-    await expect(pageObj.nextQuestionButton).toBeEnabled()
-  })
-
   test("홈 로고 클릭 시 나가기 다이얼로그가 뜨고, '아니요' 클릭 시 페이지에 머문다", async ({
     page,
   }) => {
@@ -52,8 +40,8 @@ test.describe("게임 진행 - 두 번째 문제 플로우", () => {
   })
 
   test("점수판을 접고 다시 펼칠 수 있어야 한다", async () => {
-    await pageObj.toggleScoreboard() // 접기
-    await pageObj.toggleScoreboard() // 펼치기
+    await pageObj.toggleScoreboard()
+    await pageObj.toggleScoreboard()
   })
 
   test("팀 점수를 클릭 당 +1, -1씩 조정할 수 있다", async () => {
@@ -64,37 +52,146 @@ test.describe("게임 진행 - 두 번째 문제 플로우", () => {
     await pageObj.decreaseScore(teamName, 1)
     await pageObj.expectTeamScore(teamName, "0점")
   })
+})
+
+test.describe("게임 진행 - 버튼 클릭 조작", () => {
+  let pageObj: GamePlayPOM
+  let setupPage: GameSetupPOM
+
+  test.beforeEach(async ({ page }) => {
+    setupPage = new GameSetupPOM(page)
+    await setupPage.goto("1")
+    await setupPage.startGame()
+    pageObj = new GamePlayPOM(page)
+  })
 
-  test("'이전 문제' 클릭 시 이전 라운드로 이동하고 진행률이 감소한다", async ({
+  test("'정답은?' 버튼 클릭 시 정답이 공개되고 '다음' 버튼이 표시된다", async ({
     page,
   }) => {
-    // 1번 → 2번 문제로 이동하고 URL 변경 대기
-    await pageObj.goToNextQuestion()
-    await page.waitForURL(/\?q=2/, { timeout: 1000 })
+    await pageObj.clickShowAnswer()
+    await expect(page).toHaveURL(/answer=true/)
+    await expect(pageObj.nextQuestionButton).toBeVisible()
+    await expect(pageObj.showAnswerButton).not.toBeVisible()
+  })
 
-    // 2번 → 3번 문제로 이동하고 URL 변경 대기
-    await pageObj.goToNextQuestion()
-    await page.waitForURL(/\?q=3/, { timeout: 1000 })
+  test("정답 공개 후 '다음' 버튼 클릭 시 다음 문제로 이동한다", async ({
+    page,
+  }) => {
+    await pageObj.clickShowAnswer()
+    await pageObj.clickNext()
+    await expect(page).toHaveURL(/\?q=2/)
+    await expect(pageObj.showAnswerButton).toBeVisible()
+  })
+})
 
-    // 진행률 측정 후 이전 문제로 이동
-    const before = await pageObj.getProgressValue()
-    await pageObj.goToPrevQuestion()
-    await page.waitForURL(/\?q=2/, { timeout: 1000 })
+test.describe("게임 진행 - 키보드 조작", () => {
+  let pageObj: GamePlayPOM
+  let setupPage: GameSetupPOM
 
-    const after = await pageObj.getProgressValue()
-    expect(after).toBeLessThanOrEqual(before!)
+  test.beforeEach(async ({ page }) => {
+    setupPage = new GameSetupPOM(page)
+    await setupPage.goto("1")
+    await setupPage.startGame()
+    pageObj = new GamePlayPOM(page)
+  })
+
+  test("Enter 키로 정답을 공개할 수 있다", async ({ page }) => {
+    await pageObj.pressEnter()
+    await expect(page).toHaveURL(/answer=true/)
+    await expect(pageObj.nextQuestionButton).toBeVisible()
+  })
+
+  test("→ 키로 정답을 공개할 수 있다", async ({ page }) => {
+    await pageObj.pressArrowRight()
+    await expect(page).toHaveURL(/answer=true/)
+    await expect(pageObj.nextQuestionButton).toBeVisible()
   })
 
-  //실제 문제 개수를 알지 못하기 때문에, 정확한 value 측정보다는 비교 연산으로 테스트 진행
-  test("'다음 문제' 클릭 시 다음 라운드로 이동하고 진행률이 증가한다 (1→2)", async ({
+  test("정답 공개 후 Enter 키로 다음 문제로 이동할 수 있다", async ({
     page,
   }) => {
+    await pageObj.pressEnter()
+    await page.waitForURL(/answer=true/)
+    await pageObj.pressEnter()
+    await expect(page).toHaveURL(/\?q=2/)
+    await expect(pageObj.showAnswerButton).toBeVisible()
+  })
+
+  test("정답 공개 후 → 키로 다음 문제로 이동할 수 있다", async ({ page }) => {
+    await pageObj.pressEnter()
+    await page.waitForURL(/answer=true/)
+    await pageObj.pressArrowRight()
+    await expect(page).toHaveURL(/\?q=2/)
+    await expect(pageObj.showAnswerButton).toBeVisible()
+  })
+
+  test("← 키로 이전 문제로 이동할 수 있다 (2번 문제에서)", async ({ page }) => {
+    await pageObj.pressEnter()
+    await page.waitForURL(/answer=true/)
+    await pageObj.pressEnter()
+    await page.waitForURL(/\?q=2/)
+
+    await pageObj.pressArrowLeft()
+    await expect(page).toHaveURL(/\?q=1/)
+  })
+
+  test("1번 문제에서 ← 키는 무반응이다", async ({ page }) => {
+    const urlBefore = page.url()
+    await pageObj.pressArrowLeft()
+    await expect(page).toHaveURL(urlBefore)
+    await expect(pageObj.showAnswerButton).toBeVisible()
+  })
+
+  test("이전 문제로 돌아가면 정답 숨김 상태로 시작한다", async ({ page }) => {
+    await pageObj.pressEnter()
+    await page.waitForURL(/answer=true/)
+    await pageObj.pressEnter()
+    await page.waitForURL(/\?q=2/)
+
+    await pageObj.pressArrowLeft()
+    await expect(page).toHaveURL(/\?q=1/)
+    await expect(page).not.toHaveURL(/answer=true/)
+    await expect(pageObj.showAnswerButton).toBeVisible()
+  })
+})
+
+test.describe("게임 진행 - 문제 이동 및 진행률", () => {
+  let pageObj: GamePlayPOM
+  let setupPage: GameSetupPOM
+
+  test.beforeEach(async ({ page }) => {
+    setupPage = new GameSetupPOM(page)
+    await setupPage.goto("1")
+    await setupPage.startGame()
+    pageObj = new GamePlayPOM(page)
+  })
+
+  test("다음 문제로 이동하면 진행률이 증가한다", async ({ page }) => {
     const before = await pageObj.getProgressValue()
-    await pageObj.goToNextQuestion()
+    await pageObj.pressEnter()
+    await page.waitForURL(/answer=true/)
+    await pageObj.pressEnter()
     await expect(page).toHaveURL(/\?q=2/)
 
     const after = await pageObj.getProgressValue()
+    expect(after).toBeGreaterThan(before!)
+  })
 
-    expect(after).toBeGreaterThanOrEqual(before!)
+  test("이전 문제로 이동하면 진행률이 감소한다", async ({ page }) => {
+    await pageObj.pressEnter()
+    await page.waitForURL(/answer=true/)
+    await pageObj.pressEnter()
+    await page.waitForURL(/\?q=2/)
+    await pageObj.pressEnter()
+    await page.waitForURL(/answer=true/)
+    await pageObj.pressEnter()
+    await page.waitForURL(/\?q=3/)
+
+    const before = await pageObj.getProgressValue()
+    await pageObj.pressArrowLeft()
+    await page.waitForURL(/\?q=2/)
+
+    const after = await pageObj.getProgressValue()
+    expect(after).toBeLessThan(before!)
   })
 })
diff --git a/service/app/src/app/game/[gameId]/play/__tests__/gamePlayPOM.ts b/service/app/src/app/game/[gameId]/play/__tests__/gamePlayPOM.ts
index d250cf40..8272979f 100644
--- a/service/app/src/app/game/[gameId]/play/__tests__/gamePlayPOM.ts
+++ b/service/app/src/app/game/[gameId]/play/__tests__/gamePlayPOM.ts
@@ -5,14 +5,16 @@ import { expect, type Locator, type Page } from "@playwright/test"
  * - 테스트 컨벤션: guides/test-convention.mdc를 따름
  * - 가능한 한 접근성 셀렉터(getByRole, getByAltText 등)를 우선 사용
  * - 접근성 속성이 없는 요소는 구조 기반 셀렉터로 보완
+ *
+ * 키보드 조작:
+ * - Enter / ArrowRight: 정답 숨김 → 정답 공개, 정답 공개 → 다음 문제
+ * - ArrowLeft: 이전 문제로 이동 (1번 문제에서는 무반응)
  */
 export class GamePlayPOM {
   readonly page: Page
 
   // 헤더 영역
   readonly homeLogoImage: Locator
-  readonly prevQuestionButton: Locator
-  readonly nextQuestionButton: Locator
   readonly exitIconButton: Locator
   readonly progressbar: Locator
 
@@ -22,7 +24,11 @@ export class GamePlayPOM {
   // 메인 콘텐츠
   readonly questionHeading: Locator
   readonly questionImage: Locator
+  readonly answerArea: Locator
+
+  // 액션 버튼 ("정답은?" 또는 "다음")
   readonly showAnswerButton: Locator
+  readonly nextQuestionButton: Locator
 
   // 나가기 다이얼로그
   readonly exitDialogConfirmButton: Locator
@@ -33,8 +39,6 @@ export class GamePlayPOM {
 
     // 헤더
     this.homeLogoImage = page.getByAltText("홈 로고")
-    this.prevQuestionButton = page.getByRole("button", { name: "이전 문제" })
-    this.nextQuestionButton = page.getByRole("button", { name: "다음 문제" })
     this.exitIconButton = page.getByRole("button", { name: "게임 종료" })
 
     // Progress
@@ -48,15 +52,20 @@ export class GamePlayPOM {
     // 메인 콘텐츠
     this.questionHeading = page.getByRole("heading", { level: 1 })
     this.questionImage = page.getByAltText("문제 이미지")
-    this.showAnswerButton = page.getByRole("button", { name: "정답 보기" })
+    this.answerArea = page.locator("[data-testid='answer-area']")
+
+    // 액션 버튼
+    this.showAnswerButton = page.getByRole("button", { name: "정답은?" })
+    this.nextQuestionButton = page.getByRole("button", { name: "다음" })
 
     // 나가기 다이얼로그 버튼
     this.exitDialogConfirmButton = page.getByRole("button", { name: "네" })
     this.exitDialogCancelButton = page.getByRole("button", { name: "아니요" })
   }
 
-  async goto(gameId: string = "1", round?: number) {
-    const search = round ? `?q=${round}` : ""
+  async goto(gameId: string = "1", round?: number, showAnswer?: boolean) {
+    let search = round ? `?q=${round}` : ""
+    if (showAnswer) search += "&answer=true"
     await this.page.goto(`game/${gameId}/play${search}`)
   }
 
@@ -64,14 +73,6 @@ export class GamePlayPOM {
     await this.homeLogoImage.click()
   }
 
-  async goToPrevQuestion() {
-    await this.prevQuestionButton.click()
-  }
-
-  async goToNextQuestion() {
-    await this.nextQuestionButton.click()
-  }
-
   async clickExitIcon() {
     await this.exitIconButton.click()
   }
@@ -85,15 +86,57 @@ export class GamePlayPOM {
     await this.scoreboardToggleButton.click()
   }
 
+  // 정답 공개 버튼 클릭
+  async clickShowAnswer() {
+    await this.showAnswerButton.click()
+  }
+
+  // 다음 버튼 클릭 (정답 공개 상태에서)
+  async clickNext() {
+    await this.nextQuestionButton.click()
+  }
+
+  // 키보드 조작: Enter 키
+  async pressEnter() {
+    await this.page.locator("body").press("Enter")
+  }
+
+  // 키보드 조작: → 키
+  async pressArrowRight() {
+    await this.page.locator("body").press("ArrowRight")
+  }
+
+  // 키보드 조작: ← 키
+  async pressArrowLeft() {
+    await this.page.locator("body").press("ArrowLeft")
+  }
+
+  // 정답 공개 (버튼 또는 키보드)
+  async showAnswer() {
+    await this.pressEnter()
+  }
+
+  // 다음 문제로 이동 (정답 공개 상태에서)
+  async goToNextQuestion() {
+    await expect(this.nextQuestionButton).toBeVisible()
+    await this.pressEnter()
+  }
+
+  // 이전 문제로 이동 (키보드)
+  async goToPrevQuestion() {
+    await this.pressArrowLeft()
+  }
+
+  // 현재 정답 공개 상태인지 확인
+  async isAnswerVisible() {
+    return await this.nextQuestionButton.isVisible()
+  }
+
   // 팀 관련 접근성 셀렉터 기반
   teamCard(teamName: string) {
     return this.page.getByRole("group", { name: `${teamName} 점수 카드` })
   }
 
-  teamScoreLabel(teamName: string) {
-    return this.page.getByLabel(`${teamName} 현재 점수`)
-  }
-
   teamDecreaseButton(teamName: string) {
     return this.page.getByRole("button", { name: `${teamName} 점수 감소` })
   }
@@ -117,7 +160,8 @@ export class GamePlayPOM {
   }
 
   async expectTeamScore(teamName: string, expectedText: string) {
-    await expect(this.teamScoreLabel(teamName)).toHaveText(expectedText)
+    const scoreButton = this.teamIncreaseButton(teamName)
+    await expect(scoreButton).toContainText(expectedText)
   }
 
   async getQuestionText() {
@@ -128,26 +172,6 @@ export class GamePlayPOM {
     return await this.questionImage.isVisible()
   }
 
-  async showAnswerAndGetText() {
-    await this.showAnswerButton.click()
-    const answerButton = this.page
-      .getByRole("button")
-      .filter({ hasNotText: "정답 보기" })
-      .first()
-    await expect(this.showAnswerButton).not.toBeVisible()
-    const answerText = (await answerButton.textContent())?.trim() ?? ""
-    return answerText
-  }
-
-  async hideAnswer() {
-    const answerButton = this.page
-      .getByRole("button")
-      .filter({ hasNotText: "정답 보기" })
-      .first()
-    await answerButton.click()
-    await expect(this.showAnswerButton).toBeVisible()
-  }
-
   async confirmExit() {
     await this.exitDialogConfirmButton.click()
   }
diff --git a/service/app/src/app/game/[gameId]/play/components/gamePlayContent.tsx b/service/app/src/app/game/[gameId]/play/components/gamePlayContent.tsx
index 269cae1f..19ff3045 100644
--- a/service/app/src/app/game/[gameId]/play/components/gamePlayContent.tsx
+++ b/service/app/src/app/game/[gameId]/play/components/gamePlayContent.tsx
@@ -1,3 +1,4 @@
+import { PrimaryBoxButton } from "@ject-5-fe/design/components/button"
 import Image from "next/image"
 import { useCallback, useEffect, useState } from "react"
 
@@ -82,12 +83,13 @@ export const GamePlayContent = ({
       </div>
 
       <div className="flex flex-col items-center gap-16">
-        <div
+        <PrimaryBoxButton
+          size="2xl"
+          _style="solid"
           onClick={() => (showAnswer ? onNextQuestion() : onShowAnswer())}
-          className="typography-heading-3xl-semibold inline-flex w-[572px] cursor-pointer flex-row items-center justify-center gap-8 rounded-12 border-[3px] border-transparent bg-background-interactive-primary px-32 py-12 text-text-interactive-inverse hover:bg-background-interactive-primary-hovered active:border-transparent active:bg-background-interactive-primary-pressed"
         >
           {showAnswer ? "다음" : "정답은?"}
-        </div>
+        </PrimaryBoxButton>
       </div>
     </div>
   )
diff --git a/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx b/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx
index 858d4daf..ed33feaf 100644
--- a/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx
+++ b/service/app/src/app/game/[gameId]/setup/components/teamSidebar.tsx
@@ -43,7 +43,7 @@ export function TeamSidebar() {
       </div>
       <FloatingAddButton
         onClick={handleAddTeam}
-        ariaLabel="참가자 및 팀 추가"
+        ariaLabel="참가자 및 팀 추가하기"
         disabled={teams.length >= MAX_TEAMS}
       />
     </aside>

From 54c25918f0eb5e8a1c103249615cc57a70868bc3 Mon Sep 17 00:00:00 2001
From: kimnamheeee <nami200284@snu.ac.kr>
Date: Thu, 19 Feb 2026 16:21:18 +0900
Subject: [PATCH 10/10] feat(gameplay): enhance keyboard navigation /
 conditional rendering

prevent keyboard navigation when dialog is open / set layout on cases where no imageUrl exists
---
 .../play/components/gamePlayContent.tsx       | 41 +++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/service/app/src/app/game/[gameId]/play/components/gamePlayContent.tsx b/service/app/src/app/game/[gameId]/play/components/gamePlayContent.tsx
index 19ff3045..6b3d324c 100644
--- a/service/app/src/app/game/[gameId]/play/components/gamePlayContent.tsx
+++ b/service/app/src/app/game/[gameId]/play/components/gamePlayContent.tsx
@@ -25,6 +25,9 @@ export const GamePlayContent = ({
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
+      const isDialogOpen = document.querySelector("[role='dialog']") !== null
+      if (isDialogOpen) return
+
       if (e.key === "Enter" || e.key === "ArrowRight") {
         if (showAnswer) {
           onNextQuestion()
@@ -45,19 +48,27 @@ export const GamePlayContent = ({
     return () => window.removeEventListener("keydown", handleKeyDown)
   }, [handleKeyDown])
 
+  const hasImage = !!currentQuestion?.imageUrl
+
   return (
     <div className="flex flex-1 flex-col items-center justify-center gap-[70px] sm:max-w-[642px] md:max-w-[1080px]">
       <div className="flex flex-col items-center gap-40">
-        <h1 className="text-center text-text-primary sm:typography-heading-3xl-extrabold md:typography-heading-4xl-extrabold">
-          {currentQuestion.questionText}
-        </h1>
+        {hasImage && (
+          <h1 className="text-center text-text-primary sm:typography-heading-3xl-extrabold md:typography-heading-4xl-extrabold">
+            {currentQuestion.questionText}
+          </h1>
+        )}
 
-        {currentQuestion?.imageUrl && (
-          <div
-            className="flex h-[246px] items-center justify-center overflow-hidden rounded-lg sm:h-[406px] md:h-[499px]"
-            style={currentImageWidth ? { width: currentImageWidth } : undefined}
-          >
-            {showAnswer ? (
+        <div
+          className="flex h-[246px] items-center justify-center overflow-hidden rounded-lg sm:h-[406px] md:h-[499px]"
+          style={
+            hasImage && currentImageWidth
+              ? { width: currentImageWidth }
+              : undefined
+          }
+        >
+          {hasImage ? (
+            showAnswer ? (
               <div className="flex size-full items-center justify-center rounded-12 border-2 border-border-interactive-secondary bg-background-interactive-inverse px-32 py-12 text-text-interactive-secondary sm:typography-heading-3xl-semibold md:typography-heading-4xl-semibold">
                 {currentQuestion?.questionAnswer}
               </div>
@@ -77,9 +88,15 @@ export const GamePlayContent = ({
                   }))
                 }}
               />
-            )}
-          </div>
-        )}
+            )
+          ) : (
+            <span className="text-center text-text-primary sm:typography-heading-3xl-extrabold md:typography-heading-4xl-extrabold">
+              {showAnswer
+                ? currentQuestion?.questionAnswer
+                : currentQuestion.questionText}
+            </span>
+          )}
+        </div>
       </div>
 
       <div className="flex flex-col items-center gap-16">