(최겸)기술영업 RFQ 담당자 초대, 요구사항 반영

8 files changed, 2985 insertions, 2355 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
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<typeof Dialog> {
-  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 (
-      <Dialog {...props}>
-        {showTrigger ? (
-          <DialogTrigger asChild>
-            <Button variant="destructive" size="sm">
-              <Trash className="mr-2 size-4" aria-hidden="true" />
-              삭제
-            </Button>
-          </DialogTrigger>
-        ) : null}
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>정말로 삭제하시겠습니까?</DialogTitle>
-            <DialogDescription>
-              이 작업은 되돌릴 수 없습니다. 벤더 &quot;{detail?.vendorName}&quot;({detail?.vendorCode})의 RFQ 정보가 영구적으로 삭제됩니다.
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter className="gap-2 sm:space-x-0">
-            <DialogClose asChild>
-              <Button variant="outline">취소</Button>
-            </DialogClose>
-            <Button
-              aria-label="선택한 RFQ 벤더 정보 삭제"
-              variant="destructive"
-              onClick={onDelete}
-              disabled={isDeletePending}
-            >
-              {isDeletePending && (
-                <Loader
-                  className="mr-2 size-4 animate-spin"
-                  aria-hidden="true"
-                />
-              )}
-              삭제
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    )
-  }
-
-  return (
-    <Drawer {...props}>
-      {showTrigger ? (
-        <DrawerTrigger asChild>
-          <Button variant="destructive" size="sm">
-            <Trash className="mr-2 size-4" aria-hidden="true" />
-            삭제
-          </Button>
-        </DrawerTrigger>
-      ) : null}
-      <DrawerContent>
-        <DrawerHeader>
-          <DrawerTitle>정말로 삭제하시겠습니까?</DrawerTitle>
-          <DrawerDescription>
-            이 작업은 되돌릴 수 없습니다. 벤더 &quot;{detail?.vendorName}&quot;({detail?.vendorCode})의 RFQ 정보가 영구적으로 삭제됩니다.
-          </DrawerDescription>
-        </DrawerHeader>
-        <DrawerFooter className="gap-2 sm:space-x-0">
-          <DrawerClose asChild>
-            <Button variant="outline">취소</Button>
-          </DrawerClose>
-          <Button
-            aria-label="선택한 RFQ 벤더 정보 삭제"
-            variant="destructive"
-            onClick={onDelete}
-            disabled={isDeletePending}
-          >
-            {isDeletePending && (
-              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
-            )}
-            삭제
-          </Button>
-        </DrawerFooter>
-      </DrawerContent>
-    </Drawer>
-  )
+"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<typeof Dialog> {

+  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 (

+      <Dialog {...props}>

+        {showTrigger ? (

+          <DialogTrigger asChild>

+            <Button variant="destructive" size="sm">

+              <Trash className="mr-2 size-4" aria-hidden="true" />

+              삭제

+            </Button>

+          </DialogTrigger>

+        ) : null}

+        <DialogContent>

+          <DialogHeader>

+            <DialogTitle>정말로 삭제하시겠습니까?</DialogTitle>

+            <DialogDescription>

+              이 작업은 되돌릴 수 없습니다. 벤더 &quot;{detail?.vendorName}&quot;({detail?.vendorCode})의 RFQ 정보가 영구적으로 삭제됩니다.

+            </DialogDescription>

+          </DialogHeader>

+          <DialogFooter className="gap-2 sm:space-x-0">

+            <DialogClose asChild>

+              <Button variant="outline">취소</Button>

+            </DialogClose>

+            <Button

+              aria-label="선택한 RFQ 벤더 정보 삭제"

+              variant="destructive"

+              onClick={onDelete}

+              disabled={isDeletePending}

+            >

+              {isDeletePending && (

+                <Loader

+                  className="mr-2 size-4 animate-spin"

+                  aria-hidden="true"

+                />

+              )}

+              삭제

+            </Button>

+          </DialogFooter>

+        </DialogContent>

+      </Dialog>

+    )

+  }

+

+  return (

+    <Drawer {...props}>

+      {showTrigger ? (

+        <DrawerTrigger asChild>

+          <Button variant="destructive" size="sm">

+            <Trash className="mr-2 size-4" aria-hidden="true" />

+            삭제

+          </Button>

+        </DrawerTrigger>

+      ) : null}

+      <DrawerContent>

+        <DrawerHeader>

+          <DrawerTitle>정말로 삭제하시겠습니까?</DrawerTitle>

+          <DrawerDescription>

+            이 작업은 되돌릴 수 없습니다. 벤더 &quot;{detail?.vendorName}&quot;({detail?.vendorCode})의 RFQ 정보가 영구적으로 삭제됩니다.

+          </DrawerDescription>

+        </DrawerHeader>

+        <DrawerFooter className="gap-2 sm:space-x-0">

+          <DrawerClose asChild>

+            <Button variant="outline">취소</Button>

+          </DrawerClose>

+          <Button

+            aria-label="선택한 RFQ 벤더 정보 삭제"

+            variant="destructive"

+            onClick={onDelete}

+            disabled={isDeletePending}

+          >

+            {isDeletePending && (

+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />

+            )}

+            삭제

+          </Button>

+        </DrawerFooter>

+      </DrawerContent>

+    </Drawer>

+  )

 }
\ 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<QuotationContact[]>([])

+  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 (

+    <Dialog open={open} onOpenChange={onOpenChange}>

+      <DialogContent className="max-w-2xl max-h-[70vh] overflow-hidden flex flex-col">

+        <DialogHeader>

+          <DialogTitle className="flex items-center gap-2">

+            <Users className="size-5" />

+            RFQ 발송 담당자 목록

+          </DialogTitle>

+          <DialogDescription>

+            {vendorName && (

+              <span className="font-medium">{vendorName}</span>

+            )} 에게 발송된 RFQ의 담당자 정보입니다.

+          </DialogDescription>

+        </DialogHeader>

+        

+        <div className="flex-1 overflow-y-auto">

+          {isLoading ? (

+            <div className="space-y-3">

+              {[1, 2, 3].map((i) => (

+                <Skeleton key={i} className="h-20 w-full" />

+              ))}

+            </div>

+          ) : contacts.length === 0 ? (

+            <div className="text-center py-8 text-muted-foreground">

+              <Mail className="size-12 mx-auto mb-2 opacity-50" />

+              <p>발송된 담당자 정보가 없습니다.</p>

+              <p className="text-sm">아직 RFQ가 발송되지 않았거나 담당자 정보가 기록되지 않았습니다.</p>

+            </div>

+          ) : (

+            <div className="space-y-3">

+              {contacts.map((contact) => (

+                <div

+                  key={contact.id}

+                  className="flex items-center justify-between p-4 border rounded-lg bg-gray-50"

+                >

+                  <div className="flex items-center gap-3">

+                    <User className="size-4 text-muted-foreground" />

+                    <div>

+                      <div className="flex items-center gap-2">

+                        <span className="font-medium">{contact.contactName}</span>

+                        {contact.isPrimary && (

+                          <Badge variant="secondary" className="text-xs">

+                            주담당자

+                          </Badge>

+                        )}

+                      </div>

+                      {contact.contactPosition && (

+                        <p className="text-sm text-muted-foreground">

+                          {contact.contactPosition}

+                        </p>

+                      )}

+                      {contact.contactCountry && (

+                        <p className="text-xs text-muted-foreground">

+                          {contact.contactCountry}

+                        </p>

+                      )}

+                    </div>

+                  </div>

+                  

+                  <div className="flex flex-col items-end gap-1 text-sm">

+                    <div className="flex items-center gap-1">

+                      <Mail className="size-4 text-muted-foreground" />

+                      <span>{contact.contactEmail}</span>

+                    </div>

+                    {contact.contactPhone && (

+                      <div className="flex items-center gap-1">

+                        <Phone className="size-4 text-muted-foreground" />

+                        <span>{contact.contactPhone}</span>

+                      </div>

+                    )}

+                    <div className="text-xs text-muted-foreground">

+                      발송일: {new Date(contact.createdAt).toLocaleDateString('ko-KR')}

+                    </div>

+                  </div>

+                </div>

+              ))}

+              

+              <div className="text-center pt-4 text-sm text-muted-foreground border-t">

+                총 {contacts.length}명의 담당자에게 발송됨

+              </div>

+            </div>

+          )}

+        </div>

+

+        <div className="flex justify-end pt-4">

+          <Button variant="outline" onClick={() => onOpenChange(false)}>

+            닫기

+          </Button>

+        </div>

+      </DialogContent>

+    </Dialog>

+  )

