94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import type { FormEvent } from "react";
|
|
|
|
interface AnswerFormProps {
|
|
answerA: string;
|
|
answerB: string;
|
|
disabled: boolean;
|
|
error: string;
|
|
onAnswerAChange: (value: string) => void;
|
|
onAnswerBChange: (value: string) => void;
|
|
onSubmit: (event: FormEvent<HTMLFormElement>) => void;
|
|
}
|
|
|
|
export default function AnswerForm({
|
|
answerA,
|
|
answerB,
|
|
disabled,
|
|
error,
|
|
onAnswerAChange,
|
|
onAnswerBChange,
|
|
onSubmit,
|
|
}: AnswerFormProps) {
|
|
const firstInputRef = useRef<HTMLInputElement>(null);
|
|
const secondInputRef = useRef<HTMLInputElement>(null);
|
|
const submitButtonRef = useRef<HTMLButtonElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!disabled) {
|
|
firstInputRef.current?.focus();
|
|
}
|
|
}, [disabled]);
|
|
|
|
return (
|
|
<form
|
|
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">
|
|
첫째 항
|
|
<input
|
|
ref={firstInputRef}
|
|
value={answerA}
|
|
onChange={(event) => onAnswerAChange(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
secondInputRef.current?.focus();
|
|
}
|
|
}}
|
|
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>
|
|
<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();
|
|
}
|
|
}}
|
|
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>
|
|
</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>
|
|
);
|
|
}
|