문제 수 선택 기능 추가 - 5문제 / 10문제

app/(game)/play/PlayClient.tsx

@@ -9,6 +9,7 @@ import ScoreSummary from "@/components/game/ScoreSummary";
 import StageIndicator from "@/components/game/StageIndicator";
 import KatexRenderer from "@/components/math/KatexRenderer";
 import { useGameStore } from "@/store/gameStore";
+import type { ProblemCount } from "@/store/gameStore";
 
 function parseAnswer(value: string) {
   const trimmed = value.trim();
@@ -18,8 +19,16 @@ function parseAnswer(value: string) {
   return Number(trimmed);
 }
 
-export default function PlayClient() {
+interface PlayClientProps {
+  problemCount: ProblemCount;
+}
+
+export default function PlayClient({ problemCount }: PlayClientProps) {
   const session = useGameStore((state) => state.session);
+  const selectedProblemCount = useGameStore(
+    (state) => state.selectedProblemCount,
+  );
+  const setProblemCount = useGameStore((state) => state.setProblemCount);
   const initSession = useGameStore((state) => state.initSession);
   const submitAnswer = useGameStore((state) => state.submitAnswer);
   const nextProblem = useGameStore((state) => state.nextProblem);
@@ -34,15 +43,28 @@ export default function PlayClient() {
   const isComplete = Boolean(
     session && session.currentIndex >= session.problems.length,
   );
+  const sessionNeedsInit =
+    session === null || session.problems.length !== problemCount;
   const correctCount =
     session?.results.filter((result) => result?.correct).length ?? 0;
   const totalCount = session?.problems.length ?? 0;
 
   useEffect(() => {
-    if (session === null) {
-      initSession();
+    if (selectedProblemCount !== problemCount) {
+      setProblemCount(problemCount);
     }
-  }, [initSession, session]);
+
+    if (sessionNeedsInit) {
+      initSession(problemCount);
+    }
+  }, [
+    initSession,
+    problemCount,
+    selectedProblemCount,
+    session,
+    sessionNeedsInit,
+    setProblemCount,
+  ]);
 
   useEffect(() => {
     setAnswerA("");
@@ -67,7 +89,7 @@ export default function PlayClient() {
     submitAnswer({ a: parsedA, b: parsedB });
   }
 
-  if (!session) {
+  if (sessionNeedsInit) {
     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">