데스크탑 앱 전략편집기 수정

frontend/src/utils/flowScreenProjection.ts

@@ -2,6 +2,24 @@ import type { ReactFlowInstance } from '@xyflow/react';
 
 type FlowProjector = Pick<ReactFlowInstance, 'screenToFlowPosition' | 'getViewport'>;
 
+function manualProject(
+  clientX: number,
+  clientY: number,
+  rf: FlowProjector,
+  containerEl: HTMLElement | null,
+): { x: number; y: number } {
+  const host = (containerEl?.querySelector('.react-flow') as HTMLElement | null) ?? containerEl;
+  if (!host) return { x: 0, y: 0 };
+
+  const rect = host.getBoundingClientRect();
+  const { x: vx, y: vy, zoom } = rf.getViewport();
+  const z = zoom || 1;
+  return {
+    x: (clientX - rect.left - vx) / z,
+    y: (clientY - rect.top - vy) / z,
+  };
+}
+
 /** screen(client) → React Flow 좌표 (Tauri WebView screenToFlowPosition 보정) */
 export function projectScreenToFlowPosition(
   clientX: number,
@@ -13,31 +31,82 @@ export function projectScreenToFlowPosition(
     try {
       const pos = rf.screenToFlowPosition({ x: clientX, y: clientY });
       if (Number.isFinite(pos.x) && Number.isFinite(pos.y)) {
-        return pos;
+        // WebView 버그: 화면 픽셀을 그대로 반환하는 경우
+        const looksLikeScreenPx =
+          Math.abs(pos.x - clientX) < 2 && Math.abs(pos.y - clientY) < 2;
+        if (!looksLikeScreenPx) return pos;
       }
     } catch {
       /* manual fallback */
     }
+    return manualProject(clientX, clientY, rf, containerEl);
   }
 
-  const host = (containerEl?.querySelector('.react-flow') as HTMLElement | null) ?? containerEl;
-  if (!host || !rf) {
-    return { x: clientX, y: clientY };
-  }
-
-  const rect = host.getBoundingClientRect();
-  const { x: vx, y: vy, zoom } = rf.getViewport();
-  const z = zoom || 1;
-  return {
-    x: (clientX - rect.left - vx) / z,
-    y: (clientY - rect.top - vy) / z,
-  };
+  return manualProject(
+    clientX,
+    clientY,
+    { screenToFlowPosition: p => p, getViewport: () => ({ x: 0, y: 0, zoom: 1 }) },
+    containerEl,
+  );
 }
 
 /** 팔레트 드롭 — 전략 빌더 캔버스 위인지 (우측 팔레트 위 release 무시) */
 export function isOverStrategyBuilder(clientX: number, clientY: number): boolean {
   const el = document.elementFromPoint(clientX, clientY);
   if (!el) return false;
-  if (el.closest('.se-palette-panel, .se-side-wrap--right')) return false;
+  if (el.closest('.se-palette-panel, .se-side-wrap--right, .se-palette-drag-ghost')) return false;
   return el.closest('.se-canvas-wrap') != null;
 }
+
+/** DOM hit-test — flow 좌표 변환 오류 시에도 드롭 대상 노드 식별 */
+export function findFlowNodeIdAtClientPoint(clientX: number, clientY: number): string | null {
+  const el = document.elementFromPoint(clientX, clientY);
+  if (!el) return null;
+
+  const nodeEl = el.closest('.react-flow__node') as HTMLElement | null;
+  if (nodeEl) {
+    const id = nodeEl.getAttribute('data-id');
+    if (id) return id;
+  }
+
+  const handleEl = el.closest('[data-nodeid]') as HTMLElement | null;
+  if (handleEl) {
+    const id = handleEl.getAttribute('data-nodeid');
+    if (id) return id;
+  }
+
+  return null;
+}
+
+export interface PaletteDropResolution {
+  flowPos: { x: number; y: number };
+  anchorId: string | null;
+}
+
+/** client 좌표 → flow 위치 + 연결 대상 노드 (DOM 우선, flow hit 보조) */
+export function resolvePaletteDropClientPoint(
+  clientX: number,
+  clientY: number,
+  rf: FlowProjector | null,
+  containerEl: HTMLElement | null,
+  nodes: { id: string; position: { x: number; y: number } }[],
+  findAtFlow: (
+    flowPos: { x: number; y: number },
+    list: { id: string; position: { x: number; y: number } }[],
+  ) => { id: string } | null,
+  isConnectTarget: (nodeId: string) => boolean,
+): PaletteDropResolution {
+  const flowPos = projectScreenToFlowPosition(clientX, clientY, rf, containerEl);
+
+  const domId = findFlowNodeIdAtClientPoint(clientX, clientY);
+  if (domId && nodes.some(n => n.id === domId) && isConnectTarget(domId)) {
+    return { flowPos, anchorId: domId };
+  }
+
+  const flowHit = findAtFlow(flowPos, nodes);
+  if (flowHit && isConnectTarget(flowHit.id)) {
+    return { flowPos, anchorId: flowHit.id };
+  }
+
+  return { flowPos, anchorId: null };
+}

frontend/src/utils/paletteDragSession.ts

@@ -1,7 +1,7 @@
 /**
  * Tauri WebView 등 HTML5 drag-and-drop 미지원 환경용 팔레트 드래그 세션
  */
-import { bindWindowDrag, type ClientXY } from './pointerDrag';
+import { bindWindowDrag, clientXYFromNative, type ClientXY } from './pointerDrag';
 import { isDesktop } from './platform';
 
 export type PaletteDragPayload = Record<string, unknown> & {
@@ -64,6 +64,7 @@ function emit(event: PaletteDragEvent) {
 function removeGhost() {
   ghostEl?.remove();
   ghostEl = null;
+  document.querySelectorAll('.se-palette-drag-ghost').forEach(el => el.remove());
 }
 
 function ensureGhost(label: string, x: number, y: number) {
@@ -83,6 +84,7 @@ function moveGhost(x: number, y: number) {
 }
 
 function finishDrag(phase: 'end' | 'cancel', xy: ClientXY) {
+  if (!activePayload) return;
   const payload = activePayload;
   cleanupDrag();
   if (payload && phase === 'end') {
@@ -118,6 +120,21 @@ function beginDrag(payload: PaletteDragPayload, label: string, xy: ClientXY) {
     (endXY) => finishDrag('end', endXY),
     { preventTouchScroll: true },
   );
+
+  // Tauri WebView: bubble 단계 pointerup 누락 대비
+  const captureEnd = (ev: Event) => {
+    if (!activePayload) return;
+    const xy = clientXYFromNative(ev);
+    if (xy) finishDrag('end', xy);
+  };
+  window.addEventListener('pointerup', captureEnd, true);
+  window.addEventListener('pointercancel', captureEnd, true);
+  const prevUnbind = unbindMove;
+  unbindMove = () => {
+    window.removeEventListener('pointerup', captureEnd, true);
+    window.removeEventListener('pointercancel', captureEnd, true);
+    prevUnbind();
+  };
 }
 
 /**