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

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