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

2026-05-26 18:25:57 +09:00
parent 51a96db269
commit 2427b458dc
4 changed files with 123 additions and 43 deletions
@@ -0,0 +1,64 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import KatexRenderer from "@/components/math/KatexRenderer";
+
+interface AnswerResultLineProps {
+  expressionLatex: string;
+  userAnswerLatex: string;
+  correctAnswerLatex: string;
+  correct: boolean;
+  prefix?: ReactNode;
+}
+
+export default function AnswerResultLine({
+  expressionLatex,
+  userAnswerLatex,
+  correctAnswerLatex,
+  correct,
+  prefix,
+}: AnswerResultLineProps) {
+  return (
+    <li
+      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 ${
+        correct
+          ? "bg-emerald-100 text-emerald-950 ring-emerald-200"
+          : "bg-red-100 text-red-950 ring-red-200"
+      }`}
+    >
+      {prefix}
+      <KatexRenderer latex={expressionLatex} output="mathml" />
+      <span aria-hidden="true">=</span>
+      <span className={correct ? undefined : "text-red-700"}>
+        <KatexRenderer latex={userAnswerLatex} output="mathml" />
+      </span>
+      {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={correctAnswerLatex} output="mathml" />
+            </span>
+            )
+          </span>
+        </>
+      )}
+    </li>
+  );
+}