결과창에 정답, 오답 내용 출력

components/game/ScoreSummary.tsx

@@ -3,18 +3,40 @@
 import Link from "next/link";
 import { useEffect, useRef } from "react";
 
+import AnswerResultLine from "@/components/game/AnswerResultLine";
+import type { GradeResult, ParenthesisSignProblem } from "@/lib/engine/types";
+
 interface ScoreSummaryProps {
   correctCount: number;
   totalCount: number;
+  problems: ParenthesisSignProblem[];
+  results: (GradeResult | null)[];
   onRestart: () => void;
 }
 
+function formatLatexTermPair(first: number, second: number) {
+  const operator = second < 0 ? "-" : "+";
+
+  return `${first} ${operator} ${Math.abs(second)}`;
+}
+
 export default function ScoreSummary({
   correctCount,
   totalCount,
+  problems,
+  results,
   onRestart,
 }: ScoreSummaryProps) {
   const restartButtonRef = useRef<HTMLButtonElement>(null);
+  const solvedItems = problems
+    .map((problem, index) => ({
+      problem,
+      result: results[index],
+    }))
+    .filter(
+      (item): item is { problem: ParenthesisSignProblem; result: GradeResult } =>
+        item.result !== null,
+    );
 
   useEffect(() => {
     restartButtonRef.current?.focus();
@@ -35,6 +57,34 @@ export default function ScoreSummary({
           </p>
         </div>
 
+        <ol className="space-y-3">
+          {solvedItems.map(({ problem, result }, index) => {
+            const userAnswerLatex = formatLatexTermPair(
+              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}
+                correct={result.correct}
+                prefix={
+                  <span className="mr-1 text-sm font-bold text-slate-500">
+                    {index + 1}.
+                  </span>
+                }
+              />
+            );
+          })}
+        </ol>
+
         <div className="flex flex-wrap gap-3">
           <button
             ref={restartButtonRef}