From 8387234f88bf4c727c9e11b0063bf237c40a1dc4 Mon Sep 17 00:00:00 2001
From: jisangs <jisangs@gmail.com>
Date: Mon, 25 May 2026 18:53:22 +0900
Subject: [PATCH] =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=ED=92=80=EC=9D=B4=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=20focus=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/game/AnswerForm.tsx    | 26 ++++++++++++++++++++++++++
 components/game/FeedbackPanel.tsx |  9 +++++++++
 components/game/ScoreSummary.tsx  |  8 ++++++++
 3 files changed, 43 insertions(+)

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<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"
diff --git a/components/game/FeedbackPanel.tsx b/components/game/FeedbackPanel.tsx
index 8f3272c..35c0d8a 100644
--- a/components/game/FeedbackPanel.tsx
+++ b/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"
diff --git a/components/game/ScoreSummary.tsx b/components/game/ScoreSummary.tsx
index 45cb27f..7d0b832 100644
--- a/components/game/ScoreSummary.tsx
+++ b/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"