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

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"