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>