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

1 files changed, 26 insertions, 2 deletions

diff --git a/components/data-table/data-table-detail.tsx b/components/data-table/data-table-detail.tsx
index f3f09fe2..016b9f42 100644
--- a/components/data-table/data-table-detail.tsx
+++ b/components/data-table/data-table-detail.tsx
@@ -60,6 +60,19 @@ export function DataTableDetail<TData>({
 
   useAutoSizeColumns(table, autoSizeColumns)
 
+  // nested header 감지: columns 속성을 가진 헤더가 있는지 확인
+  const hasNestedHeader = React.useMemo(() => {
+    return table.getHeaderGroups().some(headerGroup =>
+      headerGroup.headers.some(header => 'columns' in header.column.columnDef)
+    )
+  }, [table])
+
+  // 🎯 테이블 총 너비 계산 (nested header가 있을 때만 사용)
+  const getTableWidth = React.useCallback(() => {
+    const totalSize = table.getCenterTotalSize() + table.getLeftTotalSize() + table.getRightTotalSize()
+    return Math.max(totalSize, 800) // 최소 800px 보장
+  }, [table])
+
   // ✅ compactStyles를 useMemo로 메모이제이션
   const compactStyles = React.useMemo(() => 
     compact ? COMPACT_STYLES : NORMAL_STYLES, 
@@ -70,7 +83,12 @@ export function DataTableDetail<TData>({
     <div className={cn("w-full space-y-2.5 overflow-auto", className)} {...props}>
       {children}
       <div className="max-w-[100vw] overflow-auto"  style={{ maxHeight: maxHeight || '35rem' }} >
-        <Table className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed">
+        <Table 
+          className={cn(
+            "[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10",
+            !hasNestedHeader && "table-fixed"
+          )}
+          style={{ minWidth: hasNestedHeader ? getTableWidth() : undefined }}>
           {/* 테이블 헤더 */}
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -93,7 +111,11 @@ export function DataTableDetail<TData>({
                         }),
                         // 부모 그룹 헤더는 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" }}>
@@ -190,6 +212,8 @@ export function DataTableDetail<TData>({
                           style={{
                             ...getCommonPinningStylesWithBorder({ column: cell.column }),
                             width: cell.column.getSize(),
+                            minWidth: cell.column.getSize(),
+                            maxWidth: cell.column.columnDef.maxSize,
                           }}
                         >
                           {flexRender(