(김준회) nonsap 기준정보 기반 국가 선택기 컴포넌트 구현 및 AVL, Vendor-Pool 적용

2 files changed, 50 insertions, 15 deletions

diff --git a/lib/avl/table/avl-vendor-add-and-modify-dialog.tsx b/lib/avl/table/avl-vendor-add-and-modify-dialog.tsx
index 4f0eb404..8fb910da 100644
--- a/lib/avl/table/avl-vendor-add-and-modify-dialog.tsx
+++ b/lib/avl/table/avl-vendor-add-and-modify-dialog.tsx
@@ -31,6 +31,7 @@ import type { VendorSearchItem } from "@/components/common/vendor"
 import { PlaceOfShippingSelector } from "@/components/common/selectors/place-of-shipping"
 import { VendorTierSelector } from "@/components/common/selectors/vendor-tier"
 import { DatePicker } from "@/components/ui/date-picker"
+import { NationSelector, type NationCode } from "@/components/common/selectors/nation"
 
 interface AvlVendorAddAndModifyDialogProps {
   open: boolean
@@ -71,6 +72,8 @@ export function AvlVendorAddAndModifyDialog({
   const [selectedMaterialGroup, setSelectedMaterialGroup] = React.useState<MaterialSearchItem | null>(null)
   // 벤더 선택 상태
   const [selectedVendor, setSelectedVendor] = React.useState<VendorSearchItem | null>(null)
+  // 본사 위치 국가 선택 상태
+  const [selectedHeadquarterNation, setSelectedHeadquarterNation] = React.useState<NationCode | undefined>(undefined)
   // 날짜 상태 (Date 객체로 관리)
   const [quoteReceivedDate, setQuoteReceivedDate] = React.useState<Date | undefined>(undefined)
   const [recentQuoteDate, setRecentQuoteDate] = React.useState<Date | undefined>(undefined)
@@ -193,6 +196,10 @@ export function AvlVendorAddAndModifyDialog({
         setSelectedVendor(null)
       }
 
+      // 본사 위치 국가 선택 상태 초기화 (현재는 국가명만 저장되어 있으므로 undefined로 설정)
+      // 실제로는 저장된 국가명으로부터 국가코드를 찾아서 설정해야 하지만, 단순화를 위해 undefined로 설정
+      setSelectedHeadquarterNation(undefined)
+
       // 날짜 상태 초기화
       setQuoteReceivedDate(editingItem.quoteReceivedDate ? new Date(editingItem.quoteReceivedDate) : undefined)
       setRecentQuoteDate(editingItem.recentQuoteDate ? new Date(editingItem.recentQuoteDate) : undefined)
@@ -288,6 +295,8 @@ export function AvlVendorAddAndModifyDialog({
       setSelectedMaterialGroup(null)
       // 벤더 선택 상태 초기화
       setSelectedVendor(null)
+      // 본사 위치 국가 선택 상태 초기화
+      setSelectedHeadquarterNation(undefined)
       // 날짜 상태 초기화
       setQuoteReceivedDate(undefined)
       setRecentQuoteDate(undefined)
@@ -339,6 +348,15 @@ export function AvlVendorAddAndModifyDialog({
     }
   }, [])
 
+  // 본사 위치 국가 선택 핸들러
+  const handleHeadquarterNationSelect = React.useCallback((nation: NationCode) => {
+    setSelectedHeadquarterNation(nation)
+    setFormData(prev => ({
+      ...prev,
+      headquarterLocation: nation.CDNM // 한국어 국가명 저장
+    }))
+  }, [])
+
   const handleSubmit = async () => {
     // 공통 필수 필드 검증
     if (!formData.disciplineName || !formData.materialNameCustomerSide) {
@@ -387,6 +405,7 @@ export function AvlVendorAddAndModifyDialog({
       setSelectedDiscipline(undefined)
       setSelectedMaterialGroup(null)
       setSelectedVendor(null)
+      setSelectedHeadquarterNation(undefined)
       setQuoteReceivedDate(undefined)
       setRecentQuoteDate(undefined)
       setRecentOrderDate(undefined)
@@ -444,6 +463,7 @@ export function AvlVendorAddAndModifyDialog({
     setSelectedDiscipline(undefined)
     setSelectedMaterialGroup(null)
     setSelectedVendor(null)
+    setSelectedHeadquarterNation(undefined)
     setQuoteReceivedDate(undefined)
     setRecentQuoteDate(undefined)
     setRecentOrderDate(undefined)
@@ -767,12 +787,18 @@ export function AvlVendorAddAndModifyDialog({
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label htmlFor="headquarterLocation">본사 위치 (국가)</Label>
-                <Input
-                  id="headquarterLocation"
-                  value={formData.headquarterLocation}
-                  onChange={(e) => setFormData(prev => ({ ...prev, headquarterLocation: e.target.value }))}
-                  placeholder="본사 위치를 입력하세요"
+                <NationSelector
+                  selectedNation={selectedHeadquarterNation}
+                  onNationSelect={handleHeadquarterNationSelect}
+                  disabled={false}
+                  placeholder={formData.headquarterLocation || "본사 위치 국가를 선택하세요"}
+                  className="h-9"
                 />
+                <div className="text-xs text-muted-foreground">
+                  {selectedHeadquarterNation && (
+                    <span>선택됨: [{selectedHeadquarterNation.CD}] {selectedHeadquarterNation.CDNM}</span>
+                  )}
+                </div>
               </div>
               <div className="space-y-2">
                 <Label htmlFor="manufacturingLocation">제작/선적지 (국가)</Label>
diff --git a/lib/vendor-pool/table/vendor-pool-table-columns.tsx b/lib/vendor-pool/table/vendor-pool-table-columns.tsx
index 1f0c455e..52a0ad28 100644
--- a/lib/vendor-pool/table/vendor-pool-table-columns.tsx
+++ b/lib/vendor-pool/table/vendor-pool-table-columns.tsx
@@ -31,6 +31,7 @@ import { VendorTierSelector } from "@/components/common/selectors/vendor-tier/ve
 import { VendorSelectorDialogSingle } from "@/components/common/vendor/vendor-selector-dialog-single"
 import type { VendorSearchItem } from "@/components/common/vendor/vendor-service"
 import { PlaceOfShippingSelectorDialogSingle } from "@/components/common/selectors/place-of-shipping/place-of-shipping-selector"
+import { NationSelector, NationCode } from "@/components/common/selectors/nation"
 
 export type VendorPoolItem = Omit<VendorPool, 'registrationDate' | 'lastModifiedDate'> & {
   id: string | number // temp-로 시작하는 경우 string, 실제 데이터는 number
@@ -800,24 +801,32 @@ export const columns: ColumnDef<VendorPoolItem>[] = [
       <DataTableColumnHeaderSimple column={column} title={<span className="text-red-600 font-medium">본사 위치 *</span>} />
     ),
     cell: ({ row, table }) => {
-      const value = row.getValue("headquarterLocation")
-      const onSave = async (newValue: any) => {
+      const headquarterLocation = row.original.headquarterLocation as string
+
+      // 현재 선택된 국가명으로부터 국가 코드를 찾기 위해 임시로 null 설정
+      // 실제로는 국가명에서 국가코드를 역추적해야 하지만, 여기서는 단순화
+      const selectedNation: NationCode | undefined = undefined
+
+      const onNationSelect = async (nation: NationCode) => {
+        console.log('선택된 국가:', nation)
+
         if (table.options.meta?.onCellUpdate) {
-          await table.options.meta.onCellUpdate(row.original.id, "headquarterLocation", newValue)
+          // CDNM 값(한국어 국가명)을 저장
+          await table.options.meta.onCellUpdate(row.original.id, "headquarterLocation", nation.CDNM)
         }
       }
 
       return (
-        <EditableCell
-          value={value}
-          type="text"
-          onSave={onSave}
-          placeholder="본사 위치 입력"
-          maxLength={50}
+        <NationSelector
+          selectedNation={selectedNation}
+          onNationSelect={onNationSelect}
+          disabled={false}
+          placeholder={headquarterLocation || "본사 위치 선택"}
+          className="w-full"
         />
       )
     },
-    size: 100,
+    size: 180,
   },
   {
     accessorKey: "manufacturingLocation",