dm: 상세주소 추가 및 기존비번 확인

apps/dm/components/PostcodeModal.tsx

@@ -30,15 +30,16 @@ function useDebouncedValue<T>(value: T, delay = 250) {
 export default function PostcodeModal({ open, onClose, onSelect }: Props) {
   const [mounted, setMounted] = useState(false);
 
-  const [q, setQ] = useState("");
+  const [q, setQ] = useState(""); // 주소 입력값
   const dq = useDebouncedValue(q, 250);
 
-  const [items, setItems] = useState<AddrItem[]>([]);
-  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [items, setItems] = useState<AddrItem[]>([]); // 검색 결과
+  const [suggestions, setSuggestions] = useState<string[]>([]); // 추천 주소 목록
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
-  const [searchMessage, setSearchMessage] = useState("");
+  const [searchMessage, setSearchMessage] = useState(""); // 검색 실패/형식 오류/보조 안내 문구를 담는 상태값
   const [isInputFocused, setIsInputFocused] = useState(false);
+  const [searchedInput, setSearchedInput] = useState(""); // 주소 검색 입력란 저장
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -133,6 +134,7 @@ export default function PostcodeModal({ open, onClose, onSelect }: Props) {
 
         setItems(result.items);
         setTotal(result.totalCount);
+        setSearchedInput(keyword);
       } catch {
         if (!alive) return;
         setItems([]);
@@ -151,7 +153,7 @@ export default function PostcodeModal({ open, onClose, onSelect }: Props) {
     };
   }, [dq, open]);
 
-  const showSuggest = open && isInputFocused && q.trim().length >= 1 && suggestions.length > 0;
+  const showSuggest = open && isInputFocused && q.trim().length >= 1 && suggestions.length > 0 && dq.trim() !== searchedInput;
 
   if (!mounted || !open) return null;
 
@@ -234,7 +236,7 @@ export default function PostcodeModal({ open, onClose, onSelect }: Props) {
                       className="flex w-full items-center justify-between px-4 py-3 text-left text-[14px] hover:bg-slate-50"
                       onMouseDown={(e) => e.preventDefault()}
                       onClick={() => {
-                        // ✅ 추천 클릭 → 입력값 채우고 드롭다운 닫기 + 포커스 유지
+                        // 추천 클릭 → 입력값 초기화 드롭다운 닫기 + 포커스 유지
                         setQ(s);
                         setSuggestions([]);
                         requestAnimationFrame(() => inputRef.current?.focus());
@@ -270,7 +272,9 @@ export default function PostcodeModal({ open, onClose, onSelect }: Props) {
                   <button
                     key={`${it.zipNo}-${it.roadAddr}`}
                     type="button"
-                    onClick={() => onSelect(it)}
+                    onClick={() => {setQ("");
+                      setSuggestions([]);
+                      onSelect(it)}}
                     className={[
                       "w-full rounded-lg border p-4 text-left transition",
                       "border-slate-200 hover:border-sky-300 hover:bg-sky-50/30",