summaryrefslogtreecommitdiff
path: root/lib/techsales-rfq/table/detail-table/add-vendor-dialog.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'lib/techsales-rfq/table/detail-table/add-vendor-dialog.tsx')
-rw-r--r--lib/techsales-rfq/table/detail-table/add-vendor-dialog.tsx946
1 files changed, 473 insertions, 473 deletions
diff --git a/lib/techsales-rfq/table/detail-table/add-vendor-dialog.tsx b/lib/techsales-rfq/table/detail-table/add-vendor-dialog.tsx
index 8f2fe948..69953217 100644
--- a/lib/techsales-rfq/table/detail-table/add-vendor-dialog.tsx
+++ b/lib/techsales-rfq/table/detail-table/add-vendor-dialog.tsx
@@ -1,474 +1,474 @@
-"use client"
-
-import * as React from "react"
-import { useState, useEffect, useCallback } from "react"
-import { useForm } from "react-hook-form"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { z } from "zod"
-import { toast } from "sonner"
-import { Check, X, Search, Loader2, Star } from "lucide-react"
-import { useSession } from "next-auth/react"
-
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
-import { Form, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Badge } from "@/components/ui/badge"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { addTechVendorsToTechSalesRfq, getTechSalesRfqCandidateVendors, searchTechVendors } from "@/lib/techsales-rfq/service"
-
-// 폼 유효성 검증 스키마 - 간단화
-const vendorFormSchema = z.object({
- vendorIds: z.array(z.number()).min(1, "최소 하나의 벤더를 선택해주세요"),
-})
-
-type VendorFormValues = z.infer<typeof vendorFormSchema>
-
-// 기술영업 RFQ 타입 정의
-type TechSalesRfq = {
- id: number
- rfqCode: string | null
- rfqType: "SHIP" | "TOP" | "HULL" | null
- ptypeNm: string | null // 프로젝트 타입명 추가
- status: string
- [key: string]: any // eslint-disable-line @typescript-eslint/no-explicit-any
-}
-
-// 벤더 검색 결과 타입 (techVendor 기반)
-type VendorSearchResult = {
- id: number
- vendorName: string
- vendorCode: string | null
- status: string
- country: string | null
- techVendorType?: string | null
- matchedItemCount?: number // 후보 벤더 정보
-}
-
-interface AddVendorDialogProps {
- open: boolean
- onOpenChange: (open: boolean) => void
- selectedRfq: TechSalesRfq | null
- onSuccess?: () => void
- existingVendorIds?: number[]
-}
-
-export function AddVendorDialog({
- open,
- onOpenChange,
- selectedRfq,
- onSuccess,
- existingVendorIds = [],
-}: AddVendorDialogProps) {
- const { data: session } = useSession()
- const [isSubmitting, setIsSubmitting] = useState(false)
- const [searchTerm, setSearchTerm] = useState("")
- const [searchResults, setSearchResults] = useState<VendorSearchResult[]>([])
- const [candidateVendors, setCandidateVendors] = useState<VendorSearchResult[]>([])
- const [isSearching, setIsSearching] = useState(false)
- const [isLoadingCandidates, setIsLoadingCandidates] = useState(false)
- const [hasSearched, setHasSearched] = useState(false)
- const [hasCandidatesLoaded, setHasCandidatesLoaded] = useState(false)
- // 선택된 벤더들을 별도로 관리하여 검색과 독립적으로 유지
- const [selectedVendorData, setSelectedVendorData] = useState<VendorSearchResult[]>([])
- const [activeTab, setActiveTab] = useState("candidates")
-
- const form = useForm<VendorFormValues>({
- resolver: zodResolver(vendorFormSchema),
- defaultValues: {
- vendorIds: [],
- },
- })
-
- const selectedVendorIds = form.watch("vendorIds")
-
- // 후보 벤더 로드 함수
- const loadCandidateVendors = useCallback(async () => {
- if (!selectedRfq?.id) return
-
- setIsLoadingCandidates(true)
- try {
- const result = await getTechSalesRfqCandidateVendors(selectedRfq.id)
- if (result.error) {
- toast.error(result.error)
- setCandidateVendors([])
- } else {
- // 이미 추가된 벤더 제외
- const filteredCandidates = result.data?.filter(vendor => !existingVendorIds.includes(vendor.id)) || []
- setCandidateVendors(filteredCandidates)
- }
- setHasCandidatesLoaded(true)
- } catch (error) {
- console.error("후보 벤더 로드 오류:", error)
- toast.error("후보 벤더를 불러오는 중 오류가 발생했습니다")
- setCandidateVendors([])
- } finally {
- setIsLoadingCandidates(false)
- }
- }, [selectedRfq?.id, existingVendorIds])
-
- // 벤더 검색 함수 (techVendor 기반)
- const searchVendorsDebounced = useCallback(
- async (term: string) => {
- if (!term.trim()) {
- setSearchResults([])
- setHasSearched(false)
- return
- }
-
- setIsSearching(true)
- try {
- // 선택된 RFQ의 타입을 기반으로 벤더 검색
- const rfqType = selectedRfq?.rfqType || undefined;
- console.log("rfqType", rfqType) // 디버깅용
- const results = await searchTechVendors(term, 100, rfqType)
-
- // 이미 추가된 벤더 제외
- const filteredResults = results.filter((vendor: VendorSearchResult) => !existingVendorIds.includes(vendor.id))
- setSearchResults(filteredResults)
- setHasSearched(true)
- } catch (error) {
- console.error("벤더 검색 오류:", error)
- toast.error("벤더 검색 중 오류가 발생했습니다")
- setSearchResults([])
- } finally {
- setIsSearching(false)
- }
- },
- [existingVendorIds, selectedRfq?.rfqType]
- )
-
- // 검색어 변경 시 디바운스 적용
- useEffect(() => {
- const timer = setTimeout(() => {
- searchVendorsDebounced(searchTerm)
- }, 300)
-
- return () => clearTimeout(timer)
- }, [searchTerm, searchVendorsDebounced])
-
- // 다이얼로그 열릴 때 후보 벤더 로드
- useEffect(() => {
- if (open && selectedRfq?.id && !hasCandidatesLoaded) {
- loadCandidateVendors()
- }
- }, [open, selectedRfq?.id, hasCandidatesLoaded, loadCandidateVendors])
-
- // 벤더 선택/해제 핸들러
- const handleVendorToggle = (vendor: VendorSearchResult) => {
- const currentIds = form.getValues("vendorIds")
- const isSelected = currentIds.includes(vendor.id)
-
- if (isSelected) {
- // 선택 해제
- const newIds = currentIds.filter(id => id !== vendor.id)
- const newSelectedData = selectedVendorData.filter(v => v.id !== vendor.id)
- form.setValue("vendorIds", newIds, { shouldValidate: true })
- setSelectedVendorData(newSelectedData)
- } else {
- // 선택 추가
- const newIds = [...currentIds, vendor.id]
- const newSelectedData = [...selectedVendorData, vendor]
- form.setValue("vendorIds", newIds, { shouldValidate: true })
- setSelectedVendorData(newSelectedData)
- }
- }
-
- // 선택된 벤더 제거 핸들러
- const handleRemoveVendor = (vendorId: number) => {
- const currentIds = form.getValues("vendorIds")
- const newIds = currentIds.filter(id => id !== vendorId)
- const newSelectedData = selectedVendorData.filter(v => v.id !== vendorId)
- form.setValue("vendorIds", newIds, { shouldValidate: true })
- setSelectedVendorData(newSelectedData)
- }
-
- // 폼 제출 핸들러
- async function onSubmit(values: VendorFormValues) {
- if (!selectedRfq) {
- toast.error("선택된 RFQ가 없습니다")
- return
- }
-
- if (!session?.user?.id) {
- toast.error("로그인이 필요합니다")
- return
- }
-
- try {
- setIsSubmitting(true)
-
- // 새로운 서비스 함수 호출
- const result = await addTechVendorsToTechSalesRfq({
- rfqId: selectedRfq.id,
- vendorIds: values.vendorIds,
- createdBy: Number(session.user.id),
- })
-
- if (result.error) {
- toast.error(result.error)
- } else {
- const successCount = result.data?.length || 0
- toast.success(`${successCount}개의 벤더가 성공적으로 추가되었습니다`)
-
- onOpenChange(false)
- form.reset()
- setSearchTerm("")
- setSearchResults([])
- setCandidateVendors([])
- setHasSearched(false)
- setHasCandidatesLoaded(false)
- setSelectedVendorData([])
- onSuccess?.()
- }
- } catch (error) {
- console.error("벤더 추가 오류:", error)
- toast.error("벤더 추가 중 오류가 발생했습니다")
- } finally {
- setIsSubmitting(false)
- }
- }
-
- // 다이얼로그 닫기 시 폼 리셋
- React.useEffect(() => {
- if (!open) {
- form.reset()
- setSearchTerm("")
- setSearchResults([])
- setCandidateVendors([])
- setHasSearched(false)
- setHasCandidatesLoaded(false)
- setSelectedVendorData([])
- setActiveTab("candidates")
- }
- }, [open, form])
-
- // 벤더 목록 렌더링 함수
- const renderVendorList = (vendors: VendorSearchResult[], showMatchCount = false) => (
- <ScrollArea className="h-60 border rounded-md">
- <div className="p-2 space-y-1">
- {vendors.length > 0 ? (
- vendors.map((vendor, index) => (
- <div
- key={`${vendor.id}-${index}`} // 고유한 키 생성
- className={`flex items-center space-x-2 p-2 rounded-md cursor-pointer hover:bg-muted ${
- selectedVendorIds.includes(vendor.id) ? "bg-muted" : ""
- }`}
- onClick={() => handleVendorToggle(vendor)}
- >
- <div className="flex items-center space-x-2 flex-1">
- <Check
- className={`h-4 w-4 ${
- selectedVendorIds.includes(vendor.id)
- ? "opacity-100"
- : "opacity-0"
- }`}
- />
- <div className="flex-1">
- <div className="flex items-center gap-2">
- <span className="font-medium">{vendor.vendorName}</span>
- {showMatchCount && vendor.matchedItemCount && vendor.matchedItemCount > 0 && (
- <Badge variant="secondary" className="text-xs flex items-center gap-1">
- <Star className="h-3 w-3" />
- {vendor.matchedItemCount}개 매칭
- </Badge>
- )}
- {vendor.techVendorType && (
- <Badge variant="outline" className="text-xs">
- {vendor.techVendorType}
- </Badge>
- )}
- </div>
- <div className="text-sm text-muted-foreground">
- {vendor.vendorCode || 'N/A'} {vendor.country && `• ${vendor.country}`}
- </div>
- </div>
- </div>
- </div>
- ))
- ) : (
- <div className="text-center py-8 text-muted-foreground">
- {showMatchCount ? "매칭되는 후보 벤더가 없습니다" : "검색 결과가 없습니다"}
- </div>
- )}
- </div>
- </ScrollArea>
- )
-
- return (
- <Dialog open={open} onOpenChange={onOpenChange}>
- <DialogContent className="sm:max-w-[800px] max-h-[80vh] flex flex-col">
- {/* 헤더 */}
- <DialogHeader>
- <DialogTitle>벤더 추가</DialogTitle>
- <DialogDescription>
- {selectedRfq ? (
- <>
- <span className="font-medium">{selectedRfq.rfqCode}</span> RFQ에 벤더를 추가합니다.
- </>
- ) : (
- "RFQ에 벤더를 추가합니다."
- )}
- </DialogDescription>
- </DialogHeader>
-
- {/* 콘텐츠 */}
- <div className="flex-1 overflow-y-auto">
- <Form {...form}>
- <form id="vendor-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
- {/* 탭 메뉴 */}
- <Tabs value={activeTab} onValueChange={setActiveTab}>
- <TabsList className="grid w-full grid-cols-2">
- <TabsTrigger value="candidates">
- 후보 벤더 ({candidateVendors.length})
- </TabsTrigger>
- <TabsTrigger value="search">
- 벤더 검색
- </TabsTrigger>
- </TabsList>
-
- {/* 후보 벤더 탭 */}
- <TabsContent value="candidates" className="space-y-4">
- <div className="space-y-2">
- <div className="flex items-center justify-between">
- <label className="text-sm font-medium">추천 후보 벤더</label>
- <Button
- type="button"
- variant="outline"
- size="sm"
- onClick={() => {
- setHasCandidatesLoaded(false)
- loadCandidateVendors()
- }}
- disabled={isLoadingCandidates}
- >
- {isLoadingCandidates ? (
- <Loader2 className="h-4 w-4 animate-spin" />
- ) : (
- "새로고침"
- )}
- </Button>
- </div>
-
- {isLoadingCandidates ? (
- <div className="h-60 border rounded-md flex items-center justify-center">
- <div className="flex items-center gap-2">
- <Loader2 className="h-4 w-4 animate-spin" />
- <span>후보 벤더를 불러오는 중...</span>
- </div>
- </div>
- ) : (
- renderVendorList(candidateVendors, true)
- )}
-
- <div className="text-xs text-muted-foreground bg-blue-50 p-2 rounded">
- 💡 RFQ 아이템과 매칭되는 벤더들이 매칭 아이템 수가 많은 순으로 표시됩니다.
- </div>
- </div>
- </TabsContent>
-
- {/* 벤더 검색 탭 */}
- <TabsContent value="search" className="space-y-4">
- {/* 벤더 검색 필드 */}
- <div className="space-y-2">
- <label className="text-sm font-medium">벤더 검색</label>
- <div className="relative">
- <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
- <Input
- placeholder="벤더명 또는 벤더코드로 검색..."
- value={searchTerm}
- onChange={(e) => setSearchTerm(e.target.value)}
- className="pl-10"
- />
- {isSearching && (
- <Loader2 className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />
- )}
- </div>
- </div>
-
- {/* 검색 결과 */}
- {hasSearched ? (
- <div className="space-y-2">
- <div className="text-sm font-medium">
- 검색 결과 ({searchResults.length}개)
- </div>
- {renderVendorList(searchResults)}
- </div>
- ) : (
- <div className="text-center py-8 text-muted-foreground border rounded-md">
- 벤더명 또는 벤더코드를 입력하여 검색해주세요
- </div>
- )}
- </TabsContent>
- </Tabs>
-
- {/* 선택된 벤더 목록 - 하단에 항상 표시 */}
- <FormField
- control={form.control}
- name="vendorIds"
- render={() => (
- <FormItem>
- <div className="space-y-2">
- <FormLabel>선택된 벤더 ({selectedVendorData.length}개)</FormLabel>
- <div className="min-h-[60px] p-3 border rounded-md bg-muted/50">
- {selectedVendorData.length > 0 ? (
- <div className="flex flex-wrap gap-2">
- {selectedVendorData.map((vendor) => (
- <Badge
- key={vendor.id}
- variant="secondary"
- className="flex items-center gap-1"
- >
- {vendor.vendorName} ({vendor.vendorCode || 'N/A'})
- <X
- className="h-3 w-3 cursor-pointer hover:text-destructive"
- onClick={() => handleRemoveVendor(vendor.id)}
- />
- </Badge>
- ))}
- </div>
- ) : (
- <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
- 선택된 벤더가 없습니다
- </div>
- )}
- </div>
- </div>
- <FormMessage />
- </FormItem>
- )}
- />
-
- {/* 안내 메시지 */}
- <div className="text-sm text-muted-foreground bg-muted p-3 rounded-md">
- <p>• 후보 벤더는 RFQ 아이템 코드와 매칭되는 기술영업 벤더들입니다.</p>
- <p>• 선택된 벤더들은 Draft 상태로 추가됩니다.</p>
- <p>• 벤더별 견적 정보는 추가 후 개별적으로 입력할 수 있습니다.</p>
- </div>
- </form>
- </Form>
- </div>
-
- {/* 푸터 */}
- <DialogFooter>
- <Button
- type="button"
- variant="outline"
- onClick={() => onOpenChange(false)}
- disabled={isSubmitting}
- >
- 취소
- </Button>
- <Button
- type="submit"
- form="vendor-form"
- disabled={isSubmitting || selectedVendorIds.length === 0}
- >
- {isSubmitting ? "처리 중..." : `${selectedVendorIds.length}개 벤더 추가`}
- </Button>
- </DialogFooter>
- </DialogContent>
- </Dialog>
- )
+"use client"
+
+import * as React from "react"
+import { useState, useEffect, useCallback } from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { toast } from "sonner"
+import { Check, X, Search, Loader2, Star } from "lucide-react"
+import { useSession } from "next-auth/react"
+
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Form, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { addTechVendorsToTechSalesRfq, getTechSalesRfqCandidateVendors, searchTechVendors } from "@/lib/techsales-rfq/service"
+
+// 폼 유효성 검증 스키마 - 간단화
+const vendorFormSchema = z.object({
+ vendorIds: z.array(z.number()).min(1, "최소 하나의 벤더를 선택해주세요"),
+})
+
+type VendorFormValues = z.infer<typeof vendorFormSchema>
+
+// 기술영업 RFQ 타입 정의
+type TechSalesRfq = {
+ id: number
+ rfqCode: string | null
+ rfqType: "SHIP" | "TOP" | "HULL" | null
+ ptypeNm: string | null // 프로젝트 타입명 추가
+ status: string
+ [key: string]: any // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+// 벤더 검색 결과 타입 (techVendor 기반)
+type VendorSearchResult = {
+ id: number
+ vendorName: string
+ vendorCode: string | null
+ status: string
+ country: string | null
+ techVendorType?: string | null
+ matchedItemCount?: number // 후보 벤더 정보
+}
+
+interface AddVendorDialogProps {
+ open: boolean
+ onOpenChange: (open: boolean) => void
+ selectedRfq: TechSalesRfq | null
+ onSuccess?: () => void
+ existingVendorIds?: number[]
+}
+
+export function AddVendorDialog({
+ open,
+ onOpenChange,
+ selectedRfq,
+ onSuccess,
+ existingVendorIds = [],
+}: AddVendorDialogProps) {
+ const { data: session } = useSession()
+ const [isSubmitting, setIsSubmitting] = useState(false)
+ const [searchTerm, setSearchTerm] = useState("")
+ const [searchResults, setSearchResults] = useState<VendorSearchResult[]>([])
+ const [candidateVendors, setCandidateVendors] = useState<VendorSearchResult[]>([])
+ const [isSearching, setIsSearching] = useState(false)
+ const [isLoadingCandidates, setIsLoadingCandidates] = useState(false)
+ const [hasSearched, setHasSearched] = useState(false)
+ const [hasCandidatesLoaded, setHasCandidatesLoaded] = useState(false)
+ // 선택된 벤더들을 별도로 관리하여 검색과 독립적으로 유지
+ const [selectedVendorData, setSelectedVendorData] = useState<VendorSearchResult[]>([])
+ const [activeTab, setActiveTab] = useState("candidates")
+
+ const form = useForm<VendorFormValues>({
+ resolver: zodResolver(vendorFormSchema),
+ defaultValues: {
+ vendorIds: [],
+ },
+ })
+
+ const selectedVendorIds = form.watch("vendorIds")
+
+ // 후보 벤더 로드 함수
+ const loadCandidateVendors = useCallback(async () => {
+ if (!selectedRfq?.id) return
+
+ setIsLoadingCandidates(true)
+ try {
+ const result = await getTechSalesRfqCandidateVendors(selectedRfq.id)
+ if (result.error) {
+ toast.error(result.error)
+ setCandidateVendors([])
+ } else {
+ // 이미 추가된 벤더 제외
+ const filteredCandidates = result.data?.filter(vendor => !existingVendorIds.includes(vendor.id)) || []
+ setCandidateVendors(filteredCandidates)
+ }
+ setHasCandidatesLoaded(true)
+ } catch (error) {
+ console.error("후보 벤더 로드 오류:", error)
+ toast.error("후보 벤더를 불러오는 중 오류가 발생했습니다")
+ setCandidateVendors([])
+ } finally {
+ setIsLoadingCandidates(false)
+ }
+ }, [selectedRfq?.id, existingVendorIds])
+
+ // 벤더 검색 함수 (techVendor 기반)
+ const searchVendorsDebounced = useCallback(
+ async (term: string) => {
+ if (!term.trim()) {
+ setSearchResults([])
+ setHasSearched(false)
+ return
+ }
+
+ setIsSearching(true)
+ try {
+ // 선택된 RFQ의 타입을 기반으로 벤더 검색
+ const rfqType = selectedRfq?.rfqType || undefined;
+ console.log("rfqType", rfqType) // 디버깅용
+ const results = await searchTechVendors(term, 100, rfqType)
+
+ // 이미 추가된 벤더 제외
+ const filteredResults = results.filter((vendor: VendorSearchResult) => !existingVendorIds.includes(vendor.id))
+ setSearchResults(filteredResults)
+ setHasSearched(true)
+ } catch (error) {
+ console.error("벤더 검색 오류:", error)
+ toast.error("벤더 검색 중 오류가 발생했습니다")
+ setSearchResults([])
+ } finally {
+ setIsSearching(false)
+ }
+ },
+ [existingVendorIds, selectedRfq?.rfqType]
+ )
+
+ // 검색어 변경 시 디바운스 적용
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ searchVendorsDebounced(searchTerm)
+ }, 300)
+
+ return () => clearTimeout(timer)
+ }, [searchTerm, searchVendorsDebounced])
+
+ // 다이얼로그 열릴 때 후보 벤더 로드
+ useEffect(() => {
+ if (open && selectedRfq?.id && !hasCandidatesLoaded) {
+ loadCandidateVendors()
+ }
+ }, [open, selectedRfq?.id, hasCandidatesLoaded, loadCandidateVendors])
+
+ // 벤더 선택/해제 핸들러
+ const handleVendorToggle = (vendor: VendorSearchResult) => {
+ const currentIds = form.getValues("vendorIds")
+ const isSelected = currentIds.includes(vendor.id)
+
+ if (isSelected) {
+ // 선택 해제
+ const newIds = currentIds.filter(id => id !== vendor.id)
+ const newSelectedData = selectedVendorData.filter(v => v.id !== vendor.id)
+ form.setValue("vendorIds", newIds, { shouldValidate: true })
+ setSelectedVendorData(newSelectedData)
+ } else {
+ // 선택 추가
+ const newIds = [...currentIds, vendor.id]
+ const newSelectedData = [...selectedVendorData, vendor]
+ form.setValue("vendorIds", newIds, { shouldValidate: true })
+ setSelectedVendorData(newSelectedData)
+ }
+ }
+
+ // 선택된 벤더 제거 핸들러
+ const handleRemoveVendor = (vendorId: number) => {
+ const currentIds = form.getValues("vendorIds")
+ const newIds = currentIds.filter(id => id !== vendorId)
+ const newSelectedData = selectedVendorData.filter(v => v.id !== vendorId)
+ form.setValue("vendorIds", newIds, { shouldValidate: true })
+ setSelectedVendorData(newSelectedData)
+ }
+
+ // 폼 제출 핸들러
+ async function onSubmit(values: VendorFormValues) {
+ if (!selectedRfq) {
+ toast.error("선택된 RFQ가 없습니다")
+ return
+ }
+
+ if (!session?.user?.id) {
+ toast.error("로그인이 필요합니다")
+ return
+ }
+
+ try {
+ setIsSubmitting(true)
+
+ // 새로운 서비스 함수 호출
+ const result = await addTechVendorsToTechSalesRfq({
+ rfqId: selectedRfq.id,
+ vendorIds: values.vendorIds,
+ createdBy: Number(session.user.id),
+ })
+
+ if (result.error) {
+ toast.error(result.error)
+ } else {
+ const successCount = result.data?.length || 0
+ toast.success(`${successCount}개의 벤더가 성공적으로 추가되었습니다`)
+
+ onOpenChange(false)
+ form.reset()
+ setSearchTerm("")
+ setSearchResults([])
+ setCandidateVendors([])
+ setHasSearched(false)
+ setHasCandidatesLoaded(false)
+ setSelectedVendorData([])
+ onSuccess?.()
+ }
+ } catch (error) {
+ console.error("벤더 추가 오류:", error)
+ toast.error("벤더 추가 중 오류가 발생했습니다")
+ } finally {
+ setIsSubmitting(false)
+ }
+ }
+
+ // 다이얼로그 닫기 시 폼 리셋
+ React.useEffect(() => {
+ if (!open) {
+ form.reset()
+ setSearchTerm("")
+ setSearchResults([])
+ setCandidateVendors([])
+ setHasSearched(false)
+ setHasCandidatesLoaded(false)
+ setSelectedVendorData([])
+ setActiveTab("candidates")
+ }
+ }, [open, form])
+
+ // 벤더 목록 렌더링 함수
+ const renderVendorList = (vendors: VendorSearchResult[], showMatchCount = false) => (
+ <ScrollArea className="h-60 border rounded-md">
+ <div className="p-2 space-y-1">
+ {vendors.length > 0 ? (
+ vendors.map((vendor, index) => (
+ <div
+ key={`${vendor.id}-${index}`} // 고유한 키 생성
+ className={`flex items-center space-x-2 p-2 rounded-md cursor-pointer hover:bg-muted ${
+ selectedVendorIds.includes(vendor.id) ? "bg-muted" : ""
+ }`}
+ onClick={() => handleVendorToggle(vendor)}
+ >
+ <div className="flex items-center space-x-2 flex-1">
+ <Check
+ className={`h-4 w-4 ${
+ selectedVendorIds.includes(vendor.id)
+ ? "opacity-100"
+ : "opacity-0"
+ }`}
+ />
+ <div className="flex-1">
+ <div className="flex items-center gap-2">
+ <span className="font-medium">{vendor.vendorName}</span>
+ {showMatchCount && vendor.matchedItemCount && vendor.matchedItemCount > 0 && (
+ <Badge variant="secondary" className="text-xs flex items-center gap-1">
+ <Star className="h-3 w-3" />
+ {vendor.matchedItemCount}개 매칭
+ </Badge>
+ )}
+ {vendor.techVendorType && (
+ <Badge variant="outline" className="text-xs">
+ {vendor.techVendorType}
+ </Badge>
+ )}
+ </div>
+ <div className="text-sm text-muted-foreground">
+ {vendor.vendorCode || 'N/A'} {vendor.country && `• ${vendor.country}`}
+ </div>
+ </div>
+ </div>
+ </div>
+ ))
+ ) : (
+ <div className="text-center py-8 text-muted-foreground">
+ {showMatchCount ? "매칭되는 후보 벤더가 없습니다" : "검색 결과가 없습니다"}
+ </div>
+ )}
+ </div>
+ </ScrollArea>
+ )
+
+ return (
+ <Dialog open={open} onOpenChange={onOpenChange}>
+ <DialogContent className="sm:max-w-[800px] max-h-[80vh] flex flex-col">
+ {/* 헤더 */}
+ <DialogHeader>
+ <DialogTitle>벤더 추가</DialogTitle>
+ <DialogDescription>
+ {selectedRfq ? (
+ <>
+ <span className="font-medium">{selectedRfq.rfqCode}</span> RFQ에 벤더를 추가합니다.
+ </>
+ ) : (
+ "RFQ에 벤더를 추가합니다."
+ )}
+ </DialogDescription>
+ </DialogHeader>
+
+ {/* 콘텐츠 */}
+ <div className="flex-1 overflow-y-auto">
+ <Form {...form}>
+ <form id="vendor-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+ {/* 탭 메뉴 */}
+ <Tabs value={activeTab} onValueChange={setActiveTab}>
+ <TabsList className="grid w-full grid-cols-2">
+ <TabsTrigger value="candidates">
+ 후보 벤더 ({candidateVendors.length})
+ </TabsTrigger>
+ <TabsTrigger value="search">
+ 벤더 검색
+ </TabsTrigger>
+ </TabsList>
+
+ {/* 후보 벤더 탭 */}
+ <TabsContent value="candidates" className="space-y-4">
+ <div className="space-y-2">
+ <div className="flex items-center justify-between">
+ <label className="text-sm font-medium">추천 후보 벤더</label>
+ <Button
+ type="button"
+ variant="outline"
+ size="sm"
+ onClick={() => {
+ setHasCandidatesLoaded(false)
+ loadCandidateVendors()
+ }}
+ disabled={isLoadingCandidates}
+ >
+ {isLoadingCandidates ? (
+ <Loader2 className="h-4 w-4 animate-spin" />
+ ) : (
+ "새로고침"
+ )}
+ </Button>
+ </div>
+
+ {isLoadingCandidates ? (
+ <div className="h-60 border rounded-md flex items-center justify-center">
+ <div className="flex items-center gap-2">
+ <Loader2 className="h-4 w-4 animate-spin" />
+ <span>후보 벤더를 불러오는 중...</span>
+ </div>
+ </div>
+ ) : (
+ renderVendorList(candidateVendors, true)
+ )}
+
+ <div className="text-xs text-muted-foreground bg-blue-50 p-2 rounded">
+ 💡 RFQ 아이템과 매칭되는 벤더들이 매칭 아이템 수가 많은 순으로 표시됩니다.
+ </div>
+ </div>
+ </TabsContent>
+
+ {/* 벤더 검색 탭 */}
+ <TabsContent value="search" className="space-y-4">
+ {/* 벤더 검색 필드 */}
+ <div className="space-y-2">
+ <label className="text-sm font-medium">벤더 검색</label>
+ <div className="relative">
+ <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+ <Input
+ placeholder="벤더명 또는 벤더코드로 검색..."
+ value={searchTerm}
+ onChange={(e) => setSearchTerm(e.target.value)}
+ className="pl-10"
+ />
+ {isSearching && (
+ <Loader2 className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 animate-spin text-muted-foreground" />
+ )}
+ </div>
+ </div>
+
+ {/* 검색 결과 */}
+ {hasSearched ? (
+ <div className="space-y-2">
+ <div className="text-sm font-medium">
+ 검색 결과 ({searchResults.length}개)
+ </div>
+ {renderVendorList(searchResults)}
+ </div>
+ ) : (
+ <div className="text-center py-8 text-muted-foreground border rounded-md">
+ 벤더명 또는 벤더코드를 입력하여 검색해주세요
+ </div>
+ )}
+ </TabsContent>
+ </Tabs>
+
+ {/* 선택된 벤더 목록 - 하단에 항상 표시 */}
+ <FormField
+ control={form.control}
+ name="vendorIds"
+ render={() => (
+ <FormItem>
+ <div className="space-y-2">
+ <FormLabel>선택된 벤더 ({selectedVendorData.length}개)</FormLabel>
+ <div className="min-h-[60px] p-3 border rounded-md bg-muted/50">
+ {selectedVendorData.length > 0 ? (
+ <div className="flex flex-wrap gap-2">
+ {selectedVendorData.map((vendor) => (
+ <Badge
+ key={vendor.id}
+ variant="secondary"
+ className="flex items-center gap-1"
+ >
+ {vendor.vendorName} ({vendor.vendorCode || 'N/A'})
+ <X
+ className="h-3 w-3 cursor-pointer hover:text-destructive"
+ onClick={() => handleRemoveVendor(vendor.id)}
+ />
+ </Badge>
+ ))}
+ </div>
+ ) : (
+ <div className="flex items-center justify-center h-full text-sm text-muted-foreground">
+ 선택된 벤더가 없습니다
+ </div>
+ )}
+ </div>
+ </div>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ {/* 안내 메시지
+ <div className="text-sm text-muted-foreground bg-muted p-3 rounded-md">
+ <p>• 후보 벤더는 RFQ 아이템 코드와 매칭되는 기술영업 벤더들입니다.</p>
+ <p>• 선택된 벤더들은 Draft 상태로 추가됩니다.</p>
+ <p>• 벤더별 견적 정보는 추가 후 개별적으로 입력할 수 있습니다.</p>
+ </div> */}
+ </form>
+ </Form>
+ </div>
+
+ {/* 푸터 */}
+ <DialogFooter>
+ <Button
+ type="button"
+ variant="outline"
+ onClick={() => onOpenChange(false)}
+ disabled={isSubmitting}
+ >
+ 취소
+ </Button>
+ <Button
+ type="submit"
+ form="vendor-form"
+ disabled={isSubmitting || selectedVendorIds.length === 0}
+ >
+ {isSubmitting ? "처리 중..." : `${selectedVendorIds.length}개 벤더 추가`}
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ )
} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 11:05:11 +0000