사업체 힌트박스 위로뜨게 수정

packages/common/business_components/src/ui/sdmInsertForm/sdmNameBox.tsx

@@ -1,14 +1,14 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import type { DemandCompType } from './form';
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import type { DemandCompType } from "./form";
 
 export type thisProps = {
   label: string | undefined;
   initValue: string | undefined;
-  dataList : DemandCompType[];
-  rtnValue : (searchText: string, pageCnt: number) => void;
-  rtnData : (item: DemandCompType) => void;
-  rtnText : (text: string) => void;
-}
+  dataList: DemandCompType[];
+  rtnValue: (searchText: string, pageCnt: number) => void;
+  rtnData: (item: DemandCompType) => void;
+  rtnText: (text: string) => void;
+};
 
 /**
  * 수요처 검색 컴포넌트
@@ -18,88 +18,110 @@ export type thisProps = {
  * @param dataList 검색할 때 넘기는 데이터 리스트
  * @param rtnData 검색 결과 반환 함수
  */
-export const SdmSearchForm = ({label=undefined, initValue=undefined, rtnValue=()=>{}, dataList=[], rtnData=()=>{}, rtnText=()=>{} } :thisProps) => {
-  
+export const SdmSearchForm = ({
+  label = undefined,
+  initValue = undefined,
+  rtnValue = () => {},
+  dataList = [],
+  rtnData = () => {},
+  rtnText = () => {},
+}: thisProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [textValue, setTextValue] = useState(initValue || '');
+  const [textValue, setTextValue] = useState(initValue || "");
   const wrapperRef = useRef<HTMLDivElement>(null);
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    setTextValue(value);
-    rtnValue(value, 10);
-    rtnText(value);
-    if (value) {
-      setIsOpen(true);
-    } else {
-      setIsOpen(false);
-    }
-  }, [rtnValue, rtnText]);
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+      setTextValue(value);
+      rtnValue(value, 10);
+      rtnText(value);
+      if (value) {
+        setIsOpen(true);
+      } else {
+        setIsOpen(false);
+      }
+    },
+    [rtnValue, rtnText],
+  );
 
-  const handleSuggestionClick = useCallback((item: DemandCompType) => {
-    setTextValue(item.dmdCoNm);
-    rtnData(item);
-    setIsOpen(false);
-  }, [rtnData]);
+  const handleSuggestionClick = useCallback(
+    (item: DemandCompType) => {
+      setTextValue(item.dmdCoNm);
+      rtnData(item);
+      setIsOpen(false);
+    },
+    [rtnData],
+  );
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(event.target as Node)
+      ) {
         setIsOpen(false);
       }
     };
 
-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
 
   useEffect(() => {
-    if(initValue&& initValue?.length>0){
-      setTextValue(initValue)
+    if (initValue && initValue?.length > 0) {
+      setTextValue(initValue);
     }
-  },[initValue])
-  
+  }, [initValue]);
+
   return (
-    <div ref={wrapperRef}>
+    <div className="relative" ref={wrapperRef}>
       <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"
+        className="h-[3.2rem] w-full rounded-md border border-gray-300 pl-3 !text-xl text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
         placeholder={`${label}을(를) 입력하세요`}
       />
       {isOpen && (
-        <div className=" z-1 w-full mt-2 bg-white border border-gray-300 rounded-md shadow-lg h-90 overflow-auto">
+        <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">
-            {dataList && dataList.length > 0 ? dataList.map((item : DemandCompType, index : number) => (
-              <div
-                key={index}
-                className="!text-xl w-full text-left px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto"
-                onClick={() => handleSuggestionClick(item)}
-                role="button"
-                tabIndex={0}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    handleSuggestionClick(item);
-                  }
-                }}
-              >
-                {item.dmdInfoPk.substring(10,14) !== '0000' ? (
-                  <>
-                    <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoPk.substring(0,10)}&nbsp;
-                    <span className="text-gray-500">종사업자번호 : </span> {item.dmdInfoPk.substring(10,14)}&nbsp;
-                  </>
-                ) : (
-                  <>
-                    <span className="text-gray-500">사업자번호 : </span> {item.dmdInfoPk.substring(0,10)}&nbsp;
-                  </>
-                )}
-                <span className="float-right">{item.dmdCoNm}</span>
-              </div>
-            )) : (
-              <div className="!text-xl w-full px-5 py-3 hover:bg-gray-100 cursor-pointer overflow-auto">
+            {dataList && dataList.length > 0 ? (
+              dataList.map((item: DemandCompType, 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)}
+                  role="button"
+                  tabIndex={0}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      handleSuggestionClick(item);
+                    }
+                  }}
+                >
+                  {item.dmdInfoPk.substring(10, 14) !== "0000" ? (
+                    <>
+                      <span className="text-gray-500">사업자번호 : </span>{" "}
+                      {item.dmdInfoPk.substring(0, 10)}&nbsp;
+                      <span className="text-gray-500">
+                        종사업자번호 :{" "}
+                      </span>{" "}
+                      {item.dmdInfoPk.substring(10, 14)}&nbsp;
+                    </>
+                  ) : (
+                    <>
+                      <span className="text-gray-500">사업자번호 : </span>{" "}
+                      {item.dmdInfoPk.substring(0, 10)}&nbsp;
+                    </>
+                  )}
+                  <span className="float-right">{item.dmdCoNm}</span>
+                </div>
+              ))
+            ) : (
+              <div className="w-full cursor-pointer overflow-auto px-5 py-3 !text-xl hover:bg-gray-100">
                 검색 결과가 없습니다.
               </div>
             )}
@@ -107,5 +129,5 @@ export const SdmSearchForm = ({label=undefined, initValue=undefined, rtnValue=()
         </div>
       )}
     </div>
-  )
-}
+  );
+};