67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
"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];
|
|
|
|
export default function StartControls() {
|
|
const startLinkRef = useRef<HTMLAnchorElement>(null);
|
|
const selectedProblemCount = useGameStore(
|
|
(state) => state.selectedProblemCount,
|
|
);
|
|
const setProblemCount = useGameStore((state) => state.setProblemCount);
|
|
|
|
useEffect(() => {
|
|
startLinkRef.current?.focus();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-5">
|
|
<div>
|
|
<Link
|
|
ref={startLinkRef}
|
|
href={`/play?count=${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>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
);
|
|
}
|