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

2026-05-25 18:57:43 +09:00
parent 8387234f88
commit 823490ba7c
2 changed files with 61 additions and 3 deletions
@@ -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>
+  );
+}