투자관리 화면 수정

frontend/src/components/backtest/BacktestAnalysisChart.tsx

@@ -17,8 +17,15 @@ import {
   countNonOverlayIndicatorPanes,
 } from '../../utils/strategyOscillatorSeries';
 import { normalizeSmaConfig } from '../../utils/smaConfig';
+import {
+  applyPaperOverlayVisibility,
+  listPaperOverlayToggleItems,
+  type PaperOverlayToggleKey,
+  type PaperOverlayVisibility,
+} from '../../utils/paperChartOverlayVisibility';
 import {
   buildVirtualTradingChartIndicators,
+  ensurePaperChartOverlays,
   resolveStrategyPrimaryTimeframe,
 } from '../../utils/strategyToChartIndicators';
 
@@ -35,6 +42,9 @@ interface Props {
   onHistoryBarsLoaded?: (bars: OHLCVBar[]) => void;
   /** 과거 로드·시그널 재계산 중 UI */
   onHistoryLoadingChange?: (loading: boolean) => void;
+  /** 투자관리 차트 탭 — 캔들 오버레이 표시/숨김 (세션만, DB 미저장) */
+  overlayVisibility?: PaperOverlayVisibility;
+  onToggleOverlay?: (key: PaperOverlayToggleKey) => void;
 }
 
 const noop = () => {};
@@ -82,6 +92,8 @@ const BacktestAnalysisChart: React.FC<Props> = ({
   theme = 'dark',
   onHistoryBarsLoaded,
   onHistoryLoadingChange,
+  overlayVisibility,
+  onToggleOverlay,
 }) => {
   const { getParams, getVisualConfig } = useIndicatorSettings();
   const { defaults: appDefaults } = useAppSettings();
@@ -118,13 +130,29 @@ const BacktestAnalysisChart: React.FC<Props> = ({
     return () => { cancelled = true; };
   }, [strategyId]);
 
-  const indicators = useMemo(() => {
+  const baseIndicators = useMemo(() => {
+    let inds: IndicatorConfig[];
     if (strategy) {
-      const inds = buildVirtualTradingChartIndicators(strategy, getParams, getVisualConfig);
-      if (inds.length) return inds.filter(i => i.timeframeVisibility?.[chartTimeframe] !== false);
+      inds = buildVirtualTradingChartIndicators(strategy, getParams, getVisualConfig);
+      inds = inds.filter(i => i.timeframeVisibility?.[chartTimeframe] !== false);
+    } else {
+      inds = defaultOverlayIndicators(getParams);
     }
-    return defaultOverlayIndicators(getParams);
-  }, [strategy, getParams, getVisualConfig, chartTimeframe]);
+    if (overlayVisibility) {
+      inds = ensurePaperChartOverlays(inds, getParams, getVisualConfig);
+    }
+    return inds;
+  }, [strategy, getParams, getVisualConfig, chartTimeframe, overlayVisibility]);
+
+  const indicators = useMemo(() => {
+    if (!overlayVisibility) return baseIndicators;
+    return applyPaperOverlayVisibility(baseIndicators, overlayVisibility);
+  }, [baseIndicators, overlayVisibility]);
+
+  const candleOverlayToggles = useMemo(() => {
+    if (!overlayVisibility || !onToggleOverlay) return undefined;
+    return listPaperOverlayToggleItems(baseIndicators, overlayVisibility);
+  }, [baseIndicators, overlayVisibility, onToggleOverlay]);
 
   const auxPaneCount = useMemo(
     () => countNonOverlayIndicatorPanes(indicators, isOverlayType),
@@ -321,6 +349,10 @@ const BacktestAnalysisChart: React.FC<Props> = ({
               indicatorAreaPriceLabelsEnabled={priceLabels}
               seriesPriceLabelsEnabled={priceLabels}
               showHoverToolbar
+              candleOverlayToggles={candleOverlayToggles}
+              onToggleCandleOverlay={onToggleOverlay
+                ? (key) => onToggleOverlay(key as PaperOverlayToggleKey)
+                : undefined}
             />
           )}
           {!loading && !error && bars.length === 0 && (