문제 풀이 단계 표시 방식 변경: 숫자 -> 아이콘

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">
+          <StageIndicator
-            {session.currentIndex + 1} / {session.problems.length}
+            currentIndex={session.currentIndex}
-          </p>
+            results={session.results}
+          />
         </div>
 
         <div className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8">

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>
+  );
+}