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

components/game/VariableScoreSummary.tsx

@@ -21,14 +21,10 @@ interface VariableScoreSummaryProps {
 }
 
 function renderTermPair(
-  terms: [DistributedVariableTerm | null, DistributedVariableTerm | null],
-  comparisonTerms: [DistributedVariableTerm | null, DistributedVariableTerm | null],
+  terms: (DistributedVariableTerm | null)[],
+  comparisonTerms: (DistributedVariableTerm | null)[],
   mode: "user" | "correct",
 ) {
-  const secondTerm = terms[1];
-  const secondOperator =
-    secondTerm && secondTerm.coefficient < 0 ? "-" : "+";
-
   return (
     <span className="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
       {terms.map((term, index) => {
@@ -49,10 +45,9 @@ function renderTermPair(
             : correct
               ? undefined
               : "font-bold text-blue-700";
+        const operator = term.coefficient < 0 ? "-" : "+";
         const displayLatex =
-          index === 1
-            ? `${secondOperator} ${term.latex.replace(/^-/, "")}`
-            : term.latex;
+          index === 0 ? term.latex : `${operator} ${term.latex.replace(/^-/, "")}`;
 
         return (
           <span key={index} className={className}>
@@ -111,8 +106,9 @@ export default function VariableScoreSummary({
               key={problem.key}
               expressionLatex={problem.latexBefore}
               userAnswerLatex={formatVariableExpressionLatex([
-                result.userAnswer[0] ?? result.correctAnswer[0],
-                result.userAnswer[1] ?? result.correctAnswer[1],
+                ...result.correctAnswer.map(
+                  (term, termIndex) => result.userAnswer[termIndex] ?? term,
+                ),
               ])}
               correctAnswerLatex={problem.latexAfter}
               correct={result.correct}