문제 풀이 화면의 입력 항 진행 상태 표시 방법 개선

app/(game)/number-parentheses/play/NumberPlayClient.tsx

@@ -5,11 +5,11 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import type { FormEvent } from "react";
 import { flushSync } from "react-dom";
 
-import AnswerForm from "@/components/game/AnswerForm";
+import NumberAnswerForm from "@/components/game/NumberAnswerForm";
 import type {
   ActiveAnswerInput,
-  AnswerFormHandle,
+  NumberAnswerFormHandle,
-} from "@/components/game/AnswerForm";
+} from "@/components/game/NumberAnswerForm";
 import FeedbackPanel from "@/components/game/FeedbackPanel";
 import ScoreSummary from "@/components/game/ScoreSummary";
 import StageIndicator from "@/components/game/StageIndicator";
@@ -46,7 +46,7 @@ export default function NumberPlayClient({
   const resetSession = useGameStore((state) => state.resetSession);
 
   const problemCardRef = useRef<HTMLDivElement>(null);
-  const answerFormRef = useRef<AnswerFormHandle>(null);
+  const answerFormRef = useRef<NumberAnswerFormHandle>(null);
 
   const [answerA, setAnswerA] = useState("");
   const [answerB, setAnswerB] = useState("");
@@ -184,6 +184,10 @@ export default function NumberPlayClient({
 
   const submitted = currentResult !== null;
   const isLastProblem = session.currentIndex === session.problems.length - 1;
+  const pendingAnswerLabels: [string, string] = [
+    String(currentProblem.a),
+    String(currentProblem.operator === "-" ? -currentProblem.b : currentProblem.b),
+  ];
 
   return (
     <main className="min-h-screen bg-slate-50 px-6 py-10 text-slate-950">
@@ -225,12 +229,13 @@ export default function NumberPlayClient({
         </div>
 
         {!submitted ? (
-          <AnswerForm
+          <NumberAnswerForm
             ref={answerFormRef}
             answerA={answerA}
             answerB={answerB}
             activeInput={activeInput}
             error={inputError}
+            pendingAnswerLabels={pendingAnswerLabels}
             onActiveInputChange={setActiveInput}
             onAnswerAChange={setAnswerA}
             onAnswerBChange={setAnswerB}

app/(game)/variable-parentheses/play/VariablePlayClient.tsx

@@ -9,6 +9,7 @@ import VariableChoiceAnswerForm from "@/components/game/VariableChoiceAnswerForm
 import VariableFeedbackPanel from "@/components/game/VariableFeedbackPanel";
 import VariableScoreSummary from "@/components/game/VariableScoreSummary";
 import KatexRenderer from "@/components/math/KatexRenderer";
+import { formatVariableTermLatex } from "@/lib/engine/variable-parenthesis";
 import {
   useVariableGameStore,
   type VariableProblemCount,
@@ -72,22 +73,27 @@ export default function VariablePlayClient({
   }, [currentProblem?.key]);
 
   function handleSelectChoice(termIndex: 0 | 1, choiceId: string) {
-    setSelectedChoiceIds((current) => {
+    const nextSelectedChoiceIds: [string | null, string | null] = [
-      const next: [string | null, string | null] = [...current];
+      ...selectedChoiceIds,
-      next[termIndex] = choiceId;
+    ];
-      return next;
+    nextSelectedChoiceIds[termIndex] = choiceId;
-    });
+
+    setSelectedChoiceIds(nextSelectedChoiceIds);
 
     if (termIndex === 0) {
       setActiveTermIndex(1);
-    }
+      return;
     }
 
-  function handleSubmit() {
     if (currentResult || !currentProblem) return;
-    if (selectedChoiceIds[0] === null || selectedChoiceIds[1] === null) return;
+    if (
+      nextSelectedChoiceIds[0] === null ||
+      nextSelectedChoiceIds[1] === null
+    ) {
+      return;
+    }
 
-    submitAnswer({ selectedChoiceIds });
+    submitAnswer({ selectedChoiceIds: nextSelectedChoiceIds });
   }
 
   function handleNextProblem() {
@@ -134,6 +140,16 @@ export default function VariablePlayClient({
 
   const submitted = currentResult !== null;
   const isLastProblem = session.currentIndex === session.problems.length - 1;
+  const pendingChoiceLabels: [string, string] = [
+    formatVariableTermLatex(currentProblem.firstTerm),
+    formatVariableTermLatex({
+      ...currentProblem.secondTerm,
+      coefficient:
+        currentProblem.operator === "-"
+          ? -currentProblem.secondTerm.coefficient
+          : currentProblem.secondTerm.coefficient,
+    }),
+  ];
 
   return (
     <main className="min-h-screen bg-slate-50 px-6 py-10 text-slate-950">
@@ -176,8 +192,8 @@ export default function VariablePlayClient({
             choices={currentProblem.choices}
             selectedChoiceIds={selectedChoiceIds}
             activeTermIndex={activeTermIndex}
+            pendingChoiceLabels={pendingChoiceLabels}
             onSelectChoice={handleSelectChoice}
-            onSubmit={handleSubmit}
           />
         ) : null}
 

components/game/NumberAnswerForm.tsx

@@ -12,6 +12,7 @@ import {
 import type { FocusEvent, FormEvent } from "react";
 
 import { DESKTOP_INPUT_DEVICE_QUERY } from "@/lib/input-device";
+import KatexRenderer from "@/components/math/KatexRenderer";
 
 export type ActiveAnswerInput = 0 | 1;
 
@@ -30,15 +31,16 @@ const KEYPAD_KEYS = [
   "0",
 ];
 
-export interface AnswerFormHandle {
+export interface NumberAnswerFormHandle {
   focusInput: () => void;
 }
 
-interface AnswerFormProps {
+interface NumberAnswerFormProps {
   answerA: string;
   answerB: string;
   activeInput: ActiveAnswerInput;
   error: string;
+  pendingAnswerLabels: [string, string];
   onAnswerAChange: (value: string) => void;
   onAnswerBChange: (value: string) => void;
   onActiveInputChange: (input: ActiveAnswerInput) => void;
@@ -47,12 +49,16 @@ interface AnswerFormProps {
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
 }
 
-const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function AnswerForm(
+const NumberAnswerForm = forwardRef<
+  NumberAnswerFormHandle,
+  NumberAnswerFormProps
+>(function NumberAnswerForm(
   {
     answerA,
     answerB,
     activeInput,
     error,
+    pendingAnswerLabels,
     onAnswerAChange,
     onAnswerBChange,
     onActiveInputChange,
@@ -71,6 +77,7 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
 
   const activeAnswer = activeInput === 0 ? answerA : answerB;
   const activeLabel = activeInput === 0 ? "첫째 항" : "둘째 항";
+  const activeDescription = `${activeLabel}의 답을 입력하세요.`;
   const activeEnterKeyHint = activeInput === 0 ? "next" : "done";
   const activeAnswerChange =
     activeInput === 0 ? onAnswerAChange : onAnswerBChange;
@@ -210,13 +217,53 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
       className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8"
     >
       <div className="flex flex-col gap-4">
-        <div>
+        <div className="flex flex-wrap items-center justify-between gap-3">
           <label
             htmlFor={inputId}
-            className="mb-2 block text-sm font-semibold text-slate-700"
+            className="text-sm font-semibold text-slate-500"
           >
-            {activeLabel}
+            {activeDescription}
           </label>
+          <ol
+            className="flex min-w-40 items-center gap-1"
+            aria-label="입력 항 진행 상태"
+          >
+            {answerButtons.map((button) => {
+              const selected = activeInput === button.index;
+              const completed = button.value !== "";
+              const displayValue =
+                button.value || pendingAnswerLabels[button.index];
+
+              return (
+                <li
+                  key={button.index}
+                  className="min-w-0 flex-1"
+                  aria-label={`${button.label} ${
+                    completed ? `입력값 ${button.value}` : "미입력"
+                  }${selected ? ", 현재 입력 중" : ""}`}
+                >
+                  <span
+                    className={`block truncate text-center text-xs font-bold ${
+                      selected || completed ? "text-emerald-800" : "text-slate-500"
+                    }`}
+                  >
+                    <KatexRenderer latex={displayValue} />
+                  </span>
+                  <span
+                    className={`mt-1 block h-1.5 rounded-full ${
+                      completed
+                        ? "bg-emerald-700"
+                        : selected
+                          ? "bg-emerald-300 ring-1 ring-emerald-700"
+                          : "bg-slate-200"
+                    }`}
+                  />
+                </li>
+              );
+            })}
+          </ol>
+        </div>
+
         <input
           id={inputId}
           ref={inputRef}
@@ -237,35 +284,6 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
           pattern="-?[0-9]*(\.[0-9]*)?"
           className="h-12 w-full min-w-0 rounded-md border border-slate-300 bg-white px-3 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 sm:px-4"
         />
-        </div>
-
-        <div
-          className="inline-flex w-fit max-w-full gap-1 rounded-md border border-slate-300 bg-white p-1 shadow-sm"
-          role="group"
-          aria-label="입력 항 선택"
-        >
-          {answerButtons.map((button) => {
-            const selected = activeInput === button.index;
-
-            return (
-              <button
-                key={button.index}
-                type="button"
-                onPointerDown={(event) => event.preventDefault()}
-                onClick={() => moveToInput(button.index, true)}
-                aria-pressed={selected}
-                aria-label={`${button.label} 다시 입력`}
-                className={`inline-flex h-10 min-w-20 items-center justify-center rounded px-3 text-base font-semibold transition focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 ${
-                  selected
-                    ? "bg-emerald-700 text-white"
-                    : "text-slate-700 hover:bg-slate-100"
-                }`}
-              >
-                {button.value || "?"}
-              </button>
-            );
-          })}
-        </div>
 
         {keypadOpen && !desktopInputDevice ? (
           <div
@@ -333,4 +351,4 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
   );
 });
 
-export default AnswerForm;
+export default NumberAnswerForm;

components/game/VariableChoiceAnswerForm.tsx

@@ -9,31 +9,33 @@ interface VariableChoiceAnswerFormProps {
   choices: [VariableTermChoice[], VariableTermChoice[]];
   selectedChoiceIds: [string | null, string | null];
   activeTermIndex: 0 | 1;
+  pendingChoiceLabels: [string, string];
   onSelectChoice: (termIndex: 0 | 1, choiceId: string) => void;
-  onSubmit: () => void;
 }
 
 export default function VariableChoiceAnswerForm({
   choices,
   selectedChoiceIds,
   activeTermIndex,
+  pendingChoiceLabels,
   onSelectChoice,
-  onSubmit,
 }: VariableChoiceAnswerFormProps) {
   const firstChoiceRef = useRef<HTMLButtonElement>(null);
-  const submitButtonRef = useRef<HTMLButtonElement>(null);
+  const activeChoices = [...choices[activeTermIndex]].sort(
-  const canSubmit = selectedChoiceIds[0] !== null && selectedChoiceIds[1] !== null;
+    (a, b) => a.coefficient - b.coefficient,
-  const activeChoices = choices[activeTermIndex];
+  );
 
   useEffect(() => {
     firstChoiceRef.current?.focus();
   }, [activeTermIndex]);
 
-  useEffect(() => {
+  function getSelectedChoice(index: 0 | 1) {
-    if (canSubmit) {
+    const selectedChoiceId = selectedChoiceIds[index];
-      submitButtonRef.current?.focus();
+
+    if (!selectedChoiceId) return null;
+
+    return choices[index].find((choice) => choice.id === selectedChoiceId) ?? null;
   }
-  }, [canSubmit]);
 
   return (
     <div className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200">
@@ -42,32 +44,48 @@ export default function VariableChoiceAnswerForm({
           <p className="text-sm font-semibold text-slate-500">
             {activeTermIndex === 0 ? "첫째 항" : "둘째 항"}을 고르세요.
           </p>
-          <p className="mt-1 text-base text-slate-700">
-            괄호를 풀었을 때의 부호를 선택합니다.
-          </p>
         </div>
-        <div
+        <ol
-          className="inline-flex gap-1 rounded-md border border-slate-300 bg-slate-50 p-1"
+          className="flex min-w-40 items-center gap-1"
-          role="group"
           aria-label="입력 항 진행 상태"
         >
           {selectedChoiceIds.map((choiceId, index) => {
             const selected = activeTermIndex === index;
+            const selectedChoice = getSelectedChoice(index as 0 | 1);
+            const completed = choiceId !== null && selectedChoice !== null;
 
             return (
-              <span
+              <li
                 key={index}
-                className={`inline-flex h-9 min-w-16 items-center justify-center rounded px-3 text-sm font-bold ${
+                className="min-w-0 flex-1"
-                  selected
+                aria-label={`${index + 1}항 ${
-                    ? "bg-emerald-700 text-white"
+                  completed ? "선택 완료" : "미선택"
-                    : "bg-white text-slate-700"
+                }${selected ? ", 현재 선택 중" : ""}`}
+              >
+                <span
+                  className={`block truncate text-center text-xs font-bold ${
+                    selected || completed ? "text-emerald-800" : "text-slate-500"
                   }`}
                 >
-                {choiceId ? `${index + 1}항 완료` : `${index + 1}항`}
+                  {completed ? (
+                    <KatexRenderer latex={selectedChoice.latex} />
+                  ) : (
+                    <KatexRenderer latex={pendingChoiceLabels[index]} />
+                  )}
                 </span>
+                <span
+                  className={`mt-1 block h-1.5 rounded-full ${
+                    completed
+                      ? "bg-emerald-700"
+                      : selected
+                        ? "bg-emerald-300 ring-1 ring-emerald-700"
+                        : "bg-slate-200"
+                  }`}
+                />
+              </li>
             );
           })}
-        </div>
+        </ol>
       </div>
 
       <div
@@ -96,16 +114,6 @@ export default function VariableChoiceAnswerForm({
           );
         })}
       </div>
-
-      <button
-        ref={submitButtonRef}
-        type="button"
-        onClick={onSubmit}
-        disabled={!canSubmit}
-        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 disabled:cursor-not-allowed disabled:bg-slate-300"
-      >
-        정답 확인
-      </button>
     </div>
   );
 }