문제 풀이 화면의 입력 항 진행 상태 표시 방법 개선

2026-05-30 18:39:22 +09:00
parent 282e4d64cf
commit 33e065301f
4 changed files with 151 additions and 104 deletions
@@ -0,0 +1,354 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import type { FocusEvent, FormEvent } from "react";
+
+import { DESKTOP_INPUT_DEVICE_QUERY } from "@/lib/input-device";
+import KatexRenderer from "@/components/math/KatexRenderer";
+
+export type ActiveAnswerInput = 0 | 1;
+
+const ANSWER_INPUT_PATTERN = /^-?\d*(?:\.\d*)?$/;
+const KEYPAD_KEYS = [
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "+/-",
+  "0",
+];
+
+export interface NumberAnswerFormHandle {
+  focusInput: () => void;
+}
+
+interface NumberAnswerFormProps {
+  answerA: string;
+  answerB: string;
+  activeInput: ActiveAnswerInput;
+  error: string;
+  pendingAnswerLabels: [string, string];
+  onAnswerAChange: (value: string) => void;
+  onAnswerBChange: (value: string) => void;
+  onActiveInputChange: (input: ActiveAnswerInput) => void;
+  onInputBlur?: () => void;
+  onInputFocus?: () => void;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+}
+
+const NumberAnswerForm = forwardRef<
+  NumberAnswerFormHandle,
+  NumberAnswerFormProps
+>(function NumberAnswerForm(
+  {
+    answerA,
+    answerB,
+    activeInput,
+    error,
+    pendingAnswerLabels,
+    onAnswerAChange,
+    onAnswerBChange,
+    onActiveInputChange,
+    onInputBlur,
+    onInputFocus,
+    onSubmit,
+  },
+  ref,
+) {
+  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 ? "첫째 항" : "둘째 항";
+  const activeDescription = `${activeLabel}의 답을 입력하세요.`;
+  const activeEnterKeyHint = activeInput === 0 ? "next" : "done";
+  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;
+
+    if (!input) return;
+
+    const wasFocused = document.activeElement === input;
+
+    input.focus({ preventScroll: true });
+
+    if (wasFocused) {
+      onInputFocus?.();
+    }
+  }, [onInputFocus]);
+
+  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);
+    } else {
+      onAnswerBChange(value);
+    }
+  }
+
+  function toggleMinus() {
+    activeAnswerChange(
+      activeAnswer.startsWith("-") ? activeAnswer.slice(1) : `-${activeAnswer}`,
+    );
+    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) {
+      setAnswer(input, "");
+    }
+    focusInput();
+  }
+
+  function handleEnter() {
+    if (activeInput === 0) {
+      moveToInput(1);
+      return;
+    }
+
+    formRef.current?.requestSubmit();
+    focusInput();
+  }
+
+  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="flex flex-col gap-4">
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <label
+            htmlFor={inputId}
+            className="text-sm font-semibold text-slate-500"
+          >
+            {activeDescription}
+          </label>
+          <ol
+            className="flex min-w-40 items-center gap-1"
+            aria-label="입력 항 진행 상태"
+          >
+            {answerButtons.map((button) => {
+              const selected = activeInput === button.index;
+              const completed = button.value !== "";
+              const displayValue =
+                button.value || pendingAnswerLabels[button.index];
+
+              return (
+                <li
+                  key={button.index}
+                  className="min-w-0 flex-1"
+                  aria-label={`${button.label} ${
+                    completed ? `입력값 ${button.value}` : "미입력"
+                  }${selected ? ", 현재 입력 중" : ""}`}
+                >
+                  <span
+                    className={`block truncate text-center text-xs font-bold ${
+                      selected || completed ? "text-emerald-800" : "text-slate-500"
+                    }`}
+                  >
+                    <KatexRenderer latex={displayValue} />
+                  </span>
+                  <span
+                    className={`mt-1 block h-1.5 rounded-full ${
+                      completed
+                        ? "bg-emerald-700"
+                        : selected
+                          ? "bg-emerald-300 ring-1 ring-emerald-700"
+                          : "bg-slate-200"
+                    }`}
+                  />
+                </li>
+              );
+            })}
+          </ol>
+        </div>
+
+        <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();
+            }
+          }}
+          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"
+        />
+
+        {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={() => 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={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={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 ? (
+        <p className="mt-3 text-sm font-semibold text-red-700">{error}</p>
+      ) : null}
+    </form>
+  );
+});
+
+export default NumberAnswerForm;