jisangs/math-quiz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

리펙토링: 코드 최적화, AGENTS.md, README.md 내용 반영

Browse Source
This commit is contained in:
Jisang Park
2026-05-26 17:34:40 +09:00
parent 7d4ab86da5
commit 2ebb8dbc32
4 changed files with 62 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/game/AnswerForm.tsx
+18 -30
View File
@@ -3,7 +3,6 @@
import {
forwardRef,
useCallback,
useEffect,
useId,
useImperativeHandle,
useRef,
@@ -20,9 +19,7 @@ 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;
@@ -36,9 +33,7 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
answerA,
answerB,
activeInput,
disabled,
error,
focusOnMount = false,
onAnswerAChange,
onAnswerBChange,
onActiveInputChange,
@@ -59,20 +54,21 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
activeInput === 0 ? onAnswerAChange : onAnswerBChange;
const focusInput = useCallback(() => {
inputRef.current?.focus({ preventScroll: true });
onInputFocus?.();
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(() => {
if (!disabled && focusOnMount) {
window.requestAnimationFrame(() => {
focusInput();
});
}
}, [disabled, focusInput, focusOnMount]);
function setAnswer(input: ActiveAnswerInput, value: string) {
if (input === 0) {
onAnswerAChange(value);
@@ -135,11 +131,10 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
<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"
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>
@@ -148,12 +143,8 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
ref={inputRef}
type="text"
value={activeAnswer}
onFocus={() => {
onInputFocus?.();
}}
onBlur={() => {
onInputBlur?.();
}}
onFocus={onInputFocus}
onBlur={onInputBlur}
onChange={(event) => activeAnswerChange(event.target.value)}
onKeyDown={(event) => {
if (event.key === "Enter") {
@@ -161,16 +152,14 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
handleEnter();
}
}}
disabled={disabled}
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 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"
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"
disabled={disabled}
onPointerDown={(event) => event.preventDefault()}
onClick={handleEnter}
aria-label={
@@ -178,7 +167,7 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
? "첫째 항 입력 완료 후 둘째 항으로 이동"
: "둘째 항 입력 완료 후 제출"
}
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"
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>
@@ -197,15 +186,14 @@ const AnswerForm = forwardRef<AnswerFormHandle, AnswerFormProps>(function Answer
<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 ${
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 ${
selected
? "bg-emerald-700 text-white"
: "text-slate-700 hover:bg-slate-100 disabled:bg-slate-100 disabled:text-slate-400"
: "text-slate-700 hover:bg-slate-100"
}`}
>
{button.value || "?"}