From d0d2eaa2de58a0c33e9a21604b126961403cd69e Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Wed, 14 May 2025 06:12:13 +0000
Subject: (최겸) 기술영업 조선, 해양Top, 해양 Hull 아이템 리스트 개발(CRUD,
 excel import/export/template)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../table/top/offshore-top-table-columns.tsx       | 282 +++++++++++++++++++++
 1 file changed, 282 insertions(+)
 create mode 100644 lib/items-tech/table/top/offshore-top-table-columns.tsx

(limited to 'lib/items-tech/table/top/offshore-top-table-columns.tsx')

diff --git a/lib/items-tech/table/top/offshore-top-table-columns.tsx b/lib/items-tech/table/top/offshore-top-table-columns.tsx
new file mode 100644
index 00000000..4ccb2003
--- /dev/null
+++ b/lib/items-tech/table/top/offshore-top-table-columns.tsx
@@ -0,0 +1,282 @@
+"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis } from "lucide-react"
+
+import { formatDate } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+
+// 테이블 표시에 필요한 데이터 타입 정의
+interface OffshoreTopTableItem {
+  id: number;
+  itemId: number;
+  workType: "TM" | "TS" | "TE" | "TP";
+  itemList1: string | null;
+  itemList2: string | null;
+  itemList3: string | null;
+  itemList4: string | null;
+  itemCode: string;
+  itemName: string;
+  description: string | null;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<OffshoreTopTableItem> | null>>
+}
+
+export function getOffshoreTopColumns({ setRowAction }: GetColumnsProps): ColumnDef<OffshoreTopTableItem>[] {
+  // ----------------------------------------------------------------
+  // 1) select 컬럼 (체크박스)
+  // ----------------------------------------------------------------
+  const selectColumn: ColumnDef<OffshoreTopTableItem> = {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-0.5"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-0.5"
+      />
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 2) actions 컬럼 (Dropdown 메뉴)
+  // ----------------------------------------------------------------
+  const actionsColumn: ColumnDef<OffshoreTopTableItem> = {
+    id: "actions",
+    cell: ({ row }) => (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            aria-label="Open menu"
+            variant="ghost"
+            className="flex size-8 p-0 data-[state=open]:bg-muted"
+          >
+            <Ellipsis className="size-4" aria-hidden="true" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-40">
+          <DropdownMenuItem
+            onSelect={() => setRowAction({ row, type: "update" })}
+          >
+            수정
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onSelect={() => setRowAction({ row, type: "delete" })}
+            className="text-destructive"
+          >
+            삭제
+            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ),
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+  }
+
+  // ----------------------------------------------------------------
+  // 3) 데이터 컬럼들을 그룹별로 구성
+  // ----------------------------------------------------------------
+  
+  // 3-1) 기본 정보 그룹 컬럼
+  const basicInfoColumns: ColumnDef<OffshoreTopTableItem>[] = [
+    {
+      accessorKey: "itemCode",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Material Group" />
+      ),
+      cell: ({ row }) => <div>{row.original.itemCode}</div>,
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        excelHeader: "Material Group",
+        group: "기본 정보",
+      },
+    },
+    {
+      accessorKey: "itemName",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Description" />
+      ),
+      cell: ({ row }) => <div>{row.original.itemName}</div>,
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        excelHeader: "Description",
+        group: "기본 정보",
+      },
+    },
+    {
+      accessorKey: "workType",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="기능(공종)" />
+      ),
+      cell: ({ row }) => <div>{row.original.workType}</div>,
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        excelHeader: "기능(공종)",
+        group: "기본 정보",
+      },
+    },
+    {
+      accessorKey: "description",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="Size/Dimension" />
+      ),
+      cell: ({ row }) => <div>{row.original.description || "-"}</div>,
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        excelHeader: "Size/Dimension",
+        group: "기본 정보",
+      },
+    },
+  ]
+  
+  // 3-2) 아이템 리스트 그룹 컬럼
+  const itemListColumns: ColumnDef<OffshoreTopTableItem>[] = [
+    {
+      accessorKey: "itemList1",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="아이템 리스트 1" />
+      ),
+      cell: ({ row }) => <div>{row.original.itemList1 || "-"}</div>,
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        excelHeader: "아이템 리스트 1",
+        group: "아이템 리스트",
+      },
+    },
+    {
+      accessorKey: "itemList2",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="아이템 리스트 2" />
+      ),
+      cell: ({ row }) => <div>{row.original.itemList2 || "-"}</div>,
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        excelHeader: "아이템 리스트 2",
+        group: "아이템 리스트",
+      },
+    },
+    {
+      accessorKey: "itemList3",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="아이템 리스트 3" />
+      ),
+      cell: ({ row }) => <div>{row.original.itemList3 || "-"}</div>,
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        excelHeader: "아이템 리스트 3",
+        group: "아이템 리스트",
+      },
+    },
+    {
+      accessorKey: "itemList4",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="아이템 리스트 4" />
+      ),
+      cell: ({ row }) => <div>{row.original.itemList4 || "-"}</div>,
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        excelHeader: "아이템 리스트 4",
+        group: "아이템 리스트",
+      },
+    },
+  ]
+  
+  // 3-3) 메타데이터 그룹 컬럼
+  const metadataColumns: ColumnDef<OffshoreTopTableItem>[] = [
+    {
+      accessorKey: "createdAt",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="생성일" />
+      ),
+      cell: ({ row }) => formatDate(row.original.createdAt),
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        excelHeader: "생성일",
+        group: "Metadata",
+      },
+    },
+    {
+      accessorKey: "updatedAt",
+      header: ({ column }) => (
+        <DataTableColumnHeaderSimple column={column} title="수정일" />
+      ),
+      cell: ({ row }) => formatDate(row.original.updatedAt),
+      enableSorting: true,
+      enableHiding: true,
+      meta: {
+        excelHeader: "수정일",
+        group: "Metadata",
+      },
+    }
+  ]
+  
+  // 3-4) 그룹별 컬럼 구성
+  const groupedColumns: ColumnDef<OffshoreTopTableItem>[] = [
+    {
+      id: "기본 정보",
+      header: "기본 정보",
+      columns: basicInfoColumns,
+    },
+    {
+      id: "아이템 리스트",
+      header: "아이템 리스트",
+      columns: itemListColumns,
+    },
+    {
+      id: "Metadata",
+      header: "Metadata",
+      columns: metadataColumns,
+    }
+  ]
+
+  // ----------------------------------------------------------------
+  // 4) 최종 컬럼 배열: select, groupedColumns, actions
+  // ----------------------------------------------------------------
+  return [
+    selectColumn,
+    ...groupedColumns,
+    actionsColumn,
+  ]
+} 
\ No newline at end of file
-- 
cgit v1.2.3