From 87bdd8003cff961bc96010e04f85670415e946a0 Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Fri, 3 Apr 2026 11:02:42 +0900
Subject: [PATCH] =?UTF-8?q?feat:=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=EC=97=85=EB=A1=9C=EB=93=9C=20(UploadDr?=
 =?UTF-8?q?opzone)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 파일 드래그 시 전체 페이지 오버레이
- 순차 업로드 + 파일별 진행 상태
- 성공/실패 토스트 + 목록 자동 새로고침
- documents 페이지에 통합

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/lib/components/UploadDropzone.svelte  | 114 ++++++++++++++++++
 frontend/src/routes/documents/+page.svelte    |   4 +
 2 files changed, 118 insertions(+)
 create mode 100644 frontend/src/lib/components/UploadDropzone.svelte

diff --git a/frontend/src/lib/components/UploadDropzone.svelte b/frontend/src/lib/components/UploadDropzone.svelte
new file mode 100644
index 0000000..47af868
--- /dev/null
+++ b/frontend/src/lib/components/UploadDropzone.svelte
@@ -0,0 +1,114 @@
+<script>
+  import { api } from '$lib/api';
+  import { addToast } from '$lib/stores/ui';
+  import { Upload } from 'lucide-svelte';
+
+  let { onupload = () => {} } = $props();
+
+  let dragging = $state(false);
+  let uploading = $state(false);
+  let uploadFiles = $state([]);
+  let dragCounter = 0;
+
+  function handleDragEnter(e) {
+    e.preventDefault();
+    dragCounter++;
+    dragging = true;
+  }
+
+  function handleDragLeave(e) {
+    e.preventDefault();
+    dragCounter--;
+    if (dragCounter <= 0) {
+      dragging = false;
+      dragCounter = 0;
+    }
+  }
+
+  function handleDragOver(e) {
+    e.preventDefault();
+  }
+
+  async function handleDrop(e) {
+    e.preventDefault();
+    dragging = false;
+    dragCounter = 0;
+
+    const files = Array.from(e.dataTransfer?.files || []);
+    if (files.length === 0) return;
+
+    uploading = true;
+    uploadFiles = files.map(f => ({ name: f.name, status: 'pending' }));
+
+    let success = 0;
+    let failed = 0;
+
+    for (let i = 0; i < files.length; i++) {
+      uploadFiles[i].status = 'uploading';
+      uploadFiles = [...uploadFiles];
+
+      try {
+        const formData = new FormData();
+        formData.append('file', files[i]);
+        await api('/documents/', { method: 'POST', body: formData });
+        uploadFiles[i].status = 'done';
+        success++;
+      } catch (err) {
+        uploadFiles[i].status = 'failed';
+        failed++;
+      }
+      uploadFiles = [...uploadFiles];
+    }
+
+    if (success > 0) {
+      addToast('success', `${success}건 업로드 완료${failed > 0 ? `, ${failed}건 실패` : ''}`);
+      onupload();
+    } else {
+      addToast('error', `업로드 실패 (${failed}건)`);
+    }
+
+    setTimeout(() => {
+      uploading = false;
+      uploadFiles = [];
+    }, 3000);
+  }
+</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="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>
+    </div>
+  </div>
+{/if}
+
+<!-- 업로드 진행 상태 -->
+{#if uploading && uploadFiles.length > 0}
+  <div class="mb-3 bg-[var(--surface)] border border-[var(--border)] rounded-lg p-3">
+    <p class="text-xs text-[var(--text-dim)] mb-2">업로드 중...</p>
+    <div class="space-y-1 max-h-32 overflow-y-auto">
+      {#each uploadFiles as f}
+        <div class="flex items-center justify-between text-xs">
+          <span class="truncate">{f.name}</span>
+          <span class={
+            f.status === 'done' ? 'text-[var(--success)]' :
+            f.status === 'failed' ? 'text-[var(--error)]' :
+            f.status === 'uploading' ? 'text-[var(--accent)]' :
+            'text-[var(--text-dim)]'
+          }>
+            {f.status === 'done' ? '✓' : f.status === 'failed' ? '✗' : f.status === 'uploading' ? '↑' : '…'}
+          </span>
+        </div>
+      {/each}
+    </div>
+  </div>
+{/if}
diff --git a/frontend/src/routes/documents/+page.svelte b/frontend/src/routes/documents/+page.svelte
index e7480ee..d4cf1f6 100644
--- a/frontend/src/routes/documents/+page.svelte
+++ b/frontend/src/routes/documents/+page.svelte
@@ -7,6 +7,7 @@
   import DocumentCard from '$lib/components/DocumentCard.svelte';
   import PreviewPanel from '$lib/components/PreviewPanel.svelte';
   import DocumentViewer from '$lib/components/DocumentViewer.svelte';
+  import UploadDropzone from '$lib/components/UploadDropzone.svelte';
 
   let documents = $state([]);
   let total = $state(0);
@@ -135,6 +136,9 @@
 <div class="flex flex-col h-full">
   <!-- 상단: 문서 목록 (30% when viewer active, 100% otherwise) -->
   <div class="overflow-y-auto px-4 py-3 {selectedDoc ? 'h-[30%] shrink-0 border-b border-[var(--border)]' : 'flex-1'}">
+    <!-- 업로드 드롭존 -->
+    <UploadDropzone onupload={loadDocuments} />
+
     <!-- 검색바 + 정보 버튼 -->
     <div class="flex gap-2 mb-3">
       <input