fix: 드래그 앤 드롭 — window 이벤트로 브라우저 기본 동작 차단

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/lib/components/UploadDropzone.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { onMount } from 'svelte';
   import { api } from '$lib/api';
   import { addToast } from '$lib/stores/ui';
   import { Upload } from 'lucide-svelte';
@@ -10,31 +11,52 @@
   let uploadFiles = $state([]);
   let dragCounter = 0;
 
-  function handleDragEnter(e) {
+  onMount(() => {
-    e.preventDefault();
+    function onDragEnter(e) {
-    dragCounter++;
+      e.preventDefault();
-    dragging = true;
+      e.stopPropagation();
-  }
+      dragCounter++;
+      dragging = true;
+    }
 
-  function handleDragLeave(e) {
+    function onDragOver(e) {
-    e.preventDefault();
+      e.preventDefault();
-    dragCounter--;
+      e.stopPropagation();
-    if (dragCounter <= 0) {
+    }
+
+    function onDragLeave(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter--;
+      if (dragCounter <= 0) {
+        dragging = false;
+        dragCounter = 0;
+      }
+    }
+
+    function onDrop(e) {
+      e.preventDefault();
+      e.stopPropagation();
       dragging = false;
       dragCounter = 0;
+      handleFiles(e.dataTransfer?.files);
     }
-  }
 
-  function handleDragOver(e) {
+    window.addEventListener('dragenter', onDragEnter);
-    e.preventDefault();
+    window.addEventListener('dragover', onDragOver);
-  }
+    window.addEventListener('dragleave', onDragLeave);
+    window.addEventListener('drop', onDrop);
 
-  async function handleDrop(e) {
+    return () => {
-    e.preventDefault();
+      window.removeEventListener('dragenter', onDragEnter);
-    dragging = false;
+      window.removeEventListener('dragover', onDragOver);
-    dragCounter = 0;
+      window.removeEventListener('dragleave', onDragLeave);
+      window.removeEventListener('drop', onDrop);
+    };
+  });
 
-    const files = Array.from(e.dataTransfer?.files || []);
+  async function handleFiles(fileList) {
+    const files = Array.from(fileList || []);
     if (files.length === 0) return;
 
     uploading = true;
@@ -74,16 +96,9 @@
   }
 </script>
 
-<svelte:document
-  on:dragenter={handleDragEnter}
-  on:dragleave={handleDragLeave}
-  on:dragover={handleDragOver}
-  on:drop={handleDrop}
-/>
-
 <!-- 전체 페이지 드래그 오버레이 -->
 {#if dragging}
-  <div class="fixed inset-0 z-50 bg-[var(--accent)]/10 border-2 border-dashed border-[var(--accent)] flex items-center justify-center pointer-events-none">
+  <div class="fixed inset-0 z-50 bg-[var(--accent)]/10 border-2 border-dashed border-[var(--accent)] flex items-center justify-center">
     <div class="bg-[var(--surface)] rounded-xl px-8 py-6 shadow-xl text-center">
       <Upload size={32} class="mx-auto mb-2 text-[var(--accent)]" />
       <p class="text-sm font-medium text-[var(--accent)]">여기에 파일을 놓으세요</p>