From 823490ba7cf80e3e000e2273709b5688b08ae7d3 Mon Sep 17 00:00:00 2001
From: jisangs <jisangs@gmail.com>
Date: Mon, 25 May 2026 18:57:43 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=92=80=EC=9D=B4=20?=
 =?UTF-8?q?=EB=8B=A8=EA=B3=84=20=ED=91=9C=EC=8B=9C=20=EB=B0=A9=EC=8B=9D=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD:=20=EC=88=AB=EC=9E=90=20->=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(game)/play/PlayClient.tsx     |  8 +++--
 components/game/StageIndicator.tsx | 56 ++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 3 deletions(-)
 create mode 100644 components/game/StageIndicator.tsx

diff --git a/app/(game)/play/PlayClient.tsx b/app/(game)/play/PlayClient.tsx
index 6f87382..ca3db0c 100644
--- a/app/(game)/play/PlayClient.tsx
+++ b/app/(game)/play/PlayClient.tsx
@@ -6,6 +6,7 @@ import type { FormEvent } from "react";
 import AnswerForm from "@/components/game/AnswerForm";
 import FeedbackPanel from "@/components/game/FeedbackPanel";
 import ScoreSummary from "@/components/game/ScoreSummary";
+import StageIndicator from "@/components/game/StageIndicator";
 import KatexRenderer from "@/components/math/KatexRenderer";
 import { useGameStore } from "@/store/gameStore";
 
@@ -115,9 +116,10 @@ export default function PlayClient() {
               문제 풀이
             </h1>
           </div>
-          <p className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200">
-            {session.currentIndex + 1} / {session.problems.length}
-          </p>
+          <StageIndicator
+            currentIndex={session.currentIndex}
+            results={session.results}
+          />
         </div>
 
         <div className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8">
diff --git a/components/game/StageIndicator.tsx b/components/game/StageIndicator.tsx
new file mode 100644
index 0000000..b5b569d
--- /dev/null
+++ b/components/game/StageIndicator.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import type { GradeResult } from "@/lib/engine/types";
+
+interface StageIndicatorProps {
+  currentIndex: number;
+  results: (GradeResult | null)[];
+}
+
+export default function StageIndicator({
+  currentIndex,
+  results,
+}: StageIndicatorProps) {
+  return (
+    <ol
+      className="flex max-w-full flex-wrap items-center justify-end gap-2"
+      aria-label="문제 풀이 진행 단계"
+    >
+      {results.map((result, index) => {
+        const stageNumber = index + 1;
+        const isCurrent = index === currentIndex;
+        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";
+
+        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";
+        } else if (isCurrent) {
+          label = `${stageNumber}번 현재 단계`;
+          content = String(stageNumber);
+          className +=
+            " border-emerald-700 bg-white text-emerald-800 shadow-sm ring-2 ring-emerald-200";
+        } else {
+          className += " border-slate-300 bg-white text-slate-300";
+        }
+
+        return (
+          <li key={stageNumber}>
+            <span className={className} aria-label={label} title={label}>
+              {content || <span className="size-2 rounded-full bg-slate-300" />}
+            </span>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}