math-quiz/app/(game)/number-parentheses/NumberParenthesesClient.tsx

"use client";

import Link from "next/link";
import { useEffect, useRef } from "react";

import { useGameStore } from "@/store/gameStore";
import type { ProblemCount } from "@/store/gameStore";

const problemCounts: ProblemCount[] = [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 NumberParenthesesClient() {
  const startLinkRef = useRef<HTMLAnchorElement>(null);
  const selectedProblemCount = useGameStore(
    (state) => state.selectedProblemCount,
  );
  const setProblemCount = useGameStore((state) => state.setProblemCount);
  const initSession = useGameStore((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">
            정수로 이루어진 괄호식을 풀며 음수 분배와 부호 변화를
            연습합니다.
          </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={`/number-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>현재는 소괄호 숫자 문제만 선택할 수 있습니다.</p>
        </div>
      </section>
    </main>
  );
}