(최겸) 기술영업 아이템별 담당자 매핑 dialog 추가개발 건

3 files changed, 855 insertions, 0 deletions

diff --git a/lib/contact-possible-items/service-add-mapping.ts b/lib/contact-possible-items/service-add-mapping.ts
new file mode 100644
index 00000000..39215549
--- /dev/null
+++ b/lib/contact-possible-items/service-add-mapping.ts
@@ -0,0 +1,312 @@
+"use server"
+
+import { revalidatePath } from 'next/cache'
+import { eq, and, or, ilike, inArray } from 'drizzle-orm'
+import db from '@/db/db'
+import { techSalesContactPossibleItems } from "@/db/schema/techSales"
+import { techVendors, techVendorContacts, techVendorPossibleItems } from "@/db/schema/techVendors"
+import { itemShipbuilding, itemOffshoreTop, itemOffshoreHull } from "@/db/schema/items"
+
+/**
+ * 조선 아이템 검색
+ */
+export async function searchShipbuildingItems(search: string = "") {
+  try {
+    const where = search
+      ? or(
+          ilike(itemShipbuilding.itemCode, `%${search}%`),
+          ilike(itemShipbuilding.itemList, `%${search}%`),
+          ilike(itemShipbuilding.workType, `%${search}%`),
+          ilike(itemShipbuilding.shipTypes, `%${search}%`)
+        )
+      : undefined
+
+    const items = await db
+      .select({
+        id: itemShipbuilding.id,
+        itemCode: itemShipbuilding.itemCode,
+        itemList: itemShipbuilding.itemList,
+        workType: itemShipbuilding.workType,
+        shipTypes: itemShipbuilding.shipTypes,
+      })
+      .from(itemShipbuilding)
+      .where(where)
+      .limit(100)
+
+    return { data: items, error: null }
+  } catch (err) {
+    console.error("조선 아이템 검색 오류:", err)
+    return { data: [], error: "조선 아이템 검색에 실패했습니다." }
+  }
+}
+
+/**
+ * 해양 TOP 아이템 검색
+ */
+export async function searchOffshoreTopItems(search: string = "") {
+  try {
+    const where = search
+      ? or(
+          ilike(itemOffshoreTop.itemCode, `%${search}%`),
+          ilike(itemOffshoreTop.itemList, `%${search}%`),
+          ilike(itemOffshoreTop.workType, `%${search}%`)
+        )
+      : undefined
+
+    const items = await db
+      .select({
+        id: itemOffshoreTop.id,
+        itemCode: itemOffshoreTop.itemCode,
+        itemList: itemOffshoreTop.itemList,
+        workType: itemOffshoreTop.workType,
+        subItemList: itemOffshoreTop.subItemList,
+      })
+      .from(itemOffshoreTop)
+      .where(where)
+      .limit(100)
+
+    return { data: items, error: null }
+  } catch (err) {
+    console.error("해양 TOP 아이템 검색 오류:", err)
+    return { data: [], error: "해양 TOP 아이템 검색에 실패했습니다." }
+  }
+}
+
+/**
+ * 해양 HULL 아이템 검색
+ */
+export async function searchOffshoreHullItems(search: string = "") {
+  try {
+    const where = search
+      ? or(
+          ilike(itemOffshoreHull.itemCode, `%${search}%`),
+          ilike(itemOffshoreHull.itemList, `%${search}%`),
+          ilike(itemOffshoreHull.workType, `%${search}%`)
+        )
+      : undefined
+
+    const items = await db
+      .select({
+        id: itemOffshoreHull.id,
+        itemCode: itemOffshoreHull.itemCode,
+        itemList: itemOffshoreHull.itemList,
+        workType: itemOffshoreHull.workType,
+        subItemList: itemOffshoreHull.subItemList,
+      })
+      .from(itemOffshoreHull)
+      .where(where)
+      .limit(100)
+
+    return { data: items, error: null }
+  } catch (err) {
+    console.error("해양 HULL 아이템 검색 오류:", err)
+    return { data: [], error: "해양 HULL 아이템 검색에 실패했습니다." }
+  }
+}
+
+/**
+ * 기술영업 벤더 검색
+ */
+export async function searchTechVendors(search: string = "") {
+  try {
+    const where = search
+      ? or(
+          ilike(techVendors.vendorCode, `%${search}%`),
+          ilike(techVendors.vendorName, `%${search}%`),
+          ilike(techVendors.email, `%${search}%`)
+        )
+      : undefined
+
+    const vendors = await db
+      .select({
+        id: techVendors.id,
+        vendorCode: techVendors.vendorCode,
+        vendorName: techVendors.vendorName,
+        email: techVendors.email,
+        techVendorType: techVendors.techVendorType,
+        status: techVendors.status,
+      })
+      .from(techVendors)
+      .where(where)
+      .limit(100)
+
+    return { data: vendors, error: null }
+  } catch (err) {
+    console.error("벤더 검색 오류:", err)
+    return { data: [], error: "벤더 검색에 실패했습니다." }
+  }
+}
+
+/**
+ * 여러 벤더의 담당자 조회
+ */
+export async function getTechVendorsContactsForMapping(vendorIds: number[]) {
+  try {
+    if (vendorIds.length === 0) {
+      return { data: {}, error: null }
+    }
+
+    const contactsWithVendor = await db
+      .select({
+        contactId: techVendorContacts.id,
+        contactName: techVendorContacts.contactName,
+        contactPosition: techVendorContacts.contactPosition,
+        contactTitle: techVendorContacts.contactTitle,
+        contactEmail: techVendorContacts.contactEmail,
+        contactPhone: techVendorContacts.contactPhone,
+        isPrimary: techVendorContacts.isPrimary,
+        vendorId: techVendorContacts.vendorId,
+        vendorName: techVendors.vendorName,
+        vendorCode: techVendors.vendorCode
+      })
+      .from(techVendorContacts)
+      .leftJoin(techVendors, eq(techVendorContacts.vendorId, techVendors.id))
+      .where(inArray(techVendorContacts.vendorId, vendorIds))
+
+    // 벤더별로 그룹화
+    const contactsByVendor = contactsWithVendor.reduce((acc, row) => {
+      const vendorId = row.vendorId
+      if (!acc[vendorId]) {
+        acc[vendorId] = {
+          vendor: {
+            id: vendorId,
+            vendorName: row.vendorName || '',
+            vendorCode: row.vendorCode || ''
+          },
+          contacts: []
+        }
+      }
+      acc[vendorId].contacts.push({
+        id: row.contactId,
+        contactName: row.contactName,
+        contactPosition: row.contactPosition,
+        contactTitle: row.contactTitle,
+        contactEmail: row.contactEmail,
+        contactPhone: row.contactPhone,
+        isPrimary: row.isPrimary
+      })
+      return acc
+    }, {} as Record<number, {
+      vendor: {
+        id: number
+        vendorName: string
+        vendorCode: string | null
+      }
+      contacts: Array<{
+        id: number
+        contactName: string
+        contactPosition: string | null
+        contactTitle: string | null
+        contactEmail: string
+        contactPhone: string | null
+        isPrimary: boolean
+      }>
+    }>)
+
+    return { data: contactsByVendor, error: null }
+  } catch (err) {
+    console.error("벤더 담당자 조회 오류:", err)
+    return { data: {}, error: "벤더 담당자 조회에 실패했습니다." }
+  }
+}
+
+/**
+ * 담당자-아이템 매핑 추가
+ * 선택된 아이템과 벤더를 기준으로 possible-items 테이블에 정보가 있으면 해당 id 사용,
+ * 없으면 possible-items 테이블에 insert 후, insert한 id를 가지고 담당자와 연결
+ */
+interface AddContactItemMappingInput {
+  items: {
+    id: number
+    type: 'SHIP' | 'TOP' | 'HULL'
+  }[]
+  vendors: number[]
+  contactsByVendor: Record<number, number[]> // vendorId -> contactIds[]
+}
+
+export async function addContactItemMapping(input: AddContactItemMappingInput) {
+  try {
+    return await db.transaction(async (tx) => {
+      const insertedMappings: Array<typeof techSalesContactPossibleItems.$inferSelect> = []
+
+      // 각 아이템 x 벤더 조합에 대해 처리
+      for (const item of input.items) {
+        for (const vendorId of input.vendors) {
+          const contactIds = input.contactsByVendor[vendorId] || []
+          if (contactIds.length === 0) continue
+
+          // techVendorPossibleItems에서 기존 항목 찾기
+          let vendorPossibleItemId: number | null = null
+
+          const whereCondition = and(
+            eq(techVendorPossibleItems.vendorId, vendorId),
+            item.type === 'SHIP' 
+              ? eq(techVendorPossibleItems.shipbuildingItemId, item.id)
+              : item.type === 'TOP'
+              ? eq(techVendorPossibleItems.offshoreTopItemId, item.id)
+              : eq(techVendorPossibleItems.offshoreHullItemId, item.id)
+          )
+
+          const existingPossibleItem = await tx
+            .select({ id: techVendorPossibleItems.id })
+            .from(techVendorPossibleItems)
+            .where(whereCondition)
+            .limit(1)
+
+          if (existingPossibleItem.length > 0) {
+            vendorPossibleItemId = existingPossibleItem[0].id
+          } else {
+            // 없으면 새로 생성
+            const newPossibleItem = await tx
+              .insert(techVendorPossibleItems)
+              .values({
+                vendorId,
+                shipbuildingItemId: item.type === 'SHIP' ? item.id : null,
+                offshoreTopItemId: item.type === 'TOP' ? item.id : null,
+                offshoreHullItemId: item.type === 'HULL' ? item.id : null,
+              })
+              .returning({ id: techVendorPossibleItems.id })
+
+            vendorPossibleItemId = newPossibleItem[0].id
+          }
+
+          // 각 담당자에 대해 techSalesContactPossibleItems에 추가
+          for (const contactId of contactIds) {
+            // 중복 체크
+            const existing = await tx
+              .select({ id: techSalesContactPossibleItems.id })
+              .from(techSalesContactPossibleItems)
+              .where(
+                and(
+                  eq(techSalesContactPossibleItems.contactId, contactId),
+                  eq(techSalesContactPossibleItems.vendorPossibleItemId, vendorPossibleItemId)
+                )
+              )
+              .limit(1)
+
+            if (existing.length === 0) {
+              const inserted = await tx
+                .insert(techSalesContactPossibleItems)
+                .values({
+                  contactId,
+                  vendorPossibleItemId,
+                })
+                .returning()
+
+              if (inserted.length > 0) {
+                insertedMappings.push(inserted[0])
+              }
+            }
+          }
+        }
+      }
+
+      revalidatePath("/evcp/contact-possible-items")
+      return { data: insertedMappings, error: null }
+    })
+  } catch (err) {
+    console.error("담당자-아이템 매핑 추가 오류:", err)
+    return { data: null, error: "담당자-아이템 매핑 추가에 실패했습니다." }
+  }
+}
+
diff --git a/lib/contact-possible-items/table/add-contact-item-mapping-dialog.tsx b/lib/contact-possible-items/table/add-contact-item-mapping-dialog.tsx
new file mode 100644
index 00000000..e1f76bba
--- /dev/null
+++ b/lib/contact-possible-items/table/add-contact-item-mapping-dialog.tsx
@@ -0,0 +1,541 @@
+"use client"
+
+import * as React from "react"
+import { Search, Loader2, CheckSquare, Square, ChevronDown, ChevronRight } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
+import { toast } from "sonner"
+import {
+  searchShipbuildingItems,
+  searchOffshoreTopItems,
+  searchOffshoreHullItems,
+  searchTechVendors,
+  getTechVendorsContactsForMapping,
+  addContactItemMapping,
+} from "../service-add-mapping"
+
+interface AddContactItemMappingDialogProps {
+  trigger?: React.ReactNode
+}
+
+interface Item {
+  id: number
+  itemCode: string
+  itemList: string
+  workType: string | null
+  shipTypes?: string | null
+  subItemList?: string | null
+}
+
+interface Vendor {
+  id: number
+  vendorCode: string | null
+  vendorName: string
+  email: string | null
+  techVendorType: string
+  status: string
+}
+
+interface Contact {
+  id: number
+  contactName: string
+  contactPosition: string | null
+  contactTitle: string | null
+  contactEmail: string
+  contactPhone: string | null
+  isPrimary: boolean
+}
+
+export function AddContactItemMappingDialog({ trigger }: AddContactItemMappingDialogProps) {
+  const [open, setOpen] = React.useState(false)
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+
+  const [selectedItemType, setSelectedItemType] = React.useState<'ship' | 'top' | 'hull'>('ship')
+  const [itemSearch, setItemSearch] = React.useState("")
+  const [items, setItems] = React.useState<Item[]>([])
+  const [selectedItems, setSelectedItems] = React.useState<Set<number>>(new Set())
+  const [isLoadingItems, setIsLoadingItems] = React.useState(false)
+  
+  // Section 2: 벤더 선택
+  const [vendorSearch, setVendorSearch] = React.useState("")
+  const [vendors, setVendors] = React.useState<Vendor[]>([])
+  const [selectedVendors, setSelectedVendors] = React.useState<Set<number>>(new Set())
+  const [isLoadingVendors, setIsLoadingVendors] = React.useState(false)
+
+  // Section 3: 벤더별 담당자 선택
+  const [vendorContacts, setVendorContacts] = React.useState<Record<number, Contact[]>>({})
+  const [selectedContacts, setSelectedContacts] = React.useState<Record<number, Set<number>>>({})
+  const [expandedVendors, setExpandedVendors] = React.useState<Set<number>>(new Set())
+  const [isLoadingContacts, setIsLoadingContacts] = React.useState(false)
+
+  // 아이템 타입 변경 시 아이템 로드
+  React.useEffect(() => {
+    loadItems()
+  }, [selectedItemType, itemSearch])
+
+  // 벤더 검색 디바운싱
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      loadVendors()
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [vendorSearch])
+
+  // 선택된 벤더 변경 시 담당자 로드
+  React.useEffect(() => {
+    if (selectedVendors.size > 0) {
+      loadContacts()
+    }
+  }, [selectedVendors])
+
+  const loadItems = async () => {
+    setIsLoadingItems(true)
+    try {
+      let result
+      if (selectedItemType === 'ship') {
+        result = await searchShipbuildingItems(itemSearch)
+      } else if (selectedItemType === 'top') {
+        result = await searchOffshoreTopItems(itemSearch)
+      } else {
+        result = await searchOffshoreHullItems(itemSearch)
+      }
+  
+      setItems(result.data || [])
+    } catch (err) {
+      toast.error("아이템 로드 실패")
+    } finally {
+      setIsLoadingItems(false)
+    }
+  }
+
+  const loadVendors = async () => {
+    setIsLoadingVendors(true)
+    try {
+      const result = await searchTechVendors(vendorSearch)
+      setVendors(result.data || [])
+    } catch (err) {
+      toast.error("벤더 로드 실패")
+    } finally {
+      setIsLoadingVendors(false)
+    }
+  }
+
+  const loadContacts = async () => {
+    setIsLoadingContacts(true)
+    try {
+      const vendorIds = Array.from(selectedVendors)
+      const result = await getTechVendorsContactsForMapping(vendorIds)
+      
+      if (result.data) {
+        const contacts: Record<number, Contact[]> = {}
+        Object.entries(result.data).forEach(([vendorIdStr, vendorData]) => {
+          const vendorId = parseInt(vendorIdStr)
+          contacts[vendorId] = vendorData.contacts
+        })
+        setVendorContacts(contacts)
+      }
+    } catch (err) {
+      toast.error("담당자 로드 실패")
+    } finally {
+      setIsLoadingContacts(false)
+    }
+  }
+  const handleItemTypeChange = (type: 'ship' | 'top' | 'hull') => {
+    setSelectedItemType(type)
+    setSelectedItems(new Set()) // 타입 변경 시 선택 초기화
+    setItemSearch("") // 검색어도 초기화
+  }
+  
+  const handleItemSelect = (itemId: number) => {
+    setSelectedItems(prev => {
+      const newSet = new Set(prev)
+      if (newSet.has(itemId)) {
+        newSet.delete(itemId)
+      } else {
+        newSet.add(itemId)
+      }
+      return newSet
+    })
+  }
+
+  const handleVendorSelect = (vendorId: number) => {
+    setSelectedVendors(prev => {
+      const newSet = new Set(prev)
+      if (newSet.has(vendorId)) {
+        newSet.delete(vendorId)
+        // 벤더 선택 해제 시 해당 벤더의 담당자 선택도 초기화
+        setSelectedContacts(prev => {
+          const newContacts = { ...prev }
+          delete newContacts[vendorId]
+          return newContacts
+        })
+      } else {
+        newSet.add(vendorId)
+      }
+      return newSet
+    })
+  }
+
+  const handleContactSelect = (vendorId: number, contactId: number) => {
+    setSelectedContacts(prev => {
+      const vendorContacts = prev[vendorId] || new Set()
+      const newSet = new Set(vendorContacts)
+      if (newSet.has(contactId)) {
+        newSet.delete(contactId)
+      } else {
+        newSet.add(contactId)
+      }
+      return { ...prev, [vendorId]: newSet }
+    })
+  }
+
+  const toggleVendorExpand = (vendorId: number) => {
+    setExpandedVendors(prev => {
+      const newSet = new Set(prev)
+      if (newSet.has(vendorId)) {
+        newSet.delete(vendorId)
+      } else {
+        newSet.add(vendorId)
+      }
+      return newSet
+    })
+  }
+  const handleSubmit = async () => {
+    // 검증
+    if (selectedItems.size === 0) {
+      toast.error("최소 1개 이상의 아이템을 선택해주세요.")
+      return
+    }
+  
+    if (selectedVendors.size === 0) {
+      toast.error("최소 1개 이상의 벤더를 선택해주세요.")
+      return
+    }
+  
+    const hasSelectedContacts = Object.values(selectedContacts).some(contacts => contacts.size > 0)
+    if (!hasSelectedContacts) {
+      toast.error("최소 1개 이상의 담당자를 선택해주세요.")
+      return
+    }
+  
+    setIsSubmitting(true)
+    try {
+      // 선택된 아이템 변환
+      const itemType = selectedItemType === 'ship' ? 'SHIP' : selectedItemType === 'top' ? 'TOP' : 'HULL'
+      const itemsToAdd: { id: number; type: 'SHIP' | 'TOP' | 'HULL' }[] = []
+      selectedItems.forEach(id => itemsToAdd.push({ id, type: itemType }))
+  
+
+      // 벤더별 담당자 ID를 객체로 변환
+      const contactsByVendor: Record<number, number[]> = {}
+      Object.entries(selectedContacts).forEach(([vendorIdStr, contacts]) => {
+        contactsByVendor[parseInt(vendorIdStr)] = Array.from(contacts)
+      })
+
+      const result = await addContactItemMapping({
+        items: itemsToAdd,
+        vendors: Array.from(selectedVendors),
+        contactsByVendor,
+      })
+
+      if (result.error) {
+        toast.error(result.error)
+      } else {
+        toast.success("담당자-아이템 매핑이 추가되었습니다.")
+        setOpen(false)
+        // 초기화
+        resetForm()
+      }
+    } catch (err) {
+      toast.error("매핑 추가 중 오류가 발생했습니다.")
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  const resetForm = () => {
+    setSelectedItemType('ship')
+    setItemSearch("")
+    setSelectedItems(new Set())
+    setVendorSearch("")
+    setSelectedVendors(new Set())
+    setSelectedContacts({})
+    setExpandedVendors(new Set())
+  }
+
+  const getTotalSelectedContacts = () => {
+    return Object.values(selectedContacts).reduce((sum, contacts) => sum + contacts.size, 0)
+  }
+
+  // 매핑 추가 버튼 활성화 조건
+  const canSubmit = selectedItems.size > 0 && selectedVendors.size > 0 && getTotalSelectedContacts() > 0
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="outline" size="sm">
+            담당자-아이템 매핑 추가
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent className="max-w-6xl h-[90vh] flex flex-col overflow-hidden">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle>아이템별 협력업체별 담당자 설정</DialogTitle>
+          <DialogDescription>
+            아이템, 협력업체, 담당자를 선택하여 매핑을 추가합니다.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="grid grid-cols-3 gap-4 flex-1 min-h-0 overflow-hidden">
+          {/* Section 1: 아이템 선택 */}
+          <div className="flex flex-col border rounded-lg p-3 min-h-0">
+            <div className="space-y-2 flex-shrink-0">
+              <Label className="text-sm font-semibold">
+                1. 아이템 선택 ({selectedItems.size}개 선택)
+              </Label>
+              
+              {/* 아이템 타입 필터 */}
+              <RadioGroup value={selectedItemType} onValueChange={(value) => handleItemTypeChange(value as 'ship' | 'top' | 'hull')}>
+                <div className="flex gap-3 text-sm">
+                  <div className="flex items-center space-x-1">
+                    <RadioGroupItem value="ship" id="type-ship" />
+                    <Label htmlFor="type-ship" className="cursor-pointer font-normal">조선</Label>
+                  </div>
+                  <div className="flex items-center space-x-1">
+                    <RadioGroupItem value="top" id="type-top" />
+                    <Label htmlFor="type-top" className="cursor-pointer font-normal">해양 TOP</Label>
+                  </div>
+                  <div className="flex items-center space-x-1">
+                    <RadioGroupItem value="hull" id="type-hull" />
+                    <Label htmlFor="type-hull" className="cursor-pointer font-normal">해양 HULL</Label>
+                  </div>
+                </div>
+              </RadioGroup>
+
+              {/* 검색 */}
+              <div className="relative">
+                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="아이템코드, 이름, 공종, 선종 검색..."
+                  className="pl-8 h-9 text-sm"
+                  value={itemSearch}
+                  onChange={(e) => setItemSearch(e.target.value)}
+                />
+              </div>
+            </div>
+
+            {/* 아이템 리스트 */}
+            <ScrollArea className="flex-1 min-h-0 mt-2 -mx-3 px-3">
+              {isLoadingItems ? (
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="h-6 w-6 animate-spin" />
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  {items.length > 0 && items.map(item => (
+                    <div
+                      key={item.id}
+                      className="flex items-start space-x-2 p-2 rounded hover:bg-accent cursor-pointer text-sm"
+                      onClick={() => handleItemSelect(item.id)}
+                    >
+                      {selectedItems.has(item.id) ? (
+                        <CheckSquare className="h-4 w-4 text-primary flex-shrink-0 mt-0.5" />
+                      ) : (
+                        <Square className="h-4 w-4 flex-shrink-0 mt-0.5" />
+                      )}
+                      <div className="flex-1 min-w-0 overflow-hidden">
+                        <div className="font-medium break-words">{item.itemCode}</div>
+                        <div className="text-xs text-muted-foreground break-words">{item.itemList}</div>
+                        <div className="text-xs text-muted-foreground break-words">
+                          {item.workType}
+                          {item.shipTypes && ` • ${item.shipTypes}`}
+                          {item.subItemList && ` • ${item.subItemList}`}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </ScrollArea>
+          </div>
+
+          {/* Section 2: 벤더 선택 */}
+          <div className="flex flex-col border rounded-lg p-3 min-h-0">
+            <div className="space-y-2 flex-shrink-0">
+              <Label className="text-sm font-semibold">
+                2. 협력업체 선택 ({selectedVendors.size}개 선택)
+              </Label>
+              
+              {/* 검색 */}
+              <div className="relative">
+                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="벤더코드, 벤더명, 이메일 검색..."
+                  className="pl-8 h-9 text-sm"
+                  value={vendorSearch}
+                  onChange={(e) => setVendorSearch(e.target.value)}
+                />
+              </div>
+            </div>
+
+            {/* 벤더 리스트 */}
+            <ScrollArea className="flex-1 min-h-0 mt-2 -mx-3 px-3">
+              {isLoadingVendors ? (
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="h-6 w-6 animate-spin" />
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  {vendors.map(vendor => (
+                    <div
+                      key={vendor.id}
+                      className="flex items-start space-x-2 p-2 rounded hover:bg-accent cursor-pointer text-sm"
+                      onClick={() => handleVendorSelect(vendor.id)}
+                    >
+                      {selectedVendors.has(vendor.id) ? (
+                        <CheckSquare className="h-4 w-4 text-primary flex-shrink-0 mt-0.5" />
+                      ) : (
+                        <Square className="h-4 w-4 flex-shrink-0 mt-0.5" />
+                      )}
+                      <div className="flex-1 min-w-0 overflow-hidden">
+                        <div className="font-medium break-words">{vendor.vendorName}</div>
+                        {vendor.vendorCode && (
+                          <div className="text-xs text-muted-foreground break-words">{vendor.vendorCode}</div>
+                        )}
+                        <div className="text-xs text-muted-foreground break-words">
+                          {vendor.techVendorType} • {vendor.status}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </ScrollArea>
+          </div>
+
+          {/* Section 3: 벤더별 담당자 선택 */}
+          <div className="flex flex-col border rounded-lg p-3 min-h-0">
+            <Label className="text-sm font-semibold flex-shrink-0">
+              3. 담당자 선택 ({getTotalSelectedContacts()}명 선택)
+            </Label>
+
+            <ScrollArea className="flex-1 min-h-0 mt-2 -mx-3 px-3">
+              {isLoadingContacts ? (
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="h-6 w-6 animate-spin" />
+                </div>
+              ) : selectedVendors.size === 0 ? (
+                <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
+                  협력업체를 먼저 선택해주세요
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  {Array.from(selectedVendors).map(vendorId => {
+                    const contacts = vendorContacts[vendorId] || []
+                    const vendor = vendors.find(v => v.id === vendorId)
+                    const isExpanded = expandedVendors.has(vendorId)
+
+                    return (
+                      <div key={vendorId} className="border rounded">
+                        {/* 벤더 헤더 */}
+                        <div
+                          className="flex items-center space-x-2 p-2 cursor-pointer hover:bg-accent"
+                          onClick={() => toggleVendorExpand(vendorId)}
+                        >
+                          {isExpanded ? (
+                            <ChevronDown className="h-4 w-4 flex-shrink-0" />
+                          ) : (
+                            <ChevronRight className="h-4 w-4 flex-shrink-0" />
+                          )}
+                          <div className="flex-1 min-w-0">
+                            <div className="text-sm font-medium truncate">{vendor?.vendorName}</div>
+                            <div className="text-xs text-muted-foreground">
+                              담당자 {contacts.length}명 • {selectedContacts[vendorId]?.size || 0}명 선택
+                            </div>
+                          </div>
+                        </div>
+
+                        {/* 담당자 리스트 */}
+                        {isExpanded && (
+                          <div className="border-t bg-muted/30">
+                            {contacts.length === 0 ? (
+                              <div className="p-2 text-xs text-muted-foreground text-center">
+                                등록된 담당자가 없습니다
+                              </div>
+                            ) : (
+                              contacts.map(contact => (
+                                <div
+                                  key={contact.id}
+                                  className="flex items-start space-x-2 p-2 hover:bg-accent cursor-pointer text-sm"
+                                  onClick={() => handleContactSelect(vendorId, contact.id)}
+                                >
+                                  {selectedContacts[vendorId]?.has(contact.id) ? (
+                                    <CheckSquare className="h-4 w-4 text-primary flex-shrink-0 mt-0.5" />
+                                  ) : (
+                                    <Square className="h-4 w-4 flex-shrink-0 mt-0.5" />
+                                  )}
+                                  <div className="flex-1 min-w-0">
+                                    <div className="font-medium truncate">
+                                      {contact.contactName}
+                                      {contact.isPrimary && (
+                                        <span className="ml-1 text-xs text-primary">(주담당)</span>
+                                      )}
+                                    </div>
+                                    <div className="text-xs text-muted-foreground truncate">
+                                      {contact.contactPosition}
+                                    </div>
+                                    <div className="text-xs text-muted-foreground truncate">
+                                      {contact.contactEmail}
+                                    </div>
+                                  </div>
+                                </div>
+                              ))
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+            </ScrollArea>
+          </div>
+        </div>
+
+        <DialogFooter className="flex-shrink-0 mt-4">
+          <Button variant="outline" onClick={() => setOpen(false)} disabled={isSubmitting}>
+            취소
+          </Button>
+          <Button 
+            onClick={handleSubmit} 
+            disabled={!canSubmit || isSubmitting}
+          >
+            {isSubmitting ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                추가 중...
+              </>
+            ) : (
+              "매핑 추가"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
diff --git a/lib/contact-possible-items/table/contact-possible-items-table-toolbar-actions.tsx b/lib/contact-possible-items/table/contact-possible-items-table-toolbar-actions.tsx
index 4125399b..fd7c254b 100644
--- a/lib/contact-possible-items/table/contact-possible-items-table-toolbar-actions.tsx
+++ b/lib/contact-possible-items/table/contact-possible-items-table-toolbar-actions.tsx
@@ -7,6 +7,7 @@ import * as ExcelJS from 'exceljs'
 

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

 import { ContactPossibleItemDetail } from "../service"

+import { AddContactItemMappingDialog } from "./add-contact-item-mapping-dialog"

 

 interface ContactPossibleItemsTableToolbarActionsProps {

   table: Table<ContactPossibleItemDetail>

@@ -43,6 +44,7 @@ export function ContactPossibleItemsTableToolbarActions({
 

   return (

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

+      <AddContactItemMappingDialog />

       <Button

         variant="outline"

         size="sm"