리펙토링: 코드 최적화, 출력 양식 변경

components/game/AnswerResultLine.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import type { ReactNode } from "react";
 
 import KatexRenderer from "@/components/math/KatexRenderer";
@@ -10,6 +8,8 @@ interface AnswerResultLineProps {
   correctAnswerLatex: string;
   correct: boolean;
   prefix?: ReactNode;
+  userAnswerContent?: ReactNode;
+  correctAnswerContent?: ReactNode;
 }
 
 export default function AnswerResultLine({
@@ -18,6 +18,8 @@ export default function AnswerResultLine({
   correctAnswerLatex,
   correct,
   prefix,
+  userAnswerContent,
+  correctAnswerContent,
 }: AnswerResultLineProps) {
   return (
     <li
@@ -30,9 +32,11 @@ export default function AnswerResultLine({
       {prefix}
       <KatexRenderer latex={expressionLatex} output="mathml" />
       <span aria-hidden="true">=</span>
-      <span className={correct ? undefined : "text-red-700"}>
-        <KatexRenderer latex={userAnswerLatex} output="mathml" />
-      </span>
+      {userAnswerContent ?? (
+        <span className={correct ? undefined : "text-red-700"}>
+          <KatexRenderer latex={userAnswerLatex} output="mathml" />
+        </span>
+      )}
       {correct ? (
         <span
           aria-label="정답"
@@ -52,9 +56,11 @@ export default function AnswerResultLine({
           </span>
           <span className="text-slate-700">
             (
-            <span className="font-bold">
-              <KatexRenderer latex={correctAnswerLatex} output="mathml" />
-            </span>
+            {correctAnswerContent ?? (
+              <span className="font-bold">
+                <KatexRenderer latex={correctAnswerLatex} output="mathml" />
+              </span>
+            )}
             )
           </span>
         </>