괄호 안의 항을 2, 3, 4 항으로 설정하는 기능 추가

components/game/VariableChoiceAnswerForm.tsx

@@ -6,11 +6,11 @@ import KatexRenderer from "@/components/math/KatexRenderer";
 import type { VariableTermChoice } from "@/lib/engine/variable-types";
 
 interface VariableChoiceAnswerFormProps {
-  choices: [VariableTermChoice[], VariableTermChoice[]];
-  selectedChoiceIds: [string | null, string | null];
-  activeTermIndex: 0 | 1;
-  pendingChoiceLabels: [string, string];
-  onSelectChoice: (termIndex: 0 | 1, choiceId: string) => void;
+  choices: VariableTermChoice[][];
+  selectedChoiceIds: (string | null)[];
+  activeTermIndex: number;
+  pendingChoiceLabels: string[];
+  onSelectChoice: (termIndex: number, choiceId: string) => void;
 }
 
 export default function VariableChoiceAnswerForm({
@@ -29,7 +29,7 @@ export default function VariableChoiceAnswerForm({
     firstChoiceRef.current?.focus();
   }, [activeTermIndex]);
 
-  function getSelectedChoice(index: 0 | 1) {
+  function getSelectedChoice(index: number) {
     const selectedChoiceId = selectedChoiceIds[index];
 
     if (!selectedChoiceId) return null;
@@ -42,7 +42,7 @@ export default function VariableChoiceAnswerForm({
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div>
           <p className="text-sm font-semibold text-slate-500">
-            {activeTermIndex === 0 ? "첫째 항" : "둘째 항"}을 고르세요.
+            {activeTermIndex + 1}항을 고르세요.
           </p>
         </div>
         <ol
@@ -51,7 +51,7 @@ export default function VariableChoiceAnswerForm({
         >
           {selectedChoiceIds.map((choiceId, index) => {
             const selected = activeTermIndex === index;
-            const selectedChoice = getSelectedChoice(index as 0 | 1);
+            const selectedChoice = getSelectedChoice(index);
             const completed = choiceId !== null && selectedChoice !== null;
             const statusLabel =
               completed && selectedChoice
@@ -95,7 +95,7 @@ export default function VariableChoiceAnswerForm({
       <div
         className="mt-5 grid gap-3 sm:grid-cols-2"
         role="group"
-        aria-label={`${activeTermIndex === 0 ? "첫째 항" : "둘째 항"} 보기 선택`}
+        aria-label={`${activeTermIndex + 1}항 보기 선택`}
       >
         {activeChoices.map((choice, index) => {
           const selected = selectedChoiceIds[activeTermIndex] === choice.id;