+} 
\ 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({
           <div>

             <p className="text-sm font-medium text-muted-foreground">유효 기한</p>

             <p className="text-sm">

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

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

             </p>

           </div>

         </div>

@@ -187,8 +185,8 @@ function QuotationCard({
             <Clock className="size-3" />

             <span>

               {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"}`

               }

             </span>

           </div>

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<TData> {
-  row: Row<TData>;
-  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<TData> {
-  setRowAction: React.Dispatch<
-    React.SetStateAction<DataTableRowAction<TData> | null>
-  >;
-  unreadMessages?: Record<number, number>; // 읽지 않은 메시지 개수
-  onQuotationClick?: (quotationId: number) => void; // 견적 클릭 핸들러
-  openQuotationAttachmentsSheet?: (quotationId: number, quotationInfo: QuotationInfo) => void; // 견적서 첨부파일 sheet 열기
-}
-
-export function getRfqDetailColumns({
-  setRowAction,
-  unreadMessages = {},
-  onQuotationClick,
-  openQuotationAttachmentsSheet
-}: GetColumnsProps<RfqDetailView>): ColumnDef<RfqDetailView>[] {
-  return [
-    {
-      id: "select",
-      header: ({ table }) => (
-        <Checkbox
-          checked={
-            table.getIsAllPageRowsSelected() ||
-            (table.getIsSomePageRowsSelected() && "indeterminate")
-          }
-          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-          aria-label="모두 선택"
-        />
-      ),
-      cell: ({ row }) => {
-        const status = row.original.status;
-        const isSelectable = status ? !["Accepted", "Rejected"].includes(status) : true;
-        
-        return (
-          <Checkbox
-            checked={row.getIsSelected()}
-            onCheckedChange={(value) => row.toggleSelected(!!value)}
-            disabled={!isSelectable}
-            aria-label="행 선택"
-            className={!isSelectable ? "opacity-50 cursor-not-allowed" : ""}
-          />
-        );
-      },
-      enableSorting: false,
-      enableHiding: false,
-      size: 40,
-    },
-    {
-      accessorKey: "status",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="견적 상태" />
-      ),
-      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 (
-          <Badge variant={variant}>{status || "Draft"}</Badge>
-        );
-      },
-      meta: {
-        excelHeader: "견적 상태"
-      },
-      enableResizing: true,
-      size: 120,
-    },
-    {
-      accessorKey: "vendorCode",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="벤더 코드" />
-      ),
-      cell: ({ row }) => <div>{row.getValue("vendorCode")}</div>,
-      meta: {
-        excelHeader: "벤더 코드"
-      },
-      enableResizing: true,
-      size: 120,
-    },
-    {
-      accessorKey: "vendorName",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="벤더명" />
-      ),
-      cell: ({ row }) => {
-        const vendorName = row.getValue("vendorName") as string | null;
-        const vendorId = row.original.vendorId;
-        
-        if (!vendorName) return <div>-</div>;
-        
-        if (vendorId) {
-          return (
-            <Button
-              variant="link"
-              className="p-0 h-auto font-normal text-left justify-start hover:underline"
-              onClick={() => {
-                window.open(`/ko/evcp/tech-vendors/${vendorId}/info`, '_blank');
-              }}
-            >
-              {vendorName}
-            </Button>
-          );
-        }
-        
-        return <div>{vendorName}</div>;
-      },
-      meta: {
-        excelHeader: "벤더명"
-      },
-      enableResizing: true,
-      size: 160,
-    },
-    {
-      accessorKey: "totalPrice",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="견적 금액" />
-      ),
-      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 (
-            <Button
-              variant="link"
-              className="p-0 h-auto font-medium text-left justify-start hover:underline"
-              onClick={() => onQuotationClick(quotationId)}
-              title="견적 히스토리 보기"
-            >
-              {displayValue} {currency}
-            </Button>
-          );
-        }
-        
-        return (
-          <div className="font-medium">
-            {displayValue} {currency}
-          </div>
-        );
-      },
-      meta: {
-        excelHeader: "견적 금액"
-      },
-      enableResizing: true,
-      size: 140,
-    },
-    {
-      accessorKey: "quotationAttachments",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="첨부파일" />
-      ),
-      cell: ({ row }) => {
-        const attachments = row.original.quotationAttachments || [];
-        const attachmentCount = attachments.length;
-
-        if (attachmentCount === 0) {
-          return <div className="text-muted-foreground">-</div>;
-        }
-
-        return (
-          <Button
-            variant="ghost"
-            size="sm"
-            className="relative h-8 w-8 p-0 group"
-            onClick={() => {
-              // 견적서 첨부파일 sheet 열기
-              if (openQuotationAttachmentsSheet) {
-                const quotation = row.original;
-                openQuotationAttachmentsSheet(quotation.id, {
-                  id: quotation.id,
-                  quotationCode: quotation.quotationCode || null,
-                  vendorName: quotation.vendorName || undefined,
-                  rfqCode: quotation.rfqCode || undefined,
-                });
-              }
-            }}
-            title={
-              attachmentCount === 1 
-                ? `${attachments[0].fileName} (${(attachments[0].fileSize / 1024 / 1024).toFixed(2)} MB)` 
-                : `${attachmentCount}개의 첨부파일:\n${attachments.map(att => att.fileName).join('\n')}`
-            }
-          >
-            <Paperclip className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
-            {attachmentCount > 0 && (
-              <span className="pointer-events-none absolute -top-1 -right-1 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 text-[0.625rem] font-medium leading-none text-primary-foreground">
-                {attachmentCount}
-              </span>
-            )}
-          </Button>
-        );
-      },
-      meta: {
-        excelHeader: "첨부파일"
-      },
-      enableResizing: false,
-      size: 80,
-    },
-    {
-      accessorKey: "currency",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="통화" />
-      ),
-      cell: ({ row }) => <div>{row.getValue("currency")}</div>,
-      meta: {
-        excelHeader: "통화"
-      },
-      enableResizing: true,
-      size: 80,
-    },
-    {
-      accessorKey: "validUntil",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="유효기간" />
-      ),
-      cell: ({ cell }) => {
-        const value = cell.getValue() as Date | null;
-        return value ? formatDate(value, "KR") : "-";
-      },
-      meta: {
-        excelHeader: "유효기간"
-      },
-      enableResizing: true,
-      size: 120,
-    },
-    {
-      accessorKey: "submittedAt",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="제출일" />
-      ),
-      cell: ({ cell }) => {
-        const value = cell.getValue() as Date | null;
-        return value ? formatDate(value, "KR") : "-";
-      },
-      meta: {
-        excelHeader: "제출일"
-      },
-      enableResizing: true,
-      size: 120,
-    },
-    {
-      accessorKey: "createdByName",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="등록자" />
-      ),
-      cell: ({ row }) => <div>{row.getValue("createdByName")}</div>,
-      meta: {
-        excelHeader: "등록자"
-      },
-      enableResizing: true,
-      size: 120,
-    },
-    {
-      accessorKey: "remark",
-      header: ({ column }) => (
-        <DataTableColumnHeaderSimple column={column} title="비고" />
-      ),
-      cell: ({ row }) => <div>{row.getValue("remark") || "-"}</div>,
-      meta: {
-        excelHeader: "비고"
-      },
-      enableResizing: true,
-      size: 200,
-    },
-    {
-      id: "actions",
-      header: () => <div className="text-right">동작</div>,
-      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 (
-          <div className="text-right flex items-center justify-end gap-1">
-            {/* 커뮤니케이션 버튼 */}
-            <div className="relative">
-              <Button
-                variant="ghost"
-                size="sm"
-                className="h-8 w-8 p-0"
-                onClick={() => setRowAction({ row, type: "communicate" })}
-                title="벤더와 커뮤니케이션"
-              >
-                <MessageCircle className="h-4 w-4" />
-              </Button>
-              {unreadCount > 0 && (
-                <Badge 
-                  variant="destructive" 
-                  className="absolute -top-1 -right-1 h-4 w-4 p-0 text-xs flex items-center justify-center"
-                >
-                  {unreadCount > 9 ? '9+' : unreadCount}
-                </Badge>
-              )}
-            </div>
-            
-            {/* 컨텍스트 메뉴 */}
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-8 w-8 p-0"
-                  title="더 많은 작업"
-                >
-                  <MoreHorizontal className="h-4 w-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem
-                  onClick={() => setRowAction({ row, type: "delete" })}
-                  disabled={!isDraft}
-                  className={!isDraft ? "opacity-50 cursor-not-allowed" : "text-destructive focus:text-destructive"}
-                >
-                  <Trash2 className="mr-2 h-4 w-4" />
-                  벤더 삭제
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        );
-      },
-      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<TData> {

+  row: Row<TData>;

+  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<TData> {

+  setRowAction: React.Dispatch<

+    React.SetStateAction<DataTableRowAction<TData> | null>

+  >;

+  unreadMessages?: Record<number, number>; // 읽지 않은 메시지 개수

+  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<RfqDetailView>): ColumnDef<RfqDetailView>[] {

+  return [

+    {

+      id: "select",

+      header: ({ table }) => (

+        <Checkbox

+          checked={

+            table.getIsAllPageRowsSelected() ||

+            (table.getIsSomePageRowsSelected() && "indeterminate")

+          }

+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}

+          aria-label="모두 선택"

+        />

+      ),

+      cell: ({ row }) => {

+        const status = row.original.status;

+        const isSelectable = status ? !["Accepted", "Rejected"].includes(status) : true;

+        

+        return (

+          <Checkbox

+            checked={row.getIsSelected()}

+            onCheckedChange={(value) => row.toggleSelected(!!value)}

+            disabled={!isSelectable}

+            aria-label="행 선택"

+            className={!isSelectable ? "opacity-50 cursor-not-allowed" : ""}

+          />

+        );

+      },

+      enableSorting: false,

+      enableHiding: false,

+      size: 40,

+    },

+    {

+      accessorKey: "status",

+      header: ({ column }) => (

+        <DataTableColumnHeaderSimple column={column} title="견적 상태" />

+      ),

+      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 (

+          <Badge variant={variant}>{status || "Draft"}</Badge>

+        );

+      },

+      meta: {

+        excelHeader: "견적 상태"

+      },

+      enableResizing: true,

+      size: 120,

+    },

+    {

+      accessorKey: "vendorCode",

+      header: ({ column }) => (

+        <DataTableColumnHeaderSimple column={column} title="벤더 코드" />

+      ),

+      cell: ({ row }) => <div>{row.getValue("vendorCode")}</div>,

+      meta: {

+        excelHeader: "벤더 코드"

+      },

+      enableResizing: true,

+      size: 120,

+    },

+    {

+      accessorKey: "vendorName",

+      header: ({ column }) => (

+        <DataTableColumnHeaderSimple column={column} title="벤더명" />

+      ),

+      cell: ({ row }) => {

+        const vendorName = row.getValue("vendorName") as string | null;

+        const vendorId = row.original.vendorId;

+        

+        if (!vendorName) return <div>-</div>;

+        

+        if (vendorId) {

+          return (

+            <Button

+              variant="link"

+              className="p-0 h-auto font-normal text-left justify-start hover:underline"

+              onClick={() => {

+                window.open(`/ko/evcp/tech-vendors/${vendorId}/info`, '_blank');

+              }}

+            >

+              {vendorName}

+            </Button>

+          );

+        }

+        

+        return <div>{vendorName}</div>;

+      },

+      meta: {

+        excelHeader: "벤더명"

+      },

+      enableResizing: true,

+      size: 160,

+    },

+    {

+      accessorKey: "totalPrice",

+      header: ({ column }) => (

+        <DataTableColumnHeaderSimple column={column} title="견적 금액" />

+      ),

+      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 (

+            <Button

+              variant="link"

+              className="p-0 h-auto font-medium text-left justify-start hover:underline"

+              onClick={() => onQuotationClick(quotationId)}

+              title="견적 히스토리 보기"

+            >

+              {displayValue} {currency}

+            </Button>

+          );

+        }

+        

+        return (

+          <div className="font-medium">

+            {displayValue} {currency}

+          </div>

+        );

+      },

