From 14f61e24947fb92dd71ec0a7196a6e815f8e66da Mon Sep 17 00:00:00 2001 From: dujinkim Date: Mon, 21 Jul 2025 07:54:26 +0000 Subject: (최겸)기술영업 RFQ 담당자 초대, 요구사항 반영 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../table/detail-table/add-vendor-dialog.tsx | 946 ++++++------- .../table/detail-table/delete-vendors-dialog.tsx | 297 ++-- .../quotation-contacts-view-dialog.tsx | 173 +++ .../detail-table/quotation-history-dialog.tsx | 10 +- .../table/detail-table/rfq-detail-column.tsx | 850 +++++------ .../table/detail-table/rfq-detail-table.tsx | 1483 ++++++++++---------- .../detail-table/vendor-communication-drawer.tsx | 1238 ++++++++-------- .../vendor-contact-selection-dialog.tsx | 343 +++++ 8 files changed, 2985 insertions(+), 2355 deletions(-) create mode 100644 lib/techsales-rfq/table/detail-table/quotation-contacts-view-dialog.tsx create mode 100644 lib/techsales-rfq/table/detail-table/vendor-contact-selection-dialog.tsx (limited to 'lib/techsales-rfq/table/detail-table') 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 - -// 기술영업 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([]) - const [candidateVendors, setCandidateVendors] = useState([]) - const [isSearching, setIsSearching] = useState(false) - const [isLoadingCandidates, setIsLoadingCandidates] = useState(false) - const [hasSearched, setHasSearched] = useState(false) - const [hasCandidatesLoaded, setHasCandidatesLoaded] = useState(false) - // 선택된 벤더들을 별도로 관리하여 검색과 독립적으로 유지 - const [selectedVendorData, setSelectedVendorData] = useState([]) - const [activeTab, setActiveTab] = useState("candidates") - - const form = useForm({ - 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) => ( - -
- {vendors.length > 0 ? ( - vendors.map((vendor, index) => ( -
handleVendorToggle(vendor)} - > -
- -
-
- {vendor.vendorName} - {showMatchCount && vendor.matchedItemCount && vendor.matchedItemCount > 0 && ( - - - {vendor.matchedItemCount}개 매칭 - - )} - {vendor.techVendorType && ( - - {vendor.techVendorType} - - )} -
-
- {vendor.vendorCode || 'N/A'} {vendor.country && `• ${vendor.country}`} -
-
-
-
- )) - ) : ( -
- {showMatchCount ? "매칭되는 후보 벤더가 없습니다" : "검색 결과가 없습니다"} -
- )} -
- - ) - - return ( - - - {/* 헤더 */} - - 벤더 추가 - - {selectedRfq ? ( - <> - {selectedRfq.rfqCode} RFQ에 벤더를 추가합니다. - - ) : ( - "RFQ에 벤더를 추가합니다." - )} - - - - {/* 콘텐츠 */} -
-
- - {/* 탭 메뉴 */} - - - - 후보 벤더 ({candidateVendors.length}) - - - 벤더 검색 - - - - {/* 후보 벤더 탭 */} - -
-
- - -
- - {isLoadingCandidates ? ( -
-
- - 후보 벤더를 불러오는 중... -
-
- ) : ( - renderVendorList(candidateVendors, true) - )} - -
- 💡 RFQ 아이템과 매칭되는 벤더들이 매칭 아이템 수가 많은 순으로 표시됩니다. -
-
- - - {/* 벤더 검색 탭 */} - - {/* 벤더 검색 필드 */} -
- -
- - setSearchTerm(e.target.value)} - className="pl-10" - /> - {isSearching && ( - - )} -
-
- - {/* 검색 결과 */} - {hasSearched ? ( -
-
- 검색 결과 ({searchResults.length}개) -
- {renderVendorList(searchResults)} -
- ) : ( -
- 벤더명 또는 벤더코드를 입력하여 검색해주세요 -
- )} - - - - {/* 선택된 벤더 목록 - 하단에 항상 표시 */} - ( - -
- 선택된 벤더 ({selectedVendorData.length}개) -
- {selectedVendorData.length > 0 ? ( -
- {selectedVendorData.map((vendor) => ( - - {vendor.vendorName} ({vendor.vendorCode || 'N/A'}) - handleRemoveVendor(vendor.id)} - /> - - ))} -
- ) : ( -
- 선택된 벤더가 없습니다 -
- )} -
-
- - - )} - /> - - {/* 안내 메시지 */} -
-

• 후보 벤더는 RFQ 아이템 코드와 매칭되는 기술영업 벤더들입니다.

-

• 선택된 벤더들은 Draft 상태로 추가됩니다.

-

• 벤더별 견적 정보는 추가 후 개별적으로 입력할 수 있습니다.

