후보지 선택

apps/dm/components/ui/map/SearchInputText/SearchInputText.tsx

@@ -1,53 +1,76 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 
 type SearchType = {
-  searchNm: string;
-  searchPk: string;
+  bscFctNm: string;
+  bscFctCd: string;
 };
+
 type thisProps = {
   label: string | undefined;
   initValue: string | undefined;
   setValue: (searchNm?: string) => void;
   setRtnData: (rtnData: any) => void;
-  searchList?: any[];
+  searchList?: SearchType[];
 };
+
 export default function SearchInputText({
   label = undefined,
   initValue = undefined,
   setValue = () => {},
   setRtnData = () => {},
-  searchList = undefined,
+  searchList = [],
 }: thisProps) {
- 
   const [isOpen, setIsOpen] = useState(false);
   const [textValue, setTextValue] = useState(initValue || "");
+  const [highlightIndex, setHighlightIndex] = useState<number>(-1);
 
   const wrapperRef = useRef<HTMLDivElement>(null);
+
   const handleInputChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const value = e.target.value;
-
       setTextValue(value);
       setValue(value);
-      if (value && value!=='') {
-        setIsOpen(true);
-      } else {
-        setIsOpen(false);
-      }
+      setHighlightIndex(-1);
+      setIsOpen(value !== "");
     },
     [setValue]
   );
 
   const handleSuggestionClick = useCallback(
     (searchNm: string) => {
-      // Do not update textValue to keep input unchanged on suggestion click
       setValue(searchNm);
+      setTextValue(searchNm);
       setIsOpen(false);
-      setRtnData(searchList?.find((item) => item.searchNm === searchNm) || {});
+      setRtnData(searchList?.find((item) => item.bscFctNm === searchNm) || {});
     },
     [searchList, setRtnData, setValue]
   );
 
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (!isOpen || searchList.length === 0) return;
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlightIndex((prev) => (prev + 1) % searchList.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightIndex((prev) =>
+          prev <= 0 ? searchList.length - 1 : prev - 1
+        );
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (searchList.length === 1 && searchList[0]) {
+          handleSuggestionClick(searchList[0].bscFctNm);
+        } else if (highlightIndex >= 0 && highlightIndex < searchList.length && searchList[highlightIndex]) {
+          handleSuggestionClick(searchList[highlightIndex].bscFctNm);
+        }
+      }
+    },
+    [highlightIndex, isOpen, searchList, handleSuggestionClick]
+  );
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -68,31 +91,39 @@ export default function SearchInputText({
     <div ref={wrapperRef} className="relative">
       <input
         type="text"
-        value={textValue ||''}
+        value={textValue || ""}
         onChange={handleInputChange}
-        /* onFocus={() => setIsOpen(true)} */
+        onKeyDown={handleKeyDown}
         className="w-full h-[3.2rem] !text-xl pl-3 text-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
         placeholder={`${label}을(를) 입력하세요`}
+        onClick={() => {
+          setTextValue("");
+          setValue("");
+          setIsOpen(false);
+        }}
       />
       {isOpen && (
         <div className="absolute top-full left-0 z-50 mb-2 max-h-72 w-full overflow-auto rounded-md border border-gray-300 bg-white shadow-lg">
           <div className="max-h-72">
-            {searchList && searchList.length > 0 ? (
-              searchList.map((item: SearchType, index: number) => (
+            {searchList.length > 0 ? (
+              searchList.map((item, index) => (
                 <div
                   key={index}
-                  className="w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl hover:bg-gray-100"
-                  onClick={() => handleSuggestionClick(item.searchNm)}
+                  className={`w-full cursor-pointer overflow-auto px-5 py-3 text-left !text-xl ${
+                    highlightIndex === index
+                      ? "bg-blue-100"
+                      : "hover:bg-gray-100"
+                  }`}
+                  onClick={() => handleSuggestionClick(item.bscFctNm)}
                   role="button"
                   tabIndex={0}
                   onKeyDown={(e) => {
                     if (e.key === "Enter" || e.key === " ") {
-                      handleSuggestionClick(item.searchNm);
+                      handleSuggestionClick(item.bscFctNm);
                     }
                   }}
                 >
-                  {item.searchPk?.substring(0, 10)}&nbsp;
-                  <span className="float-right">{item.searchNm}</span>
+                  <span className="float-left">{item.bscFctNm}</span>
                 </div>
               ))
             ) : (