From 2427b458dc3b43da4d42505c21f0183fd5d388cc Mon Sep 17 00:00:00 2001
From: jisangs <jisangs@gmail.com>
Date: Tue, 26 May 2026 18:25:57 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=B0=EA=B3=BC=EC=B0=BD=EC=97=90=20?=
 =?UTF-8?q?=EC=A0=95=EB=8B=B5,=20=EC=98=A4=EB=8B=B5=20=EB=82=B4=EC=9A=A9?=
 =?UTF-8?q?=20=EC=B6=9C=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(game)/play/PlayClient.tsx       |  2 +
 components/game/AnswerResultLine.tsx | 64 ++++++++++++++++++++++++++++
 components/game/FeedbackPanel.tsx    | 50 +++-------------------
 components/game/ScoreSummary.tsx     | 50 ++++++++++++++++++++++
 4 files changed, 123 insertions(+), 43 deletions(-)
 create mode 100644 components/game/AnswerResultLine.tsx

diff --git a/app/(game)/play/PlayClient.tsx b/app/(game)/play/PlayClient.tsx
index e660acf..7af82aa 100644
--- a/app/(game)/play/PlayClient.tsx
+++ b/app/(game)/play/PlayClient.tsx
@@ -221,6 +221,8 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
       <ScoreSummary
         correctCount={correctCount}
         totalCount={totalCount}
+        problems={session.problems}
+        results={session.results}
         onRestart={resetSession}
       />
     );
diff --git a/components/game/AnswerResultLine.tsx b/components/game/AnswerResultLine.tsx
new file mode 100644
index 0000000..8e39e7f
--- /dev/null
+++ b/components/game/AnswerResultLine.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import KatexRenderer from "@/components/math/KatexRenderer";
+
+interface AnswerResultLineProps {
+  expressionLatex: string;
+  userAnswerLatex: string;
+  correctAnswerLatex: string;
+  correct: boolean;
+  prefix?: ReactNode;
+}
+
+export default function AnswerResultLine({
+  expressionLatex,
+  userAnswerLatex,
+  correctAnswerLatex,
+  correct,
+  prefix,
+}: AnswerResultLineProps) {
+  return (
+    <li
+      className={`flex flex-wrap items-center gap-x-2 gap-y-1 rounded-md px-4 py-3 text-lg font-semibold ring-1 ring-inset ${
+        correct
+          ? "bg-emerald-100 text-emerald-950 ring-emerald-200"
+          : "bg-red-100 text-red-950 ring-red-200"
+      }`}
+    >
+      {prefix}
+      <KatexRenderer latex={expressionLatex} output="mathml" />
+      <span aria-hidden="true">=</span>
+      <span className={correct ? undefined : "text-red-700"}>
+        <KatexRenderer latex={userAnswerLatex} output="mathml" />
+      </span>
+      {correct ? (
+        <span
+          aria-label="정답"
+          role="img"
+          className="inline-flex h-7 items-center text-2xl leading-none text-emerald-700"
+        >
+          ○
+        </span>
+      ) : (
+        <>
+          <span
+            aria-label="오답"
+            role="img"
+            className="mr-2 inline-flex h-7 items-center text-2xl leading-none text-red-700"
+          >
+            ×
+          </span>
+          <span className="text-slate-700">
+            (
+            <span className="font-bold">
+              <KatexRenderer latex={correctAnswerLatex} output="mathml" />
+            </span>
+            )
+          </span>
+        </>
+      )}
+    </li>
+  );
+}
diff --git a/components/game/FeedbackPanel.tsx b/components/game/FeedbackPanel.tsx
index 63e2186..43578b6 100644
--- a/components/game/FeedbackPanel.tsx
+++ b/components/game/FeedbackPanel.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useRef } from "react";
 
-import KatexRenderer from "@/components/math/KatexRenderer";
+import AnswerResultLine from "@/components/game/AnswerResultLine";
 import type { GradeResult, ParenthesisSignProblem } from "@/lib/engine/types";
 
 interface FeedbackPanelProps {
@@ -53,49 +53,13 @@ export default function FeedbackPanel({
       </p>
       <ul className="mt-5 space-y-3">
         {feedbackItems.map((item, index) => (
-          <li
+          <AnswerResultLine
             key={index}
-            className={`flex flex-wrap items-center gap-x-2 gap-y-1 rounded-md px-4 py-3 text-lg font-semibold ring-1 ring-inset ${
-              item.correct
-                ? "bg-emerald-100 text-emerald-950 ring-emerald-200"
-                : "bg-red-100 text-red-950 ring-red-200"
-            }`}
-          >
-            <KatexRenderer latex={item.formulaLatex} output="mathml" />
-            <span aria-hidden="true">=</span>
-            <span className={item.correct ? undefined : "text-red-700"}>
-              <KatexRenderer latex={`${item.userAnswer}`} output="mathml" />
-            </span>
-            {item.correct ? (
-              <span
-                aria-label="정답"
-                role="img"
-                className="inline-flex h-7 items-center text-2xl leading-none text-emerald-700"
-              >
-                ○
-              </span>
-            ) : (
-              <>
-                <span
-                  aria-label="오답"
-                  role="img"
-                  className="mr-2 inline-flex h-7 items-center text-2xl leading-none text-red-700"
-                >
-                  ×
-                </span>
-                <span className="text-slate-700">
-                  (
-                  <span className="font-bold">
-                    <KatexRenderer
-                      latex={`${item.correctAnswer}`}
-                      output="mathml"
-                    />
-                  </span>
-                  )
-                </span>
-              </>
-            )}
-          </li>
+            expressionLatex={item.formulaLatex}
+            userAnswerLatex={`${item.userAnswer}`}
+            correctAnswerLatex={`${item.correctAnswer}`}
+            correct={item.correct}
+          />
         ))}
       </ul>
       <button
diff --git a/components/game/ScoreSummary.tsx b/components/game/ScoreSummary.tsx
index 7d0b832..be21e8f 100644
--- a/components/game/ScoreSummary.tsx
+++ b/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}