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

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">

components/game/AnswerForm.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useRef } from "react";
 import type { FormEvent } from "react";
 
 interface AnswerFormProps {
@@ -21,6 +22,16 @@ export default function AnswerForm({
   onAnswerBChange,
   onSubmit,
 }: AnswerFormProps) {
+  const firstInputRef = useRef<HTMLInputElement>(null);
+  const secondInputRef = useRef<HTMLInputElement>(null);
+  const submitButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!disabled) {
+      firstInputRef.current?.focus();
+    }
+  }, [disabled]);
+
   return (
     <form
       onSubmit={onSubmit}
@@ -30,8 +41,15 @@ export default function AnswerForm({
         <label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
           첫째 항
           <input
+            ref={firstInputRef}
             value={answerA}
             onChange={(event) => onAnswerAChange(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                secondInputRef.current?.focus();
+              }
+            }}
             disabled={disabled}
             inputMode="numeric"
             className="h-12 rounded-md border border-slate-300 px-4 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 disabled:bg-slate-100"
@@ -40,8 +58,15 @@ export default function AnswerForm({
         <label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
           둘째 항
           <input
+            ref={secondInputRef}
             value={answerB}
             onChange={(event) => onAnswerBChange(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                submitButtonRef.current?.click();
+              }
+            }}
             disabled={disabled}
             inputMode="numeric"
             className="h-12 rounded-md border border-slate-300 px-4 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 disabled:bg-slate-100"
@@ -55,6 +80,7 @@ export default function AnswerForm({
 
       <div className="mt-6 flex flex-wrap gap-3">
         <button
+          ref={submitButtonRef}
           type="submit"
           disabled={disabled}
           className="inline-flex h-12 items-center justify-center rounded-md bg-emerald-700 px-6 text-base font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-slate-300"

components/game/FeedbackPanel.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useEffect, useRef } from "react";
+
 import KatexRenderer from "@/components/math/KatexRenderer";
 import type { GradeResult } from "@/lib/engine/types";
 
@@ -16,6 +18,12 @@ export default function FeedbackPanel({
   isLastProblem,
   onNext,
 }: FeedbackPanelProps) {
+  const nextButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    nextButtonRef.current?.focus();
+  }, []);
+
   return (
     <div
       className={`rounded-md p-6 shadow-sm ring-1 ${
@@ -31,6 +39,7 @@ export default function FeedbackPanel({
         <KatexRenderer latex={answerLatex} />
       </div>
       <button
+        ref={nextButtonRef}
         type="button"
         onClick={onNext}
         className="mt-5 inline-flex h-11 items-center justify-center rounded-md bg-slate-950 px-5 text-base font-semibold text-white transition hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"

components/game/ScoreSummary.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { useEffect, useRef } from "react";
 
 interface ScoreSummaryProps {
   correctCount: number;
@@ -13,6 +14,12 @@ export default function ScoreSummary({
   totalCount,
   onRestart,
 }: ScoreSummaryProps) {
+  const restartButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    restartButtonRef.current?.focus();
+  }, []);
+
   return (
     <main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
       <section className="mx-auto flex w-full max-w-3xl flex-col gap-8">
@@ -30,6 +37,7 @@ export default function ScoreSummary({
 
         <div className="flex flex-wrap gap-3">
           <button
+            ref={restartButtonRef}
             type="button"
             onClick={onRestart}
             className="inline-flex h-12 items-center justify-center rounded-md bg-emerald-700 px-6 text-base font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"

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