투자관리 화면 수정

frontend/src/components/TradingChart.tsx

@@ -50,7 +50,7 @@ function canApplyChartBars(
 }
 import DrawingCanvas, { hitTestDrawing } from './DrawingCanvas';
 import PaneLegend, { type PaneLegendProps } from './PaneLegend';
-import ChartRightToolbar from './ChartRightToolbar';
+import ChartRightToolbar, { type CandleOverlayToggleItem } from './ChartRightToolbar';
 import CandlePaneTimeAxis from './CandlePaneTimeAxis';
 import ChartHoverToolbar from './ChartHoverToolbar';
 import ChartMagnifier from './ChartMagnifier';
@@ -161,6 +161,9 @@ interface TradingChartProps {
   defaultCandleOnly?: boolean;
   /** 캔들 pane 좌하단 전체보기/복원 버튼 (기본 true) */
   showCandlePaneControls?: boolean;
+  /** 캔들 오버레이(이동평균·일목·볼린저) 표시 토글 — 우측 툴바 상단 */
+  candleOverlayToggles?: CandleOverlayToggleItem[];
+  onToggleCandleOverlay?: (key: string) => void;
 }
 
 const TradingChart: React.FC<TradingChartProps> = ({
@@ -203,6 +206,8 @@ const TradingChart: React.FC<TradingChartProps> = ({
   dataLoading = false,
   defaultCandleOnly = false,
   showCandlePaneControls = true,
+  candleOverlayToggles,
+  onToggleCandleOverlay,
 }) => {
   const containerRef  = useRef<HTMLDivElement>(null);
   const wrapperRef    = useRef<HTMLDivElement>(null);   // 스크롤 래퍼
@@ -401,21 +406,24 @@ const TradingChart: React.FC<TradingChartProps> = ({
       required = mgr.resetPaneHeights(wrapperH);
     }
 
-    const w = wrapper.clientWidth;
+    // LWC는 chart-container에 마운트 — 우측 툴바(44px) 제외 너비로 맞춰 가격 라벨이 가리지 않음
+    const plotW = Math.max(0, container.clientWidth);
+    const plotH = Math.max(0, container.clientHeight > 0 ? container.clientHeight : wrapperH);
 
     if (candleOnly || paneLayoutClamp) {
       // 전체보기·미니차트: 래퍼 높이에 고정 resize (autoSize 피드백 루프·무한 스크롤 방지)
-      try {
-        if (w > 0 && wrapperH > 0) mgr.resize(w, wrapperH);
-      } catch { /* ok */ }
       container.style.height = `${wrapperH}px`;
+      const clampH = wrapperH > 0 ? wrapperH : plotH;
+      try {
+        if (plotW > 0 && clampH > 0) mgr.resize(plotW, clampH);
+      } catch { /* ok */ }
       if (candleOnly) wrapper.scrollTop = 0;
     } else if (required > wrapperH + 4) {
       container.style.height = `${required}px`;
     } else {
       container.style.height = '';
       try {
-        if (w > 0 && wrapperH > 0) mgr.resize(w, wrapperH);
+        if (plotW > 0 && plotH > 0) mgr.resize(plotW, plotH);
       } catch { /* ok */ }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1560,6 +1568,8 @@ const TradingChart: React.FC<TradingChartProps> = ({
             indicators={indicators}
             chartHeight={chartBodyHeight}
             paused={paneLegendPaused}
+            candleOverlayToggles={candleOverlayToggles}
+            onToggleCandleOverlay={onToggleCandleOverlay}
             onSplit={onSplitIndicatorPane}
             onRemove={onRemoveIndicator}
             onDuplicate={onDuplicateIndicator}