모바일 화면에서 숫자 입력창 실행시 문제가 화면 위에 보여지도록 수정
This commit is contained in:
@@ -1,9 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import type { FormEvent } from "react";
|
||||
import { flushSync } from "react-dom";
|
||||
|
||||
import AnswerForm from "@/components/game/AnswerForm";
|
||||
import type {
|
||||
ActiveAnswerInput,
|
||||
AnswerFormHandle,
|
||||
} from "@/components/game/AnswerForm";
|
||||
import FeedbackPanel from "@/components/game/FeedbackPanel";
|
||||
import ScoreSummary from "@/components/game/ScoreSummary";
|
||||
import StageIndicator from "@/components/game/StageIndicator";
|
||||
@@ -34,8 +39,16 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
|
||||
const nextProblem = useGameStore((state) => state.nextProblem);
|
||||
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 [focusInputOnFormMount, setFocusInputOnFormMount] = useState(false);
|
||||
const [mobileFocusSpacerHeight, setMobileFocusSpacerHeight] = useState(0);
|
||||
const [inputError, setInputError] = useState("");
|
||||
|
||||
const sessionProblemCount = session?.problems.length ?? null;
|
||||
@@ -69,9 +82,19 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
|
||||
useEffect(() => {
|
||||
setAnswerA("");
|
||||
setAnswerB("");
|
||||
setActiveInput(0);
|
||||
setInputError("");
|
||||
}, [currentProblem?.key]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
scrollTimeoutsRef.current.forEach((timeoutId) => {
|
||||
window.clearTimeout(timeoutId);
|
||||
});
|
||||
viewportResizeCleanupRef.current?.();
|
||||
};
|
||||
}, []);
|
||||
|
||||
function handleSubmit(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
|
||||
@@ -89,6 +112,93 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
|
||||
submitAnswer({ a: parsedA, b: parsedB });
|
||||
}
|
||||
|
||||
function handleNextProblem() {
|
||||
setFocusInputOnFormMount(true);
|
||||
flushSync(() => {
|
||||
nextProblem();
|
||||
});
|
||||
answerFormRef.current?.focusInput();
|
||||
}
|
||||
|
||||
const scrollKatexToViewportTop = useCallback(() => {
|
||||
if (window.matchMedia("(min-width: 640px)").matches) return;
|
||||
|
||||
function alignKatex() {
|
||||
const katexElement =
|
||||
problemCardRef.current?.querySelector<HTMLElement>("span.katex");
|
||||
|
||||
if (!katexElement) return;
|
||||
|
||||
const rect = katexElement.getBoundingClientRect();
|
||||
const scrollElement =
|
||||
document.scrollingElement ?? document.documentElement;
|
||||
const elementDocumentTop = window.pageYOffset + rect.top;
|
||||
const maxScrollTop = Math.max(
|
||||
0,
|
||||
scrollElement.scrollHeight - window.innerHeight,
|
||||
);
|
||||
const scrollTop = Math.min(
|
||||
maxScrollTop,
|
||||
Math.max(0, elementDocumentTop),
|
||||
);
|
||||
|
||||
if (Math.abs(window.pageYOffset - scrollTop) < 4) return;
|
||||
|
||||
scrollElement.scrollTop = scrollTop;
|
||||
document.body.scrollTop = scrollTop;
|
||||
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 + 480),
|
||||
);
|
||||
|
||||
scrollTimeoutsRef.current.forEach((timeoutId) => {
|
||||
window.clearTimeout(timeoutId);
|
||||
});
|
||||
scrollTimeoutsRef.current = [];
|
||||
viewportResizeCleanupRef.current?.();
|
||||
viewportResizeCleanupRef.current = null;
|
||||
|
||||
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);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (!session || sessionNeedsInit) {
|
||||
return (
|
||||
<main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
|
||||
@@ -144,7 +254,10 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8">
|
||||
<div
|
||||
ref={problemCardRef}
|
||||
className="rounded-md bg-white px-6 pt-6 pb-2 shadow-sm ring-1 ring-slate-200 sm:p-8"
|
||||
>
|
||||
<p className="mb-4 text-sm font-semibold text-slate-500">
|
||||
괄호를 풀어 두 항을 순서대로 입력하세요.
|
||||
</p>
|
||||
@@ -153,22 +266,38 @@ export default function PlayClient({ problemCount }: PlayClientProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!submitted ? (
|
||||
<AnswerForm
|
||||
ref={answerFormRef}
|
||||
answerA={answerA}
|
||||
answerB={answerB}
|
||||
activeInput={activeInput}
|
||||
disabled={submitted}
|
||||
error={inputError}
|
||||
focusOnMount={focusInputOnFormMount}
|
||||
onActiveInputChange={setActiveInput}
|
||||
onAnswerAChange={setAnswerA}
|
||||
onAnswerBChange={setAnswerB}
|
||||
onInputBlur={() => setMobileFocusSpacerHeight(0)}
|
||||
onInputFocus={scrollKatexToViewportTop}
|
||||
onSubmit={handleSubmit}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{currentResult ? (
|
||||
<FeedbackPanel
|
||||
result={currentResult}
|
||||
answerLatex={currentProblem.latexAfter}
|
||||
isLastProblem={isLastProblem}
|
||||
onNext={nextProblem}
|
||||
onNext={handleNextProblem}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{!submitted && mobileFocusSpacerHeight > 0 ? (
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="sm:hidden"
|
||||
style={{ height: mobileFocusSpacerHeight }}
|
||||
/>
|
||||
) : null}
|
||||
</section>
|
||||
|
||||
+178
-46
@@ -1,93 +1,225 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef } from "react";
|
||||
import {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useId,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
} from "react";
|
||||
import type { FormEvent } from "react";
|
||||
|
||||
export type ActiveAnswerInput = 0 | 1;
|
||||
|
||||
export interface AnswerFormHandle {
|
||||
focusInput: () => void;
|
||||
}
|
||||
|
||||
interface AnswerFormProps {
|
||||
answerA: string;
|
||||
answerB: string;
|
||||
activeInput: ActiveAnswerInput;
|
||||
disabled: boolean;
|
||||
error: string;
|
||||
focusOnMount?: boolean;
|
||||
onAnswerAChange: (value: string) => void;
|
||||
onAnswerBChange: (value: string) => void;
|
||||
onActiveInputChange: (input: ActiveAnswerInput) => void;
|
||||
onInputBlur?: () => void;
|
||||
onInputFocus?: () => void;
|
||||
onSubmit: (event: FormEvent<HTMLFormElement>) => void;
|
||||
}
|
||||
|
||||
export default function AnswerForm({
|
||||
const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function AnswerForm(
|
||||
{
|
||||
answerA,
|
||||
answerB,
|
||||
activeInput,
|
||||
disabled,
|
||||
error,
|
||||
focusOnMount = false,
|
||||
onAnswerAChange,
|
||||
onAnswerBChange,
|
||||
onActiveInputChange,
|
||||
onInputBlur,
|
||||
onInputFocus,
|
||||
onSubmit,
|
||||
}: AnswerFormProps) {
|
||||
const firstInputRef = useRef<HTMLInputElement>(null);
|
||||
const secondInputRef = useRef<HTMLInputElement>(null);
|
||||
const submitButtonRef = useRef<HTMLButtonElement>(null);
|
||||
},
|
||||
ref,
|
||||
) {
|
||||
const inputId = useId();
|
||||
const formRef = useRef<HTMLFormElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const activeAnswer = activeInput === 0 ? answerA : answerB;
|
||||
const activeLabel = activeInput === 0 ? "첫째 항" : "둘째 항";
|
||||
const activeEnterKeyHint = activeInput === 0 ? "next" : "done";
|
||||
const activeAnswerChange =
|
||||
activeInput === 0 ? onAnswerAChange : onAnswerBChange;
|
||||
|
||||
const focusInput = useCallback(() => {
|
||||
inputRef.current?.focus({ preventScroll: true });
|
||||
onInputFocus?.();
|
||||
}, [onInputFocus]);
|
||||
|
||||
useImperativeHandle(ref, () => ({ focusInput }), [focusInput]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!disabled) {
|
||||
firstInputRef.current?.focus();
|
||||
if (!disabled && focusOnMount) {
|
||||
window.requestAnimationFrame(() => {
|
||||
focusInput();
|
||||
});
|
||||
}
|
||||
}, [disabled]);
|
||||
}, [disabled, focusInput, focusOnMount]);
|
||||
|
||||
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 moveToInput(input: ActiveAnswerInput, reset = false) {
|
||||
onActiveInputChange(input);
|
||||
if (reset) {
|
||||
setAnswer(input, "");
|
||||
}
|
||||
focusInput();
|
||||
}
|
||||
|
||||
function handleEnter() {
|
||||
if (activeInput === 0) {
|
||||
moveToInput(1);
|
||||
return;
|
||||
}
|
||||
|
||||
formRef.current?.requestSubmit();
|
||||
}
|
||||
|
||||
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="grid gap-4 sm:grid-cols-2">
|
||||
<label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
|
||||
첫째 항
|
||||
<div className="flex flex-col gap-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor={inputId}
|
||||
className="mb-2 block text-sm font-semibold text-slate-700"
|
||||
>
|
||||
{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"
|
||||
disabled={disabled}
|
||||
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 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400 sm:hidden"
|
||||
>
|
||||
-/+
|
||||
</button>
|
||||
<input
|
||||
ref={firstInputRef}
|
||||
value={answerA}
|
||||
onChange={(event) => onAnswerAChange(event.target.value)}
|
||||
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();
|
||||
secondInputRef.current?.focus();
|
||||
handleEnter();
|
||||
}
|
||||
}}
|
||||
disabled={disabled}
|
||||
autoComplete="off"
|
||||
enterKeyHint={activeEnterKeyHint}
|
||||
inputMode="numeric"
|
||||
className="h-12 rounded-md border border-slate-300 px-4 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 disabled:bg-slate-100"
|
||||
pattern="-?[0-9]*"
|
||||
className="h-full min-w-0 flex-1 px-3 text-lg font-semibold text-slate-950 outline-none disabled:bg-slate-100 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"
|
||||
/>
|
||||
</label>
|
||||
<label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
|
||||
둘째 항
|
||||
<input
|
||||
ref={secondInputRef}
|
||||
value={answerB}
|
||||
onChange={(event) => onAnswerBChange(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
submitButtonRef.current?.click();
|
||||
}
|
||||
}}
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
inputMode="numeric"
|
||||
className="h-12 rounded-md border border-slate-300 px-4 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 disabled:bg-slate-100"
|
||||
/>
|
||||
</label>
|
||||
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 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400 sm:hidden"
|
||||
>
|
||||
↵
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="inline-flex w-fit max-w-full gap-1 rounded-md border border-slate-300 bg-white p-1 shadow-sm"
|
||||
role="group"
|
||||
aria-label="입력 항 선택"
|
||||
>
|
||||
{answerButtons.map((button) => {
|
||||
const selected = activeInput === button.index;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={button.index}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onPointerDown={(event) => event.preventDefault()}
|
||||
onClick={() => moveToInput(button.index, true)}
|
||||
aria-pressed={selected}
|
||||
aria-label={`${button.label} 다시 입력`}
|
||||
className={`inline-flex h-10 min-w-20 items-center justify-center rounded px-3 text-base font-semibold transition focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:cursor-not-allowed ${
|
||||
selected
|
||||
? "bg-emerald-700 text-white"
|
||||
: "text-slate-700 hover:bg-slate-100 disabled:bg-slate-100 disabled:text-slate-400"
|
||||
}`}
|
||||
>
|
||||
{button.value || "?"}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<p className="mt-3 text-sm font-semibold text-red-700">{error}</p>
|
||||
) : null}
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<button
|
||||
ref={submitButtonRef}
|
||||
type="submit"
|
||||
disabled={disabled}
|
||||
className="inline-flex h-12 items-center justify-center rounded-md bg-emerald-700 px-6 text-base font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-slate-300"
|
||||
>
|
||||
제출
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default AnswerForm;
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"postbuild": "mkdir -p .next/standalone/.next && cp -R .next/static .next/standalone/.next/static",
|
||||
"start": "next start",
|
||||
"test": "vitest run",
|
||||
"lint": "next lint"
|
||||
|
||||
Reference in New Issue
Block a user