From a75541e1a1aea596bfca2a435f39133b9b72f193 Mon Sep 17 00:00:00 2001 From: dujinkim Date: Mon, 23 Jun 2025 09:00:56 +0000 Subject: (최겸) 기술영업 벤더 후보관리 개발 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../table/add-candidates-dialog.tsx | 394 +++++++++++++++++++++ 1 file changed, 394 insertions(+) create mode 100644 lib/tech-vendor-candidates/table/add-candidates-dialog.tsx (limited to 'lib/tech-vendor-candidates/table/add-candidates-dialog.tsx') diff --git a/lib/tech-vendor-candidates/table/add-candidates-dialog.tsx b/lib/tech-vendor-candidates/table/add-candidates-dialog.tsx new file mode 100644 index 00000000..31c39137 --- /dev/null +++ b/lib/tech-vendor-candidates/table/add-candidates-dialog.tsx @@ -0,0 +1,394 @@ +"use client" + +import * as React from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { Check, ChevronsUpDown } from "lucide-react" +import i18nIsoCountries from "i18n-iso-countries" +import enLocale from "i18n-iso-countries/langs/en.json" +import koLocale from "i18n-iso-countries/langs/ko.json" +import { cn } from "@/lib/utils" +import { useSession } from "next-auth/react" // next-auth 세션 훅 추가 + +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" +import { useToast } from "@/hooks/use-toast" +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover" +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, +} from "@/components/ui/command" + +// react-hook-form + shadcn/ui Form +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" + + +import { createVendorCandidateSchema, CreateVendorCandidateSchema } from "../validations" +import { createVendorCandidate } from "../service" + +// Register locales for countries +i18nIsoCountries.registerLocale(enLocale) +i18nIsoCountries.registerLocale(koLocale) + +// Generate country array +const locale = "ko" +const countryMap = i18nIsoCountries.getNames(locale, { select: "official" }) +const countryArray = Object.entries(countryMap).map(([code, label]) => ({ + code, + label, +})) + +export function AddCandidateDialog() { + const [open, setOpen] = React.useState(false) + const [isSubmitting, setIsSubmitting] = React.useState(false) + const { toast } = useToast() + const { data: session, status } = useSession() + + // react-hook-form 세팅 + const form = useForm({ + resolver: zodResolver(createVendorCandidateSchema), + defaultValues: { + companyName: "", + contactEmail: "", // 필수 입력값 + contactPhone: "", + taxId: "", + address: "", + country: "", + source: "", + items: "", + remark: "", + status: "COLLECTED", + }, + }); + + async function onSubmit(data: CreateVendorCandidateSchema) { + setIsSubmitting(true) + try { + // 세션 유효성 검사 + if (!session || !session.user || !session.user.id) { + toast({ + title: "인증 오류", + description: "로그인 정보를 찾을 수 없습니다. 다시 로그인해주세요.", + variant: "destructive", + }) + return + } + + // userId 추출 (세션 구조에 따라 조정 필요) + const userId = session.user.id + + const result = await createVendorCandidate(data, Number(userId)) + if (result.error) { + toast({ + title: "오류 발생", + description: result.error, + variant: "destructive", + }) + return + } + // 성공 시 모달 닫고 폼 리셋 + toast({ + title: "등록 완료", + description: "협력업체 후보가 성공적으로 등록되었습니다.", + }) + form.reset() + setOpen(false) + } catch (error) { + console.error("Failed to create vendor candidate:", error) + toast({ + title: "오류 발생", + description: "예상치 못한 오류가 발생했습니다.", + variant: "destructive", + }) + } finally { + setIsSubmitting(false) + } + } + + function handleDialogOpenChange(nextOpen: boolean) { + if (!nextOpen) { + form.reset() + } + setOpen(nextOpen) + } + + return ( + + {/* 모달을 열기 위한 버튼 */} + + + + + + + Create New Vendor Candidate + + 새 Vendor Candidate 정보를 입력하고 Create 버튼을 누르세요. + + + + {/* shadcn/ui Form을 이용해 react-hook-form과 연결 */} +
+ +
+ {/* Company Name 필드 */} + ( + + Company Name * + + + + + + )} + /> + + {/* Tax ID 필드 (새로 추가) */} + ( + + Tax ID + + + + + + )} + /> + + {/* Contact Email 필드 */} + ( + + Contact Email* + + + + + + )} + /> + + {/* Contact Phone 필드 */} + ( + + Contact Phone + + + + + + )} + /> + + {/* Address 필드 */} + ( + + Address + + + + + + )} + /> + + {/* Country 필드 */} + { + const selectedCountry = countryArray.find( + (c) => c.code === field.value + ) + return ( + + Country + + + + + + + + + + + No country found. + + {countryArray.map((country) => ( + + field.onChange(country.code) + } + > + + {country.label} + + ))} + + + + + + + + ) + }} + /> + + {/* Source 필드 */} + ( + + Source * + + + + + + )} + /> + + + {/* Items 필드 (새로 추가) */} + ( + + Items * + +