diff options
Diffstat (limited to 'lib/items-ship/table')
| -rw-r--r-- | lib/items-ship/table/Items-ship-table.tsx | 141 | ||||
| -rw-r--r-- | lib/items-ship/table/add-items-dialog.tsx | 211 | ||||
| -rw-r--r-- | lib/items-ship/table/delete-items-dialog.tsx | 154 | ||||
| -rw-r--r-- | lib/items-ship/table/feature-flags.tsx | 96 | ||||
| -rw-r--r-- | lib/items-ship/table/import-excel-button.tsx | 263 | ||||
| -rw-r--r-- | lib/items-ship/table/import-item-handler.tsx | 145 | ||||
| -rw-r--r-- | lib/items-ship/table/item-excel-template.tsx | 122 | ||||
| -rw-r--r-- | lib/items-ship/table/items-ship-table-columns.tsx | 244 | ||||
| -rw-r--r-- | lib/items-ship/table/items-table-toolbar-actions.tsx | 177 | ||||
| -rw-r--r-- | lib/items-ship/table/update-items-sheet.tsx | 202 |
10 files changed, 0 insertions, 1755 deletions
diff --git a/lib/items-ship/table/Items-ship-table.tsx b/lib/items-ship/table/Items-ship-table.tsx deleted file mode 100644 index 6fec9ac0..00000000 --- a/lib/items-ship/table/Items-ship-table.tsx +++ /dev/null @@ -1,141 +0,0 @@ -"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,
- 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>
- {/* <UpdateItemSheet
- open={rowAction?.type === "update"}
- onOpenChange={() => setRowAction(null)}
- item={rowAction?.row.original as ShipbuildingItem}
- /> */}
- <DeleteItemsDialog
- open={rowAction?.type === "delete"}
- onOpenChange={() => setRowAction(null)}
- items={rowAction?.row.original ? [rowAction?.row.original] : []}
- showTrigger={false}
- onSuccess={() => rowAction?.row.toggleSelected(false)}
- />
- </>
- )
-}
diff --git a/lib/items-ship/table/add-items-dialog.tsx b/lib/items-ship/table/add-items-dialog.tsx deleted file mode 100644 index fdfe54cc..00000000 --- a/lib/items-ship/table/add-items-dialog.tsx +++ /dev/null @@ -1,211 +0,0 @@ -"use client"
-
-import * as React from "react"
-import { useForm } from "react-hook-form"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { z } from "zod"
-
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
-// react-hook-form + shadcn/ui Form
-import {
- Form,
- FormControl,
- FormField,
- FormItem,
- FormLabel,
- FormMessage,
-} from "@/components/ui/form"
-
-import {
- createShipbuildingItemSchema,
-
-} from "../validations"
-import { createShipbuildingItem } from "../service"
-import { Plus } from "lucide-react"
-import { toast } from "sonner"
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "@/components/ui/select"
-
-const workTypes = [
- { value: "기장", label: "기장" },
- { value: "전장", label: "전장" },
- { value: "선실", label: "선실" },
- { value: "배관", label: "배관" },
- { value: "철의", label: "철의" },
-] as const
-
-export function AddItemDialog() {
- const [open, setOpen] = React.useState(false)
- const [isSubmitting, setIsSubmitting] = React.useState(false)
-
- // 아이템 타입에 따라 다른 폼과 스키마 사용
- const getFormAndSchema = () => {
- return {
- schema: createShipbuildingItemSchema,
- defaultValues: {
- itemCode: "",
- itemName: "",
- description: "",
- workType: "",
- shipTypes: "",
- }
- };
- };
-
- const { schema, defaultValues } = getFormAndSchema();
-
- // 타입 안전성을 위해 구체적인 타입 사용
- type ItemFormSchema =
- | z.infer<typeof createShipbuildingItemSchema>
-
-
- const form = useForm<ItemFormSchema>({
- resolver: zodResolver(schema),
- defaultValues,
- });
-
- async function onSubmit(values: ItemFormSchema) {
- try {
- setIsSubmitting(true)
-
- // 타입에 따라 다른 로직 추가 가능
- const result = await createShipbuildingItem(values)
-
- if (result.success) {
- toast.success("아이템이 추가되었습니다.")
- form.reset()
- setOpen(false)
- } else {
- toast.error(result.message || "아이템 추가 실패")
- }
- } catch (error) {
- toast.error("오류가 발생했습니다.")
- console.error(error)
- } finally {
- setIsSubmitting(false)
- }
- }
-
-
-
- return (
- <Dialog open={open} onOpenChange={setOpen}>
- <DialogTrigger asChild>
- <Button variant="outline" size="sm" className="ml-auto gap-2">
- <Plus className="h-4 w-4" />
- <span className="hidden sm:inline">Add Item</span>
- </Button>
- </DialogTrigger>
- <DialogContent className="sm:max-w-[425px] max-h-[80vh] flex flex-col">
- <DialogHeader>
- <DialogTitle>아이템 추가</DialogTitle>
- <DialogDescription>
- {'조선 아이템을 추가합니다. 아이템 코드, 이름, 설명을 입력하세요.'}
- </DialogDescription>
- </DialogHeader>
- <div className="overflow-y-auto pr-2">
- <Form {...form}>
- <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
- <FormField
- control={form.control}
- name="itemCode"
- render={({ field }) => (
- <FormItem>
- <FormLabel>아이템 코드</FormLabel>
- <FormControl>
- <Input placeholder={'예: SB001'} {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
- <FormField
- control={form.control}
- name="itemName"
- render={({ field }) => (
- <FormItem>
- <FormLabel>아이템 이름</FormLabel>
- <FormControl>
- <Input placeholder="아이템 이름 입력" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
- <FormField
- control={form.control}
- name="description"
- render={({ field }) => (
- <FormItem>
- <FormLabel>설명</FormLabel>
- <FormControl>
- <Textarea placeholder="설명 입력 (선택사항)" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
- <FormField
- control={form.control}
- name="workType"
- render={({ field }) => (
- <FormItem>
- <FormLabel>기능(공종)</FormLabel>
- <FormControl>
- <Select
- onValueChange={field.onChange}
- defaultValue={field.value}
- >
- <FormControl>
- <SelectTrigger>
- <SelectValue placeholder={'기능(공종)을 선택하세요'} />
- </SelectTrigger>
- </FormControl>
- <SelectContent>
- {workTypes.map((type) => (
- <SelectItem key={type.value} value={type.value}>
- {type.label}
- </SelectItem>
- ))}
- </SelectContent>
- </Select>
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
-
- {/* 조선 아이템인 경우 선종 필드 표시 */}
- <FormField
- control={form.control}
- name="shipTypes"
- render={({ field }) => (
- <FormItem>
- <FormLabel>선종</FormLabel>
- <FormControl>
- <Input placeholder="예: A-MAX, VLCC, S-MAX" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
- <DialogFooter className="mt-4">
- <Button type="submit" disabled={isSubmitting}>
- {isSubmitting ? "추가 중..." : "추가"}
- </Button>
- </DialogFooter>
- </form>
- </Form>
- </div>
- </DialogContent>
- </Dialog>
- )
-}
\ No newline at end of file diff --git a/lib/items-ship/table/delete-items-dialog.tsx b/lib/items-ship/table/delete-items-dialog.tsx deleted file mode 100644 index 53e047fb..00000000 --- a/lib/items-ship/table/delete-items-dialog.tsx +++ /dev/null @@ -1,154 +0,0 @@ -"use client" - -import * as React from "react" -import { type Row } from "@tanstack/react-table" -import { Loader, Trash } from "lucide-react" -import { toast } from "sonner" - -import { useMediaQuery } from "@/hooks/use-media-query" -import { Button } from "@/components/ui/button" -import { - Dialog, - DialogClose, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, - DialogTrigger, -} from "@/components/ui/dialog" -import { - Drawer, - DrawerClose, - DrawerContent, - DrawerDescription, - DrawerFooter, - DrawerHeader, - DrawerTitle, - DrawerTrigger, -} from "@/components/ui/drawer" - -import { Item } from "@/db/schema/items" -import { removeShipbuildingItems } from "../service" - -interface DeleteItemsDialogProps - extends React.ComponentPropsWithoutRef<typeof Dialog> { - items: Row<Item>["original"][] - showTrigger?: boolean - onSuccess?: () => void -} - -export function DeleteItemsDialog({ - items, - showTrigger = true, - onSuccess, - ...props -}: DeleteItemsDialogProps) { - const [isDeletePending, startDeleteTransition] = React.useTransition() - const isDesktop = useMediaQuery("(min-width: 640px)") - - async function onDelete() { - try { - startDeleteTransition(async () => { - const { error } = await removeShipbuildingItems({ - ids: items.map((item) => item.id), - }) - - if (error) { - toast.error(error) - return - } - - props.onOpenChange?.(false) - toast.success("아이템 삭제 완료") - onSuccess?.() - }) - } catch (error) { - toast.error("오류가 발생했습니다.") - console.error(error) - } - } - - if (isDesktop) { - return ( - <Dialog {...props}> - {showTrigger ? ( - <DialogTrigger asChild> - <Button variant="outline" size="sm"> - <Trash className="mr-2 size-4" aria-hidden="true" /> - 삭제 ({items.length}) - </Button> - </DialogTrigger> - ) : null} - <DialogContent> - <DialogHeader> - <DialogTitle>정말로 삭제하시겠습니까?</DialogTitle> - <DialogDescription> - 이 작업은 되돌릴 수 없습니다. 선택한{" "} - <span className="font-medium">{items.length}</span> - 개의 조선 아이템이(가) 영구적으로 삭제됩니다. - </DialogDescription> - </DialogHeader> - <DialogFooter className="gap-2 sm:space-x-0"> - <DialogClose asChild> - <Button variant="outline">취소</Button> - </DialogClose> - <Button - aria-label="삭제 확인" - variant="destructive" - onClick={onDelete} - disabled={isDeletePending} - > - {isDeletePending && ( - <Loader - className="mr-2 size-4 animate-spin" - aria-hidden="true" - /> - )} - 삭제 - </Button> - </DialogFooter> - </DialogContent> - </Dialog> - ) - } - - return ( - <Drawer {...props}> - {showTrigger ? ( - <DrawerTrigger asChild> - <Button variant="outline" size="sm"> - <Trash className="mr-2 size-4" aria-hidden="true" /> - 삭제 ({items.length}) - </Button> - </DrawerTrigger> - ) : null} - <DrawerContent> - <DrawerHeader> - <DrawerTitle>정말로 삭제하시겠습니까?</DrawerTitle> - <DrawerDescription> - 이 작업은 되돌릴 수 없습니다. 선택한{" "} - <span className="font-medium">{items.length}</span> - 개의 조선 아이템이(가) 영구적으로 삭제됩니다. - </DrawerDescription> - </DrawerHeader> - <DrawerFooter className="gap-2 sm:space-x-0"> - <DrawerClose asChild> - <Button variant="outline">취소</Button> - </DrawerClose> - <Button - aria-label="삭제 확인" - variant="destructive" - onClick={onDelete} - disabled={isDeletePending} - > - {isDeletePending && ( - <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" /> - )} - 삭제 - </Button> - </DrawerFooter> - </DrawerContent> - </Drawer> - ) -} diff --git a/lib/items-ship/table/feature-flags.tsx b/lib/items-ship/table/feature-flags.tsx deleted file mode 100644 index aaae6af2..00000000 --- a/lib/items-ship/table/feature-flags.tsx +++ /dev/null @@ -1,96 +0,0 @@ -"use client" - -import * as React from "react" -import { useQueryState } from "nuqs" - -import { dataTableConfig, type DataTableConfig } from "@/config/data-table" -import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "@/components/ui/tooltip" - -type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"] - -interface TasksTableContextProps { - featureFlags: FeatureFlagValue[] - setFeatureFlags: (value: FeatureFlagValue[]) => void -} - -const TasksTableContext = React.createContext<TasksTableContextProps>({ - featureFlags: [], - setFeatureFlags: () => {}, -}) - -export function useTasksTable() { - const context = React.useContext(TasksTableContext) - if (!context) { - throw new Error("useTasksTable must be used within a TasksTableProvider") - } - return context -} - -export function TasksTableProvider({ children }: React.PropsWithChildren) { - const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>( - "featureFlags", - { - defaultValue: [], - parse: (value) => value.split(",") as FeatureFlagValue[], - serialize: (value) => value.join(","), - eq: (a, b) => - a.length === b.length && a.every((value, index) => value === b[index]), - clearOnDefault: true, - } - ) - - return ( - <TasksTableContext.Provider - value={{ - featureFlags, - setFeatureFlags: (value) => void setFeatureFlags(value), - }} - > - <div className="w-full overflow-x-auto"> - <ToggleGroup - type="multiple" - variant="outline" - size="sm" - value={featureFlags} - onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)} - className="w-fit" - > - {dataTableConfig.featureFlags.map((flag) => ( - <Tooltip key={flag.value}> - <ToggleGroupItem - value={flag.value} - className="whitespace-nowrap px-3 text-xs" - asChild - > - <TooltipTrigger> - <flag.icon - className="mr-2 size-3.5 shrink-0" - aria-hidden="true" - /> - {flag.label} - </TooltipTrigger> - </ToggleGroupItem> - <TooltipContent - align="start" - side="bottom" - sideOffset={6} - className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground" - > - <div>{flag.tooltipTitle}</div> - <div className="text-xs text-muted-foreground"> - {flag.tooltipDescription} - </div> - </TooltipContent> - </Tooltip> - ))} - </ToggleGroup> - </div> - {children} - </TasksTableContext.Provider> - ) -} diff --git a/lib/items-ship/table/import-excel-button.tsx b/lib/items-ship/table/import-excel-button.tsx deleted file mode 100644 index cc6c9b73..00000000 --- a/lib/items-ship/table/import-excel-button.tsx +++ /dev/null @@ -1,263 +0,0 @@ -"use client" - -import * as React from "react" -import { Upload } from "lucide-react" -import { toast } from "sonner" -import * as ExcelJS from 'exceljs' - -import { Button } from "@/components/ui/button" -import { - Dialog, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@/components/ui/dialog" -import { Progress } from "@/components/ui/progress" -import { processFileImport } from "./import-item-handler" - -const SHIP_TYPES = ['A-MAX', 'S-MAX', 'LNGC', 'VLCC', 'CONT'] as const; - -interface ImportItemButtonProps { - onSuccess?: () => void -} - -export function ImportItemButton({ onSuccess }: ImportItemButtonProps) { - const [open, setOpen] = React.useState(false) - const [file, setFile] = React.useState<File | null>(null) - const [isUploading, setIsUploading] = React.useState(false) - const [progress, setProgress] = React.useState(0) - const [error, setError] = React.useState<string | null>(null) - const fileInputRef = React.useRef<HTMLInputElement>(null) - - // 파일 선택 처리 - const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { - const selectedFile = e.target.files?.[0] - if (!selectedFile) return - - if (!selectedFile.name.endsWith('.xlsx') && !selectedFile.name.endsWith('.xls')) { - setError("Excel 파일(.xlsx 또는 .xls)만 가능합니다.") - return - } - - setFile(selectedFile) - setError(null) - } - - // 데이터 가져오기 처리 - const handleImport = async () => { - if (!file) { - setError("가져올 파일을 선택해주세요.") - return - } - - try { - setIsUploading(true) - setProgress(0) - setError(null) - - // 파일을 ArrayBuffer로 읽기 - const arrayBuffer = await file.arrayBuffer(); - - // ExcelJS 워크북 로드 - const workbook = new ExcelJS.Workbook(); - await workbook.xlsx.load(arrayBuffer); - - // 첫 번째 워크시트 가져오기 - const worksheet = workbook.worksheets[0]; - if (!worksheet) { - throw new Error("Excel 파일에 워크시트가 없습니다."); - } - - // 헤더 행 찾기 - let headerRowIndex = 1; - let headerRow: ExcelJS.Row | undefined; - let headerValues: (string | null)[] = []; - - worksheet.eachRow((row, rowNumber) => { - const values = row.values as (string | null)[]; - if (!headerRow && values.some(v => v === "아이템 코드" || v === "itemCode" || v === "item_code")) { - headerRowIndex = rowNumber; - headerRow = row; - headerValues = [...values]; - } - }); - - if (!headerRow) { - throw new Error("Excel 파일에서 헤더 행을 찾을 수 없습니다."); - } - - // 헤더를 기반으로 인덱스 매핑 생성 - const headerMapping: Record<string, number> = {}; - headerValues.forEach((value, index) => { - if (typeof value === 'string') { - headerMapping[value] = index; - } - }); - - const requiredHeaders = ["아이템 코드", "아이템 명", "기능(공종)", ...SHIP_TYPES]; - const alternativeHeaders = { - "아이템 코드": ["itemCode", "item_code"], - "아이템 명": ["itemName", "item_name"], - "기능(공종)": ["workType"], - "설명": ["description"] - }; - - // 헤더 매핑 확인 (대체 이름 포함) - const missingHeaders = requiredHeaders.filter(header => { - const alternatives = alternativeHeaders[header as keyof typeof alternativeHeaders] || []; - return !(header in headerMapping) && - !alternatives.some(alt => alt in headerMapping); - }); - - if (missingHeaders.length > 0) { - throw new Error(`다음 필수 헤더가 누락되었습니다: ${missingHeaders.join(", ")}`); - } - - // 데이터 행 추출 (헤더 이후 행부터) - const dataRows: Record<string, any>[] = []; - - worksheet.eachRow((row, rowNumber) => { - if (rowNumber > headerRowIndex) { - const rowData: Record<string, any> = {}; - const values = row.values as (string | null | undefined)[]; - - // 헤더 매핑에 따라 데이터 추출 - Object.entries(headerMapping).forEach(([header, index]) => { - rowData[header] = values[index] || ""; - }); - - // 빈 행이 아닌 경우만 추가 - if (Object.values(rowData).some(value => value && value.toString().trim() !== "")) { - dataRows.push(rowData); - } - } - }); - - if (dataRows.length === 0) { - throw new Error("Excel 파일에 가져올 데이터가 없습니다."); - } - - // 진행 상황 업데이트를 위한 콜백 - const updateProgress = (current: number, total: number) => { - const percentage = Math.round((current / total) * 100); - setProgress(percentage); - }; - - const result = await processFileImport(dataRows, updateProgress); - - toast.success(`${result.successCount}개의 조선 아이템이 성공적으로 가져와졌습니다.`); - - if (result.errorCount > 0) { - toast.warning(`${result.errorCount}개의 항목은 처리할 수 없었습니다.`); - } - - // 상태 초기화 및 다이얼로그 닫기 - setFile(null); - setOpen(false); - - // 성공 콜백 호출 - if (onSuccess) { - onSuccess(); - } - } catch (error) { - console.error("Excel 파일 처리 중 오류 발생:", error); - setError(error instanceof Error ? error.message : "파일 처리 중 오류가 발생했습니다."); - } finally { - setIsUploading(false); - } - }; - - // 다이얼로그 열기/닫기 핸들러 - const handleOpenChange = (newOpen: boolean) => { - if (!newOpen) { - // 닫을 때 상태 초기화 - setFile(null) - setError(null) - setProgress(0) - if (fileInputRef.current) { - fileInputRef.current.value = "" - } - } - setOpen(newOpen) - } - - return ( - <> - <Button - variant="outline" - size="sm" - className="gap-2" - onClick={() => setOpen(true)} - disabled={isUploading} - > - <Upload className="size-4" aria-hidden="true" /> - <span className="hidden sm:inline">Import</span> - </Button> - - <Dialog open={open} onOpenChange={handleOpenChange}> - <DialogContent className="sm:max-w-[500px]"> - <DialogHeader> - <DialogTitle>조선 아이템 가져오기</DialogTitle> - <DialogDescription> - 조선 아이템을 Excel 파일에서 가져옵니다. - <br /> - 올바른 형식의 Excel 파일(.xlsx)을 업로드하세요. - </DialogDescription> - </DialogHeader> - - <div className="space-y-4 py-4"> - <div className="flex items-center gap-4"> - <input - type="file" - ref={fileInputRef} - className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-foreground file:font-medium" - accept=".xlsx,.xls" - onChange={handleFileChange} - disabled={isUploading} - /> - </div> - - {file && ( - <div className="text-sm text-muted-foreground"> - 선택된 파일: <span className="font-medium">{file.name}</span> ({(file.size / 1024).toFixed(1)} KB) - </div> - )} - - {isUploading && ( - <div className="space-y-2"> - <Progress value={progress} /> - <p className="text-sm text-muted-foreground text-center"> - {progress}% 완료 - </p> - </div> - )} - - {error && ( - <div className="text-sm font-medium text-destructive"> - {error} - </div> - )} - </div> - - <DialogFooter> - <Button - variant="outline" - onClick={() => setOpen(false)} - disabled={isUploading} - > - 취소 - </Button> - <Button - onClick={handleImport} - disabled={!file || isUploading} - > - {isUploading ? "처리 중..." : "가져오기"} - </Button> - </DialogFooter> - </DialogContent> - </Dialog> - </> - ) -}
\ No newline at end of file diff --git a/lib/items-ship/table/import-item-handler.tsx b/lib/items-ship/table/import-item-handler.tsx deleted file mode 100644 index 07086c94..00000000 --- a/lib/items-ship/table/import-item-handler.tsx +++ /dev/null @@ -1,145 +0,0 @@ -"use client" - -import { z } from "zod" -import { createShipbuildingImportItem, createShipbuildingItem } 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-ship/table/item-excel-template.tsx b/lib/items-ship/table/item-excel-template.tsx deleted file mode 100644 index 127a1dea..00000000 --- a/lib/items-ship/table/item-excel-template.tsx +++ /dev/null @@ -1,122 +0,0 @@ -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-ship/table/items-ship-table-columns.tsx b/lib/items-ship/table/items-ship-table-columns.tsx deleted file mode 100644 index 2b46db92..00000000 --- a/lib/items-ship/table/items-ship-table-columns.tsx +++ /dev/null @@ -1,244 +0,0 @@ -"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-ship/table/items-table-toolbar-actions.tsx b/lib/items-ship/table/items-table-toolbar-actions.tsx deleted file mode 100644 index ba3a6cee..00000000 --- a/lib/items-ship/table/items-table-toolbar-actions.tsx +++ /dev/null @@ -1,177 +0,0 @@ -"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)} - /> - ) : null} - - {/* 새 아이템 추가 다이얼로그 */} - <AddItemDialog /> - - {/* Import 버튼 */} - <ImportItemButton 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 diff --git a/lib/items-ship/table/update-items-sheet.tsx b/lib/items-ship/table/update-items-sheet.tsx deleted file mode 100644 index e021e145..00000000 --- a/lib/items-ship/table/update-items-sheet.tsx +++ /dev/null @@ -1,202 +0,0 @@ -"use client"
-
-import * as React from "react"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-
-import { Button } from "@/components/ui/button"
-import {
- Sheet,
- SheetClose,
- SheetContent,
- SheetDescription,
- SheetFooter,
- SheetHeader,
- SheetTitle,
-} from "@/components/ui/sheet"
-import {
- Form,
- FormControl,
- FormField,
- FormItem,
- FormLabel,
- FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue,
-} from "@/components/ui/select"
-import { Textarea } from "@/components/ui/textarea"
-import { toast } from "sonner"
-
-import { modifyShipbuildingItem } from "../service"
-import { updateShipbuildingItemSchema, type UpdateShipbuildingItemSchema } from "../validations"
-
-const workTypes = [
- { value: "기장", label: "기장" },
- { value: "전장", label: "전장" },
- { value: "선실", label: "선실" },
- { value: "배관", label: "배관" },
- { value: "철의", label: "철의" },
-] as const
-
-interface UpdateItemSheetProps {
- item: {
- id: number;
- itemId: number;
- workType: "기장" | "전장" | "선실" | "배관" | "철의";
- shipTypes: string;
- itemCode: string;
- itemName: string;
- description: string | null;
- createdAt: Date;
- updatedAt: Date;
- }
- open: boolean
- onOpenChange: (open: boolean) => void
-}
-
-export function UpdateItemSheet({ item, open, onOpenChange }: UpdateItemSheetProps) {
- const [isSubmitting, setIsSubmitting] = React.useState(false)
- // 초기값 설정
- const form = useForm<UpdateShipbuildingItemSchema>({
- resolver: zodResolver(updateShipbuildingItemSchema),
- defaultValues: {
- itemCode: item.itemCode,
- itemName: item.itemName,
- description: item.description || "",
- workType: item.workType,
- shipTypes: item.shipTypes,
- },
- })
-
- async function onSubmit(data: UpdateShipbuildingItemSchema) {
- try {
- setIsSubmitting(true)
- const result = await modifyShipbuildingItem({ ...data, id: item.id })
-
- if (result.data) {
- toast.success("아이템이 수정되었습니다.")
- onOpenChange(false)
- } else {
- toast.error(result.error || "아이템 수정 중 오류가 발생했습니다. 다시 시도해주세요.")
- }
- } catch (error) {
- toast.error("오류가 발생했습니다.")
- console.error(error)
- } finally {
- setIsSubmitting(false)
- }
- }
-
- return (
- <Sheet open={open} onOpenChange={onOpenChange}>
- <SheetContent>
- <SheetHeader>
- <SheetTitle>조선 아이템 수정</SheetTitle>
- <SheetDescription>
- 조선 아이템 정보를 수정합니다. 수정할 필드를 입력해주세요.
- </SheetDescription>
- </SheetHeader>
- <Form {...form}>
- <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
- <FormField
- control={form.control}
- name="itemCode"
- render={({ field }) => (
- <FormItem>
- <FormLabel>Material Group</FormLabel>
- <FormControl>
- <Input placeholder="Material Group을 입력하세요" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
- <FormField
- control={form.control}
- name="itemName"
- render={({ field }) => (
- <FormItem>
- <FormLabel>Description</FormLabel>
- <FormControl>
- <Input placeholder="Description을 입력하세요" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
- <FormField
- control={form.control}
- name="workType"
- render={({ field }) => (
- <FormItem>
- <FormLabel>기능(공종)</FormLabel>
- <Select
- onValueChange={field.onChange}
- defaultValue={field.value}
- >
- <FormControl>
- <SelectTrigger>
- <SelectValue placeholder="기능(공종)을 선택하세요" />
- </SelectTrigger>
- </FormControl>
- <SelectContent>
- {workTypes.map((type) => (
- <SelectItem key={type.value} value={type.value}>
- {type.label}
- </SelectItem>
- ))}
- </SelectContent>
- </Select>
- <FormMessage />
- </FormItem>
- )}
- />
- <FormField
- control={form.control}
- name="shipTypes"
- render={({ field }) => (
- <FormItem>
- <FormLabel>선종</FormLabel>
- <FormControl>
- <Input placeholder="선종을 입력하세요" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
- <FormField
- control={form.control}
- name="description"
- render={({ field }) => (
- <FormItem>
- <FormLabel>Size/Dimension</FormLabel>
- <FormControl>
- <Textarea
- placeholder="Size/Dimension을 입력하세요"
- {...field}
- />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
- <SheetFooter>
- <SheetClose asChild>
- <Button variant="outline">취소</Button>
- </SheetClose>
- <Button type="submit" disabled={isSubmitting}>
- {isSubmitting ? "수정 중..." : "수정"}
- </Button>
- </SheetFooter>
- </form>
- </Form>
- </SheetContent>
- </Sheet>
- )
-}
\ No newline at end of file |
