리펙토링: 문제 준비 화면 공통 요소 묶기

app/(game)/variable-parentheses/VariableParenthesesClient.tsx

@@ -1,38 +1,9 @@
 "use client";
 
-import Link from "next/link";
-import { useEffect, useRef } from "react";
-
-import {
-  useVariableGameStore,
-  type VariableProblemCount,
-} from "@/store/variableGameStore";
-
-const problemCounts: VariableProblemCount[] = [5, 10];
-
-const bracketKinds = [
-  {
-    label: "()",
-    name: "소괄호",
-    selected: true,
-    disabled: false,
-  },
-  {
-    label: "{}",
-    name: "중괄호",
-    selected: false,
-    disabled: true,
-  },
-  {
-    label: "[]",
-    name: "대괄호",
-    selected: false,
-    disabled: true,
-  },
-];
+import ParenthesesPreparationClient from "@/components/game/ParenthesesPreparationClient";
+import { useVariableGameStore } from "@/store/variableGameStore";
 
 export default function VariableParenthesesClient() {
-  const startLinkRef = useRef<HTMLAnchorElement>(null);
   const selectedProblemCount = useVariableGameStore(
     (state) => state.selectedProblemCount,
   );
@@ -41,112 +12,16 @@ export default function VariableParenthesesClient() {
   );
   const initSession = useVariableGameStore((state) => state.initSession);
 
-  useEffect(() => {
-    startLinkRef.current?.focus();
-  }, []);
-
   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-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">
-            괄호 안의 한 항에 미지수 x가 들어간 식을 풀며 부호 변화를
-            연습합니다.
-          </p>
-        </div>
-
-        <div className="flex flex-col gap-6">
-          <fieldset className="space-y-3">
-            <legend className="text-sm font-semibold text-slate-700">
-              문제 수
-            </legend>
-            <div
-              className="inline-flex gap-1 rounded-md border border-slate-300 bg-white p-1 shadow-sm"
-              role="group"
-              aria-label="문제 수 선택"
-            >
-              {problemCounts.map((count) => {
-                const selected = selectedProblemCount === count;
-
-                return (
-                  <button
-                    key={count}
-                    type="button"
-                    onClick={() => setProblemCount(count)}
-                    aria-pressed={selected}
-                    className={`h-10 min-w-16 rounded px-4 text-base font-semibold transition focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 ${
-                      selected
-                        ? "bg-emerald-700 text-white"
-                        : "text-slate-700 hover:bg-slate-100"
-                    }`}
-                  >
-                    {count}
-                  </button>
-                );
-              })}
-            </div>
-          </fieldset>
-
-          <fieldset className="space-y-3">
-            <legend className="text-sm font-semibold text-slate-700">
-              괄호 종류
-            </legend>
-            <div
-              className="inline-flex gap-1 rounded-md border border-slate-300 bg-white p-1 shadow-sm"
-              role="group"
-              aria-label="괄호 종류 선택"
-            >
-              {bracketKinds.map((bracketKind) => (
-                <button
-                  key={bracketKind.label}
-                  type="button"
-                  disabled={bracketKind.disabled}
-                  aria-pressed={bracketKind.selected}
-                  aria-label={`${bracketKind.name} ${bracketKind.disabled ? "준비 중" : "선택됨"}`}
-                  className={`h-10 min-w-16 rounded px-4 text-base font-semibold transition focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 ${
-                    bracketKind.selected
-                      ? "bg-emerald-700 text-white"
-                      : "text-slate-700 hover:bg-slate-100"
-                  } ${
-                    bracketKind.disabled
-                      ? "cursor-not-allowed bg-slate-100 text-slate-400 hover:bg-slate-100"
-                      : ""
-                  }`}
-                >
-                  {bracketKind.label}
-                </button>
-              ))}
-            </div>
-          </fieldset>
-
-          <div className="flex flex-wrap gap-3">
-            <Link
-                ref={startLinkRef}
-                href={`/variable-parentheses/play?count=${selectedProblemCount}`}
-                onClick={() => initSession(selectedProblemCount)}
-                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"
-            >
-              연습 시작
-            </Link>
-            <Link
-              href="/"
-              className="inline-flex h-12 items-center justify-center rounded-md border border-slate-300 bg-white px-6 text-base font-semibold text-slate-700 transition hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
-            >
-              뒤로가기
-            </Link>
-          </div>
-        </div>
-
-        <div className="border-l-4 border-emerald-700 pl-4 text-sm leading-6 text-slate-600">
-          <p>현재는 소괄호와 미지수 x 문제만 선택할 수 있습니다.</p>
-        </div>
-      </section>
-    </main>
+    <ParenthesesPreparationClient
+      eyebrow="미지수 괄호 학습 준비"
+      title="미지수 괄호 풀기"
+      description="괄호 안의 한 항에 미지수 x가 들어간 식을 풀며 부호 변화를 연습합니다."
+      notice="현재는 소괄호와 미지수 x 문제만 선택할 수 있습니다."
+      playHref={`/variable-parentheses/play?count=${selectedProblemCount}`}
+      selectedProblemCount={selectedProblemCount}
+      onProblemCountChange={setProblemCount}
+      onStart={() => initSession(selectedProblemCount)}
+    />
   );
 }