diff --git a/AGENTS.md b/AGENTS.md index 53082e9..d83f0e8 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -92,13 +92,15 @@ prisma/ ### 접근성 / 키보드 조작 - 문제 풀이 화면은 키보드만으로 진행할 수 있어야 한다. -- 문제 풀이 화면은 모든 항을 하나의 공유 input group으로 입력한다. -- input group 아래에는 각 항의 입력값 버튼을 버튼 그룹으로 표시한다. 현재 입력 중인 항은 `aria-pressed`로 표시하고, 비어 있는 항은 `?`로 표시한다. -- 첫째 항에서 Enter를 누르면 같은 input group이 둘째 항 입력으로 전환된다. +- 문제 풀이 화면은 모든 항을 하나의 공유 input으로 입력한다. +- input 아래에는 각 항의 입력값 버튼을 버튼 그룹으로 표시한다. 현재 입력 중인 항은 `aria-pressed`로 표시하고, 비어 있는 항은 `?`로 표시한다. +- 첫째 항에서 Enter를 누르면 같은 input이 둘째 항 입력으로 전환된다. - 둘째 항에서 Enter를 누르면 제출 동작을 실행한다. 별도 제출 버튼이 없어도 form submit 흐름이 유지되어야 한다. -- 모바일 화면에서는 input group에 `-/+` 버튼과 `↵` 버튼을 표시한다. `sm` 이상 화면에서는 물리 키보드 사용을 전제로 이 보조 버튼들을 숨긴다. +- 터치 기반 입력 환경에서는 input focus 시 커스텀 숫자 키패드를 표시한다. 키패드는 숫자, `+/-`, `.`, `⌫`, `↵` 버튼을 제공한다. +- 마우스/트랙패드처럼 hover 가능한 정밀 포인터가 있는 환경은 물리 키보드 사용 환경으로 간주하고 커스텀 숫자 키패드를 숨긴다. 웹 표준 API로 물리 키보드 연결 여부 자체를 안정적으로 판별할 수 없으므로 해상도 기준으로 분기하지 않는다. +- 입력 중에는 `-`, `1.` 같은 임시 값을 허용할 수 있지만 제출 시에는 정상적인 양의 실수 또는 음의 실수 표현만 통과시킨다. - 문제 풀이 화면 최초 진입 시 모바일 키보드를 강제로 열지 않는다. 사용자가 input을 직접 focus하거나 피드백 후 다음 문제로 넘어갈 때 input에 focus를 둔다. -- 모바일 input focus 시 가상 키보드가 올라온 뒤 `span.katex` 상단이 브라우저 화면 상단에 오도록 조정한다. +- 터치 기반 입력 환경에서 input focus 시 `span.katex` 상단이 브라우저 화면 상단에 오도록 조정한다. - 정답·오답 피드백이 표시되면 다음 진행 버튼에 focus를 둔다. - 최종 결과 화면이 표시되면 다시 시작 버튼에 focus를 둔다. - 아이콘이나 기호만으로 상태를 표시할 때는 `aria-label`, `sr-only` 텍스트 등으로 의미를 함께 제공한다. diff --git a/README.md b/README.md index 416618e..6f99a00 100644 --- a/README.md +++ b/README.md @@ -57,14 +57,18 @@ - 오답 항목은 오답 색상 박스, 붉은색 입력값, `×`, 굵은 정답값을 함께 표시합니다. - 결과 화면은 지금까지 푼 문제를 `문제 = 내가 입력한 답` 형식으로 다시 보여주고, 정답·오답 표시 규칙을 피드백 화면과 공유합니다. - 키보드 흐름을 지원합니다. - - 모든 항은 하나의 input group에서 순서대로 입력 - - 첫째 항 Enter → 같은 input group이 둘째 항 입력으로 전환 + - 모든 항은 하나의 input에서 순서대로 입력 + - 첫째 항 Enter → 같은 input이 둘째 항 입력으로 전환 - 둘째 항 Enter → 제출 - 피드백 화면 → 다음 문제/결과 보기 버튼에 focus - 다음 문제 이동 후 → input에 focus - 결과 화면 → 다시 시작 버튼에 focus -- input group 아래에는 각 항의 입력값 버튼이 표시됩니다. 비어 있는 항은 `?`로 표시하고, 버튼을 누르면 해당 항을 초기화한 뒤 다시 입력합니다. -- 모바일 화면에서는 `-/+`와 `↵` 보조 버튼을 표시하고, input focus 후 가상 키보드가 올라오면 문제 수식이 화면 상단에 오도록 스크롤 위치를 조정합니다. +- input 아래에는 각 항의 입력값 버튼이 표시됩니다. 비어 있는 항은 `?`로 표시하고, 버튼을 누르면 해당 항을 초기화한 뒤 다시 입력합니다. +- 터치 기반 입력 환경에서는 input focus 후 커스텀 숫자 키패드를 표시합니다. + - 키패드는 숫자, `+/-`, `.`, `⌫`, `↵` 버튼을 제공합니다. + - `↵`는 첫째 항에서 둘째 항으로 이동하고, 둘째 항에서 제출합니다. + - 마우스/트랙패드처럼 hover 가능한 정밀 포인터가 있는 환경은 물리 키보드 사용 환경으로 간주해 키패드를 숨깁니다. +- 입력 중에는 `-`, `1.` 같은 임시 값을 허용하지만, 제출 시에는 정상적인 양의 실수 또는 음의 실수 표현만 통과합니다. --- diff --git a/app/(game)/play/PlayClient.tsx b/app/(game)/play/PlayClient.tsx index 75a41df..e0c2cca 100644 --- a/app/(game)/play/PlayClient.tsx +++ b/app/(game)/play/PlayClient.tsx @@ -12,12 +12,11 @@ import type { import FeedbackPanel from "@/components/game/FeedbackPanel"; import ScoreSummary from "@/components/game/ScoreSummary"; import StageIndicator from "@/components/game/StageIndicator"; +import { DESKTOP_INPUT_DEVICE_QUERY } from "@/lib/input-device"; import KatexRenderer from "@/components/math/KatexRenderer"; import { useGameStore } from "@/store/gameStore"; import type { ProblemCount } from "@/store/gameStore"; -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) { @@ -44,14 +43,11 @@ export default function PlayClient({ problemCount }: PlayClientProps) { const resetSession = useGameStore((state) => state.resetSession); const problemCardRef = useRef(null); - const scrollTimeoutsRef = useRef([]); - const viewportResizeCleanupRef = useRef<(() => void) | null>(null); const answerFormRef = useRef(null); const [answerA, setAnswerA] = useState(""); const [answerB, setAnswerB] = useState(""); const [activeInput, setActiveInput] = useState(0); - const [mobileFocusSpacerHeight, setMobileFocusSpacerHeight] = useState(0); const [inputError, setInputError] = useState(""); const sessionProblemCount = session?.problems.length ?? null; @@ -89,17 +85,6 @@ export default function PlayClient({ problemCount }: PlayClientProps) { setInputError(""); }, [currentProblem?.key]); - const clearViewportFocusCleanup = useCallback(() => { - scrollTimeoutsRef.current.forEach((timeoutId) => { - window.clearTimeout(timeoutId); - }); - scrollTimeoutsRef.current = []; - viewportResizeCleanupRef.current?.(); - viewportResizeCleanupRef.current = null; - }, []); - - useEffect(() => clearViewportFocusCleanup, [clearViewportFocusCleanup]); - function handleSubmit(event: FormEvent) { event.preventDefault(); @@ -124,10 +109,6 @@ export default function PlayClient({ problemCount }: PlayClientProps) { answerFormRef.current?.focusInput(); } - const handleInputBlur = useCallback(() => { - setMobileFocusSpacerHeight(0); - }, []); - const scrollKatexToViewportTop = useCallback(() => { if (window.matchMedia(DESKTOP_INPUT_DEVICE_QUERY).matches) return; @@ -157,53 +138,10 @@ export default function PlayClient({ problemCount }: PlayClientProps) { 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 + MOBILE_KEYBOARD_SPACER_OFFSET, - ), - ); - - clearViewportFocusCleanup(); - - 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); - }); - }, [clearViewportFocusCleanup]); + }, []); if (!session || sessionNeedsInit) { return ( @@ -284,7 +222,6 @@ export default function PlayClient({ problemCount }: PlayClientProps) { onActiveInputChange={setActiveInput} onAnswerAChange={setAnswerA} onAnswerBChange={setAnswerB} - onInputBlur={handleInputBlur} onInputFocus={scrollKatexToViewportTop} onSubmit={handleSubmit} /> @@ -298,13 +235,6 @@ export default function PlayClient({ problemCount }: PlayClientProps) { onNext={handleNextProblem} /> ) : null} - - {!submitted && mobileFocusSpacerHeight > 0 ? ( -