+      meta: {

+        excelHeader: "견적 금액"

+      },

+      enableResizing: true,

+      size: 140,

+    },

+    {

+      accessorKey: "quotationAttachments",

+      header: ({ column }) => (

+        <DataTableColumnHeaderSimple column={column} title="첨부파일" />

+      ),

+      cell: ({ row }) => {

+        const attachments = row.original.quotationAttachments || [];

+        const attachmentCount = attachments.length;

+

+        if (attachmentCount === 0) {

+          return <div className="text-muted-foreground">-</div>;

+        }

+

+        return (

+          <Button

+            variant="ghost"

+            size="sm"

+            className="relative h-8 w-8 p-0 group"

+            onClick={() => {

+              // 견적서 첨부파일 sheet 열기

+              if (openQuotationAttachmentsSheet) {

+                const quotation = row.original;

+                openQuotationAttachmentsSheet(quotation.id, {

+                  id: quotation.id,

+                  quotationCode: quotation.quotationCode || null,

+                  vendorName: quotation.vendorName || undefined,

+                  rfqCode: quotation.rfqCode || undefined,

+                });

+              }

+            }}

+            title={

+              attachmentCount === 1 

+                ? `${attachments[0].fileName} (${(attachments[0].fileSize / 1024 / 1024).toFixed(2)} MB)` 

+                : `${attachmentCount}개의 첨부파일:\n${attachments.map(att => att.fileName).join('\n')}`

+            }

+          >

+            <Paperclip className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />

+            {attachmentCount > 0 && (

+              <span className="pointer-events-none absolute -top-1 -right-1 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 text-[0.625rem] font-medium leading-none text-primary-foreground">

+                {attachmentCount}

+              </span>

+            )}

+          </Button>

+        );

+      },

+      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 (

+          <div className="w-20">

+            <TooltipProvider>

+              <Tooltip>

+                <TooltipTrigger asChild>

+                  <Button

+                    variant="ghost"

+                    size="sm"

+                    className="h-8 w-8 p-0 group"

+                    onClick={handleClick}

+                    aria-label="담당자 정보 보기"

+                  >

+                    <Users className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />

+                    <span className="sr-only">담당자 정보 보기</span>

+                  </Button>

+                </TooltipTrigger>

+                <TooltipContent>

+                  <p>RFQ 발송 담당자 보기</p>

+                </TooltipContent>

+              </Tooltip>

+            </TooltipProvider>

+          </div>

+        );

+      },

+      meta: {

+        excelHeader: "담당자"

+      },

+      enableResizing: false,

+      size: 80,

+    },

+    {

+      accessorKey: "currency",

+      header: ({ column }) => (

+        <DataTableColumnHeaderSimple column={column} title="통화" />

+      ),

+      cell: ({ row }) => <div>{row.getValue("currency")}</div>,

+      meta: {

+        excelHeader: "통화"

+      },

+      enableResizing: true,

+      size: 80,

+    },

+    {

+      accessorKey: "validUntil",

+      header: ({ column }) => (

+        <DataTableColumnHeaderSimple column={column} title="유효기간" />

+      ),

+      cell: ({ cell }) => {

+        const value = cell.getValue() as Date | null;

+        return value ? formatDate(value, "KR") : "-";

+      },

+      meta: {

+        excelHeader: "유효기간"

+      },

+      enableResizing: true,

+      size: 120,

+    },

+    {

+      accessorKey: "submittedAt",

+      header: ({ column }) => (

+        <DataTableColumnHeaderSimple column={column} title="제출일" />

+      ),

+      cell: ({ cell }) => {

+        const value = cell.getValue() as Date | null;

+        return value ? formatDate(value, "KR") : "-";

+      },

+      meta: {

+        excelHeader: "제출일"

+      },

+      enableResizing: true,

+      size: 120,

+    },

+    {

+      accessorKey: "createdByName",

+      header: ({ column }) => (

+        <DataTableColumnHeaderSimple column={column} title="등록자" />

+      ),

+      cell: ({ row }) => <div>{row.getValue("createdByName")}</div>,

+      meta: {

+        excelHeader: "등록자"

+      },

+      enableResizing: true,

+      size: 120,

+    },

+    {

+      accessorKey: "remark",

+      header: ({ column }) => (

+        <DataTableColumnHeaderSimple column={column} title="비고" />

+      ),

+      cell: ({ row }) => <div>{row.getValue("remark") || "-"}</div>,

+      meta: {

+        excelHeader: "비고"

+      },

+      enableResizing: true,

+      size: 200,

+    },

+    {

+      id: "actions",

+      header: () => <div className="text-right">동작</div>,

+      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 (

+          <div className="text-right flex items-center justify-end gap-1">

+            {/* 커뮤니케이션 버튼 */}

+            <div className="relative">

+              <Button

+                variant="ghost"

+                size="sm"

+                className="h-8 w-8 p-0"

+                onClick={() => setRowAction({ row, type: "communicate" })}

+                title="벤더와 커뮤니케이션"

+              >

+                <MessageCircle className="h-4 w-4" />

+              </Button>

+              {unreadCount > 0 && (

+                <Badge 

+                  variant="destructive" 

+                  className="absolute -top-1 -right-1 h-4 w-4 p-0 text-xs flex items-center justify-center"

+                >

+                  {unreadCount > 9 ? '9+' : unreadCount}

+                </Badge>

+              )}

+            </div>

+            

+            {/* 컨텍스트 메뉴 */}

+            <DropdownMenu>

+              <DropdownMenuTrigger asChild>

+                <Button

+                  variant="ghost"

+                  size="sm"

+                  className="h-8 w-8 p-0"

+                  title="더 많은 작업"

+                >

+                  <MoreHorizontal className="h-4 w-4" />

+                </Button>

+              </DropdownMenuTrigger>

+              <DropdownMenuContent align="end">

+                <DropdownMenuItem

+                  onClick={() => setRowAction({ row, type: "delete" })}

+                  disabled={!isDraft}

+                  className={!isDraft ? "opacity-50 cursor-not-allowed" : "text-destructive focus:text-destructive"}

+                >

+                  <Trash2 className="mr-2 h-4 w-4" />

+                  벤더 삭제

+                </DropdownMenuItem>

+              </DropdownMenuContent>

+            </DropdownMenu>

+          </div>

+        );

+      },

