문제 풀이 화면 focus 조정

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