풀이하고 있는 내용 색상 강조

app/(game)/number-parentheses/play/NumberPlayClient.tsx

@@ -17,8 +17,34 @@ import { DESKTOP_INPUT_DEVICE_QUERY } from "@/lib/input-device";
 import KatexRenderer from "@/components/math/KatexRenderer";
 import { useGameStore } from "@/store/gameStore";
 import type { MaxTermCount, ProblemCount } from "@/store/gameStore";
+import type { ParenthesisSignProblem } from "@/lib/engine/types";
 
 const REAL_NUMBER_PATTERN = /^-?\d+(?:\.\d+)?$/;
+const ACTIVE_TERM_COLOR = "#f97316";
+
+function highlightLatex(latex: string) {
+  return `\\textcolor{${ACTIVE_TERM_COLOR}}{${latex}}`;
+}
+
+function formatActiveTermProblemLatex(
+  problem: ParenthesisSignProblem,
+  activeTermIndex: number,
+) {
+  const termLatex = problem.terms
+    .map((term, index) => {
+      const displayTerm =
+        index === activeTermIndex ? highlightLatex(`${term}`) : `${term}`;
+
+      if (index === 0) return displayTerm;
+
+      return `${problem.operators[index - 1]} ${displayTerm}`;
+    })
+    .join(" ");
+
+  return `${highlightLatex(`${problem.multiplier}`)}${highlightLatex(
+    "(",
+  )}${termLatex}${highlightLatex(")")}`;
+}
 
 function parseAnswer(value: string) {
   const trimmed = value.trim();
@@ -205,6 +231,9 @@ export default function NumberPlayClient({
 
   const submitted = currentResult !== null;
   const isLastProblem = session.currentIndex === session.problems.length - 1;
+  const problemLatex = submitted
+    ? currentProblem.latexBefore
+    : formatActiveTermProblemLatex(currentProblem, activeInput);
   const pendingAnswerLabels = currentProblem.terms.map((term, index) => {
     if (index === 0) return String(term);
 
@@ -239,7 +268,7 @@ export default function NumberPlayClient({
           className="rounded-md bg-white px-6 pt-6 pb-4 shadow-sm ring-1 ring-slate-200 sm:p-8"
         >
           <div className="text-3xl font-semibold text-slate-950 sm:text-4xl">
-            <KatexRenderer latex={currentProblem.latexBefore} displayMode />
+            <KatexRenderer latex={problemLatex} displayMode />
           </div>
           <div className="mt-6">
             <StageIndicator

app/(game)/variable-parentheses/play/VariablePlayClient.tsx

@@ -10,12 +10,41 @@ import VariableFeedbackPanel from "@/components/game/VariableFeedbackPanel";
 import VariableScoreSummary from "@/components/game/VariableScoreSummary";
 import KatexRenderer from "@/components/math/KatexRenderer";
 import { formatVariableTermLatex } from "@/lib/engine/variable-parenthesis";
+import type { VariableParenthesisProblem } from "@/lib/engine/variable-types";
 import {
   useVariableGameStore,
   type VariableMaxTermCount,
   type VariableProblemCount,
 } from "@/store/variableGameStore";
 
+const ACTIVE_TERM_COLOR = "#f97316";
+
+function highlightLatex(latex: string) {
+  return `\\textcolor{${ACTIVE_TERM_COLOR}}{${latex}}`;
+}
+
+function formatActiveTermProblemLatex(
+  problem: VariableParenthesisProblem,
+  activeTermIndex: number,
+) {
+  const termLatex = problem.terms
+    .map((term, index) => {
+      const displayTerm =
+        index === activeTermIndex
+          ? highlightLatex(formatVariableTermLatex(term))
+          : formatVariableTermLatex(term);
+
+      if (index === 0) return displayTerm;
+
+      return `${problem.operators[index - 1]} ${displayTerm}`;
+    })
+    .join(" ");
+
+  return `${highlightLatex(`${problem.multiplier}`)}${highlightLatex(
+    "(",
+  )}${termLatex}${highlightLatex(")")}`;
+}
+
 interface VariablePlayClientProps {
   problemCount: VariableProblemCount;
   maxTermCount: VariableMaxTermCount;
@@ -156,6 +185,9 @@ export default function VariablePlayClient({
 
   const submitted = currentResult !== null;
   const isLastProblem = session.currentIndex === session.problems.length - 1;
+  const problemLatex = submitted
+    ? currentProblem.latexBefore
+    : formatActiveTermProblemLatex(currentProblem, activeTermIndex);
   const pendingChoiceLabels = currentProblem.terms.map((term, index) =>
     formatVariableTermLatex({
       ...term,
@@ -189,7 +221,7 @@ export default function VariablePlayClient({
 
         <div className="rounded-md bg-white px-6 pt-6 pb-4 shadow-sm ring-1 ring-slate-200 sm:p-8">
           <div className="text-3xl font-semibold text-slate-950 sm:text-4xl">
-            <KatexRenderer latex={currentProblem.latexBefore} displayMode />
+            <KatexRenderer latex={problemLatex} displayMode />
           </div>
           <div className="mt-6">
             <StageIndicator