차트 설정 수정

frontend/src/components/TradingChart.tsx

@@ -337,7 +337,6 @@ const TradingChart: React.FC<TradingChartProps> = ({
     const el = containerRef.current;
     if (el && !panStateRef.current.active) {
       el.style.cursor = canPanRef.current ? 'grab' : '';
-      el.style.touchAction = canPanRef.current ? 'none' : '';
     }
   }, [mode, drawingTool]);
 
@@ -365,6 +364,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
   useEffect(() => {
     if (!paneSeparatorOptions) return;
     managerRef.current?.setPaneSeparatorOptions(paneSeparatorOptions);
+    managerRef.current?.refreshPaneSeparatorOverlay();
   }, [paneSeparatorOptions]);
 
   /**
@@ -913,15 +913,29 @@ const TradingChart: React.FC<TradingChartProps> = ({
     };
     container.addEventListener('contextmenu', onContextMenuCapture, { capture: true });
 
+    const wrapper = wrapperRef.current;
+    const isChartPlotPointer = (clientX: number, clientY: number) => {
+      const rect = container.getBoundingClientRect();
+      const chartX = clientX - rect.left;
+      const chartY = clientY - rect.top;
+      if (chartX < 0 || chartX > container.clientWidth) return null;
+      if (chartY < 0 || chartY > container.clientHeight) return null;
+      return { chartX, chartY };
+    };
+
     const onPanPointerDown = (e: PointerEvent) => {
       if (!canPanRef.current || e.button !== 0) return;
-      const rect = container.getBoundingClientRect();
-      const chartX = e.clientX - rect.left;
-      const chartY = e.clientY - rect.top;
-      if (mgr.isOnPriceAxis(chartX, chartY) || mgr.isOnTimeAxis(chartY)) return;
-      const originPaneIndex = mgr.getPaneIndexAtChartY(chartY);
+      const target = e.target as HTMLElement | null;
+      if (target?.closest('.chart-right-toolbar, .pane-legend-item, .pane-drag-handle, .pane-btn, .candle-pane-controls')) {
+        return;
+      }
+      const pt = isChartPlotPointer(e.clientX, e.clientY);
+      if (!pt) return;
+      if (mgr.isOnPriceAxis(pt.chartX, pt.chartY) || mgr.isOnTimeAxis(pt.chartY)) return;
+      const originPaneIndex = mgr.getPaneIndexAtChartY(pt.chartY);
+      const captureEl = wrapper ?? container;
       try {
-        container.setPointerCapture(e.pointerId);
+        captureEl.setPointerCapture(e.pointerId);
       } catch {
         /* ignore */
       }
@@ -953,8 +967,16 @@ const TradingChart: React.FC<TradingChartProps> = ({
       });
     };
 
-    const onPanPointerUp = () => {
+    const onPanPointerUp = (e: PointerEvent) => {
       if (!panStateRef.current.active) return;
+      const captureEl = wrapper ?? container;
+      try {
+        if (captureEl.hasPointerCapture(e.pointerId)) {
+          captureEl.releasePointerCapture(e.pointerId);
+        }
+      } catch {
+        /* ignore */
+      }
       if (panStateRef.current.moved) {
         suppressClickRef.current = true;
         managerRef.current?.notifyViewportChanged();
@@ -963,8 +985,10 @@ const TradingChart: React.FC<TradingChartProps> = ({
       container.style.cursor = canPanRef.current ? 'grab' : '';
     };
 
-    container.addEventListener('pointerdown', onPanPointerDown);
-    window.addEventListener('pointermove', onPanPointerMove);
+    const panCapture = true;
+    const panTarget = wrapper ?? container;
+    panTarget.addEventListener('pointerdown', onPanPointerDown, panCapture);
+    window.addEventListener('pointermove', onPanPointerMove, { passive: false });
     window.addEventListener('pointerup', onPanPointerUp);
     window.addEventListener('pointercancel', onPanPointerUp);
 
@@ -1122,7 +1146,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
       container.removeEventListener('click', handleDrawingCapture, { capture: true });
       container.removeEventListener('contextmenu', onContextMenuCapture, { capture: true });
       container.removeEventListener('dblclick', onCandlePaneDblClick, { capture: true });
-      container.removeEventListener('pointerdown', onPanPointerDown);
+      panTarget.removeEventListener('pointerdown', onPanPointerDown, panCapture);
       container.removeEventListener('wheel', onWheelCapture, { capture: true });
       window.removeEventListener('pointermove', onPanPointerMove);
       window.removeEventListener('pointerup', onPanPointerUp);