From d6515dda319e13d88abf96c60e86ad8d78978009 Mon Sep 17 00:00:00 2001
From: joonhoekim <26rote@gmail.com>
Date: Tue, 25 Nov 2025 17:20:51 +0900
Subject: (김준회) 일반계약 생성 다이얼로그: 협력업체 선택시 공통컴포넌트
 사용하도록 리팩터링
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/create-general-contract-dialog.tsx        | 112 ++++-----------------
 1 file changed, 19 insertions(+), 93 deletions(-)

(limited to 'lib/general-contracts')

diff --git a/lib/general-contracts/main/create-general-contract-dialog.tsx b/lib/general-contracts/main/create-general-contract-dialog.tsx
index d0ccfe5b..bb251408 100644
--- a/lib/general-contracts/main/create-general-contract-dialog.tsx
+++ b/lib/general-contracts/main/create-general-contract-dialog.tsx
@@ -20,18 +20,19 @@ import { Textarea } from "@/components/ui/textarea"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Calendar } from "@/components/ui/calendar"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
-import { CalendarIcon, Check, ChevronsUpDown } from "lucide-react"
-import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command"
+import { CalendarIcon } from "lucide-react"
 import { format } from "date-fns"
 import { ko } from "date-fns/locale"
 import { cn } from "@/lib/utils"
-import { createContract, getVendors } from "@/lib/general-contracts/service"
+import { createContract } from "@/lib/general-contracts/service"
 import { 
   GENERAL_CONTRACT_CATEGORIES, 
   GENERAL_CONTRACT_TYPES,
   GENERAL_EXECUTION_METHODS
 } from "@/lib/general-contracts/types"
 import { useSession } from "next-auth/react"
