(최겸) 기술영업 조선, 해양Top, 해양 Hull 아이템 리스트 개발(CRUD, excel import/export/template)

5 files changed, 887 insertions, 0 deletions

diff --git a/lib/items-tech/table/top/import-item-handler.tsx b/lib/items-tech/table/top/import-item-handler.tsx
new file mode 100644
index 00000000..de1638a8
--- /dev/null
+++ b/lib/items-tech/table/top/import-item-handler.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import { z } from "zod"
+import { createOffshoreTopItem } from "../../service"
+
+// 해양 TOP 기능(공종) 유형 enum
+const TOP_WORK_TYPES = ["TM", "TS", "TE", "TP"] as const;
+
+// 아이템 데이터 검증을 위한 Zod 스키마
+const itemSchema = z.object({
+  itemCode: z.string().min(1, "아이템 코드는 필수입니다"),
+  itemName: z.string().min(1, "아이템 명은 필수입니다"),
+  workType: z.enum(TOP_WORK_TYPES, {
+    required_error: "기능(공종)은 필수입니다",
+  }),
+  description: z.string().nullable().optional(),
+  itemList1: z.string().nullable().optional(),
+  itemList2: z.string().nullable().optional(),
+  itemList3: z.string().nullable().optional(),
+  itemList4: z.string().nullable().optional(),
+});
+
+interface ProcessResult {
+  successCount: number;
+  errorCount: number;
+  errors?: Array<{ row: number; message: string }>;
+}
+
+/**
+ * Excel 파일에서 가져온 해양 TOP 아이템 데이터 처리하는 함수
+ */
+export async function processTopFileImport(
+  jsonData: any[],
+  progressCallback?: (current: number, total: number) => void
+): Promise<ProcessResult> {
+  // 결과 카운터 초기화
+  let successCount = 0;
+  let errorCount = 0;
+  const errors: Array<{ row: number; message: string }> = [];
+  
+  // 빈 행 등 필터링
+  const dataRows = jsonData.filter(row => {
+    // 빈 행 건너뛰기
+    if (Object.values(row).every(val => !val)) {
+      return false;
+    }
+    return true;
+  });
+  
+  // 데이터 행이 없으면 빈 결과 반환
+  if (dataRows.length === 0) {
+    return { successCount: 0, errorCount: 0 };
+  }
+  
+  // 각 행에 대해 처리
+  for (let i = 0; i < dataRows.length; i++) {
+    const row = dataRows[i];
+    const rowIndex = i + 1; // 사용자에게 표시할 행 번호는 1부터 시작
+    
+    // 진행 상황 콜백 호출
+    if (progressCallback) {
+      progressCallback(i + 1, dataRows.length);
+    }
+    
+    try {
+      // 필드 매핑 (한글/영문 필드명 모두 지원)
+      const itemCode = row["아이템 코드"] || row["itemCode"] || "";
+      const itemName = row["아이템 명"] || row["itemName"] || "";
+      const workType = row["기능(공종)"] || row["workType"] || "";
+      const description = row["설명"] || row["description"] || null;
+      const itemList1 = row["항목1"] || row["itemList1"] || null;
+      const itemList2 = row["항목2"] || row["itemList2"] || null;
+      const itemList3 = row["항목3"] || row["itemList3"] || null;
+      const itemList4 = row["항목4"] || row["itemList4"] || null;
+      
+      // 데이터 정제
+      const cleanedRow = {
+        itemCode: typeof itemCode === 'string' ? itemCode.trim() : String(itemCode).trim(),
+        itemName: typeof itemName === 'string' ? itemName.trim() : String(itemName).trim(),
+        workType: typeof workType === 'string' ? workType.trim() : String(workType).trim(),
+        description: description ? (typeof description === 'string' ? description : String(description)) : null,
+        itemList1: itemList1 ? (typeof itemList1 === 'string' ? itemList1 : String(itemList1)) : null,
+        itemList2: itemList2 ? (typeof itemList2 === 'string' ? itemList2 : String(itemList2)) : null,
+        itemList3: itemList3 ? (typeof itemList3 === 'string' ? itemList3 : String(itemList3)) : null,
+        itemList4: itemList4 ? (typeof itemList4 === 'string' ? itemList4 : String(itemList4)) : null,
+      };
+      
+      // 데이터 유효성 검사
+      const validationResult = itemSchema.safeParse(cleanedRow);
+      
+      if (!validationResult.success) {
+        const errorMessage = validationResult.error.errors.map(
+          err => `${err.path.join('.')}: ${err.message}`
+        ).join(', ');
+        
+        errors.push({ row: rowIndex, message: errorMessage });
+        errorCount++;
+        continue;
+      }
+
+      // 해양 TOP 아이템 생성
+      const result = await createOffshoreTopItem({
+        itemCode: cleanedRow.itemCode,
+        itemName: cleanedRow.itemName,
+        workType: cleanedRow.workType as "TM" | "TS" | "TE" | "TP",
+        description: cleanedRow.description,
+        itemList1: cleanedRow.itemList1,
+        itemList2: cleanedRow.itemList2,
+        itemList3: cleanedRow.itemList3,
+        itemList4: cleanedRow.itemList4,
+      });
+      
+      if (result.success) {
+        successCount++;
+      } else {
+        errors.push({
+          row: rowIndex,
+          message: result.message || result.error || "알 수 없는 오류"
+        });
+        errorCount++;
+      }
+    } catch (error) {
+      console.error(`${rowIndex}행 처리 오류:`, error);
+      errors.push({
+        row: rowIndex,
+        message: error instanceof Error ? error.message : "알 수 없는 오류"
+      });
+      errorCount++;
+    }
+    
+    // 비동기 작업 쓰로틀링
+    if (i % 5 === 0) {
+      await new Promise(resolve => setTimeout(resolve, 10));
+    }
+  }
+  
+  // 처리 결과 반환
+  return {
+    successCount,
+    errorCount,
+    errors: errors.length > 0 ? errors : undefined
+  };
+}
diff --git a/lib/items-tech/table/top/item-excel-template.tsx b/lib/items-tech/table/top/item-excel-template.tsx
new file mode 100644
index 00000000..4514af59
--- /dev/null
+++ b/lib/items-tech/table/top/item-excel-template.tsx
@@ -0,0 +1,125 @@
+import * as ExcelJS from 'exceljs';
+import { saveAs } from "file-saver";
+
+// 해양 TOP 기능(공종) 유형
+const TOP_WORK_TYPES = ["TM", "TS", "TE", "TP"] as const;
+
+/**
+ * 해양 TOP 아이템 데이터 가져오기를 위한 Excel 템플릿 파일 생성 및 다운로드
+ */
+export async function exportTopItemTemplate() {
+  // 워크북 생성
+  const workbook = new ExcelJS.Workbook();
+  workbook.creator = 'Offshore TOP Item Management System';
+  workbook.created = new Date();
+  
+  // 워크시트 생성
+  const worksheet = workbook.addWorksheet('해양 TOP 아이템');
+
+  // 컬럼 헤더 정의 및 스타일 적용
+  worksheet.columns = [
+    { header: '아이템 코드', key: 'itemCode', width: 15 },
+    { header: '아이템 명', key: 'itemName', width: 30 },
+    { header: '기능(공종)', key: 'workType', width: 15 },
+    { header: '설명', key: 'description', width: 50 },
+    { header: '항목1', key: 'itemList1', width: 20 },
+    { header: '항목2', key: 'itemList2', width: 20 },
+    { header: '항목3', key: 'itemList3', width: 20 },
+    { header: '항목4', key: 'itemList4', width: 20 },
+  ];
+
+  // 헤더 스타일 적용
+  const headerRow = worksheet.getRow(1);
+  headerRow.font = { bold: true };
+  headerRow.fill = {
+    type: 'pattern',
+    pattern: 'solid',
+    fgColor: { argb: 'FFE0E0E0' }
+  };
+  headerRow.alignment = { vertical: 'middle', horizontal: 'center' };
+
+  // 테두리 스타일 적용
+  headerRow.eachCell((cell) => {
+    cell.border = {
+      top: { style: 'thin' },
+      left: { style: 'thin' },
+      bottom: { style: 'thin' },
+      right: { style: 'thin' }
+    };
+  });
+
+  // 샘플 데이터 추가
+  const sampleData = [
+    { 
+      itemCode: 'TOP001', 
+      itemName: 'TOP 샘플 아이템 1', 
+      workType: 'TM',
+      description: '이것은 해양 TOP 샘플 아이템 1의 설명입니다.',
+      itemList1: '항목1 샘플 데이터',
+      itemList2: '항목2 샘플 데이터',
+      itemList3: '항목3 샘플 데이터',
+      itemList4: '항목4 샘플 데이터'
+    },
+    { 
+      itemCode: 'TOP002', 
+      itemName: 'TOP 샘플 아이템 2', 
+      workType: 'TS',
+      description: '이것은 해양 TOP 샘플 아이템 2의 설명입니다.',
+      itemList1: '항목1 샘플 데이터',
+      itemList2: '항목2 샘플 데이터',
+      itemList3: '',
+      itemList4: ''
+    }
+  ];
+
+  // 데이터 행 추가
+  sampleData.forEach(item => {
+    worksheet.addRow(item);
+  });
+
+  // 데이터 행 스타일 적용
+  worksheet.eachRow((row, rowNumber) => {
+    if (rowNumber > 1) { // 헤더를 제외한 데이터 행
+      row.eachCell((cell) => {
+        cell.border = {
+          top: { style: 'thin' },
+          left: { style: 'thin' },
+          bottom: { style: 'thin' },
+          right: { style: 'thin' }
+        };
+      });
+    }
+  });
+
+  // 워크시트에 공종 유형 관련 메모 추가
+  const infoRow = worksheet.addRow(['공종 유형 안내: ' + TOP_WORK_TYPES.join(', ')]);
+  infoRow.font = { bold: true, color: { argb: 'FF0000FF' } };
+  worksheet.mergeCells(`A${infoRow.number}:H${infoRow.number}`);
+
+  // 워크시트 보호 (선택적)
+  worksheet.protect('', {
+    selectLockedCells: true,
+    selectUnlockedCells: true,
+    formatColumns: true,
+    formatRows: true,
+    insertColumns: false,
+    insertRows: true,
+    insertHyperlinks: false,
+    deleteColumns: false,
+    deleteRows: true,
+    sort: true,
+    autoFilter: true,
+    pivotTables: false
+  });
+
+  try {
+    // 워크북을 Blob으로 변환
+    const buffer = await workbook.xlsx.writeBuffer();
+    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+    saveAs(blob, 'offshore-top-item-template.xlsx');
+    return true;
+  } catch (error) {
+    console.error('Excel 템플릿 생성 오류:', error);
+    throw error;
+  }
+}
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
diff --git a/lib/items-tech/table/top/offshore-top-table-toolbar-actions.tsx b/lib/items-tech/table/top/offshore-top-table-toolbar-actions.tsx
new file mode 100644
index 00000000..324312aa
--- /dev/null
+++ b/lib/items-tech/table/top/offshore-top-table-toolbar-actions.tsx
@@ -0,0 +1,184 @@
+"use client"

