괄호 앞 음수 분배 스테이지 추가

app/(game)/play/PlayClient.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import Link from "next/link";
+import { FormEvent, useEffect, useState } from "react";
+
+import KatexRenderer from "@/components/math/KatexRenderer";
+import { useGameStore } from "@/store/gameStore";
+
+function parseAnswer(value: string) {
+  if (value.trim() === "") return null;
+
+  const parsed = Number.parseInt(value, 10);
+  return Number.isNaN(parsed) ? null : parsed;
+}
+
+export default function PlayClient() {
+  const session = useGameStore((state) => state.session);
+  const initSession = useGameStore((state) => state.initSession);
+  const submitAnswer = useGameStore((state) => state.submitAnswer);
+  const nextProblem = useGameStore((state) => state.nextProblem);
+  const resetSession = useGameStore((state) => state.resetSession);
+
+  const [answerA, setAnswerA] = useState("");
+  const [answerB, setAnswerB] = useState("");
+  const [inputError, setInputError] = useState("");
+
+  const currentProblem = session?.problems[session.currentIndex] ?? null;
+  const currentResult = session?.results[session.currentIndex] ?? null;
+  const isComplete = Boolean(
+    session && session.currentIndex >= session.problems.length,
+  );
+  const correctCount =
+    session?.results.filter((result) => result?.correct).length ?? 0;
+  const totalCount = session?.problems.length ?? 0;
+
+  useEffect(() => {
+    if (session === null) {
+      initSession();
+    }
+  }, [initSession, session]);
+
+  useEffect(() => {
+    setAnswerA("");
+    setAnswerB("");
+    setInputError("");
+  }, [currentProblem?.key]);
+
+  function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    if (currentResult || !currentProblem) return;
+
+    const parsedA = parseAnswer(answerA);
+    const parsedB = parseAnswer(answerB);
+
+    if (parsedA === null || parsedB === null) {
+      setInputError("두 칸 모두 정수로 입력하세요.");
+      return;
+    }
+
+    setInputError("");
+    submitAnswer({ a: parsedA, b: parsedB });
+  }
+
+  if (!session) {
+    return (
+      <main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
+        <section className="mx-auto w-full max-w-3xl">
+          <p className="text-lg font-semibold text-slate-700">
+            문제를 준비하고 있습니다.
+          </p>
+        </section>
+      </main>
+    );
+  }
+
+  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>
+    );
+  }
+
+  if (!currentProblem) {
+    return (
+      <main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
+        <section className="mx-auto w-full max-w-3xl">
+          <p className="text-lg font-semibold text-slate-700">
+            현재 문제를 불러올 수 없습니다.
+          </p>
+        </section>
+      </main>
+    );
+  }
+
+  const submitted = currentResult !== null;
+  const isLastProblem = session.currentIndex === session.problems.length - 1;
+
+  return (
+    <main className="min-h-screen bg-slate-50 px-6 py-10 text-slate-950">
+      <section className="mx-auto flex w-full max-w-3xl flex-col gap-8">
+        <div className="flex flex-wrap items-center justify-between gap-4">
+          <div className="space-y-2">
+            <p className="text-sm font-semibold text-emerald-700">
+              괄호 음수 분배
+            </p>
+            <h1 className="text-3xl font-bold tracking-normal sm:text-4xl">
+              문제 풀이
+            </h1>
+          </div>
+          <p className="rounded-md bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200">
+            {session.currentIndex + 1} / {session.problems.length}
+          </p>
+        </div>
+
+        <div className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8">
+          <p className="mb-4 text-sm font-semibold text-slate-500">
+            괄호를 풀어 두 항을 순서대로 입력하세요.
+          </p>
+          <div className="text-3xl font-semibold text-slate-950 sm:text-4xl">
+            <KatexRenderer latex={currentProblem.latexBefore} displayMode />
+          </div>
+        </div>
+
+        <form
+          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>
+        ) : null}
+      </section>
+    </main>
+  );
+}

app/(game)/play/page.tsx

@@ -1,30 +1,5 @@
-import Link from "next/link";
+import PlayClient from "./PlayClient";
 
 export default function PlayPage() {
-  return (
-    <main className="flex min-h-screen items-center bg-white 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-4">
-          <p className="text-sm font-semibold text-emerald-700">
-            괄호 음수 분배
-          </p>
-          <h1 className="text-4xl font-bold tracking-normal sm:text-5xl">
-            문제 풀이
-          </h1>
-          <p className="max-w-2xl text-lg leading-8 text-slate-700">
-            다음 단계에서 괄호 앞 음수 분배 문제가 이 화면에 표시됩니다.
-          </p>
-        </div>
-
-        <div>
-          <Link
-            href="/"
-            className="inline-flex h-11 items-center justify-center rounded-md border border-slate-300 px-5 text-base font-semibold text-slate-800 transition hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
-          >
-            처음으로
-          </Link>
-        </div>
-      </section>
-    </main>
-  );
+  return <PlayClient />;
 }