+import { VendorSelectorDialogSingle } from "@/components/common/vendor/vendor-selector-dialog-single"
+import { VendorSearchItem } from "@/components/common/vendor/vendor-service"
 
 interface CreateContractForm {
   contractNumber: string
@@ -39,7 +40,6 @@ interface CreateContractForm {
   category: string
   type: string
   executionMethod: string
-  vendorId: number | null
   startDate: Date | undefined
   endDate: Date | undefined
   validityEndDate: Date | undefined
@@ -51,9 +51,7 @@ export function CreateGeneralContractDialog() {
   const { data: session } = useSession()
   const [open, setOpen] = React.useState(false)
   const [isLoading, setIsLoading] = React.useState(false)
-  const [vendors, setVendors] = React.useState<Array<{ id: number; vendorName: string; vendorCode: string | null }>>([])
-  const [vendorSearchTerm, setVendorSearchTerm] = React.useState("")
-  const [vendorOpen, setVendorOpen] = React.useState(false)
+  const [selectedVendor, setSelectedVendor] = React.useState<VendorSearchItem | null>(null)
 
   const [form, setForm] = React.useState<CreateContractForm>({
     contractNumber: '',
@@ -61,40 +59,12 @@ export function CreateGeneralContractDialog() {
     category: '',
     type: '',
     executionMethod: '',
-    vendorId: null,
     startDate: undefined,
     endDate: undefined,
     validityEndDate: undefined,
     notes: '',
   })
 
-  // 업체 목록 조회
-  React.useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const vendorList = await getVendors()
-        console.log('vendorList', vendorList)
-        setVendors(vendorList)
-      } catch (error) {
-        console.error('데이터 조회 오류:', error)
-        toast.error('데이터를 불러오는데 실패했습니다')
-        setVendors([])
-      }
-    }
-    fetchData()
-  }, [])
-
-  // 협력업체 검색 필터링
-  const filteredVendors = React.useMemo(() => {
-    if (!vendorSearchTerm.trim()) return vendors
-    const lowerSearch = vendorSearchTerm.toLowerCase()
-    return vendors.filter(
-      vendor => 
-        vendor.vendorName.toLowerCase().includes(lowerSearch) || 
-        (vendor.vendorCode && vendor.vendorCode.toLowerCase().includes(lowerSearch))
-    )
-  }, [vendors, vendorSearchTerm])
-
   const handleSubmit = async () => {
     // 필수 필드 검증
     const validationErrors: string[] = []
@@ -103,7 +73,7 @@ export function CreateGeneralContractDialog() {
     if (!form.category) validationErrors.push('계약구분')
     if (!form.type) validationErrors.push('계약종류')
     if (!form.executionMethod) validationErrors.push('체결방식')
-    if (!form.vendorId) validationErrors.push('협력업체')
+    if (!selectedVendor) validationErrors.push('협력업체')
     
     // AD, LO, OF 계약이 아닌 경우에만 계약기간 필수값 체크
     if (!['AD', 'LO', 'OF'].includes(form.type)) {
@@ -135,7 +105,7 @@ export function CreateGeneralContractDialog() {
         type: form.type,
         executionMethod: form.executionMethod,
         contractSourceType: 'manual',
-        vendorId: form.vendorId!,
+        vendorId: selectedVendor!.id,
         startDate: form.startDate!.toISOString().split('T')[0],
         endDate: form.endDate!.toISOString().split('T')[0],
         validityEndDate: (form.validityEndDate || form.endDate!).toISOString().split('T')[0],
@@ -168,12 +138,12 @@ export function CreateGeneralContractDialog() {
       category: '',
       type: '',
       executionMethod: '',
-      vendorId: null,
       startDate: undefined,
       endDate: undefined,
       validityEndDate: undefined,
       notes: '',
     })
+    setSelectedVendor(null)
   }
 
   return (
@@ -291,61 +261,17 @@ export function CreateGeneralContractDialog() {
 
           <div className="grid gap-2">
             <Label htmlFor="vendor">협력업체 *</Label>
-            <Popover open={vendorOpen} onOpenChange={setVendorOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  aria-expanded={vendorOpen}
-                  className="w-full justify-between"
-                >
-                  {form.vendorId ? (
-                    (() => {
-                      const selected = vendors.find(v => v.id === form.vendorId)
-                      return selected ? `${selected.vendorName} (${selected.vendorCode || ''})` : "협력업체 선택"
-                    })()
-                  ) : (
-                    "협력업체 선택"
-                  )}
-                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-[400px] p-0">
-                <Command>
-                  <CommandInput
-                    placeholder="협력업체명/코드 검색..."
-                    onValueChange={setVendorSearchTerm}
-                  />
-                  <CommandList className="max-h-[300px]">
-                    <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
-                    <CommandGroup>
-                      {filteredVendors.map((vendor) => (
-                        <CommandItem
-                          key={vendor.id}
-                          value={`${vendor.vendorName} ${vendor.vendorCode || ''}`}
-                          onSelect={() => {
-                            setForm(prev => ({ ...prev, vendorId: vendor.id }))
-                            setVendorOpen(false)
-                            setVendorSearchTerm("")
-                          }}
-                        >
-                          <Check
-                            className={cn(
-                              "mr-2 h-4 w-4",
-                              form.vendorId === vendor.id ? "opacity-100" : "opacity-0"
-                            )}
-                          />
-                          <span className="font-medium">{vendor.vendorName}</span>
-                          {vendor.vendorCode && (
-                            <span className="ml-2 text-gray-500">({vendor.vendorCode})</span>
-                          )}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
+            <VendorSelectorDialogSingle
+              triggerLabel="협력업체 선택"
+              selectedVendor={selectedVendor}
+              onVendorSelect={setSelectedVendor}
+              placeholder="협력업체를 검색하세요..."
+              title="협력업체 선택"
+              description="계약할 협력업체를 검색하고 선택해주세요."
+              triggerVariant="outline"
+              statusFilter="ACTIVE"
+              showInitialData={true}
+            />
           </div>
 
           <div className="grid grid-cols-3 gap-4">
-- 
cgit v1.2.3