문제 풀이 화면 focus 조정

2026-05-25 18:53:22 +09:00
parent d56cada1ec
commit 8387234f88
3 changed files with 43 additions and 0 deletions
@@ -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"