답 입력 완료시 정답/오답 내용 출력

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}
           />

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"

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";

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, {
+    const correctResult = gradeAnswer(problem, {
       a: problem.distributedA,
       b: problem.distributedB,
-      }).correct,
-    ).toBe(true);
+    });
+
+    expect(correctResult.correct).toBe(true);
+    expect(correctResult.userAnswer).toEqual([
+      problem.distributedA,
+      problem.distributedB,
+    ]);
 
     expect(
       gradeAnswer(problem, {

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],
   };
 }

lib/engine/types.ts

@@ -18,5 +18,6 @@ export interface UserAnswer {
 
 export interface GradeResult {
   correct: boolean;
+  userAnswer: [number, number];
   correctAnswer: [number, number];
 }