모바일 화면에서 숫자 입력창 실행시 문제가 화면 위에 보여지도록 수정

app/(game)/play/PlayClient.tsx

@@ -1,9 +1,14 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { FormEvent } from "react";
+import { flushSync } from "react-dom";
 
 import AnswerForm from "@/components/game/AnswerForm";
+import type {
+  ActiveAnswerInput,
+  AnswerFormHandle,
+} from "@/components/game/AnswerForm";
 import FeedbackPanel from "@/components/game/FeedbackPanel";
 import ScoreSummary from "@/components/game/ScoreSummary";
 import StageIndicator from "@/components/game/StageIndicator";
@@ -34,8 +39,16 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
   const nextProblem = useGameStore((state) => state.nextProblem);
   const resetSession = useGameStore((state) => state.resetSession);
 
+  const problemCardRef = useRef<HTMLDivElement>(null);
+  const scrollTimeoutsRef = useRef<number[]>([]);
+  const viewportResizeCleanupRef = useRef<(() => void) | null>(null);
+  const answerFormRef = useRef<AnswerFormHandle>(null);
+
   const [answerA, setAnswerA] = useState("");
   const [answerB, setAnswerB] = useState("");
+  const [activeInput, setActiveInput] = useState<ActiveAnswerInput>(0);
+  const [focusInputOnFormMount, setFocusInputOnFormMount] = useState(false);
+  const [mobileFocusSpacerHeight, setMobileFocusSpacerHeight] = useState(0);
   const [inputError, setInputError] = useState("");
 
   const sessionProblemCount = session?.problems.length ?? null;
@@ -69,9 +82,19 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
   useEffect(() => {
     setAnswerA("");
     setAnswerB("");
+    setActiveInput(0);
     setInputError("");
   }, [currentProblem?.key]);
 
+  useEffect(() => {
+    return () => {
+      scrollTimeoutsRef.current.forEach((timeoutId) => {
+        window.clearTimeout(timeoutId);
+      });
+      viewportResizeCleanupRef.current?.();
+    };
+  }, []);
+
   function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
 
@@ -89,6 +112,93 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
     submitAnswer({ a: parsedA, b: parsedB });
   }
 