+      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<RfqDetailView[]>([])
-  const [vendorDialogOpen, setVendorDialogOpen] = React.useState(false)
-
-  const [isAdddialogLoading, setIsAdddialogLoading] = useState(false)
-
-  const [rowAction, setRowAction] = React.useState<DataTableRowAction<RfqDetailView> | null>(null)
-  
-  // 벤더 커뮤니케이션 상태 관리
-  const [communicationDrawerOpen, setCommunicationDrawerOpen] = useState(false)
-  const [selectedVendor, setSelectedVendor] = useState<RfqDetailView | null>(null)
-
-  // 읽지 않은 메시지 개수
-  const [unreadMessages, setUnreadMessages] = useState<Record<number, number>>({})
-
-  // 테이블 선택 상태 관리
-  const [selectedRows, setSelectedRows] = useState<RfqDetailView[]>([])
-  const [isSendingRfq, setIsSendingRfq] = useState(false)
-  const [isDeletingVendors, setIsDeletingVendors] = useState(false)
-
-  // 벤더 삭제 확인 다이얼로그 상태 추가
-  const [deleteConfirmDialogOpen, setDeleteConfirmDialogOpen] = useState(false)
-
-  // 견적 히스토리 다이얼로그 상태 관리
-  const [historyDialogOpen, setHistoryDialogOpen] = useState(false)
-  const [selectedQuotationId, setSelectedQuotationId] = useState<number | null>(null)
-
-  // 견적서 첨부파일 sheet 상태 관리
-  const [quotationAttachmentsSheetOpen, setQuotationAttachmentsSheetOpen] = useState(false)
-  const [selectedQuotationInfo, setSelectedQuotationInfo] = useState<QuotationInfo | null>(null)
-  const [quotationAttachments, setQuotationAttachments] = useState<QuotationAttachment[]>([])
-  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 (
-      <div className="flex items-center justify-center h-full text-muted-foreground">
-        RFQ를 선택하세요
-        </div>
-    )
-  }
-
-  // 로딩 중인 경우
-  if (isLoading) {
-    return (
-      <div className="p-4 space-y-4">
-        <Skeleton className="h-8 w-1/2" />
-        <Skeleton className="h-24 w-full" />
-        <Skeleton className="h-48 w-full" />
-      </div>
-    )
-  }
-
-  return (
-    <div className="h-full overflow-hidden pt-4">
-      {/* 테이블 또는 빈 상태 표시 */}
-      {details.length > 0 ? (
-        <ClientDataTable
-          columns={columns}
-          data={details}
-          advancedFilterFields={advancedFilterFields}
-          maxHeight={maxHeight}
-          onSelectedRowsChange={handleSelectedRowsChange}
-        >
-          <div className="flex justify-between items-center">
-            <div className="flex items-center gap-2 mr-2">
-              {selectedRows.length > 0 && (
-                <Badge variant="default" className="h-6">
-                  {selectedRows.length}개 선택됨
-                </Badge>
-              )}
-              {/* {totalUnreadMessages > 0 && (
-                <Badge variant="destructive" className="h-6">
-                  읽지 않은 메시지: {totalUnreadMessages}건
-                </Badge>
-              )} */}
-              {vendorsWithQuotations > 0 && (
-                <Badge variant="outline" className="h-6">
-                  견적 제출: {vendorsWithQuotations}개 벤더
-                </Badge>
-              )}
-            </div>
-            <div className="flex gap-2">
-              {/* 벤더 선택 버튼 */}
-              <Button
-                variant="default"
-                size="sm"
-                onClick={handleAcceptVendors}
-                disabled={selectedRows.length === 0 || isAcceptingVendors}
-                className="gap-2"
-              >
-                {isAcceptingVendors ? (
-                  <Loader2 className="size-4 animate-spin" aria-hidden="true" />
-                ) : (
-                  <CheckCircle className="size-4" aria-hidden="true" />
-                )}
-                <span>벤더 선택</span>
-              </Button>
-
-              {/* RFQ 발송 버튼 */}
-            <Button
-                variant="outline"
-              size="sm"
-                onClick={handleSendRfq}
-                disabled={selectedRows.length === 0 || isSendingRfq}
-                className="gap-2"
-              >
-                {isSendingRfq ? (
-                  <Loader2 className="size-4 animate-spin" aria-hidden="true" />
-                ) : (
-                  <Send className="size-4" aria-hidden="true" />
-                )}
-                <span>RFQ 발송</span>
-            </Button>
-            
-              {/* 벤더 삭제 버튼 */}
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleDeleteVendorsConfirm}
-                disabled={selectedRows.length === 0 || isDeletingVendors}
-                className="gap-2"
-              >
-                {isDeletingVendors ? (
-                  <Loader2 className="size-4 animate-spin" aria-hidden="true" />
-                ) : (
-                  <Trash2 className="size-4" aria-hidden="true" />
-                )}
-                <span>벤더 삭제</span>
-              </Button>
-            
-              {/* 벤더 추가 버튼 */}
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleAddVendor}
-                disabled={isAdddialogLoading}
-                className="gap-2"
-              >
-                {isAdddialogLoading ? (
-                  <Loader2 className="size-4 animate-spin" aria-hidden="true" />
-                ) : (
-                  <UserPlus className="size-4" aria-hidden="true" />
-                )}
-                <span>벤더 추가</span>
-              </Button>
-            </div>
-          </div>
-        </ClientDataTable>
-      ) : (
-        <div className="flex h-full items-center justify-center text-muted-foreground">
-          <div className="text-center">
-            <p className="text-lg font-medium">벤더가 없습니다</p>
-            <p className="text-sm">벤더를 추가하여 RFQ를 시작하세요</p>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleAddVendor}
-              disabled={isAdddialogLoading}
-              className="mt-4 gap-2"
-            >
-              {isAdddialogLoading ? (
-                <Loader2 className="size-4 animate-spin" aria-hidden="true" />
-              ) : (
-                <UserPlus className="size-4" aria-hidden="true" />
-              )}
-              <span>벤더 추가</span>
-          </Button>
-        </div>
-      </div>
-      )}
-
-      {/* 다이얼로그들 */}
-      <AddVendorDialog
-        open={vendorDialogOpen}
-        onOpenChange={setVendorDialogOpen}
-        selectedRfq={selectedRfq as unknown as TechSalesRfq}
-        existingVendorIds={existingVendorIds}
-        onSuccess={handleRefreshData}
-      />
-
-      {/* 벤더 커뮤니케이션 드로어 */}
-      <VendorCommunicationDrawer
-        open={communicationDrawerOpen}
-        onOpenChange={handleCommunicationDrawerChange}
-        selectedRfq={selectedRfq}
-        selectedVendor={selectedVendor}
-        onSuccess={handleRefreshData}
-      />
-
-      {/* 다중 벤더 삭제 확인 다이얼로그 */}
-      <DeleteVendorsDialog
-        open={deleteConfirmDialogOpen}
-        onOpenChange={setDeleteConfirmDialogOpen}
-        vendors={selectedRows}
-        onConfirm={executeDeleteVendors}
-        isLoading={isDeletingVendors}
-      />
-
-      {/* 견적 히스토리 다이얼로그 */}
-      <QuotationHistoryDialog
-        open={historyDialogOpen}
-        onOpenChange={setHistoryDialogOpen}
-        quotationId={selectedQuotationId}
-      />
-
-      {/* 견적서 첨부파일 Sheet */}
-      <TechSalesQuotationAttachmentsSheet
-        open={quotationAttachmentsSheetOpen}
-        onOpenChange={setQuotationAttachmentsSheetOpen}
-        quotation={selectedQuotationInfo}
-        attachments={quotationAttachments}
-        isLoading={isLoadingAttachments}
-      />
-    </div>
-  )
+"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<RfqDetailView[]>([])

+  const [vendorDialogOpen, setVendorDialogOpen] = React.useState(false)

+

+  const [isAdddialogLoading, setIsAdddialogLoading] = useState(false)

+

+  const [rowAction, setRowAction] = React.useState<DataTableRowAction<RfqDetailView> | null>(null)

+  

+  // 벤더 커뮤니케이션 상태 관리

+  const [communicationDrawerOpen, setCommunicationDrawerOpen] = useState(false)

+  const [selectedVendor, setSelectedVendor] = useState<RfqDetailView | null>(null)

+

+  // 읽지 않은 메시지 개수

+  const [unreadMessages, setUnreadMessages] = useState<Record<number, number>>({})

+

+  // 테이블 선택 상태 관리

+  const [selectedRows, setSelectedRows] = useState<RfqDetailView[]>([])

+  const [isSendingRfq, setIsSendingRfq] = useState(false)

+  const [isDeletingVendors, setIsDeletingVendors] = useState(false)

+

+  // 벤더 삭제 확인 다이얼로그 상태 추가

+  const [deleteConfirmDialogOpen, setDeleteConfirmDialogOpen] = useState(false)

+

+  // 견적 히스토리 다이얼로그 상태 관리

+  const [historyDialogOpen, setHistoryDialogOpen] = useState(false)

+  const [selectedQuotationId, setSelectedQuotationId] = useState<number | null>(null)

+

+  // 견적서 첨부파일 sheet 상태 관리

+  const [quotationAttachmentsSheetOpen, setQuotationAttachmentsSheetOpen] = useState(false)

+  const [selectedQuotationInfo, setSelectedQuotationInfo] = useState<QuotationInfo | null>(null)

+  const [quotationAttachments, setQuotationAttachments] = useState<QuotationAttachment[]>([])

+  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 (

+      <div className="flex items-center justify-center h-full text-muted-foreground">

+        RFQ를 선택하세요

+        </div>

+    )

+  }

+

+  // 로딩 중인 경우

+  if (isLoading) {

+    return (

+      <div className="p-4 space-y-4">

+        <Skeleton className="h-8 w-1/2" />

+        <Skeleton className="h-24 w-full" />

+        <Skeleton className="h-48 w-full" />

+      </div>

+    )

+  }

+

