리팩토링: 코드 최적화

app/(game)/play/PlayClient.tsx

@@ -1,16 +1,20 @@
 "use client";
 
-import Link from "next/link";
-import { FormEvent, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import type { FormEvent } from "react";
 
+import AnswerForm from "@/components/game/AnswerForm";
+import FeedbackPanel from "@/components/game/FeedbackPanel";
+import ScoreSummary from "@/components/game/ScoreSummary";
 import KatexRenderer from "@/components/math/KatexRenderer";
 import { useGameStore } from "@/store/gameStore";
 
 function parseAnswer(value: string) {
-  if (value.trim() === "") return null;
+  const trimmed = value.trim();
 
-  const parsed = Number.parseInt(value, 10);
-  return Number.isNaN(parsed) ? null : parsed;
+  if (!/^-?\d+$/.test(trimmed)) return null;
+
+  return Number(trimmed);
 }
 
 export default function PlayClient() {
@@ -76,37 +80,11 @@ export default function PlayClient() {
 
   if (isComplete) {
     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={resetSession}
-              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>
+      <ScoreSummary
+        correctCount={correctCount}
+        totalCount={totalCount}
+        onRestart={resetSession}
+      />
     );
   }
 
@@ -151,78 +129,23 @@ export default function PlayClient() {
           </div>
         </div>
 
-        <form
+        <AnswerForm
+          answerA={answerA}
+          answerB={answerB}
+          disabled={submitted}
+          error={inputError}
+          onAnswerAChange={setAnswerA}
+          onAnswerBChange={setAnswerB}
           onSubmit={handleSubmit}
-          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) => setAnswerA(event.target.value)}
-                disabled={submitted}
-                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) => setAnswerB(event.target.value)}
-                disabled={submitted}
-                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>
-
-          {inputError ? (
-            <p className="mt-3 text-sm font-semibold text-red-700">
-              {inputError}
-            </p>
-          ) : null}
-
-          <div className="mt-6 flex flex-wrap gap-3">
-            <button
-              type="submit"
-              disabled={submitted}
-              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>
-            <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-slate-50 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
-            >
-              처음으로
-            </Link>
-          </div>
-        </form>
+        />
 
         {currentResult ? (
-          <div
-            className={`rounded-md p-6 shadow-sm ring-1 ${
-              currentResult.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">
-              {currentResult.correct ? "정답입니다." : "오답입니다."}
-            </p>
-            <div className="mt-3 text-xl font-semibold">
-              <KatexRenderer latex={currentProblem.latexAfter} />
-            </div>
-            <button
-              type="button"
-              onClick={nextProblem}
-              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>
+          <FeedbackPanel
+            result={currentResult}
+            answerLatex={currentProblem.latexAfter}
+            isLastProblem={isLastProblem}
+            onNext={nextProblem}
+          />
         ) : null}
       </section>
     </main>