From 503bad859e14ac7534111ff4fe5495a8e8eef4e1 Mon Sep 17 00:00:00 2001
From: jisangs <jisangs@gmail.com>
Date: Sat, 30 May 2026 17:45:03 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=92=80=EC=9D=B4=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=EC=9D=98=20step=20progress=20bar=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../play/NumberPlayClient.tsx                 | 12 +++++----
 .../play/VariablePlayClient.tsx               | 12 +++++----
 components/game/StageIndicator.tsx            | 26 +++++++------------
 3 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/app/(game)/number-parentheses/play/NumberPlayClient.tsx b/app/(game)/number-parentheses/play/NumberPlayClient.tsx
index a456109..e5e70af 100644
--- a/app/(game)/number-parentheses/play/NumberPlayClient.tsx
+++ b/app/(game)/number-parentheses/play/NumberPlayClient.tsx
@@ -196,15 +196,11 @@ export default function NumberPlayClient({
               문제 풀이
             </h1>
           </div>
-          <StageIndicator
-            currentIndex={session.currentIndex}
-            results={session.results}
-          />
         </div>
 
         <div
           ref={problemCardRef}
-          className="rounded-md bg-white px-6 pt-6 pb-2 shadow-sm ring-1 ring-slate-200 sm:p-8"
+          className="rounded-md bg-white px-6 pt-6 pb-4 shadow-sm ring-1 ring-slate-200 sm:p-8"
         >
           <p className="mb-4 text-sm font-semibold text-slate-500">
             괄호를 풀어 두 항을 순서대로 입력하세요.
@@ -212,6 +208,12 @@ export default function NumberPlayClient({
           <div className="text-3xl font-semibold text-slate-950 sm:text-4xl">
             <KatexRenderer latex={currentProblem.latexBefore} displayMode />
           </div>
+          <div className="mt-6">
+            <StageIndicator
+              currentIndex={session.currentIndex}
+              results={session.results}
+            />
+          </div>
         </div>
 
         {!submitted ? (
diff --git a/app/(game)/variable-parentheses/play/VariablePlayClient.tsx b/app/(game)/variable-parentheses/play/VariablePlayClient.tsx
index 0858977..76d27a6 100644
--- a/app/(game)/variable-parentheses/play/VariablePlayClient.tsx
+++ b/app/(game)/variable-parentheses/play/VariablePlayClient.tsx
@@ -146,19 +146,21 @@ export default function VariablePlayClient({
               문제 풀이
             </h1>
           </div>
-          <StageIndicator
-            currentIndex={session.currentIndex}
-            results={session.results}
-          />
         </div>
 
-        <div className="rounded-md bg-white px-6 pt-6 pb-2 shadow-sm ring-1 ring-slate-200 sm:p-8">
+        <div className="rounded-md bg-white px-6 pt-6 pb-4 shadow-sm ring-1 ring-slate-200 sm:p-8">
           <p className="mb-4 text-sm font-semibold text-slate-500">
             괄호를 풀어 첫째 항과 둘째 항의 답을 보기에서 고르세요.
           </p>
           <div className="text-3xl font-semibold text-slate-950 sm:text-4xl">
             <KatexRenderer latex={currentProblem.latexBefore} displayMode />
           </div>
+          <div className="mt-6">
+            <StageIndicator
+              currentIndex={session.currentIndex}
+              results={session.results}
+            />
+          </div>
         </div>
 
         {!submitted ? (
diff --git a/components/game/StageIndicator.tsx b/components/game/StageIndicator.tsx
index 9de4068..94a9e07 100644
--- a/components/game/StageIndicator.tsx
+++ b/components/game/StageIndicator.tsx
@@ -17,14 +17,14 @@ export default function StageIndicator({
     .length;
 
   return (
-    <div className="flex max-w-full flex-col items-end gap-2">
+    <div className="w-full">
       <p className="sr-only">
         총 {results.length}문제 중 {completedCount}문제 완료, 정답{" "}
         {correctCount}개, 오답 {incorrectCount}개, 현재 {currentIndex + 1}번
         문제
       </p>
       <ol
-        className="flex max-w-full flex-wrap items-center justify-end gap-2"
+        className="flex w-full items-center gap-1"
         aria-label="문제 풀이 진행 단계"
       >
         {results.map((result, index) => {
@@ -33,34 +33,26 @@ export default function StageIndicator({
           const isCompleted = result !== null;
 
           let label = `${stageNumber}번 남은 단계`;
-          let content = "";
           let className =
-            "flex size-8 items-center justify-center rounded-full border text-sm font-bold leading-none transition";
+            "block h-2 w-full rounded-full transition";
 
           if (isCompleted) {
             label = result.correct
               ? `${stageNumber}번 완료, 정답`
               : `${stageNumber}번 완료, 오답`;
-            content = result.correct ? "✓" : "×";
             className += result.correct
-              ? " border-emerald-700 bg-emerald-700 text-white"
-              : " border-red-700 bg-red-700 text-white";
+              ? " bg-emerald-700"
+              : " bg-red-700";
           } else if (isCurrent) {
             label = `${stageNumber}번 현재 단계`;
-            content = String(stageNumber);
-            className +=
-              " border-emerald-700 bg-white text-emerald-800 shadow-sm ring-2 ring-emerald-200";
+            className += " bg-emerald-300 ring-2 ring-emerald-700";
           } else {
-            className += " border-slate-300 bg-white text-slate-300";
+            className += " bg-slate-200";
           }
 
           return (
-            <li key={stageNumber}>
-              <span className={className} aria-label={label} title={label}>
-                {content || (
-                  <span className="size-2 rounded-full bg-slate-300" />
-                )}
-              </span>
+            <li key={stageNumber} className="min-w-0 flex-1">
+              <span className={className} aria-label={label} title={label} />
             </li>
           );
         })}