From aaa6e72723591ed48193caa8ba1c6af1d134400a Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 17 Apr 2025 16:45:43 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=BD=98=ED=85=90=EC=B8=A0=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EB=AA=A9=EB=A1=9D=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../contents/model/contents-interface.ts      |  8 +-
 .../pages/contents/model/table-columns.tsx    | 83 +++++++++++--------
 .../src/pages/contents/ui/contents-page.tsx   |  9 +-
 .../components/src/ui/data-table/index.tsx    | 38 +++++++--
 4 files changed, 89 insertions(+), 49 deletions(-)

diff --git a/apps/cs/src/entities/contents/model/contents-interface.ts b/apps/cs/src/entities/contents/model/contents-interface.ts
index d5a9f833d..7eddaad30 100644
--- a/apps/cs/src/entities/contents/model/contents-interface.ts
+++ b/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({
diff --git a/apps/cs/src/pages/contents/model/table-columns.tsx b/apps/cs/src/pages/contents/model/table-columns.tsx
index 8790c2176..f2de567e8 100644
--- a/apps/cs/src/pages/contents/model/table-columns.tsx
+++ b/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"),
+  }),
 ];
diff --git a/apps/cs/src/pages/contents/ui/contents-page.tsx b/apps/cs/src/pages/contents/ui/contents-page.tsx
index 2687b2606..c81621008 100644
--- a/apps/cs/src/pages/contents/ui/contents-page.tsx
+++ b/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>
diff --git a/packages/common/components/src/ui/data-table/index.tsx b/packages/common/components/src/ui/data-table/index.tsx
index ac82afde9..bcb072bb1 100644
--- a/packages/common/components/src/ui/data-table/index.tsx
+++ b/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>
             );
           })}