리펙토링: 코드 최적화

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

@@ -10,41 +10,13 @@ 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 { formatParenthesisExpressionLatex } from "@/lib/engine/parenthesis-latex";
 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;
@@ -187,7 +159,13 @@ export default function VariablePlayClient({
   const isLastProblem = session.currentIndex === session.problems.length - 1;
   const problemLatex = submitted
     ? currentProblem.latexBefore
-    : formatActiveTermProblemLatex(currentProblem, activeTermIndex);
+    : formatParenthesisExpressionLatex({
+        multiplier: currentProblem.multiplier,
+        terms: currentProblem.terms,
+        operators: currentProblem.operators,
+        formatTermLatex: formatVariableTermLatex,
+        activeTermIndex,
+      });
   const pendingChoiceLabels = currentProblem.terms.map((term, index) =>
     formatVariableTermLatex({
       ...term,