+  return (

+    <div className="h-full overflow-hidden pt-4">

+      {/* 테이블 또는 빈 상태 표시 */}

+      {details.length > 0 ? (

+        <ClientDataTable

+          columns={columns}

+          data={details}

+          advancedFilterFields={advancedFilterFields}

+          maxHeight={maxHeight}

+          onSelectedRowsChange={handleSelectedRowsChange}

+        >

+          <div className="flex justify-between items-center">

+            <div className="flex items-center gap-2 mr-2">

+              {selectedRows.length > 0 && (

+                <Badge variant="default" className="h-6">

+                  {selectedRows.length}개 선택됨

+                </Badge>

+              )}

+              {/* {totalUnreadMessages > 0 && (

+                <Badge variant="destructive" className="h-6">

+                  읽지 않은 메시지: {totalUnreadMessages}건

+                </Badge>

+              )} */}

+              {vendorsWithQuotations > 0 && (

+                <Badge variant="outline" className="h-6">

+                  견적 제출: {vendorsWithQuotations}개 벤더

+                </Badge>

+              )}

+            </div>

+            <div className="flex gap-2">

+              {/* 벤더 선택 버튼 */}

+              <Button

+                variant="default"

+                size="sm"

+                onClick={handleAcceptVendors}

+                disabled={

+                  selectedRows.length === 0 || 

+                  isAcceptingVendors || 

+                  selectedRows.length > 1 ||

+                  selectedRows.some(row => row.status !== "Submitted")

+                }

+                className="gap-2"

+              >

+                {isAcceptingVendors ? (

+                  <Loader2 className="size-4 animate-spin" aria-hidden="true" />

+                ) : (

+                  <CheckCircle className="size-4" aria-hidden="true" />

+                )}

+                <span>벤더 선택</span>

+              </Button>

+

+              {/* RFQ 발송 버튼 */}

+            <Button

+                variant="outline"

+              size="sm"

+                onClick={handleSendRfq}

+                disabled={

+                  selectedRows.length === 0 || 

+                  isSendingRfq || 

+                  selectedRows.some(row => row.status !== "Assigned")

+                }

+                className="gap-2"

+              >

+                {isSendingRfq ? (

+                  <Loader2 className="size-4 animate-spin" aria-hidden="true" />

+                ) : (

+                  <Send className="size-4" aria-hidden="true" />

+                )}

+                <span>RFQ 발송</span>

+            </Button>

+            

+              {/* 벤더 삭제 버튼 */}

+              <Button

+                variant="outline"

+                size="sm"

+                onClick={handleDeleteVendorsConfirm}

+                disabled={selectedRows.length === 0 || isDeletingVendors}

+                className="gap-2"

+              >

+                {isDeletingVendors ? (

+                  <Loader2 className="size-4 animate-spin" aria-hidden="true" />

+                ) : (

+                  <Trash2 className="size-4" aria-hidden="true" />

+                )}

+                <span>벤더 삭제</span>

+              </Button>

+            

+              {/* 벤더 추가 버튼 */}

+              <Button

+                variant="outline"

+                size="sm"

+                onClick={handleAddVendor}

+                disabled={isAdddialogLoading}

+                className="gap-2"

+              >

+                {isAdddialogLoading ? (

+                  <Loader2 className="size-4 animate-spin" aria-hidden="true" />

+                ) : (

+                  <UserPlus className="size-4" aria-hidden="true" />

+                )}

+                <span>벤더 추가</span>

+              </Button>

+            </div>

+          </div>

+        </ClientDataTable>

+      ) : (

+        <div className="flex h-full items-center justify-center text-muted-foreground">

+          <div className="text-center">

+            <p className="text-lg font-medium">벤더가 없습니다</p>

+            <p className="text-sm">벤더를 추가하여 RFQ를 시작하세요</p>

+            <Button

+              variant="outline"

+              size="sm"

+              onClick={handleAddVendor}

+              disabled={isAdddialogLoading}

+              className="mt-4 gap-2"

+            >

+              {isAdddialogLoading ? (

+                <Loader2 className="size-4 animate-spin" aria-hidden="true" />

+              ) : (

+                <UserPlus className="size-4" aria-hidden="true" />

+              )}

+              <span>벤더 추가</span>

+          </Button>

+        </div>

+      </div>

+      )}

+

+      {/* 다이얼로그들 */}

+      <AddVendorDialog

+        open={vendorDialogOpen}

+        onOpenChange={setVendorDialogOpen}

+        selectedRfq={selectedRfq as unknown as TechSalesRfq}

+        existingVendorIds={existingVendorIds}

+        onSuccess={handleRefreshData}

+      />

+

+      {/* 벤더 커뮤니케이션 드로어 */}

+      <VendorCommunicationDrawer

+        open={communicationDrawerOpen}

+        onOpenChange={handleCommunicationDrawerChange}

+        selectedRfq={selectedRfq}

+        selectedVendor={selectedVendor}

+        onSuccess={handleRefreshData}

+      />

+

+      {/* 다중 벤더 삭제 확인 다이얼로그 */}

+      <DeleteVendorDialog

+        open={deleteConfirmDialogOpen}

+        onOpenChange={setDeleteConfirmDialogOpen}

+        vendors={selectedRows}

+        onConfirm={executeDeleteVendors}

+        isLoading={isDeletingVendors}

+      />

+

+      {/* 견적 히스토리 다이얼로그 */}

+      <QuotationHistoryDialog

+        open={historyDialogOpen}

+        onOpenChange={setHistoryDialogOpen}

+        quotationId={selectedQuotationId}

+      />

+

+      {/* 견적서 첨부파일 Sheet */}

+      <TechSalesQuotationAttachmentsSheet

+        open={quotationAttachmentsSheetOpen}

+        onOpenChange={setQuotationAttachmentsSheetOpen}

+        quotation={selectedQuotationInfo}

+        attachments={quotationAttachments}

+        isLoading={isLoadingAttachments}

+      />

+

+      {/* 벤더 contact 선택 다이얼로그 */}

+      <VendorContactSelectionDialog

+        open={contactSelectionDialogOpen}

+        onOpenChange={setContactSelectionDialogOpen}

+        vendorIds={selectedRows.map(row => row.vendorId).filter(Boolean) as number[]}

+        onSendRfq={handleSendRfqWithContacts}

+      />

+

+      {/* 담당자 조회 다이얼로그 */}

+      <QuotationContactsViewDialog

+        open={contactsDialogOpen}

+        onOpenChange={setContactsDialogOpen}

+        quotationId={selectedQuotationForContacts?.id || null}

+        vendorName={selectedQuotationForContacts?.vendorName}

+      />

+    </div>

+  )

 }
