리펙토링: 코드 최적화, 출력 양식 변경

components/game/ScoreSummary.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useEffect, useRef } from "react";
 
 import AnswerResultLine from "@/components/game/AnswerResultLine";
+import KatexRenderer from "@/components/math/KatexRenderer";
 import type { GradeResult, ParenthesisSignProblem } from "@/lib/engine/types";
 
 interface ScoreSummaryProps {
@@ -14,12 +15,54 @@ interface ScoreSummaryProps {
   onRestart: () => void;
 }
 
-function formatLatexTermPair(first: number, second: number) {
+function formatAnswerPairLatex(first: number, second: number) {
   const operator = second < 0 ? "-" : "+";
 
   return `${first} ${operator} ${Math.abs(second)}`;
 }
 
+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>
+    </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>
+    </span>
+  );
+}
+
 export default function ScoreSummary({
   correctCount,
   totalCount,
@@ -59,22 +102,20 @@ export default function ScoreSummary({
 
         <ol className="space-y-3">
           {solvedItems.map(({ problem, result }, index) => {
-            const userAnswerLatex = formatLatexTermPair(
+            const userAnswerLatex = formatAnswerPairLatex(
               result.userAnswer[0],
               result.userAnswer[1],
             );
-            const correctAnswerLatex = formatLatexTermPair(
-              result.correctAnswer[0],
-              result.correctAnswer[1],
-            );
 
             return (
               <AnswerResultLine
                 key={problem.key}
                 expressionLatex={problem.latexBefore}
                 userAnswerLatex={userAnswerLatex}
-                correctAnswerLatex={correctAnswerLatex}
+                correctAnswerLatex={problem.latexAfter}
                 correct={result.correct}
+                userAnswerContent={renderUserAnswerPair(result)}
+                correctAnswerContent={renderCorrectAnswerPair(result)}
                 prefix={
                   <span className="mr-1 text-sm font-bold text-slate-500">
                     {index + 1}.