맥 os 전략편집기 지표 드래그 문제해결

frontend/src/components/strategyEditor/PaletteChip.tsx

@@ -4,7 +4,6 @@ import {
   handlePalettePointerDown,
   handlePaletteTouchStart,
   endHtmlDragMouseTracking,
-  markPaletteHtmlDragEnd,
   needsPointerPaletteDrag,
   shouldSuppressPaletteClick,
   startHtmlDragMouseTracking,
@@ -52,8 +51,10 @@ export default function PaletteChip({
     longPeriod,
   });
 
+  const pointerMode = needsPointerPaletteDrag();
+
   const onDragStart = (e: React.DragEvent) => {
-    if (needsPointerPaletteDrag()) {
+    if (pointerMode) {
       e.preventDefault();
       return;
     }
@@ -67,14 +68,17 @@ export default function PaletteChip({
   };
 
   const onPointerDown = (e: React.PointerEvent) => {
+    if (!pointerMode) return;
     handlePalettePointerDown(e, buildPayload(), composite ? `${label} + ${label}` : label);
   };
 
   const onMouseDown = (e: React.MouseEvent) => {
+    if (!pointerMode) return;
     handlePaletteMouseDown(e, buildPayload(), composite ? `${label} + ${label}` : label);
   };
 
   const onTouchStart = (e: React.TouchEvent) => {
+    if (!pointerMode) return;
     handlePaletteTouchStart(e, buildPayload(), composite ? `${label} + ${label}` : label);
   };
 
@@ -102,11 +106,11 @@ export default function PaletteChip({
 
   return (
     <div
-      draggable={!needsPointerPaletteDrag()}
-      className={`se-palette-card ${color ? `se-palette-card--${color}` : 'se-palette-card--ind'}${composite ? ' se-palette-card--composite' : ''}${selected ? ' se-palette-card--selected' : ''}${needsPointerPaletteDrag() ? ' se-palette-card--pointer' : ''}`}
+      draggable={!pointerMode}
+      className={`se-palette-card ${color ? `se-palette-card--${color}` : 'se-palette-card--ind'}${composite ? ' se-palette-card--composite' : ''}${selected ? ' se-palette-card--selected' : ''}${pointerMode ? ' se-palette-card--pointer' : ''}`}
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
-      onPointerDown={onPointerDown}
+      onPointerDownCapture={onPointerDown}
       onMouseDown={onMouseDown}
       onTouchStart={onTouchStart}
       onClick={handleClick}

frontend/src/components/strategyEditor/PaletteDragOverlay.tsx

@@ -51,11 +51,6 @@ export default function PaletteDragOverlay() {
     bindPaletteDragOverlayElement(el);
     const s = sessionRef.current;
     if (el && s) {
-      try {
-        el.setPointerCapture(s.pointerId);
-      } catch {
-        /* window backup in paletteDragSession */
-      }
       const label = labelRef.current;
       if (label) {
         label.style.left = `${s.x}px`;

frontend/src/components/strategyEditor/SidewaysFilterPaletteTab.tsx

@@ -2,6 +2,7 @@ import React, { useMemo, useState, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import type { DefType } from '../../utils/strategyEditorShared';
 import {
+  handlePaletteMouseDown,
   handlePalettePointerDown,
   handlePaletteTouchStart,
   endHtmlDragMouseTracking,
@@ -99,6 +100,7 @@ function SidewaysFilterChip({
 
   const onPointerDown = (e: React.PointerEvent) => {
     hideHint();
+    if (!needsPointerPaletteDrag()) return;
     const payload: PaletteDragPayload = {
       type: 'sidewaysFilter',
       value: item.id,
@@ -107,6 +109,16 @@ function SidewaysFilterChip({
     handlePalettePointerDown(e, payload, item.label);
   };
 
+  const onMouseDown = (e: React.MouseEvent) => {
+    hideHint();
+    const payload: PaletteDragPayload = {
+      type: 'sidewaysFilter',
+      value: item.id,
+      label: item.label,
+    };
+    handlePaletteMouseDown(e, payload, item.label);
+  };
+
   const onTouchStart = (e: React.TouchEvent) => {
     hideHint();
     const payload: PaletteDragPayload = {
@@ -136,7 +148,8 @@ function SidewaysFilterChip({
       className={`se-palette-card se-palette-card--range se-palette-card--range-${item.mode}${selected ? ' se-palette-card--selected' : ''}${needsPointerPaletteDrag() ? ' se-palette-card--pointer' : ''}`}
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
-      onPointerDown={onPointerDown}
+      onPointerDownCapture={onPointerDown}
+      onMouseDown={onMouseDown}
       onTouchStart={onTouchStart}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}

frontend/src/components/strategyEditor/StrategyEditorCanvas.tsx

@@ -34,6 +34,7 @@ import {
   isPaletteHtmlDrag,
   isPaletteHtmlDragActive,
   getLastHtmlPaletteDragClientXY,
+  isPaletteDragSessionActive,
   markPaletteHtmlDragEnd,
   needsPointerPaletteDrag,
   readPaletteHtmlDragData,
@@ -898,6 +899,7 @@ function StrategyEditorCanvasInner({
 
   // 트리 구조 변경 → 전체 재배치 / 조건 편집 → 라벨만 갱신(위치 유지)
   useEffect(() => {
+    if (isPaletteDragSessionActive()) return;
     const { nodes: layoutNodes, edges: layoutEdges } = rebuildFlow();
     const mergedEdges = applyEdgeHandles(layoutEdges, positionsRef.current, edgeHandlesRef.current);
     pruneEdgeHandles(edgeHandlesRef.current, mergedEdges);
@@ -1319,7 +1321,7 @@ function StrategyEditorCanvasInner({
         return;
       }
       const xy = getLastHtmlPaletteDragClientXY();
-      if (xy) {
+      if (xy && (xy.x !== 0 || xy.y !== 0)) {
         const { flowPos, anchorId } = resolveDropFromClientRef.current(xy.x, xy.y);
         if (anchorId) {
           updatePreviewRef.current(anchorId, flowPos);
@@ -1342,7 +1344,7 @@ function StrategyEditorCanvasInner({
   }, []);
 
   useEffect(() => {
-    if (needsPointerPaletteDrag()) return;
+    if (needsPointerPaletteDrag()) return undefined;
     const onDocDragOver = (e: DragEvent) => {
       if (!isPaletteHtmlDragActive()) return;
       e.preventDefault();
@@ -1352,12 +1354,13 @@ function StrategyEditorCanvasInner({
         lastPreviewAnchorRef.current = anchorId;
       }
     };
-    document.addEventListener('dragover', onDocDragOver, { passive: false });
-    return () => document.removeEventListener('dragover', onDocDragOver);
+    document.addEventListener('dragover', onDocDragOver, { passive: false, capture: true });
+    return () => document.removeEventListener('dragover', onDocDragOver, { capture: true });
   }, []);
 
   useEffect(() => {
     const onDocDragEnd = () => {
+      if (!isPaletteHtmlDragActive()) return;
       lastPreviewAnchorRef.current = null;
       lastPreviewKeyRef.current = null;
       clearPreviewRef.current();