미지수 괄호 문제 풀이 추가

components/game/StageIndicator.tsx

@@ -1,10 +1,10 @@
-"use client";
-
-import type { GradeResult } from "@/lib/engine/types";
+interface StageResult {
+  correct: boolean;
+}
 
 interface StageIndicatorProps {
   currentIndex: number;
-  results: (GradeResult | null)[];
+  results: (StageResult | null)[];
 }
 
 export default function StageIndicator({

components/game/VariableChoiceAnswerForm.tsx

@@ -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>
+  );
+}

components/game/VariableFeedbackPanel.tsx

@@ -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>
+  );
+}

components/game/VariableScoreSummary.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useRef } from "react";
+
+import AnswerResultLine from "@/components/game/AnswerResultLine";
+import KatexRenderer from "@/components/math/KatexRenderer";
+import type {
+  DistributedVariableTerm,
+  VariableGradeResult,
+  VariableParenthesisProblem,
+} from "@/lib/engine/variable-types";
+import { formatVariableExpressionLatex } from "@/lib/engine/variable-parenthesis";
+
+interface VariableScoreSummaryProps {
+  correctCount: number;
+  totalCount: number;
+  problems: VariableParenthesisProblem[];
+  results: (VariableGradeResult | null)[];
+  onRestart: () => void;
+}
+
+function renderTermPair(
+  terms: [DistributedVariableTerm | null, DistributedVariableTerm | null],
+  comparisonTerms: [DistributedVariableTerm | null, DistributedVariableTerm | null],
+  mode: "user" | "correct",
+) {
+  const secondTerm = terms[1];
+  const secondOperator =
+    secondTerm && secondTerm.coefficient < 0 ? "-" : "+";
+
+  return (
+    <span className="inline-flex flex-wrap items-center gap-x-2 gap-y-1">
+      {terms.map((term, index) => {
+        if (!term) {
+          return (
+            <span key={index} className="text-red-700">
+              ?
+            </span>
+          );
+        }
+
+        const correct = term.coefficient === comparisonTerms[index]?.coefficient;
+        const className =
+          mode === "user"
+            ? correct
+              ? undefined
+              : "text-red-700"
+            : correct
+              ? undefined
+              : "font-bold text-blue-700";
+        const displayLatex =
+          index === 1
+            ? `${secondOperator} ${term.latex.replace(/^-/, "")}`
+            : term.latex;
+
+        return (
+          <span key={index} className={className}>
+            <KatexRenderer latex={displayLatex} output="mathml" />
+          </span>
+        );
+      })}
+    </span>
+  );
+}
+
+export default function VariableScoreSummary({
+  correctCount,
+  totalCount,
+  problems,
+  results,
+  onRestart,
+}: VariableScoreSummaryProps) {
+  const restartButtonRef = useRef<HTMLButtonElement>(null);
+  const solvedItems = problems
+    .map((problem, index) => ({
+      problem,
+      result: results[index],
+    }))
+    .filter(
+      (
+        item,
+      ): item is {
+        problem: VariableParenthesisProblem;
+        result: VariableGradeResult;
+      } => item.result !== null,
+    );
+
+  useEffect(() => {
+    restartButtonRef.current?.focus();
+  }, []);
+
+  return (
+    <main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
+      <section className="mx-auto flex w-full max-w-3xl flex-col gap-8">
+        <div className="space-y-3">
+          <p className="text-sm font-semibold text-emerald-700">
+            미지수 괄호 풀기
+          </p>
+          <h1 className="text-4xl font-bold tracking-normal sm:text-5xl">
+            풀이 결과
+          </h1>
+          <p className="text-xl font-semibold text-slate-800">
+            {correctCount} / {totalCount} 정답
+          </p>
+        </div>
+
+        <ol className="space-y-3">
+          {solvedItems.map(({ problem, result }, index) => (
+            <AnswerResultLine
+              key={problem.key}
+              expressionLatex={problem.latexBefore}
+              userAnswerLatex={formatVariableExpressionLatex([
+                result.userAnswer[0] ?? result.correctAnswer[0],
+                result.userAnswer[1] ?? result.correctAnswer[1],
+              ])}
+              correctAnswerLatex={problem.latexAfter}
+              correct={result.correct}
+              userAnswerContent={renderTermPair(
+                result.userAnswer,
+                result.correctAnswer,
+                "user",
+              )}
+              correctAnswerContent={renderTermPair(
+                result.correctAnswer,
+                result.userAnswer,
+                "correct",
+              )}
+              prefix={
+                <span className="mr-1 text-sm font-bold text-slate-500">
+                  {index + 1}.
+                </span>
+              }
+            />
+          ))}
+        </ol>
+
+        <div className="flex flex-wrap gap-3">
+          <button
+            ref={restartButtonRef}
+            type="button"
+            onClick={onRestart}
+            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"
+          >
+            다시 시작
+          </button>
+          <Link
+            href="/"
+            className="inline-flex h-12 items-center justify-center rounded-md border border-slate-300 px-6 text-base font-semibold text-slate-800 transition hover:bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
+          >
+            처음으로
+          </Link>
+        </div>
+      </section>
+    </main>
+  );
+}