문제 풀이 화면 focus 조정

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<HTMLInputElement>(null);
+  const secondInputRef = useRef<HTMLInputElement>(null);
+  const submitButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!disabled) {
+      firstInputRef.current?.focus();
+    }
+  }, [disabled]);
+
   return (
     <form
       onSubmit={onSubmit}
@@ -30,8 +41,15 @@ export default function AnswerForm({
         <label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
           첫째 항
           <input
+            ref={firstInputRef}
             value={answerA}
             onChange={(event) => 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({
         <label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
           둘째 항
           <input
+            ref={secondInputRef}
             value={answerB}
             onChange={(event) => onAnswerBChange(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                submitButtonRef.current?.click();
+              }
+            }}
             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"
@@ -55,6 +80,7 @@ export default function AnswerForm({
 
       <div className="mt-6 flex flex-wrap gap-3">
         <button
+          ref={submitButtonRef}
           type="submit"
           disabled={disabled}
           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 disabled:cursor-not-allowed disabled:bg-slate-300"