+  function handleNextProblem() {
+    setFocusInputOnFormMount(true);
+    flushSync(() => {
+      nextProblem();
+    });
+    answerFormRef.current?.focusInput();
+  }
+
+  const scrollKatexToViewportTop = useCallback(() => {
+    if (window.matchMedia("(min-width: 640px)").matches) return;
+
+    function alignKatex() {
+      const katexElement =
+        problemCardRef.current?.querySelector<HTMLElement>("span.katex");
+
+      if (!katexElement) return;
+
+      const rect = katexElement.getBoundingClientRect();
+      const scrollElement =
+        document.scrollingElement ?? document.documentElement;
+      const elementDocumentTop = window.pageYOffset + rect.top;
+      const maxScrollTop = Math.max(
+        0,
+        scrollElement.scrollHeight - window.innerHeight,
+      );
+      const scrollTop = Math.min(
+        maxScrollTop,
+        Math.max(0, elementDocumentTop),
+      );
+
+      if (Math.abs(window.pageYOffset - scrollTop) < 4) return;
+
+      scrollElement.scrollTop = scrollTop;
+      document.body.scrollTop = scrollTop;
+      window.scrollTo(0, scrollTop);
+    }
+
+    const visualViewport = window.visualViewport;
+    const keyboardHeight = Math.max(
+      0,
+      window.innerHeight -
+        (visualViewport?.height ?? window.innerHeight) -
+        (visualViewport?.offsetTop ?? 0),
+    );
+
+    setMobileFocusSpacerHeight(
+      Math.max(window.innerHeight, keyboardHeight + 480),
+    );
+
+    scrollTimeoutsRef.current.forEach((timeoutId) => {
+      window.clearTimeout(timeoutId);
+    });
+    scrollTimeoutsRef.current = [];
+    viewportResizeCleanupRef.current?.();
+    viewportResizeCleanupRef.current = null;
+
+    if (visualViewport) {
+      let settleTimeoutId: number | null = null;
+
+      const handleViewportResize = () => {
+        if (settleTimeoutId !== null) {
+          window.clearTimeout(settleTimeoutId);
+        }
+
+        settleTimeoutId = window.setTimeout(() => {
+          alignKatex();
+        }, 180);
+      };
+
+      visualViewport.addEventListener("resize", handleViewportResize);
+      viewportResizeCleanupRef.current = () => {
+        visualViewport.removeEventListener("resize", handleViewportResize);
+        if (settleTimeoutId !== null) {
+          window.clearTimeout(settleTimeoutId);
+        }
+      };
+    }
+
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(alignKatex);
+    });
+    [900, 1300].forEach((delay) => {
+      const timeoutId = window.setTimeout(alignKatex, delay);
+      scrollTimeoutsRef.current.push(timeoutId);
+    });
+  }, []);
+
   if (!session || sessionNeedsInit) {
     return (
       <main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
@@ -144,7 +254,10 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
           />
         </div>
 
-        <div className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8">
+        <div
+          ref={problemCardRef}
+          className="rounded-md bg-white px-6 pt-6 pb-2 shadow-sm ring-1 ring-slate-200 sm:p-8"
+        >
           <p className="mb-4 text-sm font-semibold text-slate-500">
             괄호를 풀어 두 항을 순서대로 입력하세요.
           </p>
@@ -153,22 +266,38 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
           </div>
         </div>
 
-        <AnswerForm
+        {!submitted ? (
-          answerA={answerA}
+          <AnswerForm
-          answerB={answerB}
+            ref={answerFormRef}
-          disabled={submitted}
+            answerA={answerA}
-          error={inputError}
+            answerB={answerB}
-          onAnswerAChange={setAnswerA}
+            activeInput={activeInput}
-          onAnswerBChange={setAnswerB}
+            disabled={submitted}
-          onSubmit={handleSubmit}
+            error={inputError}
-        />
+            focusOnMount={focusInputOnFormMount}
+            onActiveInputChange={setActiveInput}
+            onAnswerAChange={setAnswerA}
+            onAnswerBChange={setAnswerB}
+            onInputBlur={() => setMobileFocusSpacerHeight(0)}
+            onInputFocus={scrollKatexToViewportTop}
+            onSubmit={handleSubmit}
+          />
+        ) : null}
 
         {currentResult ? (
           <FeedbackPanel
             result={currentResult}
             answerLatex={currentProblem.latexAfter}
             isLastProblem={isLastProblem}
-            onNext={nextProblem}
+            onNext={handleNextProblem}
+          />
+        ) : null}
+
+        {!submitted && mobileFocusSpacerHeight > 0 ? (
+          <div
+            aria-hidden="true"
+            className="sm:hidden"
+            style={{ height: mobileFocusSpacerHeight }}
           />
         ) : null}
       </section>

components/game/AnswerForm.tsx

@@ -1,93 +1,225 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+} from "react";
 import type { FormEvent } from "react";
 
+export type ActiveAnswerInput = 0 | 1;
+
+export interface AnswerFormHandle {
+  focusInput: () => void;
+}
+
 interface AnswerFormProps {
   answerA: string;
   answerB: string;
+  activeInput: ActiveAnswerInput;
   disabled: boolean;
   error: string;
+  focusOnMount?: boolean;
   onAnswerAChange: (value: string) => void;
   onAnswerBChange: (value: string) => void;
+  onActiveInputChange: (input: ActiveAnswerInput) => void;
+  onInputBlur?: () => void;
+  onInputFocus?: () => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
 }
 
-export default function AnswerForm({
+const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function AnswerForm(
-  answerA,
+  {
-  answerB,
+    answerA,
-  disabled,
+    answerB,
-  error,
+    activeInput,
-  onAnswerAChange,
+    disabled,
-  onAnswerBChange,
+    error,
-  onSubmit,
+    focusOnMount = false,
-}: AnswerFormProps) {
+    onAnswerAChange,
-  const firstInputRef = useRef<HTMLInputElement>(null);
+    onAnswerBChange,
-  const secondInputRef = useRef<HTMLInputElement>(null);
+    onActiveInputChange,
-  const submitButtonRef = useRef<HTMLButtonElement>(null);
+    onInputBlur,
+    onInputFocus,
+    onSubmit,
+  },
+  ref,
+) {
+  const inputId = useId();
+  const formRef = useRef<HTMLFormElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const activeAnswer = activeInput === 0 ? answerA : answerB;
+  const activeLabel = activeInput === 0 ? "첫째 항" : "둘째 항";
+  const activeEnterKeyHint = activeInput === 0 ? "next" : "done";
+  const activeAnswerChange =
+    activeInput === 0 ? onAnswerAChange : onAnswerBChange;
+
+  const focusInput = useCallback(() => {
+    inputRef.current?.focus({ preventScroll: true });
+    onInputFocus?.();
+  }, [onInputFocus]);
+
+  useImperativeHandle(ref, () => ({ focusInput }), [focusInput]);
 
   useEffect(() => {
-    if (!disabled) {
+    if (!disabled && focusOnMount) {
-      firstInputRef.current?.focus();
+      window.requestAnimationFrame(() => {
+        focusInput();
+      });
     }
-  }, [disabled]);
+  }, [disabled, focusInput, focusOnMount]);
+
+  function setAnswer(input: ActiveAnswerInput, value: string) {
+    if (input === 0) {
+      onAnswerAChange(value);
+    } else {
+      onAnswerBChange(value);
+    }
+  }
+
+  function toggleMinus() {
+    activeAnswerChange(
+      activeAnswer.startsWith("-") ? activeAnswer.slice(1) : `-${activeAnswer}`,
+    );
+    focusInput();
+  }
+
+  function moveToInput(input: ActiveAnswerInput, reset = false) {
+    onActiveInputChange(input);
+    if (reset) {
+      setAnswer(input, "");
+    }
+    focusInput();
+  }
+
+  function handleEnter() {
+    if (activeInput === 0) {
+      moveToInput(1);
+      return;
+    }
+
+    formRef.current?.requestSubmit();
+  }
+
+  const answerButtons = [
+    {
+      index: 0 as const,
+      label: "첫째 항",
+      value: answerA,
+    },
+    {
+      index: 1 as const,
+      label: "둘째 항",
+      value: answerB,
+    },
+  ];
 
   return (
     <form
+      ref={formRef}
       onSubmit={onSubmit}
       className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8"
     >
-      <div className="grid gap-4 sm:grid-cols-2">
+      <div className="flex flex-col gap-4">
-        <label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
+        <div>
-          첫째 항
+          <label
-          <input
+            htmlFor={inputId}
-            ref={firstInputRef}
+            className="mb-2 block text-sm font-semibold text-slate-700"
-            value={answerA}
+          >
-            onChange={(event) => onAnswerAChange(event.target.value)}
+            {activeLabel}
-            onKeyDown={(event) => {
+          </label>
-              if (event.key === "Enter") {
+          <div className="flex h-12 w-full min-w-0 overflow-hidden rounded-md border border-slate-300 bg-white focus-within:border-emerald-600 focus-within:ring-2 focus-within:ring-emerald-200 sm:border-0 sm:focus-within:ring-0">
-                event.preventDefault();
+            <button
-                secondInputRef.current?.focus();
+              type="button"
+              disabled={disabled}
+              onPointerDown={(event) => event.preventDefault()}
+              onClick={toggleMinus}
+              aria-label={`${activeLabel} 음수 기호 입력`}
+              className="inline-flex h-full w-12 shrink-0 items-center justify-center border-r border-slate-300 px-2 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 focus:outline-none disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400 sm:hidden"
+            >
+              -/+
+            </button>
+            <input
+              id={inputId}
+              ref={inputRef}
+              type="text"
+              value={activeAnswer}
+              onFocus={() => {
+                onInputFocus?.();
+              }}
+              onBlur={() => {
+                onInputBlur?.();
+              }}
+              onChange={(event) => activeAnswerChange(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  handleEnter();
+                }
+              }}
+              disabled={disabled}
+              autoComplete="off"
+              enterKeyHint={activeEnterKeyHint}
+              inputMode="numeric"
+              pattern="-?[0-9]*"
+              className="h-full min-w-0 flex-1 px-3 text-lg font-semibold text-slate-950 outline-none disabled:bg-slate-100 sm:rounded-md sm:border sm:border-slate-300 sm:px-4 sm:transition sm:focus:border-emerald-600 sm:focus:ring-2 sm:focus:ring-emerald-200"
+            />
+            <button
+              type="button"
+              disabled={disabled}
+              onPointerDown={(event) => event.preventDefault()}
+              onClick={handleEnter}
+              aria-label={
+                activeInput === 0
+                  ? "첫째 항 입력 완료 후 둘째 항으로 이동"
+                  : "둘째 항 입력 완료 후 제출"
               }
-            }}
+              className="inline-flex h-full w-12 shrink-0 items-center justify-center border-l border-slate-300 px-2 text-xl font-semibold text-slate-800 transition hover:bg-slate-100 focus:outline-none disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400 sm:hidden"
-            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"
+            </button>
-          />
+          </div>
-        </label>
+        </div>
-        <label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
+
-          둘째 항
+        <div
-          <input
+          className="inline-flex w-fit max-w-full gap-1 rounded-md border border-slate-300 bg-white p-1 shadow-sm"
-            ref={secondInputRef}
+          role="group"
-            value={answerB}
+          aria-label="입력 항 선택"
-            onChange={(event) => onAnswerBChange(event.target.value)}
+        >
-            onKeyDown={(event) => {
+          {answerButtons.map((button) => {
-              if (event.key === "Enter") {
+            const selected = activeInput === button.index;
-                event.preventDefault();
+
-                submitButtonRef.current?.click();
+            return (
-              }
+              <button
-            }}
+                key={button.index}
-            disabled={disabled}
+                type="button"
-            inputMode="numeric"
+                disabled={disabled}
-            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"
+                onPointerDown={(event) => event.preventDefault()}
-          />
+                onClick={() => moveToInput(button.index, true)}
-        </label>
+                aria-pressed={selected}
+                aria-label={`${button.label} 다시 입력`}
+                className={`inline-flex h-10 min-w-20 items-center justify-center rounded px-3 text-base font-semibold transition focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:cursor-not-allowed ${
+                  selected
+                    ? "bg-emerald-700 text-white"
+                    : "text-slate-700 hover:bg-slate-100 disabled:bg-slate-100 disabled:text-slate-400"
+                }`}
+              >
+                {button.value || "?"}
+              </button>
+            );
+          })}
+        </div>
       </div>
 
       {error ? (
         <p className="mt-3 text-sm font-semibold text-red-700">{error}</p>
       ) : null}
-
-      <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"
-        >
-          제출
-        </button>
-      </div>
     </form>
   );
-}
+});
+
+export default AnswerForm;

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "postbuild": "mkdir -p .next/standalone/.next && cp -R .next/static .next/standalone/.next/static",
     "start": "next start",
     "test": "vitest run",
     "lint": "next lint"