리팩토링: 코드 최적화

2026-05-25 18:42:13 +09:00
parent 5ee33bf0d3
commit d56cada1ec
11 changed files with 215 additions and 175 deletions
@@ -0,0 +1,42 @@
+"use client";
+
+import KatexRenderer from "@/components/math/KatexRenderer";
+import type { GradeResult } from "@/lib/engine/types";
+
+interface FeedbackPanelProps {
+  result: GradeResult;
+  answerLatex: string;
+  isLastProblem: boolean;
+  onNext: () => void;
+}
+
+export default function FeedbackPanel({
+  result,
+  answerLatex,
+  isLastProblem,
+  onNext,
+}: FeedbackPanelProps) {
+  return (
+    <div
+      className={`rounded-md p-6 shadow-sm ring-1 ${
+        result.correct
+          ? "bg-emerald-50 text-emerald-950 ring-emerald-200"
+          : "bg-red-50 text-red-950 ring-red-200"
+      }`}
+    >
+      <p className="text-lg font-bold">
+        {result.correct ? "정답입니다." : "오답입니다."}
+      </p>
+      <div className="mt-3 text-xl font-semibold">
+        <KatexRenderer latex={answerLatex} />
+      </div>
+      <button
+        type="button"
+        onClick={onNext}
+        className="mt-5 inline-flex h-11 items-center justify-center rounded-md bg-slate-950 px-5 text-base font-semibold text-white transition hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"
+      >
+        {isLastProblem ? "결과 보기" : "다음 문제"}
+      </button>
+    </div>
+  );
+}