백테스팅 차트 색상 오류 수정

frontend/src/components/backtest/BacktestAnalysisChart.tsx

@@ -17,12 +17,18 @@ import {
 import { getKoreanName } from '../../utils/marketNameCache';
 import { useIndicatorSettings } from '../../hooks/useIndicatorSettings';
 import { useAppSettings } from '../../hooks/useAppSettings';
-import { enrichIndicatorConfig, getIndicatorDef } from '../../utils/indicatorRegistry';
+import { getIndicatorDef } from '../../utils/indicatorRegistry';
 import {
   chartPaneFlexRatio,
   countNonOverlayIndicatorPanes,
 } from '../../utils/strategyOscillatorSeries';
-import { normalizeSmaConfig } from '../../utils/smaConfig';
+import {
+  createDefaultSmaPlotVisibility,
+  normalizeSmaConfig,
+  smaPeriodKey,
+  smaPlotId,
+} from '../../utils/smaConfig';
+import { buildChartIndicatorConfig } from '../../utils/indicatorPaneMerge';
 import {
   applyPaperOverlayVisibility,
   listPaperOverlayToggleItems,
@@ -76,44 +82,32 @@ const ALL_TF_VISIBLE = { '1m': true, '3m': true, '5m': true, '10m': true, '15m':
 
 function defaultOverlayIndicators(
   getParams: (t: string, d?: Record<string, number | string | boolean>) => Record<string, number | string | boolean>,
+  getVisualConfig: ReturnType<typeof useIndicatorSettings>['getVisualConfig'],
 ): IndicatorConfig[] {
-  const def = getIndicatorDef('SMA');
-  if (!def) return [];
-  const params: Record<string, number | string | boolean> = { ...def.defaultParams, ...getParams('SMA', def.defaultParams) };
-  for (let i = 1; i <= 11; i++) {
-    params[`length${i}`] = i === 1 ? 14 : 0;
-    params[`visible${i}`] = i === 1;
-  }
-  const cfg = normalizeSmaConfig(enrichIndicatorConfig({
-    id: newIndId(),
-    type: 'SMA',
-    params,
-    plots: def.plots,
-    hlines: def.hlines ?? [],
+  const cfg = buildChartIndicatorConfig('SMA', newIndId(), getParams, getVisualConfig, {
     timeframeVisibility: ALL_TF_VISIBLE,
-  }));
-  return [cfg];
+  });
+  if (!cfg) return [];
+  // 전략 미선택 시 MA1(14)만 표시
+  const p = { ...cfg.params };
+  p[smaPeriodKey(1)] = 14;
+  const plotVisibility = createDefaultSmaPlotVisibility();
+  for (let i = 0; i < 11; i++) {
+    plotVisibility[smaPlotId(i)] = i === 0;
+  }
+  return [normalizeSmaConfig({ ...cfg, params: p, plotVisibility })];
 }
 
 /** 전략 미선택 시 기본 오실레이터(RSI, MACD)를 TradingChart sub-pane 으로 추가 */
 function defaultOscillatorIndicators(
   getParams: (t: string, d?: Record<string, number | string | boolean>) => Record<string, number | string | boolean>,
+  getVisualConfig: ReturnType<typeof useIndicatorSettings>['getVisualConfig'],
 ): IndicatorConfig[] {
-  const result: IndicatorConfig[] = [];
-  for (const type of ['RSI', 'MACD']) {
-    const def = getIndicatorDef(type);
-    if (!def) continue;
-    const params: Record<string, number | string | boolean> = { ...def.defaultParams, ...getParams(type, def.defaultParams) };
-    result.push(enrichIndicatorConfig({
-      id: newIndId(),
-      type,
-      params,
-      plots: def.plots,
-      hlines: def.hlines ?? [],
+  return ['RSI', 'MACD']
+    .map(type => buildChartIndicatorConfig(type, newIndId(), getParams, getVisualConfig, {
       timeframeVisibility: ALL_TF_VISIBLE,
-    }));
-  }
-  return result;
+    }))
+    .filter((c): c is IndicatorConfig => c != null);
 }
 
 const isOverlayType = (type: string) => getIndicatorDef(type)?.overlay === true;
@@ -194,13 +188,13 @@ const BacktestAnalysisChart: React.FC<Props> = ({
       // 전략 지표가 모두 캔들 오버레이(SMA/EMA/일목 등)인 경우 기본 오실레이터(RSI·MACD)를 추가.
       // 기존 SVG 기반 StrategyOscillatorPanes 의 fallback 동작과 동일.
       if (showOscillatorPanel && inds.every(i => isOverlayType(i.type))) {
-        inds = [...inds, ...defaultOscillatorIndicators(getParams)];
+        inds = [...inds, ...defaultOscillatorIndicators(getParams, getVisualConfig)];
       }
     } else {
-      inds = defaultOverlayIndicators(getParams);
+      inds = defaultOverlayIndicators(getParams, getVisualConfig);
       // 전략 미선택 시 기본 오실레이터(RSI, MACD)도 TradingChart sub-pane 으로 추가
       if (showOscillatorPanel) {
-        inds = [...inds, ...defaultOscillatorIndicators(getParams)];
+        inds = [...inds, ...defaultOscillatorIndicators(getParams, getVisualConfig)];
       }
     }
     if (overlayVisibility) {

frontend/src/components/trendSearch/TrendSearchCardChart.tsx

@@ -15,7 +15,7 @@ import { useHistoryLoader } from '../../hooks/useHistoryLoader';
 import { useIndicatorSettings } from '../../hooks/useIndicatorSettings';
 import type { ChartManager } from '../../utils/ChartManager';
 import { timeframeToCandleType } from '../../utils/chartCandleType';
-import { enrichIndicatorConfig } from '../../utils/indicatorRegistry';
+import { buildChartIndicatorConfig } from '../../utils/indicatorPaneMerge';
 import { DEFAULT_DISPLAY_TIMEZONE } from '../../utils/timezone';
 
 interface Props {
@@ -51,17 +51,9 @@ const TrendSearchCardChart: React.FC<Props> = ({
   const { getParams, getVisualConfig } = useIndicatorSettings();
 
   const indicators = useMemo(
-    () => CHART_INDICATOR_TYPES.map(type => {
-      const base = enrichIndicatorConfig({
-        id: `${type}-tsd-card`,
-        type,
-        params: { ...getParams(type) },
-      });
-      return {
-        ...base,
-        plots: getVisualConfig(type)?.plots ?? base.plots,
-      };
-    }),
+    () => CHART_INDICATOR_TYPES.map(type =>
+      buildChartIndicatorConfig(type, `${type}-tsd-card`, getParams, getVisualConfig),
+    ).filter((c): c is NonNullable<typeof c> => c != null),
     [getParams, getVisualConfig],
   );
 

frontend/src/components/trendSearch/TrendSearchChartPanel.tsx

@@ -11,7 +11,7 @@ import { useHistoryLoader } from '../../hooks/useHistoryLoader';
 import { useIndicatorSettings } from '../../hooks/useIndicatorSettings';
 import type { ChartManager } from '../../utils/ChartManager';
 import { timeframeToCandleType } from '../../utils/chartCandleType';
-import { enrichIndicatorConfig } from '../../utils/indicatorRegistry';
+import { buildChartIndicatorConfig } from '../../utils/indicatorPaneMerge';
 import { DEFAULT_DISPLAY_TIMEZONE } from '../../utils/timezone';
 
 interface Props {
@@ -48,17 +48,9 @@ const TrendSearchChartPanel: React.FC<Props> = ({
   const { getParams, getVisualConfig } = useIndicatorSettings();
 
   const indicators = useMemo((): IndicatorConfig[] =>
-    CHART_INDICATOR_TYPES.map(type => {
-      const base = enrichIndicatorConfig({
-        id: `${type}-tsd`,
-        type,
-        params: { ...getParams(type) },
-      });
-      return {
-        ...base,
-        plots: getVisualConfig(type)?.plots ?? base.plots,
-      };
-    }),
+    CHART_INDICATOR_TYPES.map(type =>
+      buildChartIndicatorConfig(type, `${type}-tsd`, getParams, getVisualConfig),
+    ).filter((c): c is IndicatorConfig => c != null),
   [getParams, getVisualConfig]);
 
   const managerRef = useRef<ChartManager | null>(null);