모바일 환경에서만 실행되는 가상 키보드 추가

app/(game)/play/PlayClient.tsx

@@ -16,13 +16,14 @@ import KatexRenderer from "@/components/math/KatexRenderer";
 import { useGameStore } from "@/store/gameStore";
 import type { ProblemCount } from "@/store/gameStore";
 
-const MOBILE_BREAKPOINT_QUERY = "(min-width: 640px)";
+const DESKTOP_INPUT_DEVICE_QUERY = "(any-hover: hover) and (any-pointer: fine)";
 const MOBILE_KEYBOARD_SPACER_OFFSET = 480;
+const REAL_NUMBER_PATTERN = /^-?\d+(?:\.\d+)?$/;
 
 function parseAnswer(value: string) {
   const trimmed = value.trim();
 
-  if (!/^-?\d+$/.test(trimmed)) return null;
+  if (!REAL_NUMBER_PATTERN.test(trimmed)) return null;
 
   return Number(trimmed);
 }
@@ -108,7 +109,7 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
     const parsedB = parseAnswer(answerB);
 
     if (parsedA === null || parsedB === null) {
-      setInputError("두 칸 모두 정수로 입력하세요.");
+      setInputError("두 칸 모두 실수로 입력하세요.");
       return;
     }
 
@@ -128,7 +129,7 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
   }, []);
 
   const scrollKatexToViewportTop = useCallback(() => {
-    if (window.matchMedia(MOBILE_BREAKPOINT_QUERY).matches) return;
+    if (window.matchMedia(DESKTOP_INPUT_DEVICE_QUERY).matches) return;
 
     function alignKatex() {
       const katexElement =
@@ -301,7 +302,6 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
         {!submitted && mobileFocusSpacerHeight > 0 ? (
           <div
             aria-hidden="true"
-            className="sm:hidden"
             style={{ height: mobileFocusSpacerHeight }}
           />
         ) : null}

components/game/AnswerForm.tsx

@@ -3,14 +3,32 @@
 import {
   forwardRef,
   useCallback,
+  useEffect,
   useId,
   useImperativeHandle,
   useRef,
+  useState,
 } from "react";
-import type { FormEvent } from "react";
+import type { FocusEvent, FormEvent } from "react";
 
 export type ActiveAnswerInput = 0 | 1;
 
+const ANSWER_INPUT_PATTERN = /^-?\d*(?:\.\d*)?$/;
+const DESKTOP_INPUT_DEVICE_QUERY = "(any-hover: hover) and (any-pointer: fine)";
+const KEYPAD_KEYS = [
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "+/-",
+  "0",
+];
+
 export interface AnswerFormHandle {
   focusInput: () => void;
 }
@@ -46,6 +64,9 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
   const inputId = useId();
   const formRef = useRef<HTMLFormElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const blurTimeoutRef = useRef<number | null>(null);
+  const [keypadOpen, setKeypadOpen] = useState(false);
+  const [desktopInputDevice, setDesktopInputDevice] = useState(false);
 
   const activeAnswer = activeInput === 0 ? answerA : answerB;
   const activeLabel = activeInput === 0 ? "첫째 항" : "둘째 항";
@@ -53,6 +74,45 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
   const activeAnswerChange =
     activeInput === 0 ? onAnswerAChange : onAnswerBChange;
 
+  function updateAnswer(value: string) {
+    if (!ANSWER_INPUT_PATTERN.test(value)) return;
+
+    activeAnswerChange(value);
+  }
+
+  function handleInputFocus() {
+    if (blurTimeoutRef.current !== null) {
+      window.clearTimeout(blurTimeoutRef.current);
+      blurTimeoutRef.current = null;
+    }
+
+    setKeypadOpen(true);
+    onInputFocus?.();
+  }
+
+  function handleInputBlur(event: FocusEvent<HTMLInputElement>) {
+    const nextFocusedElement = event.relatedTarget;
+
+    if (
+      nextFocusedElement instanceof Node &&
+      formRef.current?.contains(nextFocusedElement)
+    ) {
+      return;
+    }
+
+    blurTimeoutRef.current = window.setTimeout(() => {
+      blurTimeoutRef.current = null;
+
+      if (formRef.current?.contains(document.activeElement)) {
+        setKeypadOpen(true);
+        return;
+      }
+
+      setKeypadOpen(false);
+      onInputBlur?.();
+    }, 0);
+  }
+
   const focusInput = useCallback(() => {
     const input = inputRef.current;
 
@@ -69,6 +129,23 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
 
   useImperativeHandle(ref, () => ({ focusInput }), [focusInput]);
 
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(DESKTOP_INPUT_DEVICE_QUERY);
+    const updateInputDevice = () => {
+      setDesktopInputDevice(mediaQuery.matches);
+    };
+
+    updateInputDevice();
+    mediaQuery.addEventListener("change", updateInputDevice);
+
+    return () => {
+      if (blurTimeoutRef.current !== null) {
+        window.clearTimeout(blurTimeoutRef.current);
+      }
+      mediaQuery.removeEventListener("change", updateInputDevice);
+    };
+  }, []);
+
   function setAnswer(input: ActiveAnswerInput, value: string) {
     if (input === 0) {
       onAnswerAChange(value);
@@ -84,6 +161,16 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
     focusInput();
   }
 
+  function appendKeypadValue(value: string) {
+    updateAnswer(`${activeAnswer}${value}`);
+    focusInput();
+  }
+
+  function deleteLastCharacter() {
+    updateAnswer(activeAnswer.slice(0, -1));
+    focusInput();
+  }
+
   function moveToInput(input: ActiveAnswerInput, reset = false) {
     onActiveInputChange(input);
     if (reset) {
@@ -99,6 +186,7 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
     }
 
     formRef.current?.requestSubmit();
+    focusInput();
   }
 
   const answerButtons = [
@@ -128,50 +216,26 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
           >
             {activeLabel}
           </label>
-          <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">
+          <input
-            <button
+            id={inputId}
-              type="button"
+            ref={inputRef}
-              onPointerDown={(event) => event.preventDefault()}
+            type="text"
-              onClick={toggleMinus}
+            value={activeAnswer}
-              aria-label={`${activeLabel} 음수 기호 입력`}
+            onFocus={handleInputFocus}
-              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 sm:hidden"
+            onBlur={handleInputBlur}
-            >
+            onChange={(event) => updateAnswer(event.target.value)}
-              -/+
+            onKeyDown={(event) => {
-            </button>
+              if (event.key === "Enter") {
-            <input
+                event.preventDefault();
-              id={inputId}
+                handleEnter();
-              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();
-                }
-              }}
-              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 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"
-              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 sm:hidden"
+            }}
-            >
+            autoComplete="off"
-              ↵
+            enterKeyHint={activeEnterKeyHint}
-            </button>
+            inputMode="none"
-          </div>
+            pattern="-?[0-9]*(\.[0-9]*)?"
+            className="h-12 w-full min-w-0 rounded-md border border-slate-300 bg-white px-3 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 sm:px-4"
+          />
         </div>
 
         <div
@@ -201,6 +265,64 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
             );
           })}
         </div>
