미지수 괄호 문제 풀이 추가

2026-05-29 23:47:10 +09:00
parent 335898b721
commit f3d051cdd1
16 changed files with 1789 additions and 105 deletions
@@ -0,0 +1,111 @@
+"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>
+  );
+}