(김준회) fix: data-table 공통컴포넌트의 nested columns에 대한 child column의 width 오류 수정

6 files changed, 46 insertions, 22 deletions

diff --git a/components/client-data-table/data-table.tsx b/components/client-data-table/data-table.tsx
index 9ea44775..44168bd2 100644
--- a/components/client-data-table/data-table.tsx
+++ b/components/client-data-table/data-table.tsx
@@ -203,7 +203,8 @@ export function ClientDataTable<TData, TValue>({
           onScroll={handleScroll} // 🎯 스크롤 이벤트 핸들러 추가
         >
           <UiTable
-          className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10 table-fixed">
+          className="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10">
+            {/* table-fixed 제거: nested header에서 동적 width 변경을 위해 유연한 레이아웃 사용 */}
             <TableHeader>
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow key={headerGroup.id} className={compactStyles.headerRow}>
@@ -221,7 +222,9 @@ export function ClientDataTable<TData, TValue>({
                         className={compactStyles.header}
                         style={{
                           ...getPinnedStyle(header.column, true), // 🎯 헤더임을 명시
-                          width: header.getSize() // 🎯 width 별도 설정
+                          // 부모 그룹 헤더는 colSpan으로 너비가 결정되므로 width 설정하지 않음
+                          // 자식 헤더만 개별 width 설정
+                          ...(!('columns' in header.column.columnDef) && { width: header.getSize() }),
                         }}
                       >
                         <div style={{ position: "relative" }}>
@@ -232,8 +235,8 @@ export function ClientDataTable<TData, TValue>({
                               header.getContext()
                             )}
                             
-                          {/* 리사이즈 핸들 - 헤더에만 추가 */}
-                          {header.column.getCanResize() && (
+                          {/* 부모 그룹 헤더는 리사이즈 불가, 자식 헤더만 리사이즈 가능 */}
+                          {header.column.getCanResize() && !('columns' in header.column.columnDef) && (
                             <DataTableResizer header={header} />
                           )}
                         </div>
diff --git a/components/data-table/data-table-detail.tsx b/components/data-table/data-table-detail.tsx
index c34f9e73..f3f09fe2 100644
--- a/components/data-table/data-table-detail.tsx
+++ b/components/data-table/data-table-detail.tsx
@@ -87,11 +87,13 @@ export function DataTableDetail<TData>({
                       data-column-id={header.column.id}
                       className={compactStyles.header}
                       style={{
-                        ...getCommonPinningStylesWithBorder({ 
-                          column: header.column, 
-                          isHeader: true 
+                        ...getCommonPinningStylesWithBorder({
+                          column: header.column,
+                          isHeader: true
                         }),
-                        width: header.getSize(),
+                        // 부모 그룹 헤더는 colSpan으로 너비가 결정되므로 width 설정하지 않음
+                        // 자식 헤더만 개별 width 설정
+                        ...(!('columns' in header.column.columnDef) && { width: header.getSize() }),
                       }}
                     >
                       <div style={{ position: "relative" }}>
@@ -102,7 +104,8 @@ export function DataTableDetail<TData>({
                             header.getContext()
                           )}
 
-                        {header.column.getCanResize() && (
+                        {/* 부모 그룹 헤더는 리사이즈 불가, 자식 헤더만 리사이즈 가능 */}
+                        {header.column.getCanResize() && !('columns' in header.column.columnDef) && (
                           <DataTableResizer header={header} />
                         )}
                       </div>
diff --git a/components/data-table/data-table-resizer.tsx b/components/data-table/data-table-resizer.tsx
index 9723a0b4..8053606d 100644
--- a/components/data-table/data-table-resizer.tsx
+++ b/components/data-table/data-table-resizer.tsx
@@ -18,9 +18,10 @@ export function DataTableResizer<TData, TValue>({
   
   // 더블클릭 시 너비 자동 조정 함수
   const handleDoubleClick = React.useCallback(() => {
+
     // 테이블 인스턴스 가져오기
     const table = header.getContext().table
-    
+
     // 0. 몇 가지 기본 설정
     const defaultMinWidth = 80 // 기본 최소 너비
     const extraPadding = 24 // 여유 공간
@@ -75,15 +76,20 @@ export function DataTableResizer<TData, TValue>({
     table.setColumnSizing(updatedSizing)
   }, [header])
 
+  const handleMouseDown = React.useCallback((e: React.MouseEvent) => {
+    // 기본 resize handler 사용
+    header.getResizeHandler()(e);
+  }, [header]);
+
   return (
     <>
       {/* 헤더 콘텐츠 참조를 위한 요소 */}
       <div ref={contentRef} className="absolute opacity-0 pointer-events-none" />
-      
+
       {/* 리사이저 */}
       <div
         {...props}
-        onMouseDown={header.getResizeHandler()}
+        onMouseDown={handleMouseDown}
         onTouchStart={header.getResizeHandler()}
         onDoubleClick={handleDoubleClick} // 더블클릭 핸들러 추가
         className={cn(
diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx
index 07e4dcd2..2eb3e020 100644
--- a/components/data-table/data-table.tsx
+++ b/components/data-table/data-table.tsx
@@ -75,7 +75,8 @@ export function DataTable<TData>({
     <div className={cn("w-full space-y-2.5 overflow-auto", className)} {...props}>
       {stableChildren}
       <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="[&>thead]:sticky [&>thead]:top-0 [&>thead]:z-10">
+          {/* table-fixed 제거: nested header에서 동적 width 변경을 위해 유연한 레이아웃 사용 */}
           {/* 테이블 헤더 */}
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -92,11 +93,15 @@ export function DataTable<TData>({
                       data-column-id={header.column.id}
                       className={cn(compactStyles.header, "whitespace-normal break-words")}
                       style={{
-                        ...getCommonPinningStylesWithBorder({ 
-                          column: header.column, 
-                          isHeader: true 
+                        ...getCommonPinningStylesWithBorder({
+                          column: header.column,
+                          isHeader: true
+                        }),
+                        // 부모 그룹 헤더는 colSpan으로 너비가 결정되므로 width 설정하지 않음
+                        // 자식 헤더만 개별 width 설정
+                        ...(!('columns' in header.column.columnDef) && {
+                          width: header.getSize()
                         }),
-                        width: header.getSize(),
                       }}
                     >
                       <div style={{ position: "relative" }}>
@@ -107,7 +112,8 @@ export function DataTable<TData>({
                             header.getContext()
                           )}
 
-                        {header.column.getCanResize() && (
+                        {/* 부모 그룹 헤더는 리사이즈 불가, 자식 헤더만 리사이즈 가능 */}
+                        {header.column.getCanResize() && !('columns' in header.column.columnDef) && (
                           <DataTableResizer header={header} />
                         )}
                       </div>
diff --git a/components/data-table/expandable-data-table.tsx b/components/data-table/expandable-data-table.tsx
index 15c59540..d36f0251 100644
--- a/components/data-table/expandable-data-table.tsx
+++ b/components/data-table/expandable-data-table.tsx
@@ -532,7 +532,9 @@ export function ExpandableDataTable<TData>({
                         )}
                         style={{
                           ...getPinnedStyle(header.column, true),
-                          width: header.getSize()
+                          // 부모 그룹 헤더는 colSpan으로 너비가 결정되므로 width 설정하지 않음
+                          // 자식 헤더만 개별 width 설정
+                          ...(!('columns' in header.column.columnDef) && { width: header.getSize() }),
                         }}
                       >
                         <div style={{ position: "relative" }}>
@@ -543,7 +545,8 @@ export function ExpandableDataTable<TData>({
                               header.getContext()
                             )}
 
-                          {header.column.getCanResize() && (
+                          {/* 부모 그룹 헤더는 리사이즈 불가, 자식 헤더만 리사이즈 가능 */}
+                          {header.column.getCanResize() && !('columns' in header.column.columnDef) && (
                             <DataTableResizer header={header} />
                           )}
                         </div>
diff --git a/components/data-table/infinite-data-table.tsx b/components/data-table/infinite-data-table.tsx
index b8764d62..d766f35c 100644
--- a/components/data-table/infinite-data-table.tsx
+++ b/components/data-table/infinite-data-table.tsx
@@ -167,7 +167,9 @@ export function InfiniteDataTable<TData>({
                       className={compactStyles.header}
                       style={{
                         ...getPinnedStyle(header.column, true), // 🎯 헤더임을 명시
-                        width: header.getSize(), // 🎯 width 별도 설정
+                        // 부모 그룹 헤더는 colSpan으로 너비가 결정되므로 width 설정하지 않음
+                        // 자식 헤더만 개별 width 설정
+                        ...(!('columns' in header.column.columnDef) && { width: header.getSize() }),
                       }}
                     >
                       <div style={{ position: "relative" }}>
@@ -178,7 +180,8 @@ export function InfiniteDataTable<TData>({
                             header.getContext()
                           )}
 
-                        {header.column.getCanResize() && (
+                        {/* 부모 그룹 헤더는 리사이즈 불가, 자식 헤더만 리사이즈 가능 */}
+                        {header.column.getCanResize() && !('columns' in header.column.columnDef) && (
                           <DataTableResizer header={header} />
                         )}
                       </div>