서치바 컴포넌트 추가 완료

2025-07-24 19:51:48 +09:00
parent c9f1d05126
commit 4c8ecb05e0
8 changed files with 389 additions and 15 deletions
@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+type SearchType = {
+  searchNm: string;
+  searchPk: string;
+};
+type thisProps = {
+  label: string | undefined;
+  initValue: string | undefined;
+  setValue: (searchNm?: string) => void;
+  setRtnData: (rtnData: any) => void;
+  searchList?: any[];
+};
+export default function SearchInputText({
+  label = undefined,
+  initValue = undefined,
+  setValue = () => {},
+  setRtnData = () => {},
+  searchList = undefined,
+}: thisProps) {
+ 
+  const [isOpen, setIsOpen] = useState(false);
+  const [textValue, setTextValue] = useState(initValue || "");
+
+  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);
+      }
+    },
+    [setValue]
+  );
+
+  const handleSuggestionClick = useCallback(
+    (searchNm: string) => {
+      // Do not update textValue to keep input unchanged on suggestion click
+      setValue(searchNm);
+      setIsOpen(false);
+      setRtnData(searchList?.find((item) => item.searchNm === searchNm) || {});
+    },
+    [searchList, setRtnData, setValue]
+  );
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div ref={wrapperRef} className="relative">
+      <input
+        type="text"
+        value={textValue ||''}
+        onChange={handleInputChange}
+        /* onFocus={() => setIsOpen(true)} */
+        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}을(를) 입력하세요`}
+      />
+      {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) => (
+                <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)}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      handleSuggestionClick(item.searchNm);
+                    }
+                  }}
+                >
+                  {item.searchPk?.substring(0, 10)}&nbsp;
+                  <span className="float-right">{item.searchNm}</span>
+                </div>
+              ))
+            ) : (
+              <div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
+                검색 결과가 없습니다.
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}