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

2026-05-27 18:09:59 +09:00
parent 8efe618a31
commit 326da377c9
2 changed files with 171 additions and 49 deletions
@@ -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}
@@ -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">
-            <button
-              type="button"
-              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 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();
-                }
-              }}
-              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
-                  ? "첫째 항 입력 완료 후 둘째 항으로 이동"
-                  : "둘째 항 입력 완료 후 제출"
+          <input
+            id={inputId}
+            ref={inputRef}
+            type="text"
+            value={activeAnswer}
+            onFocus={handleInputFocus}
+            onBlur={handleInputBlur}
+            onChange={(event) => updateAnswer(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                handleEnter();
              }
-              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"
-            >
-              ↵
-            </button>
-          </div>
+            }}
+            autoComplete="off"
+            enterKeyHint={activeEnterKeyHint}
+            inputMode="none"
+            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 ? (