(김준회) style: nested header의 좌, 우에 border 처리

fix: AVL 테이블에 요구사항대로 중첩헤더 추가

2 files changed, 64 insertions, 53 deletions

diff --git a/components/data-table/data-table.tsx b/components/data-table/data-table.tsx
index 2eb3e020..f344904e 100644
--- a/components/data-table/data-table.tsx
+++ b/components/data-table/data-table.tsx
@@ -91,7 +91,12 @@ export function DataTable<TData>({
                       key={header.id}
                       colSpan={header.colSpan}
                       data-column-id={header.column.id}
-                      className={cn(compactStyles.header, "whitespace-normal break-words")}
+                      className={cn(
+                        compactStyles.header,
+                        "whitespace-normal break-words",
+                        // 그룹 헤더(자식 컬럼이 있는 경우)에 스타일 적용 (nested column)
+                        ('columns' in header.column.columnDef) && "group-header"
+                      )}
                       style={{
                         ...getCommonPinningStylesWithBorder({
                           column: header.column,
diff --git a/lib/avl/table/avl-table-columns.tsx b/lib/avl/table/avl-table-columns.tsx
index 06005d3d..aaa9a18b 100644
--- a/lib/avl/table/avl-table-columns.tsx
+++ b/lib/avl/table/avl-table-columns.tsx
@@ -187,59 +187,65 @@ export function getColumns({ selectedRows = [], onRowSelect }: GetColumnsProps):
       enableResizing: true,
       size: 100,
     },
-    // PKG 컬럼
+    // 등록정보 (건수) 그룹 컬럼
     {
-      accessorKey: "PKG",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="PKG" />
-      ),
-      enableResizing: true,
-      size: 80,
-    },
-    // 자재그룹 컬럼
-    {
-      accessorKey: "materialGroup",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="자재그룹" />
-      ),
-      enableResizing: true,
-      size: 100,
-    },
-    // 협력업체 컬럼
-    {
-      accessorKey: "vendor",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="협력업체" />
-      ),
-      enableResizing: true,
-      size: 100,
-    },
-    // Tier 컬럼
-    {
-      accessorKey: "Tier",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="Tier" />
-      ),
-      enableResizing: true,
-      size: 60,
-    },
-    // 선주 제안 컬럼
-    {
-      accessorKey: "ownerSuggestion",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="선주 제안" />
-      ),
-      enableResizing: true,
-      size: 100,
-    },
-    // SHI 제안 컬럼
-    {
-      accessorKey: "shiSuggestion",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="SHI 제안" />
-      ),
-      enableResizing: true,
-      size: 100,
+      header: "등록정보 (건수)",
+      columns: [
+        // PKG 컬럼
+        {
+          accessorKey: "PKG",
+          header: ({ column }) => (
+            <DataTableColumnHeaderSimple column={column} title="PKG" />
+          ),
+          enableResizing: true,
+          size: 80,
+        },
+        // 자재그룹 컬럼
+        {
+          accessorKey: "materialGroup",
+          header: ({ column }) => (
+            <DataTableColumnHeaderSimple column={column} title="자재그룹" />
+          ),
+          enableResizing: true,
+          size: 100,
+        },
+        // 협력업체 컬럼
+        {
+          accessorKey: "vendor",
+          header: ({ column }) => (
+            <DataTableColumnHeaderSimple column={column} title="협력업체" />
+          ),
+          enableResizing: true,
+          size: 100,
+        },
+        // Tier 컬럼
+        {
+          accessorKey: "Tier",
+          header: ({ column }) => (
+            <DataTableColumnHeaderSimple column={column} title="Tier" />
+          ),
+          enableResizing: true,
+          size: 60,
+        },
+        // 선주 제안 컬럼
+        {
+          accessorKey: "ownerSuggestion",
+          header: ({ column }) => (
+            <DataTableColumnHeaderSimple column={column} title="선주 제안" />
+          ),
+          enableResizing: true,
+          size: 100,
+        },
+        // SHI 제안 컬럼
+        {
+          accessorKey: "shiSuggestion",
+          header: ({ column }) => (
+            <DataTableColumnHeaderSimple column={column} title="SHI 제안" />
+          ),
+          enableResizing: true,
+          size: 100,
+        },
+      ],
     },
     // 등록일 컬럼
     {