알림목록 obv 그래프 문제 최종수정

frontend/src/components/tradeNotification/TradeSignalMiniChart.tsx

@@ -17,13 +17,13 @@ import { useAppSettings } from '../../hooks/useAppSettings';
 import type { ChartManager } from '../../utils/ChartManager';
 import { pinCandleWatch } from '../../utils/backendApi';
 import { timeframeToCandleType } from '../../utils/chartCandleType';
-import { DEFAULT_DISPLAY_TIMEZONE } from '../../utils/timezone';
 import { useIndicatorSettings } from '../../hooks/useIndicatorSettings';
 import { useSessionCandleOverlayControls } from '../../hooks/useSessionCandleOverlayControls';
-import { ensurePaperChartOverlays } from '../../utils/strategyToChartIndicators';
 import { mergeGlobalDefaultsOntoChartIndicators } from '../../utils/indicatorMainConfig';
-import { barsMeetObvVolumeRequirement } from '../../utils/obvChartBars';
-import { enrichIndicatorConfig } from '../../utils/indicatorRegistry';
+import { buildNotificationChartIndicators } from '../../utils/notificationChartIndicators';
+import { ensurePaperChartOverlays } from '../../utils/strategyToChartIndicators';
+import { ensureWorkspaceChartIndicators, invalidateWorkspaceChartIndicatorsCache } from '../../utils/workspaceChartIndicatorsCache';
+import { indicatorDefaultsFingerprint } from '../../utils/indicatorDefaultsFingerprint';
 import {
   applyNotificationSignalMarkers,
   type TradeSignalChartMarker,
@@ -70,21 +70,42 @@ const TradeSignalMiniChart: React.FC<Props> = ({
   const signalMarkerRef = useRef(signalMarker);
   signalMarkerRef.current = signalMarker;
 
-  const baseIndicators = useMemo(
-    () => mergeGlobalDefaultsOntoChartIndicators(
+  const [wsIndicators, setWsIndicators] = useState<IndicatorConfig[]>([]);
+  const [wsRevision, setWsRevision] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    invalidateWorkspaceChartIndicatorsCache();
+    void ensureWorkspaceChartIndicators().then(inds => {
+      if (cancelled) return;
+      setWsIndicators(inds);
+      setWsRevision(r => r + 1);
+    });
+    return () => { cancelled = true; };
+  }, [settingsRevision]);
+
+  const baseIndicators = useMemo(() => {
+    const strategyMerged = mergeGlobalDefaultsOntoChartIndicators(
       ensurePaperChartOverlays(indicators, getParams, getVisualConfig),
       getParams,
       getVisualConfig,
-    ).map(enrichIndicatorConfig),
-    [indicators, getParams, getVisualConfig, settingsRevision],
+      wsIndicators,
+    );
+    return buildNotificationChartIndicators(strategyMerged, wsIndicators);
+  }, [indicators, getParams, getVisualConfig, settingsRevision, wsRevision, wsIndicators]);
+
+  const indicatorStyleKey = useMemo(
+    () => baseIndicators.map(i => indicatorDefaultsFingerprint(i)).join('|'),
+    [baseIndicators],
   );
 
-  const needsDeepObv = useMemo(
+  /** OBV 등 워크스페이스 지표가 있으면 ws config 로드 완료 후 렌더 (maLength=1 플래시 방지) */
+  const needsWorkspaceConfig = useMemo(
     () => baseIndicators.some(i => i.type === 'OBV'),
     [baseIndicators],
   );
 
-  /** 메인 차트와 동일 소스 — STOMP(+ volume 없으면 Upbit 폴백). deepObvHistory 로 장기 봉 확보 */
+  /** 실시간(메인) 차트와 동일한 데이터 소스 사용 */
   const chartRealtimeSource: ChartRealtimeSource = appChartSource;
 
   const {
@@ -162,28 +183,23 @@ const TradeSignalMiniChart: React.FC<Props> = ({
       onNewCandle: handleNewCandle,
       enabled: enabled && useUpbit,
       source: chartRealtimeSource,
-      deepObvHistory: needsDeepObv,
-    }), [handleTickUpdate, handleNewCandle, enabled, useUpbit, needsDeepObv, chartRealtimeSource]),
+    }), [handleTickUpdate, handleNewCandle, enabled, useUpbit, chartRealtimeSource]),
   );
 
   const { isLoadingMore } = useHistoryLoader({
     symbol: market,
     timeframe,
-    /** OBV — 백엔드 history volume=0 봉 prepend 시 본선 왜곡 방지 */
-    isUpbit: useUpbit && enabled && !needsDeepObv,
+    isUpbit: useUpbit && enabled,
     managerRef,
   });
 
   barsMarketRef.current = barsMarket;
   const barsReady = bars.length >= 2 && barsMarket === market;
 
-  const obvBarsReady = useMemo(() => {
-    if (!needsDeepObv) return true;
-    if (bars.length < 2) return false;
-    return barsMeetObvVolumeRequirement(bars);
-  }, [needsDeepObv, bars]);
+  // 워크스페이스 지표(OBV maLength 등) 로드 완료 전에는 렌더 보류 → 잘못된 기본값 플래시 방지
+  const wsConfigReady = !needsWorkspaceConfig || wsRevision > 0;
 
-  const chartDataReady = barsReady && obvBarsReady && settingsLoaded;
+  const chartDataReady = barsReady && wsConfigReady && settingsLoaded;
 
   useLayoutEffect(() => {
     chartLiveReadyRef.current = false;
@@ -265,9 +281,6 @@ const TradeSignalMiniChart: React.FC<Props> = ({
       ].filter(Boolean).join(' ')}
     >
       {(!settingsLoaded || isLoading) && <div className="tnl-mini-chart-loading">로딩…</div>}
-      {needsDeepObv && !isLoading && !obvBarsReady && (
-        <div className="tnl-mini-chart-loading">OBV 거래량 데이터 로딩…</div>
-      )}
       {isLoadingMore && (
         <div className="chart-history-loading">
           <div className="loading-spinner" style={{ width: 12, height: 12 }} />
@@ -275,7 +288,7 @@ const TradeSignalMiniChart: React.FC<Props> = ({
       )}
       {chartDataReady && (
       <TradingChart
-        key={`${market}-${timeframe}-${chartReloadTick}-${chartRealtimeSource}-${needsDeepObv ? 'obv' : 'std'}-${settingsRevision}-${chartIndicators.map(i => i.id).join(',')}`}
+        key={`${market}-${timeframe}-${chartReloadTick}-${chartRealtimeSource}-${settingsRevision}-${wsRevision}-${indicatorStyleKey}-${chartIndicators.map(i => i.id).join(',')}`}
         chartVisible
         bars={bars}
         barsMarket={barsMarket}