feat: 콘텐츠 관리 목록 페이지 작업

packages/common/components/src/ui/data-table/index.tsx

@@ -13,11 +13,11 @@ import { cn } from "../../lib";
 import { Button } from "../button";
 import { Table, TableCell, TableHead, TableHeader, TableRow } from "../table";
 import type { HTMLAttributes } from "react";
-
 declare module "@tanstack/react-table" {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData extends RowData, TValue> {
-    align: "left" | "center" | "right";
+    align?: "left" | "center" | "right";
+    rowSpan?: number;
   }
 }
 
@@ -70,15 +70,35 @@ function THead<T>({ table }: { table: TableInstance<T> }) {
       {table.getHeaderGroups().map((headerGroup) => (
         <TableRow key={headerGroup.id}>
           {headerGroup.headers.map((header) => {
+            const columnRelativeDepth = header.depth - header.column.depth;
+            if (
+              !header.isPlaceholder &&
+              columnRelativeDepth > 1 &&
+              header.id === header.column.id
+            ) {
+              return null;
+            }
+
+            let rowSpan = 1;
+            if (header.isPlaceholder) {
+              const leafs = header.getLeafHeaders();
+              rowSpan = (leafs?.[leafs.length - 1]?.depth ?? 0) - header.depth;
+            }
+
             const { meta } = header.column.columnDef;
+
             return (
-              <TableHead key={header.id} className="sticky top-0" {...meta}>
-                {header.isPlaceholder
-                  ? null
-                  : flexRender(
-                      header.column.columnDef.header,
-                      header.getContext(),
-                    )}
+              <TableHead
+                key={header.id}
+                className="sticky top-0"
+                colSpan={header.colSpan}
+                rowSpan={rowSpan}
+                {...meta}
+              >
+                {flexRender(
+                  header.column.columnDef.header,
+                  header.getContext(),
+                )}
               </TableHead>
             );
           })}