From acbd61e25aaa700efa1e25cbae36d2174c2fb746 Mon Sep 17 00:00:00 2001
From: johngreen <ramses7448@gmail.com>
Date: Wed, 13 May 2026 09:41:42 +0900
Subject: [PATCH] =?UTF-8?q?fix(=EB=B0=98=EC=9D=91=ED=98=95):=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20=EC=9E=98?=
 =?UTF-8?q?=EB=A6=BC=20=E2=80=94=20viewport=20=ED=95=98=EB=93=9C=EC=BD=94?=
 =?UTF-8?q?=EB=94=A9=20=E2=86=92=20flex-1=20min-h-0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

기존: scrollContainer 모드의 max-h-[calc(100vh-280px)] 가 viewport 기준 하드코딩이라 페이지 헤더+툴바 합산이 280px 보다 클 때 카드 영역이 viewport 끝까지 차지 → 페이지네이션이 부모 overflow-hidden 에 잘림.

신: outer wrapper 에 flex flex-col min-h-0 flex-1, 내부 테이블/카드에 min-h-0 flex-1 overflow-y-auto. 부모 flex-col 의 남는 공간만 차지 → 페이지네이션 등 형제는 자기 자연 height 유지.

로딩 스켈레톤 동일 패턴 적용.
---
 .../components/common/ResponsiveDataView.tsx  | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/components/common/ResponsiveDataView.tsx b/frontend/components/common/ResponsiveDataView.tsx
index 72f88092..3cd8f723 100644
--- a/frontend/components/common/ResponsiveDataView.tsx
+++ b/frontend/components/common/ResponsiveDataView.tsx
@@ -110,11 +110,17 @@ export function ResponsiveDataView<T>({
   // --- 로딩 스켈레톤 ---
   if (isLoading) {
     return (
-      <div className="@container">
+      <div
+        className={cn(
+          "@container",
+          scrollContainer && "flex min-h-0 flex-1 flex-col"
+        )}
+      >
         {/* 데스크톱 테이블 스켈레톤 */}
         <div
           className={cn(
             "hidden rounded-lg border bg-card shadow-sm @3xl:block",
+            scrollContainer && "min-h-0 flex-1 overflow-y-auto",
             tableContainerClassName
           )}
         >
@@ -167,7 +173,7 @@ export function ResponsiveDataView<T>({
         <div
           className={cn(
             "grid gap-4 @lg:grid-cols-2 @3xl:hidden",
-            scrollContainer && "max-h-[calc(100vh-280px)] overflow-y-auto",
+            scrollContainer && "min-h-0 flex-1 overflow-y-auto",
             cardContainerClassName
           )}
         >
@@ -217,15 +223,19 @@ export function ResponsiveDataView<T>({
   // 부모 wrapper 가 @container — 자식들은 viewport 가 아닌 자기 컨테이너 width 기준으로 분기.
   // 사이드바 펼친 상태에서도 콘텐츠 영역 실제 width 에 맞게 자연스럽게 테이블↔카드 전환.
   return (
-    <div className="@container">
+    <div
+      className={cn(
+        "@container",
+        // scrollContainer 모드: 부모 flex-col 의 남는 공간을 차지 → 페이지네이션 등 형제는 자기 height 유지
+        scrollContainer && "flex min-h-0 flex-1 flex-col"
+      )}
+    >
       {/* 데스크톱 테이블 (컨테이너 ≥ 48rem / 768px) */}
       <div
         className={cn(
           "hidden rounded-lg border bg-card shadow-sm @3xl:block",
-          // scrollContainer 모드: 뷰포트 기반 max-height + 자체 세로 스크롤 + sticky 헤더.
-          // flex 기반 계산이 shadcn Table 의 내부 wrapper(overflow-x-auto) 와 충돌해
-          // 신뢰성 떨어지므로 viewport 기준으로 명시. 페이지 헤더/툴바/페이지네이션 약 280px 가정.
-          scrollContainer && "max-h-[calc(100vh-280px)] overflow-y-auto overflow-x-auto",
+          // scrollContainer 모드: 부모 flex 안에서 가용 height 다 차지 + 자체 세로 스크롤 + sticky 헤더
+          scrollContainer && "min-h-0 flex-1 overflow-y-auto overflow-x-auto",
           tableContainerClassName
         )}
       >
@@ -290,9 +300,8 @@ export function ResponsiveDataView<T>({
       <div
         className={cn(
           "grid gap-4 @lg:grid-cols-2 @3xl:hidden",
-          // scrollContainer 모드: 카드 뷰도 자체 세로 스크롤. 부모가 overflow-hidden 이라
-          // 별도 height 제약 없으면 카드들이 잘려 보임. 데스크톱 테이블과 동일 viewport 기준.
-          scrollContainer && "max-h-[calc(100vh-280px)] overflow-y-auto",
+          // scrollContainer 모드: 부모 flex 안에서 남는 공간 다 차지 + 자체 세로 스크롤
+          scrollContainer && "min-h-0 flex-1 overflow-y-auto",
           cardContainerClassName
         )}
       >