백테스팅 캔들차트 하단에 보조지표 표시

frontend/src/components/TradingChart.tsx

@@ -150,6 +150,8 @@ interface TradingChartProps {
   paneSeparatorOptions?: ChartPaneSeparatorOptions;
   /** true: pane 합산 높이로 chart-container 를 키우지 않고 래퍼 높이에 맞춤 (미니 차트·알림 목록) */
   paneLayoutClamp?: boolean;
+  /** paneLayoutClamp=true 환경에서도 캔들/보조지표 비율 드래그 핸들을 표시 (백테스팅 차트 등) */
+  showPaneResizeHandle?: boolean;
   /** 캔들+거래량 vs 보조 pane 높이 비율 (aux 0 이면 미적용) */
   paneAreaRatio?: { candle: number; aux: number } | null;
   /** 보조지표 pane 레전드(이름·값 오버레이) 표시 (기본 true, 알림 미니차트는 false) */
@@ -207,6 +209,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
   chartVisible = true,
   paneSeparatorOptions,
   paneLayoutClamp = false,
+  showPaneResizeHandle = false,
   paneAreaRatio = null,
   showPaneLegend = true,
   crosshairInfoVisible = true,
@@ -250,6 +253,8 @@ const TradingChart: React.FC<TradingChartProps> = ({
   const candleOnlyModeRef = useRef(false);
   const paneAreaRatioRef = useRef(paneAreaRatio);
   paneAreaRatioRef.current = paneAreaRatio;
+  const paneLayoutClampRef = useRef(paneLayoutClamp);
+  paneLayoutClampRef.current = paneLayoutClamp;
   /** 사용자 드래그로 설정한 pane 비율 — prop 변경 시 초기화 */
   const userDraggedRatioRef = useRef<{ candle: number; aux: number } | null>(null);
   const lastCrosshairPriceRef = useRef<number | null>(null);
@@ -390,8 +395,11 @@ const TradingChart: React.FC<TradingChartProps> = ({
     userDraggedRatioRef.current = { candle: newCandle, aux: newAux };
     const required = mgr.resetPaneHeights(H);
 
-    // 스크롤 영역이 필요한 경우 컨테이너 확장
-    const newContainerH = required > H + 4 ? required : H;
+    // paneLayoutClamp 모드: 컨테이너를 래퍼 높이에 고정 (overflow:hidden 으로 클립)
+    // 일반 모드: 보조지표 필요 시 컨테이너 확장하여 스크롤 영역 확보
+    const newContainerH = paneLayoutClampRef.current
+      ? H
+      : (required > H + 4 ? required : H);
     if (container.style.height !== `${newContainerH}px`) {
       container.style.height = `${newContainerH}px`;
     }
@@ -1698,7 +1706,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
           className="chart-container"
         />
         {/* 캔들 pane 하단 드래그 핸들 — 캔들/보조지표 높이 비율 조절 */}
-        {candlePaneBottomY != null && !candleOnlyMode && !paneLayoutClamp && chartPaintReady && (
+        {candlePaneBottomY != null && !candleOnlyMode && (!paneLayoutClamp || showPaneResizeHandle) && chartPaintReady && (
           <div
             className="chart-pane-resize-handle"
             style={{ top: candlePaneBottomY }}