문제 풀이 화면 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"

components/game/FeedbackPanel.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useEffect, useRef } from "react";
+
 import KatexRenderer from "@/components/math/KatexRenderer";
 import type { GradeResult } from "@/lib/engine/types";
 
@@ -16,6 +18,12 @@ export default function FeedbackPanel({
   isLastProblem,
   onNext,
 }: FeedbackPanelProps) {
+  const nextButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    nextButtonRef.current?.focus();
+  }, []);
+
   return (
     <div
       className={`rounded-md p-6 shadow-sm ring-1 ${
@@ -31,6 +39,7 @@ export default function FeedbackPanel({
         <KatexRenderer latex={answerLatex} />
       </div>
       <button
+        ref={nextButtonRef}
         type="button"
         onClick={onNext}
         className="mt-5 inline-flex h-11 items-center justify-center rounded-md bg-slate-950 px-5 text-base font-semibold text-white transition hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2"

components/game/ScoreSummary.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { useEffect, useRef } from "react";
 
 interface ScoreSummaryProps {
   correctCount: number;
@@ -13,6 +14,12 @@ export default function ScoreSummary({
   totalCount,
   onRestart,
 }: ScoreSummaryProps) {
+  const restartButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    restartButtonRef.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">
@@ -30,6 +37,7 @@ export default function ScoreSummary({
 
         <div className="flex flex-wrap gap-3">
           <button
+            ref={restartButtonRef}
             type="button"
             onClick={onRestart}
             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"