Merge fix(반응형): 페이지네이션 잘림 픽스

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
         )}
       >