(김준회) nonsap code 테이블 동기화 처리

1 files changed, 41 insertions, 17 deletions

diff --git a/components/common/selectors/place-of-shipping/place-of-shipping-selector.tsx b/components/common/selectors/place-of-shipping/place-of-shipping-selector.tsx
index 8230e265..63532365 100644
--- a/components/common/selectors/place-of-shipping/place-of-shipping-selector.tsx
+++ b/components/common/selectors/place-of-shipping/place-of-shipping-selector.tsx
@@ -12,7 +12,8 @@
 import { Select, SelectItem, SelectContent } from "@/components/ui/select"
 import { SelectTrigger } from "@/components/ui/select"
 import { SelectValue } from "@/components/ui/select"
-import { useState, useEffect } from "react"
+import { Input } from "@/components/ui/input"
+import { useState, useEffect, useMemo } from "react"
 import { getPlaceOfShippingForSelection } from "./place-of-shipping-service"
 
 interface PlaceOfShippingData {
@@ -37,6 +38,15 @@ export function PlaceOfShippingSelector({
 }: PlaceOfShippingSelectorProps) {
   const [placeOfShippingData, setPlaceOfShippingData] = useState<PlaceOfShippingData[]>([])
   const [isLoading, setIsLoading] = useState(true)
+  const [searchTerm, setSearchTerm] = useState("")
+
+  const filteredData = useMemo(() => {
+    if (!searchTerm) return placeOfShippingData
+    return placeOfShippingData.filter(item =>
+      item.code.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      item.description.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+  }, [placeOfShippingData, searchTerm])
 
   useEffect(() => {
     const loadData = async () => {
@@ -55,21 +65,35 @@ export function PlaceOfShippingSelector({
   }, [])
 
   return (
-    <Select
-      value={value}
-      onValueChange={onValueChange}
-      disabled={disabled || isLoading}
-    >
-      <SelectTrigger className={className}>
-        <SelectValue placeholder={isLoading ? "로딩 중..." : placeholder} />
-      </SelectTrigger>
-      <SelectContent>
-        {placeOfShippingData.map((item) => (
-          <SelectItem key={item.code} value={item.code}>
-            {item.code} {item.description}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+    <div className="space-y-2">
+      <Input
+        placeholder="검색..."
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        className="w-full"
+      />
+      <Select
+        value={value}
+        onValueChange={onValueChange}
+        disabled={disabled || isLoading}
+      >
+        <SelectTrigger className={className}>
+          <SelectValue placeholder={isLoading ? "로딩 중..." : placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {filteredData.length === 0 && searchTerm ? (
+            <div className="p-2 text-sm text-muted-foreground">
+              검색 결과가 없습니다
+            </div>
+          ) : (
+            filteredData.map((item) => (
+              <SelectItem key={item.code} value={item.code}>
+                {item.code} {item.description}
+              </SelectItem>
+            ))
+          )}
+        </SelectContent>
+      </Select>
+    </div>
   )
 }
\ No newline at end of file