\ 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<Comment> {
-  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<Comment[]>([]);
-  const [newComment, setNewComment] = useState("");
-  const [attachments, setAttachments] = useState<File[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  
-  // 자동 새로고침 관련 상태
-  const [autoRefresh, setAutoRefresh] = useState(true);
-  const [lastMessageCount, setLastMessageCount] = useState(0);
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
-  
-  // 첨부파일 관련 상태
-  const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
-  const [selectedAttachment, setSelectedAttachment] = useState<Attachment | null>(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<HTMLInputElement>) => {
-    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 <ImageIcon className="h-5 w-5 text-blue-500" />;
-    if (fileType.includes("pdf")) return <FileText className="h-5 w-5 text-red-500" />;
-    if (fileType.includes("spreadsheet") || fileType.includes("excel")) 
-      return <FileText className="h-5 w-5 text-green-500" />;
-    if (fileType.includes("document") || fileType.includes("word")) 
-      return <FileText className="h-5 w-5 text-blue-500" />;
-    return <File className="h-5 w-5 text-gray-500" />;
-  };
-  
-  // 첨부파일 미리보기 다이얼로그
-  const renderAttachmentPreviewDialog = () => {
-    if (!selectedAttachment) return null;
-    
-    const isImage = selectedAttachment.fileType?.startsWith("image/");
-    const isPdf = selectedAttachment.fileType?.includes("pdf");
-    
-    return (
-      <Dialog open={previewDialogOpen} onOpenChange={setPreviewDialogOpen}>
-        <DialogContent className="max-w-3xl">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              {getFileIcon(selectedAttachment.fileType || '')}
-              {selectedAttachment.fileName}
-            </DialogTitle>
-            <DialogDescription>
-              {formatFileSize(selectedAttachment.fileSize)} • {formatDateTime(selectedAttachment.uploadedAt, "KR")}
-            </DialogDescription>
-          </DialogHeader>
-          
-          <div className="min-h-[300px] flex items-center justify-center p-4">
-            {isImage ? (
-              <img 
-                src={selectedAttachment.filePath} 
-                alt={selectedAttachment.fileName}
-                className="max-h-[500px] max-w-full object-contain"
-              />
-            ) : isPdf ? (
-              <iframe 
-                src={`${selectedAttachment.filePath}#toolbar=0`} 
-                className="w-full h-[500px]" 
-                title={selectedAttachment.fileName}
-              />
-            ) : (
-              <div className="flex flex-col items-center gap-4 p-8">
-                {getFileIcon(selectedAttachment.fileType || '')}
-                <p className="text-muted-foreground text-sm">미리보기를 지원하지 않는 파일 형식입니다.</p>
-                <Button 
-                  variant="outline"
-                  onClick={() => handleAttachmentDownload(selectedAttachment)}
-                >
-                  <DownloadCloud className="h-4 w-4 mr-2" />
-                  다운로드
-                </Button>
-              </div>
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
-    );
-  };
-  
-  if (!selectedRfq || !selectedVendor) {
-    return null;
-  }
-  
-  return (
-    <Drawer open={open} onOpenChange={onOpenChange}>
-      <DrawerContent className="max-h-[80vh] flex flex-col">
-        <DrawerHeader className="border-b flex-shrink-0">
-          <DrawerTitle className="flex items-center gap-2">
-            <Avatar className="h-8 w-8">
-              <AvatarFallback className="bg-primary/10">
-                {selectedVendor.vendorName?.[0] || 'V'}
-              </AvatarFallback>
-            </Avatar>
-            <div>
-              <span>{selectedVendor.vendorName}</span>
-              <Badge variant="outline" className="ml-2">{selectedVendor.vendorCode}</Badge>
-            </div>
-          </DrawerTitle>
-          <DrawerDescription>
-            RFQ: {selectedRfq.rfqCode} • 프로젝트: {selectedRfq.projectName}
-          </DrawerDescription>
-        </DrawerHeader>
-        
-        <div className="flex flex-col flex-1 min-h-0">
-          {/* 메시지 목록 */}
-          <div className="flex-1 p-4 overflow-y-auto min-h-[300px]">
-            {isLoading && comments.length === 0 ? (
-              <div className="flex h-full items-center justify-center">
-                <p className="text-muted-foreground">메시지 로딩 중...</p>
-              </div>
-            ) : comments.length === 0 ? (
-              <div className="flex h-full items-center justify-center">
-                <div className="flex flex-col items-center gap-2">
-                  <AlertCircle className="h-6 w-6 text-muted-foreground" />
-                  <p className="text-muted-foreground">아직 메시지가 없습니다</p>
-                </div>
-              </div>
-            ) : (
-              <div className="space-y-4 relative">
-                {isLoading && (
-                  <div className="absolute top-0 right-0 z-10 bg-background/80 backdrop-blur-sm rounded-md px-2 py-1">
-                    <div className="flex items-center gap-2">
-                      <div className="w-2 h-2 bg-primary rounded-full animate-pulse" />
-                      <span className="text-xs text-muted-foreground">새로고침 중...</span>
-                    </div>
-                  </div>
-                )}
-                {comments.map(comment => (
-                  <div 
-                    key={comment.id} 
-                    className={`flex gap-3 ${comment.isVendorComment ? 'justify-start' : 'justify-end'}`}
-                  >
-                    {comment.isVendorComment && (
-                      <Avatar className="h-8 w-8 mt-1">
-                        <AvatarFallback className="bg-primary/10">
-                          {comment.vendorName?.[0] || 'V'}
-                        </AvatarFallback>
-                      </Avatar>
-                    )}
-                    
-                    <div className={`rounded-lg p-3 max-w-[80%] ${
-                      comment.isVendorComment 
-                        ? 'bg-muted' 
-                        : 'bg-primary text-primary-foreground'
-                    }`}>
-                      <div className="text-sm font-medium mb-1">
-                        {comment.isVendorComment ? comment.vendorName : comment.userName}
-                      </div>
-                      
-                      {comment.content && (
-                        <div className="text-sm whitespace-pre-wrap break-words">
-                          {comment.content}
-                        </div>
-                      )}
-                      
-                      {/* 첨부파일 표시 */}
-                      {comment.attachments.length > 0 && (
-                        <div className={`mt-2 pt-2 ${
-                          comment.isVendorComment 
-                            ? 'border-t border-t-border/30' 
-                            : 'border-t border-t-primary-foreground/20'
-                        }`}>
-                          {comment.attachments.map(attachment => (
-                            <div 
-                              key={attachment.id} 
-                              className="flex items-center text-xs gap-2 mb-1 p-1 rounded hover:bg-black/5 cursor-pointer"
-                              onClick={() => handleAttachmentPreview(attachment)}
-                            >
-                              {getFileIcon(attachment.fileType || '')}
-                              <span className="flex-1 truncate">{attachment.fileName}</span>
-                              <span className="text-xs opacity-70">
-                                {formatFileSize(attachment.fileSize)}
-                              </span>
-                              <Button 
-                                variant="ghost" 
-                                size="icon" 
-                                className="h-6 w-6 rounded-full"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleAttachmentDownload(attachment);
-                                }}
-                              >
-                                <DownloadCloud className="h-3 w-3" />
-                              </Button>
-                            </div>
-                          ))}
-                        </div>
-                      )}
-                      
-                      <div className="text-xs mt-1 opacity-70 flex items-center gap-1 justify-end">
-                        {formatDateTime(comment.createdAt)}
-                      </div>
-                    </div>
-                    
-                    {!comment.isVendorComment && (
-                      <Avatar className="h-8 w-8 mt-1">
-                        <AvatarFallback className="bg-primary/20">
-                          {comment.userName?.[0] || 'U'}
-                        </AvatarFallback>
-                      </Avatar>
-                    )}
-                  </div>
-                ))}
-                <div ref={messagesEndRef} />
-              </div>
-            )}
-          </div>
-          
-          {/* 선택된 첨부파일 표시 */}
-          {attachments.length > 0 && (
-            <div className="p-2 bg-muted mx-4 rounded-md mb-2 flex-shrink-0">
-              <div className="text-xs font-medium mb-1">첨부파일</div>
-              <div className="flex flex-wrap gap-2">
-                {attachments.map((file, index) => (
-                  <div key={index} className="flex items-center bg-background rounded-md p-1 pr-2 text-xs">
-                    {file.type.startsWith("image/") ? (
-                      <ImageIcon className="h-4 w-4 mr-1 text-blue-500" />
-                    ) : (
-                      <File className="h-4 w-4 mr-1 text-gray-500" />
-                    )}
-                    <span className="truncate max-w-[100px]">{file.name}</span>
-                    <Button 
-                      variant="ghost" 
-                      size="icon" 
-                      className="h-4 w-4 ml-1 p-0"
-                      onClick={() => handleRemoveFile(index)}
-                    >
-                      <X className="h-3 w-3" />
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-          
-          {/* 메시지 입력 영역 */}
-          <div className="p-4 border-t flex-shrink-0">
-            <div className="flex gap-2 items-end">
-              <div className="flex-1">
-                <Textarea
-                  placeholder="메시지를 입력하세요..."
-                  className="min-h-[80px] resize-none"
-                  value={newComment}
-                  onChange={(e) => setNewComment(e.target.value)}
-                />
-              </div>
-              <div className="flex flex-col gap-2">
-                <input
-                  type="file"
-                  ref={fileInputRef}
-                  className="hidden"
-                  multiple
-                  onChange={handleFileChange}
-                />
-                <Button 
-                  variant="outline" 
-                  size="icon"
-                  onClick={handleFileSelect}
-                  title="파일 첨부"
-                >
-                  <Paperclip className="h-4 w-4" />
-                </Button>
-                <Button 
-                  onClick={handleSubmitComment}
-                  disabled={(!newComment.trim() && attachments.length === 0) || isSubmitting}
-                >
-                  <Send className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-        
-        <DrawerFooter className="border-t flex-shrink-0">
-          <div className="flex justify-between items-center">
-            <div className="flex items-center gap-2">
-              <Button variant="outline" onClick={() => loadComments()}>
-                새로고침
-              </Button>
-              <Button
-                variant={autoRefresh ? "default" : "outline"}
-                size="sm"
-                onClick={toggleAutoRefresh}
-                className="gap-2"
-              >
-                {autoRefresh ? (
-                  <>
-                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
-                    자동 새로고침 ON
-                  </>
-                ) : (
-                  <>
-                    <div className="w-2 h-2 bg-gray-400 rounded-full" />
-                    자동 새로고침 OFF
-                  </>
-                )}
-              </Button>
-            </div>
-            <DrawerClose asChild>
-              <Button variant="outline">닫기</Button>
-            </DrawerClose>
-          </div>
-        </DrawerFooter>
-      </DrawerContent>
-      
-      {renderAttachmentPreviewDialog()}
-    </Drawer>
-  );
+"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;

+  originalFileName: 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<Comment> {

+  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<Comment[]>([]);

+  const [newComment, setNewComment] = useState("");

+  const [attachments, setAttachments] = useState<File[]>([]);

+  const [isLoading, setIsLoading] = useState(false);

+  const [isSubmitting, setIsSubmitting] = useState(false);

+  const fileInputRef = useRef<HTMLInputElement>(null);

+  const messagesEndRef = useRef<HTMLDivElement>(null);

+  

+  // 자동 새로고침 관련 상태

+  const [autoRefresh, setAutoRefresh] = useState(true);

+  const [lastMessageCount, setLastMessageCount] = useState(0);

+  const intervalRef = useRef<NodeJS.Timeout | null>(null);

+  

+  // 첨부파일 관련 상태

+  const [previewDialogOpen, setPreviewDialogOpen] = useState(false);

+  const [selectedAttachment, setSelectedAttachment] = useState<Attachment | null>(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<HTMLInputElement>) => {

+    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 <ImageIcon className="h-5 w-5 text-blue-500" />;

+    if (fileType.includes("pdf")) return <FileText className="h-5 w-5 text-red-500" />;

+    if (fileType.includes("spreadsheet") || fileType.includes("excel")) 

+      return <FileText className="h-5 w-5 text-green-500" />;

+    if (fileType.includes("document") || fileType.includes("word")) 

+      return <FileText className="h-5 w-5 text-blue-500" />;

+    return <File className="h-5 w-5 text-gray-500" />;

+  };

+  

+  // 첨부파일 미리보기 다이얼로그

+  const renderAttachmentPreviewDialog = () => {

+    if (!selectedAttachment) return null;

+    

+    const isImage = selectedAttachment.fileType?.startsWith("image/");

+    const isPdf = selectedAttachment.fileType?.includes("pdf");

+    

+    return (

+      <Dialog open={previewDialogOpen} onOpenChange={setPreviewDialogOpen}>

+        <DialogContent className="max-w-3xl">

+          <DialogHeader>

+            <DialogTitle className="flex items-center gap-2">

+              {getFileIcon(selectedAttachment.fileType || '')}

+              {selectedAttachment.originalFileName || selectedAttachment.fileName}

+            </DialogTitle>

+            <DialogDescription>

+              {formatFileSize(selectedAttachment.fileSize)} • {formatDateTime(selectedAttachment.uploadedAt, "KR")}

+            </DialogDescription>

+          </DialogHeader>

+          

+          <div className="min-h-[300px] flex items-center justify-center p-4">

+            {isImage ? (

+              // eslint-disable-next-line @next/next/no-img-element

+              <img 

+                src={selectedAttachment.filePath} 

+                alt={selectedAttachment.originalFileName || selectedAttachment.fileName}

+                className="max-h-[500px] max-w-full object-contain"

+              />

+            ) : isPdf ? (

+              <iframe 

+                src={`${selectedAttachment.filePath}#toolbar=0`} 

+                className="w-full h-[500px]" 

+                title={selectedAttachment.originalFileName || selectedAttachment.fileName}

+              />

+            ) : (

+              <div className="flex flex-col items-center gap-4 p-8">

+                {getFileIcon(selectedAttachment.fileType || '')}

+                <p className="text-muted-foreground text-sm">미리보기를 지원하지 않는 파일 형식입니다.</p>

+                <Button 

+                  variant="outline"

+                  onClick={() => handleAttachmentDownload(selectedAttachment)}

+                >

+                  <DownloadCloud className="h-4 w-4 mr-2" />

+                  다운로드

+                </Button>

+              </div>

+            )}

+          </div>

+        </DialogContent>

+      </Dialog>

+    );

+  };

+  

+  if (!selectedRfq || !selectedVendor) {

+    return null;

+  }

+  

+  return (

+    <Drawer open={open} onOpenChange={onOpenChange}>

+      <DrawerContent className="max-h-[80vh] flex flex-col">

+        <DrawerHeader className="border-b flex-shrink-0">

+          <DrawerTitle className="flex items-center gap-2">

+            <Avatar className="h-8 w-8">

+              <AvatarFallback className="bg-primary/10">

+                {selectedVendor.vendorName?.[0] || 'V'}

+              </AvatarFallback>

+            </Avatar>

+            <div>

+              <span>{selectedVendor.vendorName}</span>

+              <Badge variant="outline" className="ml-2">{selectedVendor.vendorCode}</Badge>

+            </div>

+          </DrawerTitle>

+          <DrawerDescription>

+            RFQ: {selectedRfq.rfqCode} • 프로젝트: {selectedRfq.projectName}

+          </DrawerDescription>

+        </DrawerHeader>

+        

+        <div className="flex flex-col flex-1 min-h-0">

+          {/* 메시지 목록 */}

+          <div className="flex-1 p-4 overflow-y-auto min-h-[300px]">

+            {isLoading && comments.length === 0 ? (

+              <div className="flex h-full items-center justify-center">

+                <p className="text-muted-foreground">메시지 로딩 중...</p>

+              </div>

+            ) : comments.length === 0 ? (

+              <div className="flex h-full items-center justify-center">

+                <div className="flex flex-col items-center gap-2">

+                  <AlertCircle className="h-6 w-6 text-muted-foreground" />

+                  <p className="text-muted-foreground">아직 메시지가 없습니다</p>

+                </div>

+              </div>

+            ) : (

+              <div className="space-y-4 relative">

+                {isLoading && (

+                  <div className="absolute top-0 right-0 z-10 bg-background/80 backdrop-blur-sm rounded-md px-2 py-1">

+                    <div className="flex items-center gap-2">

+                      <div className="w-2 h-2 bg-primary rounded-full animate-pulse" />

+                      <span className="text-xs text-muted-foreground">새로고침 중...</span>

+                    </div>

+                  </div>

+                )}

+                {comments.map(comment => (

+                  <div 

+                    key={comment.id} 

+                    className={`flex gap-3 ${comment.isVendorComment ? 'justify-start' : 'justify-end'}`}

+                  >

+                    {comment.isVendorComment && (

+                      <Avatar className="h-8 w-8 mt-1">

+                        <AvatarFallback className="bg-primary/10">

+                          {comment.vendorName?.[0] || 'V'}

+                        </AvatarFallback>

+                      </Avatar>

+                    )}

+                    

+                    <div className={`rounded-lg p-3 max-w-[80%] ${

+                      comment.isVendorComment 

+                        ? 'bg-muted' 

+                        : 'bg-primary text-primary-foreground'

+                    }`}>

+                      <div className="text-sm font-medium mb-1">

+                        {comment.isVendorComment ? comment.vendorName : comment.userName}

+                      </div>

+                      

+                      {comment.content && (

+                        <div className="text-sm whitespace-pre-wrap break-words">

+                          {comment.content}

+                        </div>

+                      )}

+                      

+                      {/* 첨부파일 표시 */}

+                      {comment.attachments.length > 0 && (

+                        <div className={`mt-2 pt-2 ${

+                          comment.isVendorComment 

+                            ? 'border-t border-t-border/30' 

+                            : 'border-t border-t-primary-foreground/20'

+                        }`}>

+                          {comment.attachments.map(attachment => (

+                            <div 

+                              key={attachment.id} 

+                              className="flex items-center text-xs gap-2 mb-1 p-1 rounded hover:bg-black/5 cursor-pointer"

+                              onClick={() => handleAttachmentPreview(attachment)}

+                            >

+                              {getFileIcon(attachment.fileType || '')}

+                              <span className="flex-1 truncate">{attachment.originalFileName || attachment.fileName}</span>

+                              <span className="text-xs opacity-70">

+                                {formatFileSize(attachment.fileSize)}

+                              </span>

+                              <Button 

+                                variant="ghost" 

+                                size="icon" 

+                                className="h-6 w-6 rounded-full"

+                                onClick={(e) => {

+                                  e.stopPropagation();

+                                  handleAttachmentDownload(attachment);

+                                }}

+                              >

+                                <DownloadCloud className="h-3 w-3" />

+                              </Button>

+                            </div>

+                          ))}

+                        </div>

+                      )}

+                      

+                      <div className="text-xs mt-1 opacity-70 flex items-center gap-1 justify-end">

+                        {formatDateTime(comment.createdAt)}

+                      </div>

+                    </div>

+                    

+                    {!comment.isVendorComment && (

+                      <Avatar className="h-8 w-8 mt-1">

+                        <AvatarFallback className="bg-primary/20">

+                          {comment.userName?.[0] || 'U'}

+                        </AvatarFallback>

+                      </Avatar>

+                    )}

+                  </div>

+                ))}

+                <div ref={messagesEndRef} />

+              </div>

+            )}

+          </div>

+          

+          {/* 선택된 첨부파일 표시 */}

+          {attachments.length > 0 && (

+            <div className="p-2 bg-muted mx-4 rounded-md mb-2 flex-shrink-0">

+              <div className="text-xs font-medium mb-1">첨부파일</div>

+              <div className="flex flex-wrap gap-2">

+                {attachments.map((file, index) => (

+                  <div key={index} className="flex items-center bg-background rounded-md p-1 pr-2 text-xs">

+                    {file.type.startsWith("image/") ? (

+                      <ImageIcon className="h-4 w-4 mr-1 text-blue-500" />

+                    ) : (

+                      <File className="h-4 w-4 mr-1 text-gray-500" />

+                    )}

+                    <span className="truncate max-w-[100px]">{file.name}</span>

+                    <Button 

+                      variant="ghost" 

+                      size="icon" 

+                      className="h-4 w-4 ml-1 p-0"

+                      onClick={() => handleRemoveFile(index)}

+                    >

+                      <X className="h-3 w-3" />

+                    </Button>

+                  </div>

+                ))}

+              </div>

+            </div>

+          )}

+          

+          {/* 메시지 입력 영역 */}

+          <div className="p-4 border-t flex-shrink-0">

+            <div className="flex gap-2 items-end">

+              <div className="flex-1">

+                <Textarea

+                  placeholder="메시지를 입력하세요..."

+                  className="min-h-[80px] resize-none"

+                  value={newComment}

+                  onChange={(e) => setNewComment(e.target.value)}

+                />

+              </div>

+              <div className="flex flex-col gap-2">

+                <input

+                  type="file"

+                  ref={fileInputRef}

+                  className="hidden"

+                  multiple

+                  onChange={handleFileChange}

+                />

+                <Button 

+                  variant="outline" 

+                  size="icon"

+                  onClick={handleFileSelect}

+                  title="파일 첨부"

+                >

+                  <Paperclip className="h-4 w-4" />

+                </Button>

+                <Button 

+                  onClick={handleSubmitComment}

+                  disabled={(!newComment.trim() && attachments.length === 0) || isSubmitting}

+                >

+                  <Send className="h-4 w-4" />

+                </Button>

+              </div>

+            </div>

+          </div>

+        </div>

+        

+        <DrawerFooter className="border-t flex-shrink-0">

+          <div className="flex justify-between items-center">

+            <div className="flex items-center gap-2">

+              <Button variant="outline" onClick={() => loadComments()}>

+                새로고침

+              </Button>

+              <Button

+                variant={autoRefresh ? "default" : "outline"}

+                size="sm"

+                onClick={toggleAutoRefresh}

+                className="gap-2"

+              >

+                {autoRefresh ? (

+                  <>

+                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />

+                    자동 새로고침 ON

+                  </>

+                ) : (

+                  <>

+                    <div className="w-2 h-2 bg-gray-400 rounded-full" />

+                    자동 새로고침 OFF

+                  </>

+                )}

+              </Button>

+            </div>

+            <DrawerClose asChild>

+              <Button variant="outline">닫기</Button>

+            </DrawerClose>

+          </div>

+        </DrawerFooter>

+      </DrawerContent>

+      

+      {renderAttachmentPreviewDialog()}

+    </Drawer>

+  );

 }
\ No newline at end of file
diff --git a/lib/techsales-rfq/table/detail-table/vendor-contact-selection-dialog.tsx b/lib/techsales-rfq/table/detail-table/vendor-contact-selection-dialog.tsx
new file mode 100644
index 00000000..aa6f6c2f
--- /dev/null
+++ b/lib/techsales-rfq/table/detail-table/vendor-contact-selection-dialog.tsx
@@ -0,0 +1,343 @@
+"use client"

+

+import * as React from "react"

+import { useState, useEffect, useCallback } from "react"

+import {

+  Dialog,

+  DialogContent,

+  DialogDescription,

+  DialogFooter,

+  DialogHeader,

+  DialogTitle,

+} from "@/components/ui/dialog"

+import { Button } from "@/components/ui/button"

+import { Checkbox } from "@/components/ui/checkbox"

+import { Badge } from "@/components/ui/badge"

+import { Skeleton } from "@/components/ui/skeleton"

+import { Mail, Phone, User, Send, Loader2 } from "lucide-react"

+import { toast } from "sonner"

+

+interface VendorContact {

+  id: number

+  contactName: string

+  contactPosition: string | null

+  contactEmail: string

+  contactPhone: string | null

+  isPrimary: boolean

+}

+

+interface VendorWithContacts {

+  vendor: {

+    id: number

+    vendorName: string

+    vendorCode: string | null

+  }

+  contacts: VendorContact[]

+}

+

+interface SelectedContact {

+  vendorId: number

+  contactId: number

+  contactEmail: string

+  contactName: string

+}

+

+interface VendorContactSelectionDialogProps {

+  open: boolean

+  onOpenChange: (open: boolean) => void

+  vendorIds: number[]

+  onSendRfq: (selectedContacts: SelectedContact[]) => Promise<void>

+}

+

+export function VendorContactSelectionDialog({

+  open,

+  onOpenChange,

+  vendorIds,

+  onSendRfq

+}: VendorContactSelectionDialogProps) {

+  const [vendorsWithContacts, setVendorsWithContacts] = useState<Record<number, VendorWithContacts>>({})

+  const [selectedContacts, setSelectedContacts] = useState<SelectedContact[]>([])

+  const [isLoading, setIsLoading] = useState(false)

+  const [isSending, setIsSending] = useState(false)

+

+  // 벤더 contact 정보 조회

+  useEffect(() => {

+    if (open && vendorIds.length > 0) {

+      loadVendorsContacts()

+    }

+  }, [open, vendorIds])

+

+  // 다이얼로그 닫힐 때 상태 초기화

+  useEffect(() => {

+    if (!open) {

+      setVendorsWithContacts({})

+      setSelectedContacts([])

+      setIsLoading(false)

+    }

+  }, [open])

+

+  const loadVendorsContacts = useCallback(async () => {

+    try {

+      setIsLoading(true)

+      const { getTechVendorsContacts } = await import("@/lib/techsales-rfq/service")

+      

+      const result = await getTechVendorsContacts(vendorIds)

+      

+      if (result.error) {

+        toast.error(result.error)

+        return

+      }

+      

+      setVendorsWithContacts(result.data)

+      

+      // 기본 선택: 모든 contact 선택

+      const defaultSelected: SelectedContact[] = []

+      Object.values(result.data).forEach(vendorData => {

+        vendorData.contacts.forEach(contact => {

+          defaultSelected.push({

+            vendorId: vendorData.vendor.id,

+            contactId: contact.id,

+            contactEmail: contact.contactEmail,

+            contactName: contact.contactName

+          })

+        })

+      })

+      setSelectedContacts(defaultSelected)

+      

+    } catch (error) {

+      console.error("벤더 contact 조회 오류:", error)

+      toast.error("벤더 연락처를 불러오는 중 오류가 발생했습니다")

+    } finally {

+      setIsLoading(false)

+    }

+  }, [vendorIds])

+

+  // contact 선택/해제 핸들러

+  const handleContactToggle = (vendorId: number, contact: VendorContact) => {

+    const isSelected = selectedContacts.some(

+      sc => sc.vendorId === vendorId && sc.contactId === contact.id

+    )

+

+    if (isSelected) {

+      // 선택 해제

+      setSelectedContacts(prev => 

+        prev.filter(sc => !(sc.vendorId === vendorId && sc.contactId === contact.id))

+      )

+    } else {

+      // 선택 추가

+      setSelectedContacts(prev => [

+        ...prev,

+        {

+          vendorId,

+          contactId: contact.id,

+          contactEmail: contact.contactEmail,

+          contactName: contact.contactName

+        }

+      ])

+    }

+  }

+

+  // 벤더별 전체 선택/해제

+  const handleVendorToggle = (vendorId: number, vendorData: VendorWithContacts) => {

+    const vendorContacts = vendorData.contacts

+    const selectedVendorContacts = selectedContacts.filter(sc => sc.vendorId === vendorId)

+    

+    if (selectedVendorContacts.length === vendorContacts.length) {

+      // 전체 해제

+      setSelectedContacts(prev => prev.filter(sc => sc.vendorId !== vendorId))

+    } else {

+      // 전체 선택

+      const newSelected = vendorContacts.map(contact => ({

+        vendorId,

+        contactId: contact.id,

+        contactEmail: contact.contactEmail,

+        contactName: contact.contactName

+      }))

+      

+      setSelectedContacts(prev => [

+        ...prev.filter(sc => sc.vendorId !== vendorId),

+        ...newSelected

+      ])

+    }

+  }

+

+  // RFQ 발송 핸들러

+  const handleSendRfq = async () => {

+    if (selectedContacts.length === 0) {

+      toast.warning("발송할 연락처를 선택해주세요.")

+      return

+    }

+

+    try {

+      setIsSending(true)

+      await onSendRfq(selectedContacts)

+      onOpenChange(false)

+    } catch (error) {

+      console.error("RFQ 발송 오류:", error)

+    } finally {

+      setIsSending(false)

+    }

+  }

+

+  // 선택된 contact가 있는지 확인

+  const isContactSelected = (vendorId: number, contactId: number) => {

+    return selectedContacts.some(sc => sc.vendorId === vendorId && sc.contactId === contactId)

+  }

+

+  // 벤더별 선택 상태 확인

+  const getVendorSelectionState = (vendorId: number, vendorData: VendorWithContacts) => {

+    const selectedVendorContacts = selectedContacts.filter(sc => sc.vendorId === vendorId)

+    const totalContacts = vendorData.contacts.length

+    

+    if (selectedVendorContacts.length === 0) return "none"

+    if (selectedVendorContacts.length === totalContacts) return "all"

+    return "partial"

+  }

+

+  return (

+    <Dialog open={open} onOpenChange={onOpenChange}>

+      <DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden flex flex-col">

+        <DialogHeader>

+          <DialogTitle>RFQ 발송 대상 선택</DialogTitle>

+          <DialogDescription>

+            각 벤더의 연락처를 선택하여 RFQ를 발송하세요. 기본적으로 모든 연락처가 선택되어 있습니다.

+          </DialogDescription>

+        </DialogHeader>

+        

+        <div className="flex-1 overflow-y-auto space-y-4">

+          {isLoading ? (

+            <div className="space-y-4">

+              {[1, 2, 3].map((i) => (

+                <div key={i} className="space-y-3">

+                  <Skeleton className="h-6 w-40" />

+                  <div className="space-y-2 pl-4">

+                    <Skeleton className="h-16 w-full" />

+                    <Skeleton className="h-16 w-full" />

+                  </div>

+                </div>

+              ))}

+            </div>

+          ) : Object.keys(vendorsWithContacts).length === 0 ? (

+            <div className="text-center py-8 text-muted-foreground">

+              <Mail className="size-12 mx-auto mb-2 opacity-50" />

+              <p>연락처 정보가 없습니다.</p>

+              <p className="text-sm">벤더의 연락처를 먼저 등록해주세요.</p>

+            </div>

+          ) : (

+            Object.entries(vendorsWithContacts).map(([vendorId, vendorData]) => {

+              const selectionState = getVendorSelectionState(Number(vendorId), vendorData)

+              

+              return (

+                <div key={vendorId} className="border rounded-lg p-4">

+                  <div className="flex items-center justify-between mb-3">

+                    <div className="flex items-center gap-3">

+                      <Checkbox

+                        checked={selectionState === "all"}

+                        ref={(el) => {

+                          if (el) {

+                            const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement

+                            if (input) {

+                              input.indeterminate = selectionState === "partial"

+                            }

+                          }

+                        }}

+                        onCheckedChange={() => handleVendorToggle(Number(vendorId), vendorData)}

+                      />

+                      <div>

+                        <h3 className="font-medium">{vendorData.vendor.vendorName}</h3>

+                        {vendorData.vendor.vendorCode && (

+                          <p className="text-sm text-muted-foreground">

+                            코드: {vendorData.vendor.vendorCode}

+                          </p>

+                        )}

+                      </div>

+                    </div>

+                    <Badge variant="outline">

+                      {selectedContacts.filter(sc => sc.vendorId === Number(vendorId)).length} / {vendorData.contacts.length} 선택됨

+                    </Badge>

+                  </div>

+                  

+                  <div className="space-y-2 pl-6">

+                    {vendorData.contacts.map((contact) => (

+                      <div

+                        key={contact.id}

+                        className={`flex items-center justify-between p-3 rounded border ${

+                          isContactSelected(Number(vendorId), contact.id)

+                            ? "bg-blue-50 border-blue-200"

+                            : "bg-gray-50 border-gray-200"

+                        }`}

+                      >

+                        <div className="flex items-center gap-3">

+                          <Checkbox

+                            checked={isContactSelected(Number(vendorId), contact.id)}

+                            onCheckedChange={() => handleContactToggle(Number(vendorId), contact)}

+                          />

+                          <div className="flex items-center gap-2">

+                            <User className="size-4 text-muted-foreground" />

+                            <div>

+                              <div className="flex items-center gap-2">

+                                <span className="font-medium">{contact.contactName}</span>

+                              </div>

+                              {contact.contactPosition && (

+                                <p className="text-sm text-muted-foreground">

+                                  {contact.contactPosition}

+                                </p>

+                              )}

+                            </div>

+                          </div>

+                        </div>

+                        

+                        <div className="flex items-center gap-4 text-sm">

+                          <div className="flex items-center gap-1">

+                            <Mail className="size-4 text-muted-foreground" />

+                            <span>{contact.contactEmail}</span>

+                          </div>

+                          {contact.contactPhone && (

+                            <div className="flex items-center gap-1">

+                              <Phone className="size-4 text-muted-foreground" />

+                              <span>{contact.contactPhone}</span>

+                            </div>

+                          )}

+                        </div>

+                      </div>

+                    ))}

+                  </div>

+                </div>

+              )

+            })

+          )}

+        </div>

+

+        <DialogFooter>

+          <div className="flex items-center justify-between w-full">

+            <div className="text-sm text-muted-foreground">

+              총 {selectedContacts.length}명의 연락처가 선택됨

+            </div>

+            <div className="flex gap-2">

+              <Button variant="outline" onClick={() => onOpenChange(false)}>

+                취소

+              </Button>

+              <Button

+                onClick={handleSendRfq}

+                disabled={selectedContacts.length === 0 || isSending}

+                className="flex items-center gap-2"

+              >

+                {isSending ? (

+                  <>

+                    <Loader2 className="size-4 animate-spin" />

+                    발송 중...

+                  </>

+                ) : (

+                  <>

+                    <Send className="size-4" />

+                    RFQ 발송 ({selectedContacts.length}명)

+                  </>

+                )}

+              </Button>

+            </div>

+          </div>

+        </DialogFooter>

+      </DialogContent>

+    </Dialog>

+  )

+} 
\ No newline at end of file