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

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