+
+        {keypadOpen && !desktopInputDevice ? (
+          <div
+            className="grid grid-cols-3 gap-2"
+            role="group"
+            aria-label={`${activeLabel} 숫자 입력 키패드`}
+          >
+            {KEYPAD_KEYS.map((key) => (
+              <button
+                key={key}
+                type="button"
+                onPointerDown={(event) => event.preventDefault()}
+                onClick={() =>
+                  key === "+/-" ? toggleMinus() : appendKeypadValue(key)
+                }
+                aria-label={
+                  key === "+/-"
+                    ? `${activeLabel} 양수 음수 기호 전환`
+                    : `${activeLabel} 숫자 ${key} 입력`
+                }
+                className="inline-flex h-12 items-center justify-center rounded-md border border-slate-300 bg-white text-lg font-semibold text-slate-900 shadow-sm transition hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
+              >
+                {key}
+              </button>
+            ))}
+            <button
+              type="button"
+              onPointerDown={(event) => event.preventDefault()}
+              onClick={deleteLastCharacter}
+              aria-label={`${activeLabel} 마지막 글자 삭제`}
+              className="inline-flex h-12 items-center justify-center rounded-md border border-slate-300 bg-white text-xl font-semibold text-slate-800 shadow-sm transition hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
+            >
+              ⌫
+            </button>
+            <button
+              type="button"
+              onPointerDown={(event) => event.preventDefault()}
+              onClick={() => appendKeypadValue(".")}
+              aria-label={`${activeLabel} 소수점 입력`}
+              className="inline-flex h-12 items-center justify-center rounded-md border border-slate-300 bg-white text-lg font-semibold text-slate-900 shadow-sm transition hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
+            >
+              .
+            </button>
+            <button
+              type="button"
+              onPointerDown={(event) => event.preventDefault()}
+              onClick={handleEnter}
+              aria-label={
+                activeInput === 0
+                  ? "첫째 항 입력 완료 후 둘째 항으로 이동"
+                  : "둘째 항 입력 완료 후 제출"
+              }
+              className="col-span-2 inline-flex h-12 items-center justify-center rounded-md bg-emerald-700 text-base font-semibold text-white shadow-sm transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
+            >
+              ↵
+            </button>
+          </div>
+        ) : null}
       </div>
 
       {error ? (