From 51a96db269ca61c32eba59f871d9cbf347c2a92c Mon Sep 17 00:00:00 2001
From: jisangs <jisangs@gmail.com>
Date: Tue, 26 May 2026 18:18:43 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8B=B5=20=EC=9E=85=EB=A0=A5=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=EC=8B=9C=20=EC=A0=95=EB=8B=B5/=EC=98=A4=EB=8B=B5=20?=
 =?UTF-8?q?=EB=82=B4=EC=9A=A9=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/FeedbackPanel.tsx   | 72 ++++++++++++++++++++++++++---
 components/math/KatexRenderer.tsx   |  3 ++
 lib/engine/parenthesis-sign.test.ts | 16 ++++---
 lib/engine/parenthesis-sign.ts      |  1 +
 lib/engine/types.ts                 |  1 +
 6 files changed, 82 insertions(+), 13 deletions(-)

diff --git a/app/(game)/play/PlayClient.tsx b/app/(game)/play/PlayClient.tsx
index 2a5c6b4..e660acf 100644
--- a/app/(game)/play/PlayClient.tsx
+++ b/app/(game)/play/PlayClient.tsx
@@ -290,7 +290,7 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
         {currentResult ? (
           <FeedbackPanel
             result={currentResult}
-            answerLatex={currentProblem.latexAfter}
+            problem={currentProblem}
             isLastProblem={isLastProblem}
             onNext={handleNextProblem}
           />
diff --git a/components/game/FeedbackPanel.tsx b/components/game/FeedbackPanel.tsx
index 35c0d8a..63e2186 100644
--- a/components/game/FeedbackPanel.tsx
+++ b/components/game/FeedbackPanel.tsx
@@ -3,22 +3,38 @@
 import { useEffect, useRef } from "react";
 
 import KatexRenderer from "@/components/math/KatexRenderer";
-import type { GradeResult } from "@/lib/engine/types";
+import type { GradeResult, ParenthesisSignProblem } from "@/lib/engine/types";
 
 interface FeedbackPanelProps {
   result: GradeResult;
-  answerLatex: string;
+  problem: ParenthesisSignProblem;
   isLastProblem: boolean;
   onNext: () => void;
 }
 
+function formatSignedNumber(value: number) {
+  return value < 0 ? `(${value})` : `${value}`;
+}
+
 export default function FeedbackPanel({
   result,
-  answerLatex,
+  problem,
   isLastProblem,
   onNext,
 }: FeedbackPanelProps) {
   const nextButtonRef = useRef<HTMLButtonElement>(null);
+  const signedTerms = [
+    problem.a,
+    problem.operator === "-" ? -problem.b : problem.b,
+  ] as const;
+  const feedbackItems = signedTerms.map((term, index) => ({
+    formulaLatex: `${formatSignedNumber(
+      problem.multiplier,
+    )}\\times ${formatSignedNumber(term)}`,
+    userAnswer: result.userAnswer[index],
+    correctAnswer: result.correctAnswer[index],
+    correct: result.userAnswer[index] === result.correctAnswer[index],
+  }));
 
   useEffect(() => {
     nextButtonRef.current?.focus();
@@ -35,9 +51,53 @@ export default function FeedbackPanel({
       <p className="text-lg font-bold">
         {result.correct ? "정답입니다." : "오답입니다."}
       </p>
-      <div className="mt-3 text-xl font-semibold">
-        <KatexRenderer latex={answerLatex} />
-      </div>
+      <ul className="mt-5 space-y-3">
+        {feedbackItems.map((item, index) => (
+          <li
+            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>
+        ))}
+      </ul>
       <button
         ref={nextButtonRef}
         type="button"
diff --git a/components/math/KatexRenderer.tsx b/components/math/KatexRenderer.tsx
index 18f4567..874fd1f 100644
--- a/components/math/KatexRenderer.tsx
+++ b/components/math/KatexRenderer.tsx
@@ -5,14 +5,17 @@ import { renderToString } from "katex";
 interface KatexRendererProps {
   latex: string;
   displayMode?: boolean;
+  output?: "htmlAndMathml" | "mathml";
 }
 
 export default function KatexRenderer({
   latex,
   displayMode = false,
+  output = "htmlAndMathml",
 }: KatexRendererProps) {
   const html = renderToString(latex, {
     displayMode,
+    output,
     throwOnError: false,
   });
   const Tag = displayMode ? "div" : "span";
diff --git a/lib/engine/parenthesis-sign.test.ts b/lib/engine/parenthesis-sign.test.ts
index ebd3952..f9836ec 100644
--- a/lib/engine/parenthesis-sign.test.ts
+++ b/lib/engine/parenthesis-sign.test.ts
@@ -36,12 +36,16 @@ describe("parenthesis sign problem engine", () => {
   it("grades correct and incorrect answers", () => {
     const problem = generateProblem();
 
-    expect(
-      gradeAnswer(problem, {
-        a: problem.distributedA,
-        b: problem.distributedB,
-      }).correct,
-    ).toBe(true);
+    const correctResult = gradeAnswer(problem, {
+      a: problem.distributedA,
+      b: problem.distributedB,
+    });
+
+    expect(correctResult.correct).toBe(true);
+    expect(correctResult.userAnswer).toEqual([
+      problem.distributedA,
+      problem.distributedB,
+    ]);
 
     expect(
       gradeAnswer(problem, {
diff --git a/lib/engine/parenthesis-sign.ts b/lib/engine/parenthesis-sign.ts
index 234eb90..3bbdb22 100644
--- a/lib/engine/parenthesis-sign.ts
+++ b/lib/engine/parenthesis-sign.ts
@@ -120,6 +120,7 @@ export function gradeAnswer(
   return {
     correct:
       answer.a === problem.distributedA && answer.b === problem.distributedB,
+    userAnswer: [answer.a, answer.b],
     correctAnswer: [problem.distributedA, problem.distributedB],
   };
 }
diff --git a/lib/engine/types.ts b/lib/engine/types.ts
index eeadc29..23adb11 100644
--- a/lib/engine/types.ts
+++ b/lib/engine/types.ts
@@ -18,5 +18,6 @@ export interface UserAnswer {
 
 export interface GradeResult {
   correct: boolean;
+  userAnswer: [number, number];
   correctAnswer: [number, number];
 }