diff options
Diffstat (limited to 'lib/items-tech/table/ship')
| -rw-r--r-- | lib/items-tech/table/ship/Items-ship-table.tsx | 146 | ||||
| -rw-r--r-- | lib/items-tech/table/ship/import-item-handler.tsx | 145 | ||||
| -rw-r--r-- | lib/items-tech/table/ship/item-excel-template.tsx | 122 | ||||
| -rw-r--r-- | lib/items-tech/table/ship/items-ship-table-columns.tsx | 244 | ||||
| -rw-r--r-- | lib/items-tech/table/ship/items-table-toolbar-actions.tsx | 178 |
5 files changed, 835 insertions, 0 deletions
diff --git a/lib/items-tech/table/ship/Items-ship-table.tsx b/lib/items-tech/table/ship/Items-ship-table.tsx new file mode 100644 index 00000000..aee90cfc --- /dev/null +++ b/lib/items-tech/table/ship/Items-ship-table.tsx @@ -0,0 +1,146 @@ +"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 { getShipbuildingItems } from "../../service"
+import { getShipbuildingColumns } from "./items-ship-table-columns"
+import { ItemsTableToolbarActions } from "./items-table-toolbar-actions"
+import { DeleteItemsDialog } from "../delete-items-dialog"
+import { UpdateItemSheet } from "../update-items-sheet"
+
+// 서비스에서 반환하는 데이터 타입 정의
+type ShipbuildingItem = {
+ id: number;
+ itemId: number;
+ workType: "기장" | "전장" | "선실" | "배관" | "철의";
+ shipTypes: string;
+ itemCode: string;
+ itemName: string;
+ description: string | null;
+ createdAt: Date;
+ updatedAt: Date;
+}
+
+interface ItemsTableProps {
+ promises: Promise<Awaited<ReturnType<typeof getShipbuildingItems>>>
+}
+
+export function ItemsShipTable({ promises }: ItemsTableProps) {
+ const { data, pageCount } = React.use(promises)
+
+ // 아이템 타입에 따른 행 액션 상태 관리
+ const [rowAction, setRowAction] = React.useState<DataTableRowAction<ShipbuildingItem> | null>(null)
+ const columns = getShipbuildingColumns({ setRowAction })
+ const filterFields: DataTableFilterField<ShipbuildingItem>[] = [
+ {
+ id: "itemCode",
+ label: "Item Code",
+ },
+ {
+ id: "itemName",
+ label: "Item Name",
+ },
+ {
+ id: "workType",
+ label: "기능(공종)",
+ },
+ {
+ id: "shipTypes",
+ label: "선종",
+ },
+ ]
+
+ /**
+ * Advanced filter fields for the data table.
+ * These fields provide more complex filtering options compared to the regular filterFields.
+ *
+ * Key differences from regular filterFields:
+ * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'.
+ * 2. Enhanced flexibility: Allows for more precise and varied filtering options.
+ * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI.
+ * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values.
+ */
+
+ const advancedFilterFields: DataTableAdvancedFilterField<ShipbuildingItem>[] = [
+ {
+ 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: "shipTypes",
+ label: "선종",
+ type: "text",
+ },
+ ]
+
+ const { table } = useDataTable({
+ data: data as ShipbuildingItem[],
+ 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}
+ >
+ <ItemsTableToolbarActions 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="shipbuilding"
+ />
+
+ {rowAction?.type === "update" && rowAction.row.original && (
+ <UpdateItemSheet
+ item={rowAction.row.original}
+ itemType="shipbuilding"
+ open={true}
+ onOpenChange={() => setRowAction(null)}
+ />
+ )}
+ </>
+ )
+}
diff --git a/lib/items-tech/table/ship/import-item-handler.tsx b/lib/items-tech/table/ship/import-item-handler.tsx new file mode 100644 index 00000000..6ad24398 --- /dev/null +++ b/lib/items-tech/table/ship/import-item-handler.tsx @@ -0,0 +1,145 @@ +"use client" + +import { z } from "zod" +import { createShipbuildingImportItem } from "../../service" // 아이템 생성 서버 액션 + +const SHIP_TYPES = ['A-MAX', 'S-MAX', 'LNGC', 'VLCC', 'CONT'] as const; + +// 아이템 데이터 검증을 위한 Zod 스키마 +const itemSchema = z.object({ + itemCode: z.string().min(1, "아이템 코드는 필수입니다"), + itemName: z.string().min(1, "아이템 명은 필수입니다"), + workType: z.enum(["기장", "전장", "선실", "배관", "철의"], { + required_error: "기능(공종)은 필수입니다", + }), + description: z.string().nullable().optional(), +}); + +interface ProcessResult { + successCount: number; + errorCount: number; + errors?: Array<{ row: number; message: string }>; +} + +/** + * Excel 파일에서 가져온 조선 아이템 데이터 처리하는 함수 + */ +export async function processFileImport( + 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 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, + }; + + // 데이터 유효성 검사 + 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; + } + + // 선종 데이터 처리 + const shipTypeEntries = SHIP_TYPES.map(type => ({ + type, + value: row[type]?.toUpperCase() === 'O' + })).filter(entry => entry.value); + console.log('shipTypeEntries:', shipTypeEntries); + + if (shipTypeEntries.length === 0) { + errors.push({ + row: rowIndex, + message: "최소 하나 이상의 선종이 'O'로 지정되어야 합니다." + }); + errorCount++; + continue; + } + + // 각 선종에 대해 아이템 생성 + for (const { type } of shipTypeEntries) { + const result = await createShipbuildingImportItem({ + itemCode: cleanedRow.itemCode, + itemName: cleanedRow.itemName, + workType: cleanedRow.workType as "기장" | "전장" | "선실" | "배관" | "철의", + shipTypes: { [type]: true }, + description: cleanedRow.description, + }); + + if (result.success || !result.error) { + successCount++; + } else { + errors.push({ + row: rowIndex, + message: `${type}: ${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 + }; +}
\ No newline at end of file diff --git a/lib/items-tech/table/ship/item-excel-template.tsx b/lib/items-tech/table/ship/item-excel-template.tsx new file mode 100644 index 00000000..127a1dea --- /dev/null +++ b/lib/items-tech/table/ship/item-excel-template.tsx @@ -0,0 +1,122 @@ +import * as ExcelJS from 'exceljs'; +import { saveAs } from "file-saver"; + +const SHIP_TYPES = ['A-MAX', 'S-MAX', 'LNGC', 'VLCC', 'CONT'] as const; + +/** + * 조선 아이템 데이터 가져오기를 위한 Excel 템플릿 파일 생성 및 다운로드 + */ +export async function exportItemTemplate() { + // 워크북 생성 + const workbook = new ExcelJS.Workbook(); + workbook.creator = 'Shipbuilding Item Management System'; + workbook.created = new Date(); + + // 워크시트 생성 + const worksheet = workbook.addWorksheet('조선 아이템'); + + // 컬럼 헤더 정의 및 스타일 적용 + worksheet.columns = [ + { header: '아이템 코드', key: 'itemCode', width: 15 }, + { header: '아이템 명', key: 'itemName', width: 30 }, + { header: '기능(공종)', key: 'workType', width: 15 }, + { header: '설명', key: 'description', width: 50 }, + ...SHIP_TYPES.map(type => ({ + header: type, + key: type, + width: 10 + })) + ]; + + // 헤더 스타일 적용 + 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: 'BG0001', + itemName: '샘플 아이템 1', + workType: '기장', + description: '이것은 샘플 아이템 1의 설명입니다.', + 'A-MAX': 'O', + 'S-MAX': 'O', + 'LNGC': 'O', + 'VLCC': 'X', + 'CONT': 'X' + }, + { + itemCode: 'BG0002', + itemName: '샘플 아이템 2', + workType: '전장', + description: '이것은 샘플 아이템 2의 설명입니다.', + 'A-MAX': 'O', + 'S-MAX': 'X', + 'LNGC': 'O', + 'VLCC': 'O', + 'CONT': 'X' + } + ]; + + // 데이터 행 추가 + 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' } + }; + }); + } + }); + + // 워크시트 보호 (선택적) + 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, 'shipbuilding-item-template.xlsx'); + return true; + } catch (error) { + console.error('Excel 템플릿 생성 오류:', error); + throw error; + } +}
\ No newline at end of file diff --git a/lib/items-tech/table/ship/items-ship-table-columns.tsx b/lib/items-tech/table/ship/items-ship-table-columns.tsx new file mode 100644 index 00000000..2b46db92 --- /dev/null +++ b/lib/items-tech/table/ship/items-ship-table-columns.tsx @@ -0,0 +1,244 @@ +"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 ShipbuildingTableItem {
+ id: number;
+ itemId: number;
+ workType: "기장" | "전장" | "선실" | "배관" | "철의";
+ shipTypes: string;
+ itemCode: string;
+ itemName: string;
+ description: string | null;
+ createdAt: Date;
+ updatedAt: Date;
+}
+
+interface GetColumnsProps {
+ setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<ShipbuildingTableItem> | null>>
+}
+
+/**
+ * 조선 아이템 테이블 컬럼 정의
+ */
+export function getShipbuildingColumns({ setRowAction }: GetColumnsProps): ColumnDef<ShipbuildingTableItem>[] {
+ // ----------------------------------------------------------------
+ // 1) select 컬럼 (체크박스)
+ // ----------------------------------------------------------------
+ const selectColumn: ColumnDef<ShipbuildingTableItem> = {
+ 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<ShipbuildingTableItem> = {
+ 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<ShipbuildingTableItem>[] = [
+ {
+ 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 shipTypesColumns: ColumnDef<ShipbuildingTableItem>[] = [
+ {
+ accessorKey: "shipTypes",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="선종" />
+ ),
+ cell: ({ row }) => <div>{row.original.shipTypes}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "선종",
+ group: "선종",
+ },
+ },
+ ]
+
+ // 3-3) 메타데이터 그룹 컬럼
+ const metadataColumns: ColumnDef<ShipbuildingTableItem>[] = [
+
+ {
+ 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<ShipbuildingTableItem>[] = [
+ {
+ id: "기본 정보",
+ header: "기본 정보",
+ columns: basicInfoColumns,
+ },
+ {
+ id: "선종",
+ header: "선종",
+ columns: shipTypesColumns,
+ },
+ {
+ 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/ship/items-table-toolbar-actions.tsx b/lib/items-tech/table/ship/items-table-toolbar-actions.tsx new file mode 100644 index 00000000..6cae61af --- /dev/null +++ b/lib/items-tech/table/ship/items-table-toolbar-actions.tsx @@ -0,0 +1,178 @@ +"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 { exportItemTemplate } from "./item-excel-template" +import { ImportItemButton } from "../import-excel-button" + +// 조선 아이템 타입 정의 +interface ShipbuildingItem { + id: number; + itemId: number; + workType: "기장" | "전장" | "선실" | "배관" | "철의"; + shipTypes: string; + itemCode: string; + itemName: string; + description: string | null; + createdAt: Date; + updatedAt: Date; +} + +interface ItemsTableToolbarActionsProps { + table: Table<ShipbuildingItem> +} + +export function ItemsTableToolbarActions({ table }: ItemsTableToolbarActionsProps) { + const [refreshKey, setRefreshKey] = React.useState(0) + + // 가져오기 성공 후 테이블 갱신 + const handleImportSuccess = () => { + setRefreshKey(prev => prev + 1) + } + + // Excel 내보내기 함수 + const exportTableToExcel = async ( + table: Table<ShipbuildingItem>, + options: { + filename: string; + excludeColumns?: string[]; + sheetName?: string; + } + ) => { + const { filename, excludeColumns = [], sheetName = "조선 아이템 목록" } = options; + + // 워크북 생성 + const workbook = new ExcelJS.Workbook(); + workbook.creator = 'Shipbuilding 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: 'shipTypes', header: '선종' } + ].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 ShipbuildingItem]; + }); + 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="shipbuilding" + /> + ) : null} + + {/* 새 아이템 추가 다이얼로그 */} + <AddItemDialog itemType="shipbuilding" /> + + {/* Import 버튼 */} + <ImportItemButton itemType="ship" 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: "shipbuilding_items", + excludeColumns: ["select", "actions"], + sheetName: "조선 아이템 목록" + }) + } + > + <FileDown className="mr-2 h-4 w-4" /> + <span>현재 데이터 내보내기</span> + </DropdownMenuItem> + <DropdownMenuItem onClick={() => exportItemTemplate()}> + <FileDown className="mr-2 h-4 w-4" /> + <span>템플릿 다운로드</span> + </DropdownMenuItem> + </DropdownMenuContent> + </DropdownMenu> + </div> + ) +}
\ No newline at end of file |
