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

2026-05-31 13:14:33 +09:00
parent a73a9afcc3
commit e148a957ea
3 changed files with 184 additions and 271 deletions
@@ -0,0 +1,161 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useRef } from "react";
+
+export type PreparationProblemCount = 5 | 10;
+
+interface ParenthesesPreparationClientProps {
+  eyebrow: string;
+  title: string;
+  description: string;
+  notice: string;
+  playHref: string;
+  selectedProblemCount: PreparationProblemCount;
+  onProblemCountChange: (count: PreparationProblemCount) => void;
+  onStart: () => void;
+}
+
+const problemCounts: PreparationProblemCount[] = [5, 10];
+
+const bracketKinds = [
+  {
+    label: "( )",
+    name: "소괄호",
+    selected: true,
+    disabled: false,
+  },
+  {
+    label: "{ }",
+    name: "중괄호",
+    selected: false,
+    disabled: true,
+  },
+  {
+    label: "[ ]",
+    name: "대괄호",
+    selected: false,
+    disabled: true,
+  },
+];
+
+export default function ParenthesesPreparationClient({
+  eyebrow,
+  title,
+  description,
+  notice,
+  playHref,
+  selectedProblemCount,
+  onProblemCountChange,
+  onStart,
+}: ParenthesesPreparationClientProps) {
+  const startLinkRef = useRef<HTMLAnchorElement>(null);
+
+  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">{eyebrow}</p>
+          <h1 className="text-4xl font-bold tracking-normal sm:text-5xl">
+            {title}
+          </h1>
+          <p className="max-w-2xl text-lg leading-8 text-slate-700">
+            {description}
+          </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={() => onProblemCountChange(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={playHref}
+              onClick={onStart}
+              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>{notice}</p>
+        </div>
+      </section>
+    </main>
+  );
+}