리펙토링: 코드 최적화

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

@@ -17,34 +17,9 @@ 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";
+import { formatParenthesisExpressionLatex } from "@/lib/engine/parenthesis-latex";
 
 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();
@@ -233,7 +208,13 @@ export default function NumberPlayClient({
   const isLastProblem = session.currentIndex === session.problems.length - 1;
   const problemLatex = submitted
     ? currentProblem.latexBefore
-    : formatActiveTermProblemLatex(currentProblem, activeInput);
+    : formatParenthesisExpressionLatex({
+        multiplier: currentProblem.multiplier,
+        terms: currentProblem.terms,
+        operators: currentProblem.operators,
+        formatTermLatex: (term) => `${term}`,
+        activeTermIndex: activeInput,
+      });
   const pendingAnswerLabels = currentProblem.terms.map((term, index) => {
     if (index === 0) return String(term);