112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
|
|
import KatexRenderer from "@/components/math/KatexRenderer";
|
|
import type { VariableTermChoice } from "@/lib/engine/variable-types";
|
|
|
|
interface VariableChoiceAnswerFormProps {
|
|
choices: [VariableTermChoice[], VariableTermChoice[]];
|
|
selectedChoiceIds: [string | null, string | null];
|
|
activeTermIndex: 0 | 1;
|
|
onSelectChoice: (termIndex: 0 | 1, choiceId: string) => void;
|
|
onSubmit: () => void;
|
|
}
|
|
|
|
export default function VariableChoiceAnswerForm({
|
|
choices,
|
|
selectedChoiceIds,
|
|
activeTermIndex,
|
|
onSelectChoice,
|
|
onSubmit,
|
|
}: VariableChoiceAnswerFormProps) {
|
|
const firstChoiceRef = useRef<HTMLButtonElement>(null);
|
|
const submitButtonRef = useRef<HTMLButtonElement>(null);
|
|
const canSubmit = selectedChoiceIds[0] !== null && selectedChoiceIds[1] !== null;
|
|
const activeChoices = choices[activeTermIndex];
|
|
|
|
useEffect(() => {
|
|
firstChoiceRef.current?.focus();
|
|
}, [activeTermIndex]);
|
|
|
|
useEffect(() => {
|
|
if (canSubmit) {
|
|
submitButtonRef.current?.focus();
|
|
}
|
|
}, [canSubmit]);
|
|
|
|
return (
|
|
<div className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<p className="text-sm font-semibold text-slate-500">
|
|
{activeTermIndex === 0 ? "첫째 항" : "둘째 항"}을 고르세요.
|
|
</p>
|
|
<p className="mt-1 text-base text-slate-700">
|
|
괄호를 풀었을 때의 부호를 선택합니다.
|
|
</p>
|
|
</div>
|
|
<div
|
|
className="inline-flex gap-1 rounded-md border border-slate-300 bg-slate-50 p-1"
|
|
role="group"
|
|
aria-label="입력 항 진행 상태"
|
|
>
|
|
{selectedChoiceIds.map((choiceId, index) => {
|
|
const selected = activeTermIndex === index;
|
|
|
|
return (
|
|
<span
|
|
key={index}
|
|
className={`inline-flex h-9 min-w-16 items-center justify-center rounded px-3 text-sm font-bold ${
|
|
selected
|
|
? "bg-emerald-700 text-white"
|
|
: "bg-white text-slate-700"
|
|
}`}
|
|
>
|
|
{choiceId ? `${index + 1}항 완료` : `${index + 1}항`}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="mt-5 grid gap-3 sm:grid-cols-2"
|
|
role="group"
|
|
aria-label={`${activeTermIndex === 0 ? "첫째 항" : "둘째 항"} 보기 선택`}
|
|
>
|
|
{activeChoices.map((choice, index) => {
|
|
const selected = selectedChoiceIds[activeTermIndex] === choice.id;
|
|
|
|
return (
|
|
<button
|
|
key={choice.id}
|
|
ref={index === 0 ? firstChoiceRef : undefined}
|
|
type="button"
|
|
onClick={() => onSelectChoice(activeTermIndex, choice.id)}
|
|
aria-pressed={selected}
|
|
className={`flex h-20 items-center justify-center rounded-md text-3xl font-bold transition focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 ${
|
|
selected
|
|
? "bg-emerald-700 text-white"
|
|
: "bg-slate-50 text-slate-950 ring-1 ring-slate-200 hover:bg-slate-100"
|
|
}`}
|
|
>
|
|
<KatexRenderer latex={choice.latex} />
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<button
|
|
ref={submitButtonRef}
|
|
type="button"
|
|
onClick={onSubmit}
|
|
disabled={!canSubmit}
|
|
className="mt-5 inline-flex h-11 items-center justify-center rounded-md bg-slate-950 px-5 text-base font-semibold text-white transition hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-slate-300"
|
|
>
|
|
정답 확인
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|