From 5ee5ad6973f06bbcc53d8eec9421ab5ff0aea739 Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Tue, 30 Jun 2026 23:31:02 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=93=9C=EB=9D=BC=EC=9D=B4=EB=B8=8C=20?=
 =?UTF-8?q?=EB=93=9C=EB=9E=98=EA=B7=B8=20=EB=93=9C=EB=A1=AD=20=EC=98=81?=
 =?UTF-8?q?=EC=97=AD=EC=9D=84=20=ED=8C=8C=EC=9D=BC=20=EC=98=81=EC=97=AD=20?=
 =?UTF-8?q?=EC=A0=84=EC=B2=B4=EB=A1=9C=20=ED=99=95=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

드롭 오버레이가 목록 래퍼 안에 갇혀 빈 폴더에서는 안내 카드 한 장
높이만큼만 드롭 영역으로 보이던 문제를 개선한다. 페이지를 세로
플렉스로 만들고 목록 영역이 남는 높이를 모두 채우게 해, 파일이 적거나
비어 있어도 파일 영역 전체에 끌어다 놓을 수 있게 한다.

- .page: 세로 플렉스 + min-height(뷰포트 - 상단바)
- .dr-listwrap: flex 1 로 남는 공간 차지(+ min-height 하한)
- 빈 폴더/검색 결과 없음 안내문은 영역 중앙 정렬

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/relay/DrivePage.vue | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/relay/DrivePage.vue b/frontend/src/pages/relay/DrivePage.vue
index 7e4c4bd..85820db 100644
--- a/frontend/src/pages/relay/DrivePage.vue
+++ b/frontend/src/pages/relay/DrivePage.vue
@@ -364,7 +364,10 @@ function openActivity(): void {
       </div>
 
       <!-- 목록 -->
-      <div class="dr-listwrap">
+      <div
+        class="dr-listwrap"
+        :class="{ 'is-empty': isEmpty || noResult }"
+      >
         <EmptyState v-if="loading && isEmpty">
           불러오는 중…
         </EmptyState>
@@ -687,8 +690,22 @@ function openActivity(): void {
 }
 
 /* 목록 — 전역 .list 카드(radius 0.625rem + shadow-sm) 사용 */
+/* 페이지를 세로 플렉스로 만들어 목록 영역이 남는 높이를 모두 채우게 한다(드롭 영역 확장). */
+.page {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 3.25rem); /* 100vh - .topbar 높이 */
+}
 .dr-listwrap {
   position: relative;
+  flex: 1 1 auto; /* 파일 영역이 페이지의 남는 공간 전체를 차지 → 드래그 드롭 영역도 그만큼 */
+  min-height: 16rem; /* 짧은 뷰포트에서도 최소 드롭 영역 보장 */
+}
+/* 비어있음/검색없음일 때 안내문을 영역 중앙에 배치(넓은 빈 영역이 자연스럽게 보이도록) */
+.dr-listwrap.is-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .dr-row {
   display: flex;