math-quiz/components/game/ParenthesesPreparationClient.tsx

"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>
  );
}