리펙토링: 코드 최적화
This commit is contained in:
@@ -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` 텍스트 등으로 의미를 함께 제공한다.
|
||||
|
||||
@@ -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.` 같은 임시 값을 허용하지만, 제출 시에는 정상적인 양의 실수 또는 음의 실수 표현만 통과합니다.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -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<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 [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<HTMLFormElement>) {
|
||||
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 ? (
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style={{ height: mobileFocusSpacerHeight }}
|
||||
/>
|
||||
) : null}
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
|
||||
@@ -11,10 +11,11 @@ import {
|
||||
} from "react";
|
||||
import type { FocusEvent, FormEvent } from "react";
|
||||
|
||||
import { DESKTOP_INPUT_DEVICE_QUERY } from "@/lib/input-device";
|
||||
|
||||
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",
|
||||
@@ -290,15 +291,6 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
|
||||
{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()}
|
||||
@@ -308,6 +300,15 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
|
||||
>
|
||||
.
|
||||
</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()}
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
export const DESKTOP_INPUT_DEVICE_QUERY =
|
||||
"(any-hover: hover) and (any-pointer: fine)";
|
||||
Reference in New Issue
Block a user