From 9fd44ab268b7afd3edf824e185da647c0958d1f5 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Fri, 3 Apr 2026 11:06:18 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=EC=95=A4?=
 =?UTF-8?q?=20=EB=93=9C=EB=A1=AD=20=E2=80=94=20window=20=EC=9D=B4=EB=B2=A4?=
 =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EB=B8=8C=EB=9D=BC=EC=9A=B0=EC=A0=80=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=EB=8F=99=EC=9E=91=20=EC=B0=A8=EB=8B=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/lib/components/UploadDropzone.svelte  | 67 ++++++++++++-------
 1 file changed, 41 insertions(+), 26 deletions(-)

diff --git a/frontend/src/lib/components/UploadDropzone.svelte b/frontend/src/lib/components/UploadDropzone.svelte
index 47af868..9234736 100644
--- a/frontend/src/lib/components/UploadDropzone.svelte
+++ b/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) {
-    e.preventDefault();
-    dragCounter++;
-    dragging = true;
-  }
+  onMount(() => {
+    function onDragEnter(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter++;
+      dragging = true;
+    }
 
-  function handleDragLeave(e) {
-    e.preventDefault();
-    dragCounter--;
-    if (dragCounter <= 0) {
+    function onDragOver(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    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) {
-    e.preventDefault();
-  }
+    window.addEventListener('dragenter', onDragEnter);
+    window.addEventListener('dragover', onDragOver);
+    window.addEventListener('dragleave', onDragLeave);
+    window.addEventListener('drop', onDrop);
 
-  async function handleDrop(e) {
-    e.preventDefault();
-    dragging = false;
-    dragCounter = 0;
+    return () => {
+      window.removeEventListener('dragenter', onDragEnter);
+      window.removeEventListener('dragover', onDragOver);
+      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>