알림 전체닫기 오동작 수정

frontend/src/components/backtest/BacktestAnalysisChart.tsx

@@ -34,6 +34,7 @@ import {
   ensurePaperChartOverlays,
   resolveStrategyPrimaryTimeframe,
 } from '../../utils/strategyToChartIndicators';
+import type { ChartOverlayToggleKey } from '../../utils/chartOverlayVisibility';
 
 interface Props {
   symbol: string;
@@ -60,6 +61,11 @@ interface Props {
 
 const noop = () => {};
 
+/** PaperOverlayVisibility → ChartManager 동기화용 (candle 항상 true) */
+function paperVisToChartVis(pv: PaperOverlayVisibility) {
+  return { ma: pv.ma, bollinger: pv.bollinger, ichimoku: pv.ichimoku, candle: true };
+}
+
 let _indSeq = 0;
 function newIndId() {
   _indSeq += 1;
@@ -116,10 +122,14 @@ const BacktestAnalysisChart: React.FC<Props> = ({
   const [error, setError] = useState<string | null>(null);
   const [chartType] = useState<ChartType>('candlestick');
   const [strategy, setStrategy] = useState<StrategyDto | undefined>();
+  /** 개별 지표 숨김 ID 집합 (실시간 차트와 동일한 per-indicator 숨김 지원) */
+  const [hiddenIndicatorIds, setHiddenIndicatorIds] = useState<ReadonlySet<string>>(new Set());
   const managerRef = useRef<ChartManager | null>(null);
+  const overlayVisibilityRef = useRef(overlayVisibility);
   const logicalRangeUnsubRef = useRef<(() => void) | null>(null);
   const viewportUnsubRef = useRef<(() => void) | null>(null);
   const loadMoreRefRef = useRef<MutableRefObject<() => void>>({ current: () => {} });
+  overlayVisibilityRef.current = overlayVisibility;
   const signalsRef = useRef(signals);
   signalsRef.current = signals;
   const onHistoryBarsLoadedRef = useRef(onHistoryBarsLoaded);
@@ -159,15 +169,55 @@ const BacktestAnalysisChart: React.FC<Props> = ({
   }, [strategy, getParams, getVisualConfig, chartTimeframe, overlayVisibility]);
 
   const indicators = useMemo(() => {
-    if (!overlayVisibility) return baseIndicators;
-    return applyPaperOverlayVisibility(baseIndicators, overlayVisibility);
-  }, [baseIndicators, overlayVisibility]);
+    let inds = overlayVisibility
+      ? applyPaperOverlayVisibility(baseIndicators, overlayVisibility)
+      : baseIndicators;
+    // 개별 지표 숨김 상태 반영 (per-indicator hidden toggle)
+    if (hiddenIndicatorIds.size > 0) {
+      inds = inds.map(ind =>
+        hiddenIndicatorIds.has(ind.id) ? { ...ind, hidden: true } : ind,
+      );
+    }
+    return inds;
+  }, [baseIndicators, overlayVisibility, hiddenIndicatorIds]);
 
   const candleOverlayToggles = useMemo(() => {
     if (!overlayVisibility || !onToggleOverlay) return undefined;
     return listPaperOverlayToggleItems(baseIndicators, overlayVisibility);
   }, [baseIndicators, overlayVisibility, onToggleOverlay]);
 
+  /**
+   * 캔들 오버레이 그룹 토글 — 실시간 차트와 동일하게 ChartManager 를 즉시 호출한 뒤
+   * 부모 state 도 업데이트한다.
+   */
+  const handleToggleCandleOverlay = useCallback((key: ChartOverlayToggleKey) => {
+    const pKey = key as PaperOverlayToggleKey;
+    const prev = overlayVisibilityRef.current;
+    if (prev && pKey in prev) {
+      const newVisible = !prev[pKey];
+      managerRef.current?.setChartOverlayGroupVisible(key, newVisible);
+    }
+    onToggleOverlay?.(pKey);
+  }, [onToggleOverlay]);
+
+  /**
+   * 개별 보조지표 숨김/표시 — 실시간 차트와 동일한 per-indicator 토글
+   */
+  const handleToggleIndicatorHidden = useCallback((id: string) => {
+    setHiddenIndicatorIds(prev => {
+      const next = new Set(prev);
+      const willHide = !next.has(id);
+      if (willHide) {
+        next.add(id);
+      } else {
+        next.delete(id);
+      }
+      // ChartManager 즉시 반영
+      managerRef.current?.toggleIndicatorVisible(id, !willHide);
+      return next;
+    });
+  }, []);
+
   const auxPaneCount = useMemo(
     () => countNonOverlayIndicatorPanes(indicators, isOverlayType),
     [indicators],
@@ -284,6 +334,10 @@ const BacktestAnalysisChart: React.FC<Props> = ({
 
   const onManagerReady = useCallback((mgr: ChartManager) => {
     managerRef.current = mgr;
+    // 실시간 차트와 동일하게: 마운트 시 오버레이 가시성 ChartManager 에 동기화
+    if (overlayVisibilityRef.current) {
+      mgr.setChartOverlayVisibility(paperVisToChartVis(overlayVisibilityRef.current));
+    }
     setupHistoryScroll(mgr);
     setLoadedBarCount(mgr.getRawBarsLength());
     applyPaneRatio(mgr);
@@ -393,9 +447,8 @@ const BacktestAnalysisChart: React.FC<Props> = ({
               seriesPriceLabelsEnabled={priceLabels}
               showHoverToolbar
               candleOverlayToggles={candleOverlayToggles}
-              onToggleCandleOverlay={onToggleOverlay
-                ? (key) => onToggleOverlay(key as PaperOverlayToggleKey)
-                : undefined}
+              onToggleCandleOverlay={onToggleOverlay ? handleToggleCandleOverlay : undefined}
+              onToggleIndicatorHidden={handleToggleIndicatorHidden}
             />
           )}
           {!loading && !error && bars.length === 0 && (