일목균형표 수정

frontend/src/App.tsx

@@ -596,6 +596,7 @@ function App() {
   const chartVolumeVisible = appDefaults.chartVolumeVisible ?? true;
   const chartLiveReceiveHighlight = appDefaults.chartLiveReceiveHighlight ?? true;
   const chartLegendOptions = appDefaults.chartLegendOptions;
+  const chartPaneSeparator = appDefaults.chartPaneSeparator;
   const paperTradingEnabled = appDefaults.paperTradingEnabled ?? true;
   const paperAutoTradeEnabled = appDefaults.paperAutoTradeEnabled ?? false;
   const [paperCashBalance, setPaperCashBalance] = useState(0);
@@ -970,6 +971,12 @@ function App() {
     slotRefs.current.forEach(slot => slot?.setVolumeVisible(chartVolumeVisible));
   }, [appSettingsLoaded, chartVolumeVisible]);
 
+  useEffect(() => {
+    if (!appSettingsLoaded) return;
+    managerRef.current?.setPaneSeparatorOptions(chartPaneSeparator);
+    slotRefs.current.forEach(slot => slot?.setPaneSeparatorOptions(chartPaneSeparator));
+  }, [appSettingsLoaded, chartPaneSeparator]);
+
   // mainChartStyle 변경 → ChartManager 즉시 적용
   useEffect(() => {
     managerRef.current?.updateMainSeriesStyle(mainChartStyle);
@@ -1791,6 +1798,12 @@ function App() {
               chartLegendOptions: { ...chartLegendOptions, ...patch } as unknown as Record<string, boolean>,
             });
           }}
+          chartPaneSeparator={chartPaneSeparator}
+          onChartPaneSeparatorChange={opts => {
+            saveAppDef({ chartPaneSeparator: opts });
+            managerRef.current?.setPaneSeparatorOptions(opts);
+            slotRefs.current.forEach(slot => slot?.setPaneSeparatorOptions(opts));
+          }}
           paperTradingEnabled={paperTradingEnabled}
           onPaperTradingEnabled={v => saveAppDef({ paperTradingEnabled: v })}
           paperInitialCapital={appDefaults.paperInitialCapital}
@@ -2096,6 +2109,7 @@ function App() {
                 onTradeOrderRequest={(req, idx) => applyTradeFill(req, idx)}
                 chartSeriesPriceLabels={chartSeriesPriceLabels}
                 chartVolumeVisible={chartVolumeVisible}
+                chartPaneSeparator={chartPaneSeparator}
                 chartLiveReceiveHighlight={chartLiveReceiveHighlight}
                 chartRealtimeSource={chartRealtimeSource as 'BACKEND_STOMP' | 'UPBIT_DIRECT'}
                 displayTimezone={displayTimezone}
@@ -2134,6 +2148,7 @@ function App() {
                     onTradeOrderRequest={(req, idx) => applyTradeFill(req, idx)}
                     chartSeriesPriceLabels={chartSeriesPriceLabels}
                     chartVolumeVisible={chartVolumeVisible}
+                    chartPaneSeparator={chartPaneSeparator}
                     chartLiveReceiveHighlight={chartLiveReceiveHighlight}
                     chartRealtimeSource={chartRealtimeSource as 'BACKEND_STOMP' | 'UPBIT_DIRECT'}
                     displayTimezone={displayTimezone}
@@ -2204,6 +2219,7 @@ function App() {
               mgr.setSeriesPriceLabelsEnabled(chartSeriesPriceLabels);
               const wrapper = document.querySelector('.chart-wrapper') as HTMLElement | null;
               mgr.setVolumeVisible(chartVolumeVisible, wrapper?.clientHeight);
+              mgr.setPaneSeparatorOptions(chartPaneSeparator);
               mgr.setDisplayTimezone(displayTimezone, timeframe);
               syncBacktestMarkersRef.current();
               // 왼쪽 스크롤 감지 → 과거 데이터 추가 로드
@@ -2243,6 +2259,8 @@ function App() {
             onDuplicateIndicator={handleDuplicateIndicator}
             focusedIndicatorId={focusedIndicatorId}
             onRestoreIndicators={handleRestoreIndicators}
+            volumeVisible={chartVolumeVisible}
+            paneSeparatorOptions={chartPaneSeparator}
           />
 
           {/* 백테스팅 결과 통계 배지 */}