리팩토링: 코드 최적화

components/game/AnswerForm.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import type { FormEvent } from "react";
+
+interface AnswerFormProps {
+  answerA: string;
+  answerB: string;
+  disabled: boolean;
+  error: string;
+  onAnswerAChange: (value: string) => void;
+  onAnswerBChange: (value: string) => void;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+}
+
+export default function AnswerForm({
+  answerA,
+  answerB,
+  disabled,
+  error,
+  onAnswerAChange,
+  onAnswerBChange,
+  onSubmit,
+}: AnswerFormProps) {
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8"
+    >
+      <div className="grid gap-4 sm:grid-cols-2">
+        <label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
+          첫째 항
+          <input
+            value={answerA}
+            onChange={(event) => onAnswerAChange(event.target.value)}
+            disabled={disabled}
+            inputMode="numeric"
+            className="h-12 rounded-md border border-slate-300 px-4 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 disabled:bg-slate-100"
+          />
+        </label>
+        <label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
+          둘째 항
+          <input
+            value={answerB}
+            onChange={(event) => onAnswerBChange(event.target.value)}
+            disabled={disabled}
+            inputMode="numeric"
+            className="h-12 rounded-md border border-slate-300 px-4 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 disabled:bg-slate-100"
+          />
+        </label>
+      </div>
+
+      {error ? (
+        <p className="mt-3 text-sm font-semibold text-red-700">{error}</p>
+      ) : null}
+
+      <div className="mt-6 flex flex-wrap gap-3">
+        <button
+          type="submit"
+          disabled={disabled}
+          className="inline-flex h-12 items-center justify-center rounded-md bg-emerald-700 px-6 text-base font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-slate-300"
+        >
+          제출
+        </button>
+      </div>
+    </form>
+  );
+}

components/game/FeedbackPanel.tsx

@@ -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>
+  );
+}

components/game/ScoreSummary.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import Link from "next/link";
+
+interface ScoreSummaryProps {
+  correctCount: number;
+  totalCount: number;
+  onRestart: () => void;
+}
+
+export default function ScoreSummary({
+  correctCount,
+  totalCount,
+  onRestart,
+}: ScoreSummaryProps) {
+  return (
+    <main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
+      <section className="mx-auto flex w-full max-w-3xl flex-col gap-8">
+        <div className="space-y-3">
+          <p className="text-sm font-semibold text-emerald-700">
+            괄호 음수 분배
+          </p>
+          <h1 className="text-4xl font-bold tracking-normal sm:text-5xl">
+            풀이 결과
+          </h1>
+          <p className="text-xl font-semibold text-slate-800">
+            {correctCount} / {totalCount} 정답
+          </p>
+        </div>
+
+        <div className="flex flex-wrap gap-3">
+          <button
+            type="button"
+            onClick={onRestart}
+            className="inline-flex h-12 items-center justify-center rounded-md bg-emerald-700 px-6 text-base font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
+          >
+            다시 시작
+          </button>
+          <Link
+            href="/"
+            className="inline-flex h-12 items-center justify-center rounded-md border border-slate-300 px-6 text-base font-semibold text-slate-800 transition hover:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
+          >
+            처음으로
+          </Link>
+        </div>
+      </section>
+    </main>
+  );
+}

components/math/KatexRenderer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { BlockMath, InlineMath } from "react-katex";
+import { renderToString } from "katex";
 
 interface KatexRendererProps {
   latex: string;
@@ -11,5 +11,11 @@ export default function KatexRenderer({
   latex,
   displayMode = false,
 }: KatexRendererProps) {
-  return displayMode ? <BlockMath math={latex} /> : <InlineMath math={latex} />;
+  const html = renderToString(latex, {
+    displayMode,
+    throwOnError: false,
+  });
+  const Tag = displayMode ? "div" : "span";
+
+  return <Tag dangerouslySetInnerHTML={{ __html: html }} />;
 }