(김준회) fix: 공통컴포넌트: 데이터 그리드: 중첩헤더 있는 경우의 width 계산 및 스타일 적용문제 해결

1 files changed, 11 insertions, 4 deletions

diff --git a/components/data-table/infinite-data-table.tsx b/components/data-table/infinite-data-table.tsx
index 0242e052..a17a9b55 100644
--- a/components/data-table/infinite-data-table.tsx
+++ b/components/data-table/infinite-data-table.tsx
@@ -154,8 +154,9 @@ export function InfiniteDataTable<TData>({
           className={cn(
             "[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10",
             !hasNestedHeader && "table-fixed" // nested header가 없으면 table-fixed 적용
-          )}>
-          {/* nested header가 있으면 table-fixed 제거, 없으면 적용 */}
+          )}
+          style={{ minWidth: hasNestedHeader ? getTableWidth() : undefined }}>
+          {/* nested header가 있으면 table-fixed 제거하고 minWidth로 너비 강제, 없으면 table-fixed 적용 */}
           {/* 테이블 헤더 */}
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -175,7 +176,11 @@ export function InfiniteDataTable<TData>({
                         ...getPinnedStyle(header.column, true), // 🎯 헤더임을 명시
                         // 부모 그룹 헤더는 colSpan으로 너비가 결정되므로 width 설정하지 않음
                         // 자식 헤더만 개별 width 설정
-                        ...(!('columns' in header.column.columnDef) && { width: header.getSize() }),
+                        ...(!('columns' in header.column.columnDef) && { 
+                          width: header.getSize(),
+                          minWidth: header.getSize(),
+                          maxWidth: header.column.columnDef.maxSize,
+                        }),
                       }}
                     >
                       <div style={{ position: "relative" }}>
@@ -272,7 +277,9 @@ export function InfiniteDataTable<TData>({
                             className={compactStyles.cell}
                             style={{
                               ...getPinnedStyle(cell.column, false), // 🎯 바디 셀임을 명시
-                              width: cell.column.getSize(), // 🎯 width 별도 설정
+                              width: cell.column.getSize(),
+                              minWidth: cell.column.getSize(),
+                              maxWidth: cell.column.columnDef.maxSize,
                             }}
                           >
                             {flexRender(