투자관리 차트탭 기능 수정

frontend/src/components/TradingChart.tsx

@@ -149,6 +149,8 @@ interface TradingChartProps {
   paneSeparatorOptions?: ChartPaneSeparatorOptions;
   /** true: pane 합산 높이로 chart-container 를 키우지 않고 래퍼 높이에 맞춤 (미니 차트·알림 목록) */
   paneLayoutClamp?: boolean;
+  /** 캔들+거래량 vs 보조 pane 높이 비율 (aux 0 이면 미적용) */
+  paneAreaRatio?: { candle: number; aux: number } | null;
   /** 보조지표 pane 레전드(이름·값 오버레이) 표시 (기본 true, 알림 미니차트는 false) */
   showPaneLegend?: boolean;
   /** 크로스헤어 이동 시 OHLC·보조지표 수치 표시 (기본 true) */
@@ -195,6 +197,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
   chartVisible = true,
   paneSeparatorOptions,
   paneLayoutClamp = false,
+  paneAreaRatio = null,
   showPaneLegend = true,
   crosshairInfoVisible = true,
   dataLoading = false,
@@ -227,6 +230,8 @@ const TradingChart: React.FC<TradingChartProps> = ({
   const seriesDblSuppressRef = useRef(false);
   const toggleCandleOnlyRef = useRef<() => void>(() => {});
   const candleOnlyModeRef = useRef(false);
+  const paneAreaRatioRef = useRef(paneAreaRatio);
+  paneAreaRatioRef.current = paneAreaRatio;
   const lastCrosshairPriceRef = useRef<number | null>(null);
   const onTradeOrderRequestRef = useRef(onTradeOrderRequest);
   onTradeOrderRequestRef.current = onTradeOrderRequest;
@@ -387,6 +392,12 @@ const TradingChart: React.FC<TradingChartProps> = ({
       if (mgr.isCandleOnlyLayout()) {
         mgr.restoreFromCandleFullscreen(wrapperH);
       }
+      const ratio = paneAreaRatioRef.current;
+      if (ratio && ratio.aux > 0) {
+        mgr.setPaneAreaRatio(ratio.candle, ratio.aux);
+      } else {
+        mgr.setPaneAreaRatio(0, 0);
+      }
       required = mgr.resetPaneHeights(wrapperH);
     }
 
@@ -408,7 +419,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
       } catch { /* ok */ }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [paneLayoutClamp]);
+  }, [paneLayoutClamp, paneAreaRatio]);
 
   /** pane 레이아웃 + 가격·시간축 정상화 (느린 네트워크·레이아웃 지연 후 복구용) */
   const normalizeChartViewport = useCallback((mgr: ChartManager) => {
@@ -938,8 +949,8 @@ const TradingChart: React.FC<TradingChartProps> = ({
       if (!panStateRef.current.active) return;
       if (panStateRef.current.moved) {
         suppressClickRef.current = true;
+        managerRef.current?.notifyViewportChanged();
       }
-      managerRef.current?.endCandleAxisPan();
       panStateRef.current.active = false;
       container.style.cursor = canPanRef.current ? 'grab' : '';
     };