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

components/game/ScoreSummary.tsx

@@ -15,50 +15,54 @@ interface ScoreSummaryProps {
   onRestart: () => void;
 }
 
-function formatAnswerPairLatex(first: number, second: number) {
-  const operator = second < 0 ? "-" : "+";
+function formatAnswerLatex(terms: number[]) {
+  return terms
+    .map((term, index) => {
+      if (index === 0) return `${term}`;
 
-  return `${first} ${operator} ${Math.abs(second)}`;
+      const operator = term < 0 ? "-" : "+";
+      return `${operator} ${Math.abs(term)}`;
+    })
+    .join(" ");
 }
 
 function renderUserAnswerPair(result: GradeResult) {
-  const secondOperator = result.userAnswer[1] < 0 ? "-" : "+";
-  const firstCorrect = result.userAnswer[0] === result.correctAnswer[0];
-  const secondCorrect = result.userAnswer[1] === result.correctAnswer[1];
-
   return (
     <span className="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
-      <span className={firstCorrect ? undefined : "text-red-700"}>
-        <KatexRenderer latex={`${result.userAnswer[0]}`} output="mathml" />
-      </span>
-      <span className={secondCorrect ? undefined : "text-red-700"}>
-        <KatexRenderer
-          latex={`${secondOperator} ${Math.abs(result.userAnswer[1])}`}
-          output="mathml"
-        />
-      </span>
+      {result.userAnswer.map((term, index) => {
+        const operator = term < 0 ? "-" : "+";
+        const correct = term === result.correctAnswer[index];
+        const displayLatex =
+          index === 0 ? `${term}` : `${operator} ${Math.abs(term)}`;
+
+        return (
+          <span key={index} className={correct ? undefined : "text-red-700"}>
+            <KatexRenderer latex={displayLatex} output="mathml" />
+          </span>
+        );
+      })}
     </span>
   );
 }
 
 function renderCorrectAnswerPair(result: GradeResult) {
-  const secondOperator = result.correctAnswer[1] < 0 ? "-" : "+";
-  const firstCorrect = result.userAnswer[0] === result.correctAnswer[0];
-  const secondCorrect = result.userAnswer[1] === result.correctAnswer[1];
-
   return (
     <span className="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
-      <span className={firstCorrect ? undefined : "font-bold text-blue-700"}>
-        <KatexRenderer latex={`${result.correctAnswer[0]}`} output="mathml" />
-      </span>
-      <span
-        className={secondCorrect ? undefined : "font-bold text-blue-700"}
-      >
-        <KatexRenderer
-          latex={`${secondOperator} ${Math.abs(result.correctAnswer[1])}`}
-          output="mathml"
-        />
-      </span>
+      {result.correctAnswer.map((term, index) => {
+        const operator = term < 0 ? "-" : "+";
+        const correct = result.userAnswer[index] === term;
+        const displayLatex =
+          index === 0 ? `${term}` : `${operator} ${Math.abs(term)}`;
+
+        return (
+          <span
+            key={index}
+            className={correct ? undefined : "font-bold text-blue-700"}
+          >
+            <KatexRenderer latex={displayLatex} output="mathml" />
+          </span>
+        );
+      })}
     </span>
   );
 }
@@ -102,10 +106,7 @@ export default function ScoreSummary({
 
         <ol className="space-y-3">
           {solvedItems.map(({ problem, result }, index) => {
-            const userAnswerLatex = formatAnswerPairLatex(
-              result.userAnswer[0],
-              result.userAnswer[1],
-            );
+            const userAnswerLatex = formatAnswerLatex(result.userAnswer);
 
             return (
               <AnswerResultLine