전략편집기 수정

frontend/src/utils/paletteDragSession.ts

@@ -54,6 +54,26 @@ let moveRafId: number | null = null;
 let pendingMove: { x: number; y: number } | null = null;
 let unbindGesture: (() => void) | null = null;
 let lastDragClientXY: { x: number; y: number } | null = null;
+let htmlPaletteDragActive = false;
+
+function installHtmlPaletteDragGlobals() {
+  if (typeof window === 'undefined') return;
+  const w = window as Window & { __gcPaletteHtmlDragGlobals?: boolean };
+  if (w.__gcPaletteHtmlDragGlobals) return;
+  w.__gcPaletteHtmlDragGlobals = true;
+
+  window.addEventListener('dragover', (e) => {
+    if (!htmlPaletteDragActive) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+  }, { passive: false });
+
+  window.addEventListener('dragend', () => {
+    htmlPaletteDragActive = false;
+  });
+}
+
+installHtmlPaletteDragGlobals();
 
 function hasCoarsePointer(): boolean {
   if (typeof window === 'undefined') return false;
@@ -306,7 +326,20 @@ export function handlePaletteTouchStart(
   startPaletteDragGesture(touch.clientX, touch.clientY, touch.identifier, payload);
 }
 
+export function markPaletteHtmlDragStart(): void {
+  htmlPaletteDragActive = true;
+}
+
+export function markPaletteHtmlDragEnd(): void {
+  htmlPaletteDragActive = false;
+}
+
+export function isPaletteHtmlDragActive(): boolean {
+  return htmlPaletteDragActive;
+}
+
 export function writePaletteHtmlDragData(e: React.DragEvent, payload: PaletteDragPayload): void {
+  markPaletteHtmlDragStart();
   const json = JSON.stringify(payload);
   e.dataTransfer.setData('application/json', json);
   e.dataTransfer.setData('text/plain', json);
@@ -314,13 +347,16 @@ export function writePaletteHtmlDragData(e: React.DragEvent, payload: PaletteDra
 }
 
 export function isPaletteHtmlDrag(e: React.DragEvent): boolean {
-  return e.dataTransfer.types.includes('application/json')
-    || e.dataTransfer.types.includes('text/plain');
+  if (htmlPaletteDragActive) return true;
+  const types = e.dataTransfer?.types;
+  if (!types) return false;
+  return Array.from(types).includes('application/json')
+    || Array.from(types).includes('text/plain');
 }
 
 export function readPaletteHtmlDragData(e: React.DragEvent): PaletteDragPayload | null {
-  const raw = e.dataTransfer.getData('application/json')
-    || e.dataTransfer.getData('text/plain');
+  const raw = e.dataTransfer.getData('text/plain')
+    || e.dataTransfer.getData('application/json');
   if (!raw) return null;
   try {
     return JSON.parse(raw) as PaletteDragPayload;