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

apps/cs/src/entities/contents/model/contents-interface.ts

@@ -12,10 +12,14 @@ export const contentsSchema = z.object({
   contsTtl: z.string(),
   aprvContsVer: z.number(),
   useYn: z.string(),
-  regDt: z.string(),
   mdfcnDt: z.string(),
-  rgTrNm: z.string(),
+  mdfr: z.string(),
   mdfrNm: z.string(),
+  aprvDt: z.string(),
+  autzrNm: z.string(),
+  workAprvCd: z.string(),
+  workAprvNm: z.string(),
+  workContsVer: z.number(),
 });
 
 export const contentsFormSchema = z.object({

apps/cs/src/pages/contents/model/table-columns.tsx

@@ -1,47 +1,58 @@
 import dayjs from "dayjs";
-import { type ColumnDef } from "@tanstack/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
 import type { Contents } from "@/entities/contents";
 
-export const columns: ColumnDef<Contents>[] = [
-  {
+const columnHelper = createColumnHelper<Contents>();
+
+export const columns = [
+  columnHelper.display({
     id: "no",
     header: "NO",
     cell: ({ row }) => row.index + 1,
-  },
-  {
-    accessorKey: "contsTtl",
+  }),
+  columnHelper.accessor("contsTtl", {
+    id: "contsTtl",
     header: "콘텐츠명",
-  },
-  {
-    accessorKey: "aprvContsVer",
-    header: "승인여부",
-  },
-  {
-    accessorKey: "rgTrNm",
-    header: "승인자",
-  },
-  {
-    accessorKey: "regDt",
-    header: "승인일자",
-    cell: ({ row }) => {
-      const date = dayjs(row.original.regDt);
-      return date.format("YYYY-MM-DD");
-    },
-  },
-  {
-    accessorKey: "useYn",
+  }),
+  columnHelper.group({
+    id: "workInfo",
+    header: "작성정보",
+    columns: [
+      columnHelper.accessor("workContsVer", {
+        header: "작성버전",
+      }),
+      columnHelper.accessor("workAprvNm", {
+        header: "작성상태",
+      }),
+    ],
+  }),
+  columnHelper.group({
+    id: "aprvInfo",
+    header: "승인정보",
+    columns: [
+      columnHelper.accessor("aprvContsVer", {
+        header: "승인버전",
+      }),
+      columnHelper.accessor("autzrNm", {
+        header: "승인자",
+      }),
+      columnHelper.accessor("aprvDt", {
+        header: "승인일자",
+        cell: ({ row }) => dayjs(row.original.aprvDt).format("YYYY-MM-DD"),
+      }),
+    ],
+  }),
+  columnHelper.accessor("useYn", {
+    id: "useYn",
     header: "사용여부",
-  },
-  {
-    accessorKey: "mdfrNm",
+  }),
+  columnHelper.accessor("mdfrNm", {
+    id: "mdfrNm",
     header: "최종수정자",
-  },
-  {
-    accessorKey: "mdfcnDt",
+  }),
+  columnHelper.accessor("mdfcnDt", {
+    id: "mdfcnDt",
     header: "최종수정일",
-    cell: ({ row }) => {
-      const date = dayjs(row.original.mdfcnDt);
-      return date.format("YYYY-MM-DD");
-    },
-  },
+    cell: ({ row }) => dayjs(row.original.mdfcnDt).format("YYYY-MM-DD"),
+  }),
 ];

apps/cs/src/pages/contents/ui/contents-page.tsx

@@ -89,8 +89,13 @@ function ContentsPage() {
             등록
           </Button>
         </div>
-        <div className="card !m-[1.2rem] h-[29.2rem] overflow-auto !p-0">
-          <DataTable table={table} onRowClick={handleRowClick} viewPagination />
+        <div className="card !m-[1.2rem] overflow-auto !p-0">
+          <DataTable
+            table={table}
+            onRowClick={handleRowClick}
+            variant="secondary"
+            viewPagination
+          />
         </div>
       </div>
     </div>

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>
             );
           })}