미지수 괄호 문제 풀이 추가

2026-05-29 23:47:10 +09:00
parent 335898b721
commit f3d051cdd1
16 changed files with 1789 additions and 105 deletions
@@ -0,0 +1,90 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+import AnswerResultLine from "@/components/game/AnswerResultLine";
+import type {
+  VariableGradeResult,
+  VariableParenthesisProblem,
+  VariableParenthesisTerm,
+} from "@/lib/engine/variable-types";
+import { formatVariableTermLatex } from "@/lib/engine/variable-parenthesis";
+
+interface VariableFeedbackPanelProps {
+  result: VariableGradeResult;
+  problem: VariableParenthesisProblem;
+  isLastProblem: boolean;
+  onNext: () => void;
+}
+
+function formatSignedNumber(value: number) {
+  return value < 0 ? `(${value})` : `${value}`;
+}
+
+function formatSignedTerm(term: VariableParenthesisTerm, sign: 1 | -1) {
+  const coefficient = term.coefficient * sign;
+
+  return formatVariableTermLatex({ ...term, coefficient });
+}
+
+export default function VariableFeedbackPanel({
+  result,
+  problem,
+  isLastProblem,
+  onNext,
+}: VariableFeedbackPanelProps) {
+  const nextButtonRef = useRef<HTMLButtonElement>(null);
+  const signedTerms = [
+    formatSignedTerm(problem.firstTerm, 1),
+    formatSignedTerm(problem.secondTerm, problem.operator === "-" ? -1 : 1),
+  ] as const;
+  const feedbackItems = signedTerms.map((termLatex, index) => {
+    const termIndex = index as 0 | 1;
+    const userAnswer = result.userAnswer[termIndex];
+    const correctAnswer = result.correctAnswer[termIndex];
+
+    return {
+      formulaLatex: `${formatSignedNumber(problem.multiplier)}\\times ${termLatex}`,
+      userAnswerLatex: userAnswer?.latex ?? "?",
+      correctAnswerLatex: correctAnswer.latex,
+      correct: userAnswer?.coefficient === correctAnswer.coefficient,
+    };
+  });
+
+  useEffect(() => {
+    nextButtonRef.current?.focus();
+  }, []);
+
+  return (
+    <div
+      className={`rounded-md p-6 shadow-sm ring-1 ${
+        result.correct
+          ? "bg-emerald-50 text-emerald-950 ring-emerald-200"
+          : "bg-red-50 text-red-950 ring-red-200"
+      }`}
+    >
+      <p className="text-lg font-bold">
+        {result.correct ? "정답입니다." : "오답입니다."}
+      </p>
+      <ul className="mt-5 space-y-3">
+        {feedbackItems.map((item, index) => (
+          <AnswerResultLine
+            key={index}
+            expressionLatex={item.formulaLatex}
+            userAnswerLatex={item.userAnswerLatex}
+            correctAnswerLatex={item.correctAnswerLatex}
+            correct={item.correct}
+          />
+        ))}
+      </ul>
+      <button
+        ref={nextButtonRef}
+        type="button"
+        onClick={onNext}
+        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"
+      >
+        {isLastProblem ? "결과 보기" : "다음 문제"}
+      </button>
+    </div>
+  );
+}