-
- - -
- - {/* 푸터 */} - - - - - - - ) +"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 + +// 기술영업 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([]) + const [candidateVendors, setCandidateVendors] = useState([]) + const [isSearching, setIsSearching] = useState(false) + const [isLoadingCandidates, setIsLoadingCandidates] = useState(false) + const [hasSearched, setHasSearched] = useState(false) + const [hasCandidatesLoaded, setHasCandidatesLoaded] = useState(false) + // 선택된 벤더들을 별도로 관리하여 검색과 독립적으로 유지 + const [selectedVendorData, setSelectedVendorData] = useState([]) + const [activeTab, setActiveTab] = useState("candidates") + + const form = useForm({ + 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) => ( + +
+ {vendors.length > 0 ? ( + vendors.map((vendor, index) => ( +
handleVendorToggle(vendor)} + > +
+ +
+
+ {vendor.vendorName} + {showMatchCount && vendor.matchedItemCount && vendor.matchedItemCount > 0 && ( + + + {vendor.matchedItemCount}개 매칭 + + )} + {vendor.techVendorType && ( + + {vendor.techVendorType} + + )} +
+
+ {vendor.vendorCode || 'N/A'} {vendor.country && `• ${vendor.country}`} +
+
+
+
+ )) + ) : ( +
+ {showMatchCount ? "매칭되는 후보 벤더가 없습니다" : "검색 결과가 없습니다"} +
+ )} +
+ + ) + + return ( + + + {/* 헤더 */} + + 벤더 추가 + + {selectedRfq ? ( + <> + {selectedRfq.rfqCode} RFQ에 벤더를 추가합니다. + + ) : ( + "RFQ에 벤더를 추가합니다." + )} + + + + {/* 콘텐츠 */} +
+
+ + {/* 탭 메뉴 */} + + + + 후보 벤더 ({candidateVendors.length}) + + + 벤더 검색 + + + + {/* 후보 벤더 탭 */} + +
+
+ + +
+ + {isLoadingCandidates ? ( +
+
+ + 후보 벤더를 불러오는 중... +
+
+ ) : ( + renderVendorList(candidateVendors, true) + )} + +
+ 💡 RFQ 아이템과 매칭되는 벤더들이 매칭 아이템 수가 많은 순으로 표시됩니다. +
+
+ + + {/* 벤더 검색 탭 */} + + {/* 벤더 검색 필드 */} +
+ +
+ + setSearchTerm(e.target.value)} + className="pl-10" + /> + {isSearching && ( + + )} +
+
+ + {/* 검색 결과 */} + {hasSearched ? ( +
+
+ 검색 결과 ({searchResults.length}개) +
+ {renderVendorList(searchResults)} +
+ ) : ( +
+ 벤더명 또는 벤더코드를 입력하여 검색해주세요 +
+ )} + + + + {/* 선택된 벤더 목록 - 하단에 항상 표시 */} + ( + +
+ 선택된 벤더 ({selectedVendorData.length}개) +
+ {selectedVendorData.length > 0 ? ( +
+ {selectedVendorData.map((vendor) => ( + + {vendor.vendorName} ({vendor.vendorCode || 'N/A'}) + handleRemoveVendor(vendor.id)} + /> + + ))} +
+ ) : ( +
+ 선택된 벤더가 없습니다 +
+ )} +
+
+ + + )} + /> + + {/* 안내 메시지 +
+

• 후보 벤더는 RFQ 아이템 코드와 매칭되는 기술영업 벤더들입니다.

+

• 선택된 벤더들은 Draft 상태로 추가됩니다.

+

• 벤더별 견적 정보는 추가 후 개별적으로 입력할 수 있습니다.

+
*/} + + +
+ + {/* 푸터 */} + + + + + + + ) } \ No newline at end of file diff --git a/lib/techsales-rfq/table/detail-table/delete-vendors-dialog.tsx b/lib/techsales-rfq/table/detail-table/delete-vendors-dialog.tsx index d7e3403b..d86dcea2 100644 --- a/lib/techsales-rfq/table/detail-table/delete-vendors-dialog.tsx +++ b/lib/techsales-rfq/table/detail-table/delete-vendors-dialog.tsx @@ -1,150 +1,149 @@ -"use client" - -import * as React from "react" -import { type RfqDetailView } from "./rfq-detail-column" -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 { deleteRfqDetail } from "@/lib/procurement-rfqs/services" - - -interface DeleteRfqDetailDialogProps - extends React.ComponentPropsWithoutRef { - detail: RfqDetailView | null - showTrigger?: boolean - onSuccess?: () => void -} - -export function DeleteVendorDialog({ - detail, - showTrigger = true, - onSuccess, - ...props -}: DeleteRfqDetailDialogProps) { - const [isDeletePending, startDeleteTransition] = React.useTransition() - const isDesktop = useMediaQuery("(min-width: 640px)") - - function onDelete() { - if (!detail) return - - startDeleteTransition(async () => { - try { - const result = await deleteRfqDetail(detail.id) - - if (!result.success) { - toast.error(result.message || "삭제 중 오류가 발생했습니다") - return - } - - props.onOpenChange?.(false) - toast.success("RFQ 벤더 정보가 삭제되었습니다") - onSuccess?.() - } catch (error) { - console.error("RFQ 벤더 삭제 오류:", error) - toast.error("삭제 중 오류가 발생했습니다") - } - }) - } - - if (isDesktop) { - return ( - - {showTrigger ? ( - - - - ) : null} - - - 정말로 삭제하시겠습니까? - - 이 작업은 되돌릴 수 없습니다. 벤더 "{detail?.vendorName}"({detail?.vendorCode})의 RFQ 정보가 영구적으로 삭제됩니다. - - - - - - - - - - - ) - } - - return ( - - {showTrigger ? ( - - - - ) : null} - - - 정말로 삭제하시겠습니까? - - 이 작업은 되돌릴 수 없습니다. 벤더 "{detail?.vendorName}"({detail?.vendorCode})의 RFQ 정보가 영구적으로 삭제됩니다. - - - - - - - - - - - ) +"use client" + +import * as React from "react" +import { type RfqDetailView } from "./rfq-detail-column" +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 { deleteRfqDetail } from "@/lib/procurement-rfqs/services" + + +interface DeleteRfqDetailDialogProps + extends React.ComponentPropsWithoutRef { + detail: RfqDetailView | null + showTrigger?: boolean + onSuccess?: () => void +} + +export function DeleteVendorDialog({ + detail, + showTrigger = true, + onSuccess, + ...props +}: DeleteRfqDetailDialogProps) { + const [isDeletePending, startDeleteTransition] = React.useTransition() + const isDesktop = useMediaQuery("(min-width: 640px)") + + function onDelete() { + if (!detail) return + + startDeleteTransition(async () => { + try { + const result = await deleteRfqDetail(detail.id) + + if (!result.success) { + toast.error(result.message || "삭제 중 오류가 발생했습니다") + return + } + + props.onOpenChange?.(false) + toast.success("RFQ 벤더 정보가 삭제되었습니다") + onSuccess?.() + } catch (error) { + console.error("RFQ 벤더 삭제 오류:", error) + toast.error("삭제 중 오류가 발생했습니다") + } + }) + } + + if (isDesktop) { + return ( + + {showTrigger ? ( + + + + ) : null} + + + 정말로 삭제하시겠습니까? + + 이 작업은 되돌릴 수 없습니다. 벤더 "{detail?.vendorName}"({detail?.vendorCode})의 RFQ 정보가 영구적으로 삭제됩니다. + + + + + + + + + + + ) + } + + return ( + + {showTrigger ? ( + + + + ) : null} + + + 정말로 삭제하시겠습니까? + + 이 작업은 되돌릴 수 없습니다. 벤더 "{detail?.vendorName}"({detail?.vendorCode})의 RFQ 정보가 영구적으로 삭제됩니다. + + + + + + + + + + + ) } \ No newline at end of file diff --git a/lib/techsales-rfq/table/detail-table/quotation-contacts-view-dialog.tsx b/lib/techsales-rfq/table/detail-table/quotation-contacts-view-dialog.tsx new file mode 100644 index 00000000..3e793b62 --- /dev/null +++ b/lib/techsales-rfq/table/detail-table/quotation-contacts-view-dialog.tsx @@ -0,0 +1,173 @@ +"use client" + +import * as React from "react" +import { useState, useEffect, useCallback } from "react" +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Badge } from "@/components/ui/badge" +import { Skeleton } from "@/components/ui/skeleton" +import { Mail, Phone, User, Users } from "lucide-react" +import { getQuotationContacts } from "../../service" + +interface QuotationContact { + id: number + contactId: number + contactName: string + contactPosition: string | null + contactEmail: string + contactPhone: string | null + contactCountry: string | null + isPrimary: boolean + createdAt: Date +} + +interface QuotationContactsViewDialogProps { + open: boolean + onOpenChange: (open: boolean) => void + quotationId: number | null + vendorName?: string +} + +export function QuotationContactsViewDialog({ + open, + onOpenChange, + quotationId, + vendorName +}: QuotationContactsViewDialogProps) { + const [contacts, setContacts] = useState([]) + const [isLoading, setIsLoading] = useState(false) + + // 담당자 정보 로드 + const loadQuotationContacts = useCallback(async () => { + if (!quotationId) return + + setIsLoading(true) + try { + const result = await getQuotationContacts(quotationId) + if (result.success) { + setContacts(result.data || []) + } else { + console.error("담당자 정보 로드 실패:", result.error) + setContacts([]) + } + } catch (error) { + console.error("담당자 정보 로드 오류:", error) + setContacts([]) + } finally { + setIsLoading(false) + } + }, [quotationId]) + + // Dialog가 열릴 때 데이터 로드 + useEffect(() => { + if (open && quotationId) { + loadQuotationContacts() + } + }, [open, quotationId, loadQuotationContacts]) + + // Dialog가 닫힐 때 상태 초기화 + useEffect(() => { + if (!open) { + setContacts([]) + } + }, [open]) + + return ( + + + + + + RFQ 발송 담당자 목록 + + + {vendorName && ( + {vendorName} + )} 에게 발송된 RFQ의 담당자 정보입니다. + + + +
+ {isLoading ? ( +
+ {[1, 2, 3].map((i) => ( + + ))} +
+ ) : contacts.length === 0 ? ( +
+ +

발송된 담당자 정보가 없습니다.

+

아직 RFQ가 발송되지 않았거나 담당자 정보가 기록되지 않았습니다.

+
+ ) : ( +
+ {contacts.map((contact) => ( +
+
+ +
+
+ {contact.contactName} + {contact.isPrimary && ( + + 주담당자 + + )} +
+ {contact.contactPosition && ( +

+ {contact.contactPosition} +

+ )} + {contact.contactCountry && ( +

+ {contact.contactCountry} +

+ )} +
+
+ +
+
+ + {contact.contactEmail} +
+ {contact.contactPhone && ( +
+ + {contact.contactPhone} +
+ )} +
+ 발송일: {new Date(contact.createdAt).toLocaleDateString('ko-KR')} +
+
+
+ ))} + +
+ 총 {contacts.length}명의 담당자에게 발송됨 +
+
+ )} +
+ +
+ +
+ + + ) +} \ No newline at end of file diff --git a/lib/techsales-rfq/table/detail-table/quotation-history-dialog.tsx b/lib/techsales-rfq/table/detail-table/quotation-history-dialog.tsx index ce701e13..0f5158d9 100644 --- a/lib/techsales-rfq/table/detail-table/quotation-history-dialog.tsx +++ b/lib/techsales-rfq/table/detail-table/quotation-history-dialog.tsx @@ -13,7 +13,7 @@ import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { Skeleton } from "@/components/ui/skeleton" -import { Clock, User, FileText, AlertCircle, Paperclip } from "lucide-react" +import { Clock, User, AlertCircle, Paperclip } from "lucide-react" import { formatDate } from "@/lib/utils" import { toast } from "sonner" @@ -91,7 +91,6 @@ function QuotationCard({ data, version, isCurrent = false, - changeReason, revisedBy, revisedAt, attachments @@ -99,7 +98,6 @@ function QuotationCard({ data: QuotationSnapshot | QuotationHistoryData["current"] version: number isCurrent?: boolean - changeReason?: string | null revisedBy?: string | null revisedAt?: Date attachments?: QuotationAttachment[] @@ -137,7 +135,7 @@ function QuotationCard({

유효 기한

- {data.validUntil ? formatDate(data.validUntil, "KR") : "미설정"} + {data.validUntil ? formatDate(data.validUntil) : "미설정"}

@@ -187,8 +185,8 @@ function QuotationCard({ {isCurrent - ? `수정: ${data.updatedAt ? formatDate(data.updatedAt, "KR") : "N/A"}` - : `변경: ${revisedAt ? formatDate(revisedAt, "KR") : "N/A"}` + ? `수정: ${data.updatedAt ? formatDate(data.updatedAt) : "N/A"}` + : `변경: ${revisedAt ? formatDate(revisedAt) : "N/A"}` } diff --git a/lib/techsales-rfq/table/detail-table/rfq-detail-column.tsx b/lib/techsales-rfq/table/detail-table/rfq-detail-column.tsx index e921fcaa..e4141520 100644 --- a/lib/techsales-rfq/table/detail-table/rfq-detail-column.tsx +++ b/lib/techsales-rfq/table/detail-table/rfq-detail-column.tsx @@ -1,401 +1,451 @@ -"use client" - -import * as React from "react" -import type { ColumnDef, Row } from "@tanstack/react-table"; -import { formatDate } from "@/lib/utils" -import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" -import { Checkbox } from "@/components/ui/checkbox"; -import { MessageCircle, MoreHorizontal, Trash2, Paperclip } from "lucide-react"; -import { Button } from "@/components/ui/button"; -import { Badge } from "@/components/ui/badge"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; - -export interface DataTableRowAction { - row: Row; - type: "communicate" | "delete"; -} - -// 벤더 견적 데이터 타입 정의 -export interface RfqDetailView { - id: number - rfqId: number - vendorId?: number | null - vendorName: string | null - vendorCode: string | null - totalPrice: string | number | null - currency: string | null - validUntil: Date | null - status: string | null - remark: string | null - submittedAt: Date | null - acceptedAt: Date | null - rejectionReason: string | null - createdAt: Date | null - updatedAt: Date | null - createdByName: string | null - quotationCode?: string | null - rfqCode?: string | null - quotationAttachments?: Array<{ - id: number - revisionId: number - fileName: string - fileSize: number - filePath: string - description?: string | null - }> -} - -// 견적서 정보 타입 (Sheet용) -export interface QuotationInfo { - id: number - quotationCode: string | null - vendorName?: string - rfqCode?: string -} - -interface GetColumnsProps { - setRowAction: React.Dispatch< - React.SetStateAction | null> - >; - unreadMessages?: Record; // 읽지 않은 메시지 개수 - onQuotationClick?: (quotationId: number) => void; // 견적 클릭 핸들러 - openQuotationAttachmentsSheet?: (quotationId: number, quotationInfo: QuotationInfo) => void; // 견적서 첨부파일 sheet 열기 -} - -export function getRfqDetailColumns({ - setRowAction, - unreadMessages = {}, - onQuotationClick, - openQuotationAttachmentsSheet -}: GetColumnsProps): ColumnDef[] { - return [ - { - id: "select", - header: ({ table }) => ( - table.toggleAllPageRowsSelected(!!value)} - aria-label="모두 선택" - /> - ), - cell: ({ row }) => { - const status = row.original.status; - const isSelectable = status ? !["Accepted", "Rejected"].includes(status) : true; - - return ( - row.toggleSelected(!!value)} - disabled={!isSelectable} - aria-label="행 선택" - className={!isSelectable ? "opacity-50 cursor-not-allowed" : ""} - /> - ); - }, - enableSorting: false, - enableHiding: false, - size: 40, - }, - { - accessorKey: "status", - header: ({ column }) => ( - - ), - cell: ({ row }) => { - const status = row.getValue("status") as string; - // 상태에 따른 배지 색상 설정 - let variant: "default" | "secondary" | "outline" | "destructive" = "outline"; - - if (status === "Submitted") { - variant = "default"; // 제출됨 - 기본 색상 - } else if (status === "Accepted") { - variant = "secondary"; // 승인됨 - 보조 색상 - } else if (status === "Rejected") { - variant = "destructive"; // 거부됨 - 위험 색상 - } - - return ( - {status || "Draft"} - ); - }, - meta: { - excelHeader: "견적 상태" - }, - enableResizing: true, - size: 120, - }, - { - accessorKey: "vendorCode", - header: ({ column }) => ( - - ), - cell: ({ row }) =>
{row.getValue("vendorCode")}
, - meta: { - excelHeader: "벤더 코드" - }, - enableResizing: true, - size: 120, - }, - { - accessorKey: "vendorName", - header: ({ column }) => ( - - ), - cell: ({ row }) => { - const vendorName = row.getValue("vendorName") as string | null; - const vendorId = row.original.vendorId; - - if (!vendorName) return
-
; - - if (vendorId) { - return ( - - ); - } - - return
{vendorName}
; - }, - meta: { - excelHeader: "벤더명" - }, - enableResizing: true, - size: 160, - }, - { - accessorKey: "totalPrice", - header: ({ column }) => ( - - ), - cell: ({ row }) => { - const value = row.getValue("totalPrice") as string | number | null; - const currency = row.getValue("currency") as string | null; - const quotationId = row.original.id; - - if (value === null || value === undefined) return "-"; - - // 숫자로 변환 시도 - const numValue = typeof value === 'string' ? parseFloat(value) : value; - const displayValue = isNaN(numValue) ? value : numValue.toLocaleString(); - - // 견적값이 있고 클릭 핸들러가 있는 경우 클릭 가능한 버튼으로 표시 - if (onQuotationClick && quotationId) { - return ( - - ); - } - - return ( -
- {displayValue} {currency} -
- ); - }, - meta: { - excelHeader: "견적 금액" - }, - enableResizing: true, - size: 140, - }, - { - accessorKey: "quotationAttachments", - header: ({ column }) => ( - - ), - cell: ({ row }) => { - const attachments = row.original.quotationAttachments || []; - const attachmentCount = attachments.length; - - if (attachmentCount === 0) { - return
-
; - } - - return ( - - ); - }, - meta: { - excelHeader: "첨부파일" - }, - enableResizing: false, - size: 80, - }, - { - accessorKey: "currency", - header: ({ column }) => ( - - ), - cell: ({ row }) =>
{row.getValue("currency")}
, - meta: { - excelHeader: "통화" - }, - enableResizing: true, - size: 80, - }, - { - accessorKey: "validUntil", - header: ({ column }) => ( - - ), - cell: ({ cell }) => { - const value = cell.getValue() as Date | null; - return value ? formatDate(value, "KR") : "-"; - }, - meta: { - excelHeader: "유효기간" - }, - enableResizing: true, - size: 120, - }, - { - accessorKey: "submittedAt", - header: ({ column }) => ( - - ), - cell: ({ cell }) => { - const value = cell.getValue() as Date | null; - return value ? formatDate(value, "KR") : "-"; - }, - meta: { - excelHeader: "제출일" - }, - enableResizing: true, - size: 120, - }, - { - accessorKey: "createdByName", - header: ({ column }) => ( - - ), - cell: ({ row }) =>
{row.getValue("createdByName")}
, - meta: { - excelHeader: "등록자" - }, - enableResizing: true, - size: 120, - }, - { - accessorKey: "remark", - header: ({ column }) => ( - - ), - cell: ({ row }) =>
{row.getValue("remark") || "-"}
, - meta: { - excelHeader: "비고" - }, - enableResizing: true, - size: 200, - }, - { - id: "actions", - header: () =>
동작
, - cell: function Cell({ row }) { - const vendorId = row.original.vendorId; - const unreadCount = vendorId ? unreadMessages[vendorId] || 0 : 0; - const status = row.original.status; - const isDraft = status === "Draft"; - - return ( -
- {/* 커뮤니케이션 버튼 */} -
- - {unreadCount > 0 && ( - - {unreadCount > 9 ? '9+' : unreadCount} - - )} -
- - {/* 컨텍스트 메뉴 */} - - - - - - setRowAction({ row, type: "delete" })} - disabled={!isDraft} - className={!isDraft ? "opacity-50 cursor-not-allowed" : "text-destructive focus:text-destructive"} - > - - 벤더 삭제 - - - -
- ); - }, - enableResizing: false, - size: 120, - }, - ]; +"use client" + +import * as React from "react" +import type { ColumnDef, Row } from "@tanstack/react-table"; +import { formatDate } from "@/lib/utils" +import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" +import { Checkbox } from "@/components/ui/checkbox"; +import { MessageCircle, MoreHorizontal, Trash2, Paperclip, Users } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; + +export interface DataTableRowAction { + row: Row; + type: "communicate" | "delete"; +} + +// 벤더 견적 데이터 타입 정의 +export interface RfqDetailView { + id: number + rfqId: number + vendorId?: number | null + vendorName: string | null + vendorCode: string | null + totalPrice: string | number | null + currency: string | null + validUntil: Date | null + status: string | null + remark: string | null + submittedAt: Date | null + acceptedAt: Date | null + rejectionReason: string | null + createdAt: Date | null + updatedAt: Date | null + createdByName: string | null + quotationCode?: string | null + rfqCode?: string | null + quotationAttachments?: Array<{ + id: number + revisionId: number + fileName: string + fileSize: number + filePath: string + description?: string | null + }> +} + +// 견적서 정보 타입 (Sheet용) +export interface QuotationInfo { + id: number + quotationCode: string | null + vendorName?: string + rfqCode?: string +} + +interface GetColumnsProps { + setRowAction: React.Dispatch< + React.SetStateAction | null> + >; + unreadMessages?: Record; // 읽지 않은 메시지 개수 + onQuotationClick?: (quotationId: number) => void; // 견적 클릭 핸들러 + openQuotationAttachmentsSheet?: (quotationId: number, quotationInfo: QuotationInfo) => void; // 견적서 첨부파일 sheet 열기 + openContactsDialog?: (quotationId: number, vendorName?: string) => void; // 담당자 조회 다이얼로그 열기 +} + +export function getRfqDetailColumns({ + setRowAction, + unreadMessages = {}, + onQuotationClick, + openQuotationAttachmentsSheet, + openContactsDialog +}: GetColumnsProps): ColumnDef[] { + return [ + { + id: "select", + header: ({ table }) => ( + table.toggleAllPageRowsSelected(!!value)} + aria-label="모두 선택" + /> + ), + cell: ({ row }) => { + const status = row.original.status; + const isSelectable = status ? !["Accepted", "Rejected"].includes(status) : true; + + return ( + row.toggleSelected(!!value)} + disabled={!isSelectable} + aria-label="행 선택" + className={!isSelectable ? "opacity-50 cursor-not-allowed" : ""} + /> + ); + }, + enableSorting: false, + enableHiding: false, + size: 40, + }, + { + accessorKey: "status", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const status = row.getValue("status") as string; + // 상태에 따른 배지 색상 설정 + let variant: "default" | "secondary" | "outline" | "destructive" = "outline"; + + if (status === "Submitted") { + variant = "default"; // 제출됨 - 기본 색상 + } else if (status === "Accepted") { + variant = "secondary"; // 승인됨 - 보조 색상 + } else if (status === "Rejected") { + variant = "destructive"; // 거부됨 - 위험 색상 + } + + return ( + {status || "Draft"} + ); + }, + meta: { + excelHeader: "견적 상태" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "vendorCode", + header: ({ column }) => ( + + ), + cell: ({ row }) =>
{row.getValue("vendorCode")}
, + meta: { + excelHeader: "벤더 코드" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "vendorName", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const vendorName = row.getValue("vendorName") as string | null; + const vendorId = row.original.vendorId; + + if (!vendorName) return
-
; + + if (vendorId) { + return ( + + ); + } + + return
{vendorName}
; + }, + meta: { + excelHeader: "벤더명" + }, + enableResizing: true, + size: 160, + }, + { + accessorKey: "totalPrice", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const value = row.getValue("totalPrice") as string | number | null; + const currency = row.getValue("currency") as string | null; + const quotationId = row.original.id; + + if (value === null || value === undefined) return "-"; + + // 숫자로 변환 시도 + const numValue = typeof value === 'string' ? parseFloat(value) : value; + const displayValue = isNaN(numValue) ? value : numValue.toLocaleString(); + + // 견적값이 있고 클릭 핸들러가 있는 경우 클릭 가능한 버튼으로 표시 + if (onQuotationClick && quotationId) { + return ( + + ); + } + + return ( +
+ {displayValue} {currency} +
+ ); + }, + meta: { + excelHeader: "견적 금액" + }, + enableResizing: true, + size: 140, + }, + { + accessorKey: "quotationAttachments", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + const attachments = row.original.quotationAttachments || []; + const attachmentCount = attachments.length; + + if (attachmentCount === 0) { + return
-
; + } + + return ( + + ); + }, + meta: { + excelHeader: "첨부파일" + }, + enableResizing: false, + size: 80, + }, + { + id: "contacts", + header: "담당자", + cell: ({ row }) => { + const quotation = row.original; + + const handleClick = () => { + if (openContactsDialog) { + openContactsDialog(quotation.id, quotation.vendorName || undefined); + } + }; + + return ( +
+ + + + + + +

RFQ 발송 담당자 보기

+ + + +
+ ); + }, + meta: { + excelHeader: "담당자" + }, + enableResizing: false, + size: 80, + }, + { + accessorKey: "currency", + header: ({ column }) => ( + + ), + cell: ({ row }) =>
{row.getValue("currency")}
, + meta: { + excelHeader: "통화" + }, + enableResizing: true, + size: 80, + }, + { + accessorKey: "validUntil", + header: ({ column }) => ( + + ), + cell: ({ cell }) => { + const value = cell.getValue() as Date | null; + return value ? formatDate(value, "KR") : "-"; + }, + meta: { + excelHeader: "유효기간" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "submittedAt", + header: ({ column }) => ( + + ), + cell: ({ cell }) => { + const value = cell.getValue() as Date | null; + return value ? formatDate(value, "KR") : "-"; + }, + meta: { + excelHeader: "제출일" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "createdByName", + header: ({ column }) => ( + + ), + cell: ({ row }) =>
{row.getValue("createdByName")}
, + meta: { + excelHeader: "등록자" + }, + enableResizing: true, + size: 120, + }, + { + accessorKey: "remark", + header: ({ column }) => ( + + ), + cell: ({ row }) =>
{row.getValue("remark") || "-"}
, + meta: { + excelHeader: "비고" + }, + enableResizing: true, + size: 200, + }, + { + id: "actions", + header: () =>
동작
, + cell: function Cell({ row }) { + const vendorId = row.original.vendorId; + const unreadCount = vendorId ? unreadMessages[vendorId] || 0 : 0; + const status = row.original.status; + const isDraft = status === "Draft"; + + return ( +
+ {/* 커뮤니케이션 버튼 */} +
+ + {unreadCount > 0 && ( + + {unreadCount > 9 ? '9+' : unreadCount} + + )} +
+ + {/* 컨텍스트 메뉴 */} + + + + + + setRowAction({ row, type: "delete" })} + disabled={!isDraft} + className={!isDraft ? "opacity-50 cursor-not-allowed" : "text-destructive focus:text-destructive"} + > + + 벤더 삭제 + + + +
+ ); + }, + enableResizing: false, + size: 120, + }, + ]; } \ No newline at end of file diff --git a/lib/techsales-rfq/table/detail-table/rfq-detail-table.tsx b/lib/techsales-rfq/table/detail-table/rfq-detail-table.tsx index 1d701bd5..41572a93 100644 --- a/lib/techsales-rfq/table/detail-table/rfq-detail-table.tsx +++ b/lib/techsales-rfq/table/detail-table/rfq-detail-table.tsx @@ -1,710 +1,775 @@ -"use client" - -import * as React from "react" -import { useEffect, useState, useCallback, useMemo } from "react" -import { - DataTableRowAction, - getRfqDetailColumns, - RfqDetailView -} from "./rfq-detail-column" -import { toast } from "sonner" - -import { Skeleton } from "@/components/ui/skeleton" -import { Badge } from "@/components/ui/badge" -import { Button } from "@/components/ui/button" -import { Loader2, UserPlus, Send, Trash2, CheckCircle } from "lucide-react" -import { ClientDataTable } from "@/components/client-data-table/data-table" -import { AddVendorDialog } from "./add-vendor-dialog" -import { VendorCommunicationDrawer } from "./vendor-communication-drawer" -import { DeleteVendorsDialog } from "../delete-vendors-dialog" -import { QuotationHistoryDialog } from "@/lib/techsales-rfq/table/detail-table/quotation-history-dialog" -import { TechSalesQuotationAttachmentsSheet, type QuotationAttachment } from "../tech-sales-quotation-attachments-sheet" -import type { QuotationInfo } from "./rfq-detail-column" - -// 기본적인 RFQ 타입 정의 -interface TechSalesRfq { - id: number - rfqCode: string | null - status: string - materialCode?: string | null - itemName?: string | null - remark?: string | null - rfqSendDate?: Date | null - dueDate?: Date | null - createdByName?: string | null - rfqType: "SHIP" | "TOP" | "HULL" | null - ptypeNm?: string | null -} - -// 프로퍼티 정의 -interface RfqDetailTablesProps { - selectedRfq: TechSalesRfq | null - maxHeight?: string | number -} - - -export function RfqDetailTables({ selectedRfq, maxHeight }: RfqDetailTablesProps) { - // console.log("selectedRfq", selectedRfq) - - // 상태 관리 - const [isLoading, setIsLoading] = useState(false) - const [details, setDetails] = useState([]) - const [vendorDialogOpen, setVendorDialogOpen] = React.useState(false) - - const [isAdddialogLoading, setIsAdddialogLoading] = useState(false) - - const [rowAction, setRowAction] = React.useState | null>(null) - - // 벤더 커뮤니케이션 상태 관리 - const [communicationDrawerOpen, setCommunicationDrawerOpen] = useState(false) - const [selectedVendor, setSelectedVendor] = useState(null) - - // 읽지 않은 메시지 개수 - const [unreadMessages, setUnreadMessages] = useState>({}) - - // 테이블 선택 상태 관리 - const [selectedRows, setSelectedRows] = useState([]) - const [isSendingRfq, setIsSendingRfq] = useState(false) - const [isDeletingVendors, setIsDeletingVendors] = useState(false) - - // 벤더 삭제 확인 다이얼로그 상태 추가 - const [deleteConfirmDialogOpen, setDeleteConfirmDialogOpen] = useState(false) - - // 견적 히스토리 다이얼로그 상태 관리 - const [historyDialogOpen, setHistoryDialogOpen] = useState(false) - const [selectedQuotationId, setSelectedQuotationId] = useState(null) - - // 견적서 첨부파일 sheet 상태 관리 - const [quotationAttachmentsSheetOpen, setQuotationAttachmentsSheetOpen] = useState(false) - const [selectedQuotationInfo, setSelectedQuotationInfo] = useState(null) - const [quotationAttachments, setQuotationAttachments] = useState([]) - const [isLoadingAttachments, setIsLoadingAttachments] = useState(false) - - // selectedRfq ID 메모이제이션 (객체 참조 변경 방지) - const selectedRfqId = useMemo(() => selectedRfq?.id, [selectedRfq?.id]) - - // existingVendorIds 메모이제이션 - const existingVendorIds = useMemo(() => { - return details.map(detail => Number(detail.vendorId)).filter(Boolean); - }, [details]); - - // 읽지 않은 메시지 로드 함수 메모이제이션 - const loadUnreadMessages = useCallback(async () => { - if (!selectedRfqId) return; - - try { - // 기술영업용 읽지 않은 메시지 수 가져오기 함수 구현 - const { getTechSalesUnreadMessageCounts } = await import("@/lib/techsales-rfq/service"); - const unreadData = await getTechSalesUnreadMessageCounts(selectedRfqId); - setUnreadMessages(unreadData); - } catch (error) { - console.error("읽지 않은 메시지 로드 오류:", error); - setUnreadMessages({}); - } - }, [selectedRfqId]); - - // 데이터 새로고침 함수 메모이제이션 - const handleRefreshData = useCallback(async () => { - if (!selectedRfqId) return - - try { - // 실제 벤더 견적 데이터 다시 로딩 - const { getTechSalesRfqTechVendors } = await import("@/lib/techsales-rfq/service") - - const result = await getTechSalesRfqTechVendors(selectedRfqId) - - // 데이터 변환 - const transformedData = result.data?.map((item: any) => ({ - ...item, - detailId: item.id, - rfqId: selectedRfqId, - rfqCode: selectedRfq?.rfqCode || null, - rfqType: selectedRfq?.rfqType || null, - ptypeNm: selectedRfq?.ptypeNm || null, - vendorId: item.vendorId ? Number(item.vendorId) : undefined, - })) || [] - - setDetails(transformedData) - - // 읽지 않은 메시지 개수 업데이트 - await loadUnreadMessages(); - - toast.success("데이터를 성공적으로 새로고침했습니다") - } catch (error) { - console.error("데이터 새로고침 오류:", error) - toast.error("데이터를 새로고침하는 중 오류가 발생했습니다") - } - }, [selectedRfqId, selectedRfq?.rfqCode, selectedRfq?.rfqType, selectedRfq?.ptypeNm, loadUnreadMessages]) - - // 벤더 추가 핸들러 메모이제이션 - const handleAddVendor = useCallback(async () => { - try { - setIsAdddialogLoading(true) - setVendorDialogOpen(true) - } catch (error) { - console.error("데이터 로드 오류:", error) - toast.error("벤더 정보를 불러오는 중 오류가 발생했습니다") - } finally { - setIsAdddialogLoading(false) - } - }, []) - - // RFQ 발송 핸들러 메모이제이션 - const handleSendRfq = useCallback(async () => { - if (selectedRows.length === 0) { - toast.warning("발송할 벤더를 선택해주세요."); - return; - } - - if (!selectedRfqId) { - toast.error("선택된 RFQ가 없습니다."); - return; - } - - try { - setIsSendingRfq(true); - - // 기술영업 RFQ 발송 서비스 함수 호출 - const vendorIds = selectedRows.map(row => row.vendorId).filter(Boolean); - const { sendTechSalesRfqToVendors } = await import("@/lib/techsales-rfq/service"); - - const result = await sendTechSalesRfqToVendors({ - rfqId: selectedRfqId, - vendorIds: vendorIds as number[] - }); - - if (result.success) { - toast.success(result.message || `${selectedRows.length}개 벤더에게 RFQ가 발송되었습니다.`); - } else { - toast.error(result.message || "RFQ 발송 중 오류가 발생했습니다."); - } - - // 선택 해제 - setSelectedRows([]); - - // 데이터 새로고침 - await handleRefreshData(); - - } catch (error) { - console.error("RFQ 발송 오류:", error); - toast.error("RFQ 발송 중 오류가 발생했습니다."); - } finally { - setIsSendingRfq(false); - } - }, [selectedRows, selectedRfqId, handleRefreshData]); - - // 벤더 선택 핸들러 추가 - const [isAcceptingVendors, setIsAcceptingVendors] = useState(false); - - const handleAcceptVendors = useCallback(async () => { - if (selectedRows.length === 0) { - toast.warning("선택할 벤더를 선택해주세요."); - return; - } - - if (selectedRows.length > 1) { - toast.warning("하나의 벤더만 선택할 수 있습니다."); - return; - } - - const selectedQuotation = selectedRows[0]; - if (selectedQuotation.status !== "Submitted") { - toast.warning("제출된 견적서만 선택할 수 있습니다."); - return; - } - - try { - setIsAcceptingVendors(true); - - // 벤더 견적 승인 서비스 함수 호출 - const { acceptTechSalesVendorQuotationAction } = await import("@/lib/techsales-rfq/actions"); - - const result = await acceptTechSalesVendorQuotationAction(selectedQuotation.id); - - if (result.success) { - toast.success(result.message || "벤더가 성공적으로 선택되었습니다."); - } else { - toast.error(result.error || "벤더 선택 중 오류가 발생했습니다."); - } - - // 선택 해제 - setSelectedRows([]); - - // 데이터 새로고침 - await handleRefreshData(); - - } catch (error) { - console.error("벤더 선택 오류:", error); - toast.error("벤더 선택 중 오류가 발생했습니다."); - } finally { - setIsAcceptingVendors(false); - } - }, [selectedRows, handleRefreshData]); - - // 벤더 삭제 핸들러 메모이제이션 - const handleDeleteVendors = useCallback(async () => { - if (selectedRows.length === 0) { - toast.warning("삭제할 벤더를 선택해주세요."); - return; - } - - if (!selectedRfqId) { - toast.error("선택된 RFQ가 없습니다."); - return; - } - - try { - setIsDeletingVendors(true); - - const vendorIds = selectedRows.map(row => row.vendorId).filter(Boolean) as number[]; - - if (vendorIds.length === 0) { - toast.error("유효한 벤더 ID가 없습니다."); - return; - } - - // 서비스 함수 호출 - const { removeTechVendorsFromTechSalesRfq } = await import("@/lib/techsales-rfq/service"); - - const result = await removeTechVendorsFromTechSalesRfq({ - rfqId: selectedRfqId, - vendorIds: vendorIds - }); - - if (result.error) { - toast.error(result.error); - } else { - const successCount = result.data?.length || 0 - toast.success(`${successCount}개의 벤더가 성공적으로 삭제되었습니다`); - } - - // 선택 해제 - setSelectedRows([]); - - // 데이터 새로고침 - await handleRefreshData(); - - } catch (error) { - console.error("벤더 삭제 오류:", error); - toast.error("벤더 삭제 중 오류가 발생했습니다."); - } finally { - setIsDeletingVendors(false); - } - }, [selectedRows, selectedRfqId, handleRefreshData]); - - // 벤더 삭제 확인 핸들러 - const handleDeleteVendorsConfirm = useCallback(() => { - if (selectedRows.length === 0) { - toast.warning("삭제할 벤더를 선택해주세요."); - return; - } - setDeleteConfirmDialogOpen(true); - }, [selectedRows]); - - // 벤더 삭제 확정 실행 - const executeDeleteVendors = useCallback(async () => { - setDeleteConfirmDialogOpen(false); - await handleDeleteVendors(); - }, [handleDeleteVendors]); - - - // 견적 히스토리 다이얼로그 열기 핸들러 메모이제이션 - const handleOpenHistoryDialog = useCallback((quotationId: number) => { - setSelectedQuotationId(quotationId); - setHistoryDialogOpen(true); - }, []) - - // 견적서 첨부파일 sheet 열기 핸들러 메모이제이션 - const handleOpenQuotationAttachmentsSheet = useCallback(async (quotationId: number, quotationInfo: QuotationInfo) => { - try { - setIsLoadingAttachments(true); - setSelectedQuotationInfo(quotationInfo); - setQuotationAttachmentsSheetOpen(true); - - // 견적서 첨부파일 조회 - const { getTechSalesVendorQuotationAttachments } = await import("@/lib/techsales-rfq/service"); - const result = await getTechSalesVendorQuotationAttachments(quotationId); - - if (result.error) { - toast.error(result.error); - setQuotationAttachments([]); - } else { - setQuotationAttachments(result.data || []); - } - } catch (error) { - console.error("견적서 첨부파일 조회 오류:", error); - toast.error("견적서 첨부파일을 불러오는 중 오류가 발생했습니다."); - setQuotationAttachments([]); - } finally { - setIsLoadingAttachments(false); - } - }, []) - - // 칼럼 정의 - unreadMessages 상태 전달 (메모이제이션) - const columns = useMemo(() => - getRfqDetailColumns({ - setRowAction, - unreadMessages, - onQuotationClick: handleOpenHistoryDialog, - openQuotationAttachmentsSheet: handleOpenQuotationAttachmentsSheet - }), [unreadMessages, handleOpenHistoryDialog, handleOpenQuotationAttachmentsSheet]) - - // 필터 필드 정의 (메모이제이션) - const advancedFilterFields = useMemo( - () => [ - { - id: "vendorName", - label: "벤더명", - type: "text", - }, - { - id: "vendorCode", - label: "벤더 코드", - type: "text", - }, - { - id: "currency", - label: "통화", - type: "text", - }, - ], - [] - ) - - // 계산된 값들 메모이제이션 - const vendorsWithQuotations = useMemo(() => - details.filter(detail => detail.status === "Submitted").length, - [details] - ); - - // RFQ ID가 변경될 때 데이터 로드 - useEffect(() => { - async function loadRfqDetails() { - if (!selectedRfqId) { - setDetails([]) - return - } - - try { - setIsLoading(true) - - // 실제 벤더 견적 데이터 로딩 - const { getTechSalesVendorQuotationsWithJoin } = await import("@/lib/techsales-rfq/service") - - const result = await getTechSalesVendorQuotationsWithJoin({ - rfqId: selectedRfqId, - page: 1, - perPage: 1000, // 모든 데이터 가져오기 - }) - - // 데이터 변환 (procurement 패턴에 맞게) - const transformedData = result.data?.map(item => ({ - ...item, - detailId: item.id, - rfqId: selectedRfqId, - rfqCode: selectedRfq?.rfqCode || null, - vendorId: item.vendorId ? Number(item.vendorId) : undefined, - // 기타 필요한 필드 변환 - })) || [] - - setDetails(transformedData) - - // 읽지 않은 메시지 개수 로드 - await loadUnreadMessages(); - - } catch (error) { - console.error("RFQ 디테일 로드 오류:", error) - setDetails([]) - toast.error("RFQ 세부정보를 불러오는 중 오류가 발생했습니다") - } finally { - setIsLoading(false) - } - } - - loadRfqDetails() - }, [selectedRfqId, selectedRfq?.rfqCode, loadUnreadMessages]) - - // 주기적으로 읽지 않은 메시지 갱신 (60초마다) - 메모이제이션된 함수 사용 - useEffect(() => { - if (!selectedRfqId) return; - - const intervalId = setInterval(() => { - loadUnreadMessages(); - }, 60000); // 60초마다 갱신 - - return () => clearInterval(intervalId); - }, [selectedRfqId, loadUnreadMessages]); - - // rowAction 처리 - procurement 패턴 적용 (메모이제이션) - useEffect(() => { - if (!rowAction) return - - const handleRowAction = async () => { - try { - // 통신 액션인 경우 드로어 열기 - if (rowAction.type === "communicate") { - setSelectedVendor(rowAction.row.original); - setCommunicationDrawerOpen(true); - - // rowAction 초기화 - setRowAction(null); - return; - } - - // 삭제 액션인 경우 개별 벤더 삭제 - if (rowAction.type === "delete") { - const vendor = rowAction.row.original; - - if (!vendor.vendorId || !selectedRfqId) { - toast.error("벤더 정보가 없습니다."); - setRowAction(null); - return; - } - - // Draft 상태 체크 - if (vendor.status !== "Draft") { - toast.error("Draft 상태의 벤더만 삭제할 수 있습니다."); - setRowAction(null); - return; - } - - // 개별 벤더 삭제 - const { removeTechVendorFromTechSalesRfq } = await import("@/lib/techsales-rfq/service"); - - const result = await removeTechVendorFromTechSalesRfq({ - rfqId: selectedRfqId, - vendorId: vendor.vendorId - }); - - if (result.error) { - toast.error(result.error); - } else { - toast.success(`${vendor.vendorName || '벤더'}가 성공적으로 삭제되었습니다.`); - // 데이터 새로고침 - await handleRefreshData(); - } - - // rowAction 초기화 - setRowAction(null); - return; - } - } catch (error) { - console.error("액션 처리 오류:", error); - toast.error("작업을 처리하는 중 오류가 발생했습니다"); - } - }; - - handleRowAction(); - }, [rowAction, selectedRfqId, handleRefreshData]) - - // 선택된 행 변경 핸들러 메모이제이션 - const handleSelectedRowsChange = useCallback((selectedRowsData: RfqDetailView[]) => { - setSelectedRows(selectedRowsData); - }, []); - - // 커뮤니케이션 드로어 변경 핸들러 메모이제이션 - const handleCommunicationDrawerChange = useCallback((open: boolean) => { - setCommunicationDrawerOpen(open); - // 드로어가 닫힐 때 해당 벤더의 메시지를 읽음 처리하고 읽지 않은 메시지 개수 갱신 - if (!open && selectedVendor?.vendorId && selectedRfqId) { - // 메시지를 읽음으로 처리 - import("@/lib/techsales-rfq/service").then(({ markTechSalesMessagesAsRead }) => { - markTechSalesMessagesAsRead(selectedRfqId, selectedVendor.vendorId || undefined).catch(error => { - console.error("메시지 읽음 처리 오류:", error); - }); - }); - - // 해당 벤더의 읽지 않은 메시지를 0으로 즉시 업데이트 - setUnreadMessages(prev => ({ - ...prev, - [selectedVendor.vendorId!]: 0 - })); - - // 전체 읽지 않은 메시지 개수 갱신 - loadUnreadMessages(); - } - }, [selectedVendor, selectedRfqId, loadUnreadMessages]); - - if (!selectedRfq) { - return ( -
- RFQ를 선택하세요 -
- ) - } - - // 로딩 중인 경우 - if (isLoading) { - return ( -
- - - -
- ) - } - - return ( -
- {/* 테이블 또는 빈 상태 표시 */} - {details.length > 0 ? ( - -
-
- {selectedRows.length > 0 && ( - - {selectedRows.length}개 선택됨 - - )} - {/* {totalUnreadMessages > 0 && ( - - 읽지 않은 메시지: {totalUnreadMessages}건 - - )} */} - {vendorsWithQuotations > 0 && ( - - 견적 제출: {vendorsWithQuotations}개 벤더 - - )} -
-
- {/* 벤더 선택 버튼 */} - - - {/* RFQ 발송 버튼 */} - - - {/* 벤더 삭제 버튼 */} - - - {/* 벤더 추가 버튼 */} - -
-
- - ) : ( -
-
-

벤더가 없습니다

-

벤더를 추가하여 RFQ를 시작하세요

- -
-
- )} - - {/* 다이얼로그들 */} - - - {/* 벤더 커뮤니케이션 드로어 */} - - - {/* 다중 벤더 삭제 확인 다이얼로그 */} - - - {/* 견적 히스토리 다이얼로그 */} - - - {/* 견적서 첨부파일 Sheet */} - -
- ) +"use client" + +import * as React from "react" +import { useEffect, useState, useCallback, useMemo } from "react" +import { + DataTableRowAction, + getRfqDetailColumns, + RfqDetailView +} from "./rfq-detail-column" +import { toast } from "sonner" + +import { Skeleton } from "@/components/ui/skeleton" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" +import { Loader2, UserPlus, Send, Trash2, CheckCircle } from "lucide-react" +import { ClientDataTable } from "@/components/client-data-table/data-table" +import { AddVendorDialog } from "./add-vendor-dialog" +import { VendorCommunicationDrawer } from "./vendor-communication-drawer" +import { DeleteVendorDialog } from "./delete-vendors-dialog" +import { QuotationHistoryDialog } from "@/lib/techsales-rfq/table/detail-table/quotation-history-dialog" +import { TechSalesQuotationAttachmentsSheet, type QuotationAttachment } from "../tech-sales-quotation-attachments-sheet" +import type { QuotationInfo } from "./rfq-detail-column" +import { VendorContactSelectionDialog } from "./vendor-contact-selection-dialog" +import { QuotationContactsViewDialog } from "./quotation-contacts-view-dialog" + +// 기본적인 RFQ 타입 정의 +interface TechSalesRfq { + id: number + rfqCode: string | null + status: string + materialCode?: string | null + itemName?: string | null + remark?: string | null + rfqSendDate?: Date | null + dueDate?: Date | null + createdByName?: string | null + rfqType: "SHIP" | "TOP" | "HULL" | null + ptypeNm?: string | null +} + +// 프로퍼티 정의 +interface RfqDetailTablesProps { + selectedRfq: TechSalesRfq | null + maxHeight?: string | number +} + + +export function RfqDetailTables({ selectedRfq, maxHeight }: RfqDetailTablesProps) { + // console.log("selectedRfq", selectedRfq) + + // 상태 관리 + const [isLoading, setIsLoading] = useState(false) + const [details, setDetails] = useState([]) + const [vendorDialogOpen, setVendorDialogOpen] = React.useState(false) + + const [isAdddialogLoading, setIsAdddialogLoading] = useState(false) + + const [rowAction, setRowAction] = React.useState | null>(null) + + // 벤더 커뮤니케이션 상태 관리 + const [communicationDrawerOpen, setCommunicationDrawerOpen] = useState(false) + const [selectedVendor, setSelectedVendor] = useState(null) + + // 읽지 않은 메시지 개수 + const [unreadMessages, setUnreadMessages] = useState>({}) + + // 테이블 선택 상태 관리 + const [selectedRows, setSelectedRows] = useState([]) + const [isSendingRfq, setIsSendingRfq] = useState(false) + const [isDeletingVendors, setIsDeletingVendors] = useState(false) + + // 벤더 삭제 확인 다이얼로그 상태 추가 + const [deleteConfirmDialogOpen, setDeleteConfirmDialogOpen] = useState(false) + + // 견적 히스토리 다이얼로그 상태 관리 + const [historyDialogOpen, setHistoryDialogOpen] = useState(false) + const [selectedQuotationId, setSelectedQuotationId] = useState(null) + + // 견적서 첨부파일 sheet 상태 관리 + const [quotationAttachmentsSheetOpen, setQuotationAttachmentsSheetOpen] = useState(false) + const [selectedQuotationInfo, setSelectedQuotationInfo] = useState(null) + const [quotationAttachments, setQuotationAttachments] = useState([]) + const [isLoadingAttachments, setIsLoadingAttachments] = useState(false) + + // 벤더 contact 선택 다이얼로그 상태 관리 + const [contactSelectionDialogOpen, setContactSelectionDialogOpen] = useState(false) + + // 담당자 조회 다이얼로그 상태 관리 + const [contactsDialogOpen, setContactsDialogOpen] = useState(false) + const [selectedQuotationForContacts, setSelectedQuotationForContacts] = useState<{ id: number; vendorName?: string } | null>(null) + + // selectedRfq ID 메모이제이션 (객체 참조 변경 방지) + const selectedRfqId = useMemo(() => selectedRfq?.id, [selectedRfq?.id]) + + // existingVendorIds 메모이제이션 + const existingVendorIds = useMemo(() => { + return details.map(detail => Number(detail.vendorId)).filter(Boolean); + }, [details]); + + // 읽지 않은 메시지 로드 함수 메모이제이션 + const loadUnreadMessages = useCallback(async () => { + if (!selectedRfqId) return; + + try { + // 기술영업용 읽지 않은 메시지 수 가져오기 함수 구현 + const { getTechSalesUnreadMessageCounts } = await import("@/lib/techsales-rfq/service"); + const unreadData = await getTechSalesUnreadMessageCounts(selectedRfqId); + setUnreadMessages(unreadData); + } catch (error) { + console.error("읽지 않은 메시지 로드 오류:", error); + setUnreadMessages({}); + } + }, [selectedRfqId]); + + // 데이터 새로고침 함수 메모이제이션 + const handleRefreshData = useCallback(async () => { + if (!selectedRfqId) return + + try { + // 실제 벤더 견적 데이터 다시 로딩 + const { getTechSalesRfqTechVendors } = await import("@/lib/techsales-rfq/service") + + const result = await getTechSalesRfqTechVendors(selectedRfqId) + + // 데이터 변환 + const transformedData = result.data?.map((item: any) => ({ + ...item, + detailId: item.id, + rfqId: selectedRfqId, + rfqCode: selectedRfq?.rfqCode || null, + rfqType: selectedRfq?.rfqType || null, + ptypeNm: selectedRfq?.ptypeNm || null, + vendorId: item.vendorId ? Number(item.vendorId) : undefined, + })) || [] + + setDetails(transformedData) + + // 읽지 않은 메시지 개수 업데이트 + await loadUnreadMessages(); + + toast.success("데이터를 성공적으로 새로고침했습니다") + } catch (error) { + console.error("데이터 새로고침 오류:", error) + toast.error("데이터를 새로고침하는 중 오류가 발생했습니다") + } + }, [selectedRfqId, selectedRfq?.rfqCode, selectedRfq?.rfqType, selectedRfq?.ptypeNm, loadUnreadMessages]) + + // 벤더 추가 핸들러 메모이제이션 + const handleAddVendor = useCallback(async () => { + try { + setIsAdddialogLoading(true) + setVendorDialogOpen(true) + } catch (error) { + console.error("데이터 로드 오류:", error) + toast.error("벤더 정보를 불러오는 중 오류가 발생했습니다") + } finally { + setIsAdddialogLoading(false) + } + }, []) + + // RFQ 발송 핸들러 메모이제이션 - contact selection dialog 사용 + const handleSendRfq = useCallback(async () => { + if (selectedRows.length === 0) { + toast.warning("발송할 벤더를 선택해주세요."); + return; + } + + if (!selectedRfqId) { + toast.error("선택된 RFQ가 없습니다."); + return; + } + + // 선택된 벤더들의 status가 모두 'Assigned'인지 확인 + const nonAssignedVendors = selectedRows.filter(row => row.status !== "Assigned"); + if (nonAssignedVendors.length > 0) { + toast.warning("Assigned 상태의 벤더만 RFQ를 발송할 수 있습니다."); + return; + } + + // contact selection dialog 열기 + setContactSelectionDialogOpen(true); + }, [selectedRows, selectedRfqId]); + + // contact 기반 RFQ 발송 핸들러 + const handleSendRfqWithContacts = useCallback(async (selectedContacts: Array<{ + vendorId: number; + contactId: number; + contactEmail: string; + contactName: string; + }>) => { + if (!selectedRfqId) { + toast.error("선택된 RFQ가 없습니다."); + return; + } + + try { + setIsSendingRfq(true); + + // 기술영업 RFQ 발송 서비스 함수 호출 (contact 정보 포함) + const vendorIds = selectedRows.map(row => row.vendorId).filter(Boolean); + const { sendTechSalesRfqToVendors } = await import("@/lib/techsales-rfq/service"); + + const result = await sendTechSalesRfqToVendors({ + rfqId: selectedRfqId, + vendorIds: vendorIds as number[], + selectedContacts: selectedContacts + }); + + if (result.success) { + toast.success(result.message || `${selectedContacts.length}명의 연락처에게 RFQ가 발송되었습니다.`); + } else { + toast.error(result.message || "RFQ 발송 중 오류가 발생했습니다."); + } + + // 선택 해제 + setSelectedRows([]); + + // 데이터 새로고침 + await handleRefreshData(); + + } catch (error) { + console.error("RFQ 발송 오류:", error); + toast.error("RFQ 발송 중 오류가 발생했습니다."); + } finally { + setIsSendingRfq(false); + } + }, [selectedRfqId, selectedRows, handleRefreshData]); + + // 벤더 선택 핸들러 추가 + const [isAcceptingVendors, setIsAcceptingVendors] = useState(false); + + const handleAcceptVendors = useCallback(async () => { + if (selectedRows.length === 0) { + toast.warning("선택할 벤더를 선택해주세요."); + return; + } + + if (selectedRows.length > 1) { + toast.warning("하나의 벤더만 선택할 수 있습니다."); + return; + } + + const selectedQuotation = selectedRows[0]; + if (selectedQuotation.status !== "Submitted") { + toast.warning("제출된 견적서만 선택할 수 있습니다."); + return; + } + + try { + setIsAcceptingVendors(true); + + // 벤더 견적 승인 서비스 함수 호출 + const { acceptTechSalesVendorQuotationAction } = await import("@/lib/techsales-rfq/actions"); + + const result = await acceptTechSalesVendorQuotationAction(selectedQuotation.id); + + if (result.success) { + toast.success(result.message || "벤더가 성공적으로 선택되었습니다."); + } else { + toast.error(result.error || "벤더 선택 중 오류가 발생했습니다."); + } + + // 선택 해제 + setSelectedRows([]); + + // 데이터 새로고침 + await handleRefreshData(); + + } catch (error) { + console.error("벤더 선택 오류:", error); + toast.error("벤더 선택 중 오류가 발생했습니다."); + } finally { + setIsAcceptingVendors(false); + } + }, [selectedRows, handleRefreshData]); + + // 벤더 삭제 핸들러 메모이제이션 + const handleDeleteVendors = useCallback(async () => { + if (selectedRows.length === 0) { + toast.warning("삭제할 벤더를 선택해주세요."); + return; + } + + if (!selectedRfqId) { + toast.error("선택된 RFQ가 없습니다."); + return; + } + + try { + setIsDeletingVendors(true); + + const vendorIds = selectedRows.map(row => row.vendorId).filter(Boolean) as number[]; + + if (vendorIds.length === 0) { + toast.error("유효한 벤더 ID가 없습니다."); + return; + } + + // 서비스 함수 호출 + const { removeTechVendorsFromTechSalesRfq } = await import("@/lib/techsales-rfq/service"); + + const result = await removeTechVendorsFromTechSalesRfq({ + rfqId: selectedRfqId, + vendorIds: vendorIds + }); + + if (result.error) { + toast.error(result.error); + } else { + const successCount = result.data?.length || 0 + toast.success(`${successCount}개의 벤더가 성공적으로 삭제되었습니다`); + } + + // 선택 해제 + setSelectedRows([]); + + // 데이터 새로고침 + await handleRefreshData(); + + } catch (error) { + console.error("벤더 삭제 오류:", error); + toast.error("벤더 삭제 중 오류가 발생했습니다."); + } finally { + setIsDeletingVendors(false); + } + }, [selectedRows, selectedRfqId, handleRefreshData]); + + // 벤더 삭제 확인 핸들러 + const handleDeleteVendorsConfirm = useCallback(() => { + if (selectedRows.length === 0) { + toast.warning("삭제할 벤더를 선택해주세요."); + return; + } + setDeleteConfirmDialogOpen(true); + }, [selectedRows]); + + // 벤더 삭제 확정 실행 + const executeDeleteVendors = useCallback(async () => { + setDeleteConfirmDialogOpen(false); + await handleDeleteVendors(); + }, [handleDeleteVendors]); + + + // 견적 히스토리 다이얼로그 열기 핸들러 메모이제이션 + const handleOpenHistoryDialog = useCallback((quotationId: number) => { + setSelectedQuotationId(quotationId); + setHistoryDialogOpen(true); + }, []) + + // 견적서 첨부파일 sheet 열기 핸들러 메모이제이션 + const handleOpenQuotationAttachmentsSheet = useCallback(async (quotationId: number, quotationInfo: QuotationInfo) => { + try { + setIsLoadingAttachments(true); + setSelectedQuotationInfo(quotationInfo); + setQuotationAttachmentsSheetOpen(true); + + // 견적서 첨부파일 조회 + const { getTechSalesVendorQuotationAttachments } = await import("@/lib/techsales-rfq/service"); + const result = await getTechSalesVendorQuotationAttachments(quotationId); + + if (result.error) { + toast.error(result.error); + setQuotationAttachments([]); + } else { + setQuotationAttachments(result.data || []); + } + } catch (error) { + console.error("견적서 첨부파일 조회 오류:", error); + toast.error("견적서 첨부파일을 불러오는 중 오류가 발생했습니다."); + setQuotationAttachments([]); + } finally { + setIsLoadingAttachments(false); + } + }, []) + + // 담당자 조회 다이얼로그 열기 함수 + const handleOpenContactsDialog = useCallback((quotationId: number, vendorName?: string) => { + setSelectedQuotationForContacts({ id: quotationId, vendorName }) + setContactsDialogOpen(true) + }, []) + + // 칼럼 정의 - unreadMessages 상태 전달 (메모이제이션) + const columns = useMemo(() => + getRfqDetailColumns({ + setRowAction, + unreadMessages, + onQuotationClick: handleOpenHistoryDialog, + openQuotationAttachmentsSheet: handleOpenQuotationAttachmentsSheet, + openContactsDialog: handleOpenContactsDialog + }), [unreadMessages, handleOpenHistoryDialog, handleOpenQuotationAttachmentsSheet, handleOpenContactsDialog]) + + // 필터 필드 정의 (메모이제이션) + const advancedFilterFields = useMemo( + () => [ + { + id: "vendorName", + label: "벤더명", + type: "text", + }, + { + id: "vendorCode", + label: "벤더 코드", + type: "text", + }, + { + id: "currency", + label: "통화", + type: "text", + }, + ], + [] + ) + + // 계산된 값들 메모이제이션 + const vendorsWithQuotations = useMemo(() => + details.filter(detail => detail.status === "Submitted").length, + [details] + ); + + // RFQ ID가 변경될 때 데이터 로드 + useEffect(() => { + async function loadRfqDetails() { + if (!selectedRfqId) { + setDetails([]) + return + } + + try { + setIsLoading(true) + + // 실제 벤더 견적 데이터 로딩 + const { getTechSalesVendorQuotationsWithJoin } = await import("@/lib/techsales-rfq/service") + + const result = await getTechSalesVendorQuotationsWithJoin({ + rfqId: selectedRfqId, + page: 1, + perPage: 1000, // 모든 데이터 가져오기 + }) + + // 데이터 변환 (procurement 패턴에 맞게) + const transformedData = result.data?.map(item => ({ + ...item, + detailId: item.id, + rfqId: selectedRfqId, + rfqCode: selectedRfq?.rfqCode || null, + vendorId: item.vendorId ? Number(item.vendorId) : undefined, + // 기타 필요한 필드 변환 + })) || [] + + setDetails(transformedData) + + // 읽지 않은 메시지 개수 로드 + await loadUnreadMessages(); + + } catch (error) { + console.error("RFQ 디테일 로드 오류:", error) + setDetails([]) + toast.error("RFQ 세부정보를 불러오는 중 오류가 발생했습니다") + } finally { + setIsLoading(false) + } + } + + loadRfqDetails() + }, [selectedRfqId, selectedRfq?.rfqCode, loadUnreadMessages]) + + // 주기적으로 읽지 않은 메시지 갱신 (60초마다) - 메모이제이션된 함수 사용 + useEffect(() => { + if (!selectedRfqId) return; + + const intervalId = setInterval(() => { + loadUnreadMessages(); + }, 60000); // 60초마다 갱신 + + return () => clearInterval(intervalId); + }, [selectedRfqId, loadUnreadMessages]); + + // rowAction 처리 - procurement 패턴 적용 (메모이제이션) + useEffect(() => { + if (!rowAction) return + + const handleRowAction = async () => { + try { + // 통신 액션인 경우 드로어 열기 + if (rowAction.type === "communicate") { + setSelectedVendor(rowAction.row.original); + setCommunicationDrawerOpen(true); + + // rowAction 초기화 + setRowAction(null); + return; + } + + // 삭제 액션인 경우 개별 벤더 삭제 + if (rowAction.type === "delete") { + const vendor = rowAction.row.original; + + if (!vendor.vendorId || !selectedRfqId) { + toast.error("벤더 정보가 없습니다."); + setRowAction(null); + return; + } + + // Draft 상태 체크 + if (vendor.status !== "Draft") { + toast.error("Draft 상태의 벤더만 삭제할 수 있습니다."); + setRowAction(null); + return; + } + + // 개별 벤더 삭제 + const { removeTechVendorFromTechSalesRfq } = await import("@/lib/techsales-rfq/service"); + + const result = await removeTechVendorFromTechSalesRfq({ + rfqId: selectedRfqId, + vendorId: vendor.vendorId + }); + + if (result.error) { + toast.error(result.error); + } else { + toast.success(`${vendor.vendorName || '벤더'}가 성공적으로 삭제되었습니다.`); + // 데이터 새로고침 + await handleRefreshData(); + } + + // rowAction 초기화 + setRowAction(null); + return; + } + } catch (error) { + console.error("액션 처리 오류:", error); + toast.error("작업을 처리하는 중 오류가 발생했습니다"); + } + }; + + handleRowAction(); + }, [rowAction, selectedRfqId, handleRefreshData]) + + // 선택된 행 변경 핸들러 메모이제이션 + const handleSelectedRowsChange = useCallback((selectedRowsData: RfqDetailView[]) => { + setSelectedRows(selectedRowsData); + }, []); + + // 커뮤니케이션 드로어 변경 핸들러 메모이제이션 + const handleCommunicationDrawerChange = useCallback((open: boolean) => { + setCommunicationDrawerOpen(open); + // 드로어가 닫힐 때 해당 벤더의 메시지를 읽음 처리하고 읽지 않은 메시지 개수 갱신 + if (!open && selectedVendor?.vendorId && selectedRfqId) { + // 메시지를 읽음으로 처리 + import("@/lib/techsales-rfq/service").then(({ markTechSalesMessagesAsRead }) => { + markTechSalesMessagesAsRead(selectedRfqId, selectedVendor.vendorId || undefined).catch(error => { + console.error("메시지 읽음 처리 오류:", error); + }); + }); + + // 해당 벤더의 읽지 않은 메시지를 0으로 즉시 업데이트 + setUnreadMessages(prev => ({ + ...prev, + [selectedVendor.vendorId!]: 0 + })); + + // 전체 읽지 않은 메시지 개수 갱신 + loadUnreadMessages(); + } + }, [selectedVendor, selectedRfqId, loadUnreadMessages]); + + if (!selectedRfq) { + return ( +
+ RFQ를 선택하세요 +
+ ) + } + + // 로딩 중인 경우 + if (isLoading) { + return ( +
+ + + +
+ ) + } + + return ( +
+ {/* 테이블 또는 빈 상태 표시 */} + {details.length > 0 ? ( + +
+
+ {selectedRows.length > 0 && ( + + {selectedRows.length}개 선택됨 + + )} + {/* {totalUnreadMessages > 0 && ( + + 읽지 않은 메시지: {totalUnreadMessages}건 + + )} */} + {vendorsWithQuotations > 0 && ( + + 견적 제출: {vendorsWithQuotations}개 벤더 + + )} +
+
+ {/* 벤더 선택 버튼 */} + + + {/* RFQ 발송 버튼 */} + + + {/* 벤더 삭제 버튼 */} + + + {/* 벤더 추가 버튼 */} + +
+
+ + ) : ( +
+
+

벤더가 없습니다

+

벤더를 추가하여 RFQ를 시작하세요

+ +
+
+ )} + + {/* 다이얼로그들 */} + + + {/* 벤더 커뮤니케이션 드로어 */} + + + {/* 다중 벤더 삭제 확인 다이얼로그 */} + + + {/* 견적 히스토리 다이얼로그 */} + + + {/* 견적서 첨부파일 Sheet */} + + + {/* 벤더 contact 선택 다이얼로그 */} + row.vendorId).filter(Boolean) as number[]} + onSendRfq={handleSendRfqWithContacts} + /> + + {/* 담당자 조회 다이얼로그 */} + +
+ ) } \ No newline at end of file diff --git a/lib/techsales-rfq/table/detail-table/vendor-communication-drawer.tsx b/lib/techsales-rfq/table/detail-table/vendor-communication-drawer.tsx index 0312451d..5b60ef0f 100644 --- a/lib/techsales-rfq/table/detail-table/vendor-communication-drawer.tsx +++ b/lib/techsales-rfq/table/detail-table/vendor-communication-drawer.tsx @@ -1,619 +1,621 @@ -"use client" - -import * as React from "react" -import { useState, useEffect, useRef } from "react" -import { RfqDetailView } from "./rfq-detail-column" -import { Button } from "@/components/ui/button" -import { Textarea } from "@/components/ui/textarea" -import { Avatar, AvatarFallback } from "@/components/ui/avatar" -import { - Drawer, - DrawerClose, - DrawerContent, - DrawerDescription, - DrawerFooter, - DrawerHeader, - DrawerTitle, -} from "@/components/ui/drawer" -import { Badge } from "@/components/ui/badge" -import { toast } from "sonner" -import { - Send, - Paperclip, - DownloadCloud, - File, - FileText, - Image as ImageIcon, - AlertCircle, - X -} from "lucide-react" -import { - Dialog, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, -} from "@/components/ui/dialog" -import { formatDateTime } from "@/lib/utils" -import { formatFileSize } from "@/lib/utils" // formatFileSize 유틸리티 임포트 -import { fetchTechSalesVendorComments, markTechSalesMessagesAsRead } from "@/lib/techsales-rfq/service" - -// 타입 정의 -interface Comment { - id: number; - rfqId: number; - vendorId: number | null // null 허용으로 변경 - userId?: number | null // null 허용으로 변경 - content: string; - isVendorComment: boolean | null; // null 허용으로 변경 - createdAt: Date; - updatedAt: Date; - userName?: string | null // null 허용으로 변경 - vendorName?: string | null // null 허용으로 변경 - attachments: Attachment[]; - isRead: boolean | null // null 허용으로 변경 -} - -interface Attachment { - id: number; - fileName: string; - fileSize: number; - fileType: string | null; - filePath: string; - uploadedAt: Date; -} - -// 프롭스 정의 -interface VendorCommunicationDrawerProps { - open: boolean; - onOpenChange: (open: boolean) => void; - selectedRfq: { - id: number; - rfqCode: string | null; - status: string; - [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any - } | null; - selectedVendor: RfqDetailView | null; - onSuccess?: () => void; -} - -async function sendComment(params: { - rfqId: number; - vendorId: number; - content: string; - attachments?: File[]; -}): Promise { - try { - // 폼 데이터 생성 (파일 첨부를 위해) - const formData = new FormData(); - formData.append('rfqId', params.rfqId.toString()); - formData.append('vendorId', params.vendorId.toString()); - formData.append('content', params.content); - formData.append('isVendorComment', 'false'); - - // 첨부파일 추가 - if (params.attachments && params.attachments.length > 0) { - params.attachments.forEach((file) => { - formData.append(`attachments`, file); - }); - } - - // API 엔드포인트 구성 - techSales용으로 변경 - const url = `/api/tech-sales-rfqs/${params.rfqId}/vendors/${params.vendorId}/comments`; - - // API 호출 - const response = await fetch(url, { - method: 'POST', - body: formData, // multipart/form-data 형식 사용 - }); - - if (!response.ok) { - const errorText = await response.text(); - throw new Error(`API 요청 실패: ${response.status} ${errorText}`); - } - - // 응답 데이터 파싱 - const result = await response.json(); - - if (!result.success || !result.data) { - throw new Error(result.message || '코멘트 전송 중 오류가 발생했습니다'); - } - - return result.data.comment; - } catch (error) { - console.error('코멘트 전송 오류:', error); - throw error; - } -} - -export function VendorCommunicationDrawer({ - open, - onOpenChange, - selectedRfq, - selectedVendor, - onSuccess -}: VendorCommunicationDrawerProps) { - // 상태 관리 - const [comments, setComments] = useState([]); - const [newComment, setNewComment] = useState(""); - const [attachments, setAttachments] = useState([]); - const [isLoading, setIsLoading] = useState(false); - const [isSubmitting, setIsSubmitting] = useState(false); - const fileInputRef = useRef(null); - const messagesEndRef = useRef(null); - - // 자동 새로고침 관련 상태 - const [autoRefresh, setAutoRefresh] = useState(true); - const [lastMessageCount, setLastMessageCount] = useState(0); - const intervalRef = useRef(null); - - // 첨부파일 관련 상태 - const [previewDialogOpen, setPreviewDialogOpen] = useState(false); - const [selectedAttachment, setSelectedAttachment] = useState(null); - - // 드로어가 열릴 때 데이터 로드 - useEffect(() => { - if (open && selectedRfq && selectedVendor) { - loadComments(); - // 자동 새로고침 시작 - if (autoRefresh) { - startAutoRefresh(); - } - } else { - // 드로어가 닫히면 자동 새로고침 중지 - stopAutoRefresh(); - } - - // 컴포넌트 언마운트 시 정리 - return () => { - stopAutoRefresh(); - }; - }, [open, selectedRfq, selectedVendor, autoRefresh]); - - // 스크롤 최하단으로 이동 - useEffect(() => { - if (messagesEndRef.current) { - messagesEndRef.current.scrollIntoView({ behavior: "smooth" }); - } - }, [comments]); - - // 자동 새로고침 시작 - const startAutoRefresh = () => { - stopAutoRefresh(); // 기존 interval 정리 - intervalRef.current = setInterval(() => { - if (open && selectedRfq && selectedVendor && !isSubmitting) { - loadComments(true); // 자동 새로고침임을 표시 - } - }, 60000); // 60초마다 새로고침 - }; - - // 자동 새로고침 중지 - const stopAutoRefresh = () => { - if (intervalRef.current) { - clearInterval(intervalRef.current); - intervalRef.current = null; - } - }; - - // 자동 새로고침 토글 - const toggleAutoRefresh = () => { - setAutoRefresh(prev => { - const newValue = !prev; - if (newValue && open) { - startAutoRefresh(); - } else { - stopAutoRefresh(); - } - return newValue; - }); - }; - - // 코멘트 로드 함수 (자동 새로고침 여부 파라미터 추가) - const loadComments = async (isAutoRefresh = false) => { - if (!selectedRfq || !selectedVendor) return; - - try { - // 자동 새로고침일 때는 로딩 표시하지 않음 - if (!isAutoRefresh) { - setIsLoading(true); - } - - // Server Action을 사용하여 코멘트 데이터 가져오기 - const commentsData = await fetchTechSalesVendorComments(selectedRfq.id, selectedVendor.vendorId || 0); - - // 새 메시지가 있는지 확인 (자동 새로고침일 때만) - if (isAutoRefresh) { - const newMessageCount = commentsData.length; - if (newMessageCount > lastMessageCount && lastMessageCount > 0) { - // 새 메시지 알림 (선택사항) - toast.success(`새 메시지 ${newMessageCount - lastMessageCount}개가 도착했습니다`); - } - setLastMessageCount(newMessageCount); - } else { - setLastMessageCount(commentsData.length); - } - - setComments(commentsData as Comment[]); // 구체적인 타입으로 캐스팅 - - // Server Action을 사용하여 읽지 않은 메시지를 읽음 상태로 변경 - await markTechSalesMessagesAsRead(selectedRfq.id, selectedVendor.vendorId || 0); - } catch (error) { - console.error("코멘트 로드 오류:", error); - if (!isAutoRefresh) { // 자동 새로고침일 때는 에러 토스트 표시하지 않음 - toast.error("메시지를 불러오는 중 오류가 발생했습니다"); - } - } finally { - // 항상 로딩 상태를 해제하되, 최소 200ms는 유지하여 깜빡거림 방지 - if (!isAutoRefresh) { - setTimeout(() => { - setIsLoading(false); - }, 200); - } - } - }; - - // 파일 선택 핸들러 - const handleFileSelect = () => { - fileInputRef.current?.click(); - }; - - // 파일 변경 핸들러 - const handleFileChange = (e: React.ChangeEvent) => { - if (e.target.files && e.target.files.length > 0) { - const newFiles = Array.from(e.target.files); - setAttachments(prev => [...prev, ...newFiles]); - } - }; - - // 파일 제거 핸들러 - const handleRemoveFile = (index: number) => { - setAttachments(prev => prev.filter((_, i) => i !== index)); - }; - - console.log(newComment) - - // 코멘트 전송 핸들러 - const handleSubmitComment = async () => { - console.log("버튼 클릭1", selectedRfq,selectedVendor, selectedVendor?.vendorId ) - console.log(!newComment.trim() && attachments.length === 0) - - if (!newComment.trim() && attachments.length === 0) return; - if (!selectedRfq || !selectedVendor || !selectedVendor.vendorId) return; - - console.log("버튼 클릭") - - try { - setIsSubmitting(true); - - // API를 사용하여 새 코멘트 전송 (파일 업로드 때문에 FormData 사용) - const newCommentObj = await sendComment({ - rfqId: selectedRfq.id, - vendorId: selectedVendor.vendorId, - content: newComment, - attachments: attachments - }); - - // 상태 업데이트 - setComments(prev => [...prev, newCommentObj]); - setNewComment(""); - setAttachments([]); - - toast.success("메시지가 전송되었습니다"); - - // 데이터 새로고침 - if (onSuccess) { - onSuccess(); - } - } catch (error) { - console.error("코멘트 전송 오류:", error); - toast.error("메시지 전송 중 오류가 발생했습니다"); - } finally { - setIsSubmitting(false); - } - }; - - // 첨부파일 미리보기 - const handleAttachmentPreview = (attachment: Attachment) => { - setSelectedAttachment(attachment); - setPreviewDialogOpen(true); - }; - - // 첨부파일 다운로드 - const handleAttachmentDownload = (attachment: Attachment) => { - // TODO: 실제 다운로드 구현 - window.open(attachment.filePath, '_blank'); - }; - - // 파일 아이콘 선택 - const getFileIcon = (fileType: string) => { - if (fileType.startsWith("image/")) return ; - if (fileType.includes("pdf")) return ; - if (fileType.includes("spreadsheet") || fileType.includes("excel")) - return ; - if (fileType.includes("document") || fileType.includes("word")) - return ; - return ; - }; - - // 첨부파일 미리보기 다이얼로그 - const renderAttachmentPreviewDialog = () => { - if (!selectedAttachment) return null; - - const isImage = selectedAttachment.fileType?.startsWith("image/"); - const isPdf = selectedAttachment.fileType?.includes("pdf"); - - return ( - - - - - {getFileIcon(selectedAttachment.fileType || '')} - {selectedAttachment.fileName} - - - {formatFileSize(selectedAttachment.fileSize)} • {formatDateTime(selectedAttachment.uploadedAt, "KR")} - - - -
- {isImage ? ( - {selectedAttachment.fileName} - ) : isPdf ? ( -