맥 os 전략지표 드래그 문제 최종 수정

frontend/src/utils/paletteDragSession.ts

@@ -34,6 +34,10 @@ export interface PaletteDragOverlaySession {
   pointerId: number;
   x: number;
   y: number;
+  /** 드래그 시작 카드 — overlay 에 동일 UI 클론용 */
+  sourceElement: HTMLElement | null;
+  grabOffsetX: number;
+  grabOffsetY: number;
 }
 
 type PaletteDragListener = (event: PaletteDragEvent) => void;
@@ -183,17 +187,37 @@ function mountDragOverlay(
   payload: PaletteDragPayload,
   xy: { x: number; y: number },
   pointerId: number,
+  sourceElement: HTMLElement | null,
+  grabOffset: { x: number; y: number },
 ) {
   activePayload = payload;
   activePointerId = pointerId;
   lastDragClientXY = { x: xy.x, y: xy.y };
   document.body.classList.add('se-palette-drag-active');
   armPaletteDragScrollLock();
-  overlayController?.mount({ payload, pointerId, x: xy.x, y: xy.y });
+  overlayController?.mount({
+    payload,
+    pointerId,
+    x: xy.x,
+    y: xy.y,
+    sourceElement,
+    grabOffsetX: grabOffset.x,
+    grabOffsetY: grabOffset.y,
+  });
   emit({ phase: 'start', x: xy.x, y: xy.y, payload });
   notifyPaletteDragMove(xy.x, xy.y);
 }
 
+function grabOffsetFromSource(
+  sourceElement: HTMLElement | null,
+  clientX: number,
+  clientY: number,
+): { x: number; y: number } {
+  if (!sourceElement) return { x: 0, y: 0 };
+  const rect = sourceElement.getBoundingClientRect();
+  return { x: clientX - rect.left, y: clientY - rect.top };
+}
+
 export function notifyPaletteDragMove(clientX: number, clientY: number) {
   if (!activePayload) return;
   lastDragClientXY = { x: clientX, y: clientY };
@@ -232,12 +256,14 @@ function startPaletteDragGesture(
   startY: number,
   pointerId: number,
   payload: PaletteDragPayload,
+  sourceElement: HTMLElement | null,
 ): void {
   if (activePayload) cleanupDrag();
   unbindGestureListeners();
 
   const origin = { x: startX, y: startY };
-  mountDragOverlay(payload, origin, pointerId);
+  const grabOffset = grabOffsetFromSource(sourceElement, startX, startY);
+  mountDragOverlay(payload, origin, pointerId, sourceElement, grabOffset);
 
   unbindGesture = bindDocumentPointerDrag(
     pointerId,
@@ -257,7 +283,7 @@ function startPaletteDragGesture(
 export function handlePalettePointerDown(
   e: React.PointerEvent,
   payload: PaletteDragPayload,
-  _label: string,
+  sourceElement: HTMLElement,
 ): void {
   if (!needsPointerPaletteDrag()) return;
   if (!isPrimaryPointerButton(e)) return;
@@ -268,13 +294,13 @@ export function handlePalettePointerDown(
 
   e.preventDefault();
 
-  startPaletteDragGesture(e.clientX, e.clientY, e.pointerId, payload);
+  startPaletteDragGesture(e.clientX, e.clientY, e.pointerId, payload, sourceElement);
 }
 
 export function handlePaletteMouseDown(
   e: React.MouseEvent,
   payload: PaletteDragPayload,
-  _label: string,
+  sourceElement: HTMLElement,
 ): void {
   if (!needsPointerPaletteDrag()) return;
   if (e.button !== 0) return;
@@ -285,13 +311,13 @@ export function handlePaletteMouseDown(
   if (typeof window !== 'undefined' && 'PointerEvent' in window) return;
 
   e.preventDefault();
-  startPaletteDragGesture(e.clientX, e.clientY, 1, payload);
+  startPaletteDragGesture(e.clientX, e.clientY, 1, payload, sourceElement);
 }
 
 export function handlePaletteTouchStart(
   e: React.TouchEvent,
   payload: PaletteDragPayload,
-  _label: string,
+  sourceElement: HTMLElement,
 ): void {
   if (!needsPointerPaletteDrag()) return;
   if (typeof window !== 'undefined' && 'PointerEvent' in window) return;
@@ -300,7 +326,7 @@ export function handlePaletteTouchStart(
 
   e.preventDefault();
   const touch = e.touches[0];
-  startPaletteDragGesture(touch.clientX, touch.clientY, touch.identifier, payload);
+  startPaletteDragGesture(touch.clientX, touch.clientY, touch.identifier, payload, sourceElement);
 }
 
 /* ── Web HTML5 ── */