diff --git a/components/game/AnswerForm.tsx b/components/game/AnswerForm.tsx index 871261e..a952045 100644 --- a/components/game/AnswerForm.tsx +++ b/components/game/AnswerForm.tsx @@ -1,5 +1,6 @@ "use client"; +import { useEffect, useRef } from "react"; import type { FormEvent } from "react"; interface AnswerFormProps { @@ -21,6 +22,16 @@ export default function AnswerForm({ onAnswerBChange, onSubmit, }: AnswerFormProps) { + const firstInputRef = useRef(null); + const secondInputRef = useRef(null); + const submitButtonRef = useRef(null); + + useEffect(() => { + if (!disabled) { + firstInputRef.current?.focus(); + } + }, [disabled]); + return (
첫째 항 onAnswerAChange(event.target.value)} + onKeyDown={(event) => { + if (event.key === "Enter") { + event.preventDefault(); + secondInputRef.current?.focus(); + } + }} disabled={disabled} inputMode="numeric" className="h-12 rounded-md border border-slate-300 px-4 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 disabled:bg-slate-100" @@ -40,8 +58,15 @@ export default function AnswerForm({