전략편집기 수정

frontend/src/utils/pointerDrag.ts

@@ -40,6 +40,8 @@ export function clientXYFromNative(e: Event): ClientXY | null {
 export interface BindWindowDragOptions {
   /** 터치 드래그 중 페이지 스크롤 방지 (기본 true) */
   preventTouchScroll?: boolean;
+  /** capture 단계에서 수신 — overlay stopPropagation 우회 */
+  useCapture?: boolean;
 }
 
 /**
@@ -51,9 +53,16 @@ export function bindWindowDrag(
   onEnd: (xy: ClientXY, ev: Event) => void,
   options: BindWindowDragOptions = {},
 ): () => void {
-  const { preventTouchScroll = true } = options;
+  const { preventTouchScroll = true, useCapture = false } = options;
   let lastXY: ClientXY = { x: 0, y: 0 };
 
+  const moveOpts: AddEventListenerOptions | boolean = useCapture
+    ? { capture: true, passive: !preventTouchScroll }
+    : { passive: !preventTouchScroll };
+  const endOpts: AddEventListenerOptions | boolean = useCapture
+    ? { capture: true }
+    : false;
+
   const move = (ev: Event) => {
     const xy = clientXYFromNative(ev);
     if (!xy) return;
@@ -69,24 +78,24 @@ export function bindWindowDrag(
     onEnd(xy, ev);
   };
 
-  window.addEventListener('pointermove', move);
-  window.addEventListener('pointerup', end);
-  window.addEventListener('pointercancel', end);
-  window.addEventListener('mousemove', move);
-  window.addEventListener('mouseup', end);
-  window.addEventListener('touchmove', move, { passive: !preventTouchScroll });
-  window.addEventListener('touchend', end);
-  window.addEventListener('touchcancel', end);
+  window.addEventListener('pointermove', move, moveOpts);
+  window.addEventListener('pointerup', end, endOpts);
+  window.addEventListener('pointercancel', end, endOpts);
+  window.addEventListener('mousemove', move, moveOpts);
+  window.addEventListener('mouseup', end, endOpts);
+  window.addEventListener('touchmove', move, moveOpts);
+  window.addEventListener('touchend', end, endOpts);
+  window.addEventListener('touchcancel', end, endOpts);
 
   return () => {
-    window.removeEventListener('pointermove', move);
-    window.removeEventListener('pointerup', end);
-    window.removeEventListener('pointercancel', end);
-    window.removeEventListener('mousemove', move);
-    window.removeEventListener('mouseup', end);
-    window.removeEventListener('touchmove', move);
-    window.removeEventListener('touchend', end);
-    window.removeEventListener('touchcancel', end);
+    window.removeEventListener('pointermove', move, moveOpts);
+    window.removeEventListener('pointerup', end, endOpts);
+    window.removeEventListener('pointercancel', end, endOpts);
+    window.removeEventListener('mousemove', move, moveOpts);
+    window.removeEventListener('mouseup', end, endOpts);
+    window.removeEventListener('touchmove', move, moveOpts);
+    window.removeEventListener('touchend', end, endOpts);
+    window.removeEventListener('touchcancel', end, endOpts);
   };
 }