+

+import * as React from "react"

+import { type Table } from "@tanstack/react-table"

+import { Download, FileDown } from "lucide-react"

+import * as ExcelJS from 'exceljs'

+import { saveAs } from "file-saver"

+

+import { Button } from "@/components/ui/button"

+import {

+  DropdownMenu,

+  DropdownMenuContent,

+  DropdownMenuItem,

+  DropdownMenuTrigger,

+} from "@/components/ui/dropdown-menu"

+

+import { DeleteItemsDialog } from "../delete-items-dialog"

+import { AddItemDialog } from "../add-items-dialog"

+import { exportTopItemTemplate } from "./item-excel-template"

+import { ImportItemButton } from "../import-excel-button"

+

+// 해양 TOP 아이템 타입 정의

+interface OffshoreTopItem {

+  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 OffshoreTopTableToolbarActionsProps {

+  table: Table<OffshoreTopItem>

+}

+

+export function OffshoreTopTableToolbarActions({ table }: OffshoreTopTableToolbarActionsProps) {

+  const [refreshKey, setRefreshKey] = React.useState(0)

+

+  // 가져오기 성공 후 테이블 갱신

+  const handleImportSuccess = () => {

+    setRefreshKey(prev => prev + 1)

+  }

+

+  // Excel 내보내기 함수

+  const exportTableToExcel = async (

+    table: Table<OffshoreTopItem>,

+    options: {

+      filename: string;

+      excludeColumns?: string[];

+      sheetName?: string;

+    }

+  ) => {

+    const { filename, excludeColumns = [], sheetName = "해양 TOP 아이템 목록" } = options;

+    

+    // 워크북 생성

+    const workbook = new ExcelJS.Workbook();

+    workbook.creator = 'Offshore Item Management System';

+    workbook.created = new Date();

+    

+    // 워크시트 생성

+    const worksheet = workbook.addWorksheet(sheetName);

+    

+    // 테이블 데이터 가져오기

+    const data = table.getFilteredRowModel().rows.map(row => row.original);

+    console.log("내보내기 데이터:", data);

+    

+    // 필요한 헤더 직접 정의 (필터링 문제 해결)

+    const headers = [

+      { key: 'itemCode', header: '아이템 코드' },

+      { key: 'itemName', header: '아이템 명' },

+      { key: 'description', header: '설명' },

+      { key: 'workType', header: '기능(공종)' },

+      { key: 'itemList1', header: '아이템 리스트 1' },

+      { key: 'itemList2', header: '아이템 리스트 2' },

+      { key: 'itemList3', header: '아이템 리스트 3' },

+      { key: 'itemList4', header: '아이템 리스트 4' }

+    ].filter(header => !excludeColumns.includes(header.key));

+    

+    console.log("내보내기 헤더:", headers);

+    // 컬럼 정의

+    worksheet.columns = headers.map(header => ({

+      header: header.header,

+      key: header.key,

+      width: 20 // 기본 너비

+    }));

+    

+    // 스타일 적용

+    const headerRow = worksheet.getRow(1);

+    headerRow.font = { bold: true };

+    headerRow.fill = {

+      type: 'pattern',

+      pattern: 'solid',

+      fgColor: { argb: 'FFE0E0E0' }

+    };

+    headerRow.alignment = { vertical: 'middle', horizontal: 'center' };

+    

+    // 데이터 행 추가

+    data.forEach(item => {

+      const row: Record<string, any> = {};

+      headers.forEach(header => {

+        row[header.key] = item[header.key as keyof OffshoreTopItem];

+      });

+      worksheet.addRow(row);

+    });

+    

+    // 전체 셀에 테두리 추가

+    worksheet.eachRow((row) => {

+      row.eachCell((cell) => {

+        cell.border = {

+          top: { style: 'thin' },

+          left: { style: 'thin' },

+          bottom: { style: 'thin' },

+          right: { style: 'thin' }

+        };

+      });

+    });

+    

+    try {

+      // 워크북을 Blob으로 변환

+      const buffer = await workbook.xlsx.writeBuffer();

+      const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

+      saveAs(blob, `${filename}.xlsx`);

+      return true;

+    } catch (error) {

+      console.error("Excel 내보내기 오류:", error);

+      return false;

+    }

+  }

+

+  return (

+    <div className="flex items-center gap-2">

+      {/* 선택된 로우가 있으면 삭제 다이얼로그 */}

+      {table.getFilteredSelectedRowModel().rows.length > 0 ? (

+        <DeleteItemsDialog

+          items={table

+            .getFilteredSelectedRowModel()

+            .rows.map((row) => row.original)}

+          onSuccess={() => table.toggleAllRowsSelected(false)}

+          itemType="offshoreTop"

+        />

+      ) : null}

+

+      {/* 새 아이템 추가 다이얼로그 */}

+      <AddItemDialog itemType="offshoreTop" />

+

+      {/* Import 버튼 */}

+      <ImportItemButton itemType="top" onSuccess={handleImportSuccess} />

+

+      {/* Export 드롭다운 메뉴 */}

+      <DropdownMenu>

+        <DropdownMenuTrigger asChild>

+          <Button variant="outline" size="sm" className="gap-2">

+            <Download className="size-4" aria-hidden="true" />

+            <span className="hidden sm:inline">Export</span>

+          </Button>

+        </DropdownMenuTrigger>

+        <DropdownMenuContent align="end">

+          <DropdownMenuItem

+            onClick={() =>

+              exportTableToExcel(table, {

+                filename: "offshore_top_items",

+                excludeColumns: ["select", "actions"],

+                sheetName: "해양 TOP 아이템 목록"

+              })

+            }

+          >

+            <FileDown className="mr-2 h-4 w-4" />

+            <span>현재 데이터 내보내기</span>

+          </DropdownMenuItem>

+          <DropdownMenuItem onClick={() => exportTopItemTemplate()}>

+            <FileDown className="mr-2 h-4 w-4" />

+            <span>템플릿 다운로드</span>

+          </DropdownMenuItem>

+        </DropdownMenuContent>

+      </DropdownMenu>

+    </div>

+  )

+} 
\ No newline at end of file
diff --git a/lib/items-tech/table/top/offshore-top-table.tsx b/lib/items-tech/table/top/offshore-top-table.tsx
new file mode 100644
index 00000000..dedf766a
--- /dev/null
+++ b/lib/items-tech/table/top/offshore-top-table.tsx
@@ -0,0 +1,153 @@
+"use client"

+

+import * as React from "react"

+import type {

+  DataTableFilterField,

+  DataTableAdvancedFilterField,

+  DataTableRowAction,

+} from "@/types/table"

+

+import { useDataTable } from "@/hooks/use-data-table"

+import { DataTable } from "@/components/data-table/data-table"

+import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar"

+import { getOffshoreTopItems } from "../../service"

+import { getOffshoreTopColumns } from "./offshore-top-table-columns"

+import { OffshoreTopTableToolbarActions } from "./offshore-top-table-toolbar-actions"

+import { DeleteItemsDialog } from "../delete-items-dialog"

+import { UpdateItemSheet } from "../update-items-sheet"

+

+// 서비스에서 반환하는 데이터 타입 정의

+type OffshoreTopItem = {

+  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 OffshoreTopTableProps {

+  promises: Promise<Awaited<ReturnType<typeof getOffshoreTopItems>>>

+}

+

+export function OffshoreTopTable({ promises }: OffshoreTopTableProps) {

+  const { data, pageCount } = React.use(promises)

+

+  // 아이템 타입에 따른 행 액션 상태 관리

+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<OffshoreTopItem> | null>(null)

+  const columns = getOffshoreTopColumns({ setRowAction })

+  const filterFields: DataTableFilterField<OffshoreTopItem>[] = [

+    {

+      id: "itemCode",

+      label: "Item Code",

+    },

+    {

+      id: "itemName",

+      label: "Item Name",

+    },

+    {

+      id: "workType",

+      label: "기능(공종)",

+    },

+    {

+      id: "itemList1",

+      label: "아이템 리스트 1",

+    },

+  ]

+

+  const advancedFilterFields: DataTableAdvancedFilterField<OffshoreTopItem>[] = [

+    {

+      id: "itemCode",

+      label: "Item Code",

+      type: "text",

+    },

+    {

+      id: "itemName",

+      label: "Item Name",

+      type: "text",

+    },

+    {

+      id: "description",

+      label: "Description",

+      type: "text",

+    },

+    {

+      id: "workType",

+      label: "기능(공종)",

+      type: "text",

+    },

+    {

+      id: "itemList1",

+      label: "아이템 리스트 1",

+      type: "text",

+    },

+    {

+      id: "itemList2",

+      label: "아이템 리스트 2",

+      type: "text",

+    },

+    {

+      id: "itemList3",

+      label: "아이템 리스트 3",

+      type: "text",

+    },

+    {

+      id: "itemList4",

+      label: "아이템 리스트 4",

+      type: "text",

+    },

+  ]

+

+  const { table } = useDataTable({

+    data: data as OffshoreTopItem[],

+    columns,

+    pageCount,

+    filterFields,

+    enablePinning: true,

+    enableAdvancedFilter: true,

+    initialState: {

+      sorting: [{ id: "createdAt", desc: true }],

+      columnPinning: { right: ["actions"] },

+    },

+    getRowId: (originalRow) => String(originalRow.id),

+    shallow: false,

+    clearOnDefault: true,

+  })

+

+  return (

+    <>

+      <DataTable table={table}>

+        <DataTableAdvancedToolbar

+          table={table}

+          filterFields={advancedFilterFields}

+          shallow={false}

+        >

+          <OffshoreTopTableToolbarActions table={table} />

+        </DataTableAdvancedToolbar>

+      </DataTable>

+      <DeleteItemsDialog

+        open={rowAction?.type === "delete"}

+        onOpenChange={() => setRowAction(null)}

+        items={rowAction?.row.original ? [rowAction?.row.original] : []}

+        showTrigger={false}

+        onSuccess={() => rowAction?.row.toggleSelected(false)}

+        itemType="offshoreTop"

+      />

+      

+      {rowAction?.type === "update" && rowAction.row.original && (

+        <UpdateItemSheet

+          item={rowAction.row.original}

+          itemType="offshoreTop"

+          open={true}

+          onOpenChange={() => setRowAction(null)}

+        />

+      )}

+    </>

+  )

+} 
\ No newline at end of file