일목균형표 수정

frontend/src/components/ChartSlot.tsx

@@ -42,6 +42,7 @@ import type {
   IndicatorConfig, LegendData, Drawing, ChartMode, MainChartStyle,
 } from '../types';
 import type { ChartManager } from '../utils/ChartManager';
+import type { ChartPaneSeparatorOptions } from '../types/chartPaneSeparator';
 
 // ── 타임프레임 옵션 ────────────────────────────────────────────────────────
 const TF_OPTIONS: Timeframe[] = ['1m','3m','5m','10m','15m','30m','1h','4h','1D','1W','1M'];
@@ -112,6 +113,7 @@ export interface ChartSlotHandle {
   setSeriesPriceLabelsEnabled: (enabled: boolean) => void;
   /** 거래량 pane on/off */
   setVolumeVisible: (visible: boolean) => void;
+  setPaneSeparatorOptions: (opts: ChartPaneSeparatorOptions) => void;
 }
 
 // ── Props ─────────────────────────────────────────────────────────────────
@@ -172,6 +174,8 @@ export interface ChartSlotProps {
   chartLiveReceiveHighlight?: boolean;
   /** 실시간 차트 화면 표시 여부 (설정 등 다른 메뉴에서 숨김 시 false) */
   chartVisible?: boolean;
+  /** pane 구분선 */
+  chartPaneSeparator?: ChartPaneSeparatorOptions;
 }
 
 const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot({
@@ -195,6 +199,7 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
   compactMode = false,
   chartLiveReceiveHighlight = true,
   chartVisible = true,
+  chartPaneSeparator,
 }, ref) {
   // ── 전역 지표 파라미터 + 시각 설정 (DB 동기화) ────────────────────────
   const { getParams, saveParams, getVisualConfig, saveVisual } = useIndicatorSettings();
@@ -309,6 +314,9 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
     setVolumeVisible: (visible: boolean) => {
       managerRef.current?.setVolumeVisible(visible);
     },
+    setPaneSeparatorOptions: (opts: ChartPaneSeparatorOptions) => {
+      managerRef.current?.setPaneSeparatorOptions(opts);
+    },
   }), []);
 
   // 자석모드 변경 → ChartManager 크로스헤어 모드 즉시 반영
@@ -324,6 +332,11 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
     managerRef.current?.setVolumeVisible(chartVolumeVisible);
   }, [chartVolumeVisible]);
 
+  useEffect(() => {
+    if (!chartPaneSeparator) return;
+    managerRef.current?.setPaneSeparatorOptions(chartPaneSeparator);
+  }, [chartPaneSeparator]);
+
   // 외부 심볼 동기화
   useEffect(() => {
     if (forcedSymbol && forcedSymbol !== symbol) setSymbol(forcedSymbol);
@@ -806,6 +819,7 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
           drawingsVisible={!compactMode}
           showHoverToolbar={!compactMode}
           volumeVisible={chartVolumeVisible}
+          paneSeparatorOptions={chartPaneSeparator}
           onCrosshair={data => {
             setLegend(data);
             if (data && onCrosshairTime) onCrosshairTime(data.time ?? 0);
@@ -824,6 +838,7 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
             }
             mgr.setSeriesPriceLabelsEnabled(chartSeriesPriceLabels);
             mgr.setVolumeVisible(chartVolumeVisible);
+            if (chartPaneSeparator) mgr.setPaneSeparatorOptions(chartPaneSeparator);
             // Time sync: 가시 시간 범위 변화 구독
             mgr.subscribeVisibleTimeRange(r => {
               if (!r || isSyncingTimeRef.current) return;