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

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 next: [string | null, string | null] = [...current];
-      next[termIndex] = choiceId;
-      return next;
-    });
+    const nextSelectedChoiceIds: [string | null, string | null] = [
+      ...selectedChoiceIds,
+    ];
+    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}