diff options
Diffstat (limited to 'lib/items-ship/table/add-items-dialog.tsx')
| -rw-r--r-- | lib/items-ship/table/add-items-dialog.tsx | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/lib/items-ship/table/add-items-dialog.tsx b/lib/items-ship/table/add-items-dialog.tsx new file mode 100644 index 00000000..4abf5f8a --- /dev/null +++ b/lib/items-ship/table/add-items-dialog.tsx @@ -0,0 +1,219 @@ +"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 { ItemType } from "./excel/item-excel-template"
+import { Plus } from "lucide-react"
+import { toast } from "sonner"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+
+
+interface AddItemDialogProps {
+ itemType?: ItemType
+}
+
+const workTypes = [
+ { value: "기장", label: "기장" },
+ { value: "전장", label: "전장" },
+ { value: "선실", label: "선실" },
+ { value: "배관", label: "배관" },
+ { value: "철의", label: "철의" },
+] as const
+
+export function AddItemDialog({ itemType = 'shipbuilding' }: AddItemDialogProps) {
+ 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={`예: ${itemType === 'shipbuilding' ? 'SB001' : itemType === 'offshoreTop' ? 'OT001' : 'OH001'}`} {...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={`${itemType === 'shipbuilding' ? '기능(공종)' : itemType === 'offshoreTop' ? '예: TM, TS' : '예: HA, HE'}을 선택하세요`} />
+ </SelectTrigger>
+ </FormControl>
+ <SelectContent>
+ {workTypes.map((type) => (
+ <SelectItem key={type.value} value={type.value}>
+ {type.label}
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ {/* 조선 아이템인 경우 선종 필드 표시 */}
+ {itemType === 'shipbuilding' && (
+ <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 |