보조지표 툴바추가

frontend/src/components/TradingChart.tsx

@@ -46,6 +46,7 @@ function canApplyChartBars(
 }
 import DrawingCanvas, { hitTestDrawing } from './DrawingCanvas';
 import PaneLegend, { type PaneLegendProps } from './PaneLegend';
+import ChartRightToolbar from './ChartRightToolbar';
 import CandlePaneTimeAxis from './CandlePaneTimeAxis';
 import ChartHoverToolbar from './ChartHoverToolbar';
 import ChartMagnifier from './ChartMagnifier';
@@ -225,6 +226,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
   const prevIndicatorsListRef = useRef<IndicatorConfig[]>(indicators);
   const indicatorSyncInFlightRef = useRef(false);
   const [paneLegendPaused, setPaneLegendPaused] = useState(false);
+  const [chartBodyHeight, setChartBodyHeight] = useState(0);
   const pendingIndicatorResyncRef = useRef(false);
   const indicatorReloadGenRef = useRef(0);
   const prevMarket      = useRef<string>(market);
@@ -242,6 +244,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
   const [chartMgr, setChartMgr] = useState<ChartManager | null>(null);
   /** 캔들 pane 전체보기 (오버레이 지표 유지, 하단 보조지표 pane 숨김) */
   const [candleOnlyMode, setCandleOnlyMode] = useState(false);
+  const paneDragRef = useRef<((id: string, e: React.PointerEvent) => void) | null>(null);
 
   useEffect(() => {
     if (barsMarket === market) {
@@ -259,6 +262,16 @@ const TradingChart: React.FC<TradingChartProps> = ({
     chartVisibleRef.current = chartVisible;
   }, [chartVisible]);
 
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const update = () => setChartBodyHeight(el.clientHeight);
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [chartMgr]);
+
   const toggleCandleOnly = useCallback(() => {
     setCandleOnlyMode(v => !v);
   }, []);
@@ -1360,10 +1373,27 @@ const TradingChart: React.FC<TradingChartProps> = ({
       style={{ flex: 1, position: 'relative', minHeight: 0 }}
       onPointerMove={handleWrapperMouseMove}
     >
-      <div
-        ref={containerRef}
-        className="chart-container"
-      />
+      <div className="chart-main-row">
+        <div
+          ref={containerRef}
+          className="chart-container"
+        />
+        {chartMgr && !candleOnlyMode && showPaneLegend && (
+          <ChartRightToolbar
+            manager={chartMgr}
+            indicators={indicators}
+            chartHeight={chartBodyHeight}
+            paused={paneLegendPaused}
+            onSplit={onSplitIndicatorPane}
+            onRemove={onRemoveIndicator}
+            onDuplicate={onDuplicateIndicator}
+            onExpand={onExpandIndicator}
+            onRestore={onRestoreIndicators}
+            focusedId={focusedIndicatorId}
+            onDragStart={(id, e) => paneDragRef.current?.(id, e)}
+          />
+        )}
+      </div>
       {ctxMenu && (
         <ChartContextMenu
           x={ctxMenu.x}
@@ -1423,12 +1453,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
           onDoubleClick={(id) => onSeriesDoubleClick?.(id, { x: 0, y: 0 })}
           onReorder={onReorderIndicators}
           onMerge={onMergeIndicators}
-          onSplit={onSplitIndicatorPane}
-          onExpand={onExpandIndicator}
-          onRemove={onRemoveIndicator}
-          onDuplicate={onDuplicateIndicator}
-          focusedId={focusedIndicatorId}
-          onRestore={onRestoreIndicators}
+          dragHandleRef={paneDragRef}
           crosshairInfoVisible={crosshairInfoVisible}
         />
       )}