수요처검색 공통컴포넌트로 빼는 작업 진행중

packages/common/business_components/src/ui/form_ui/index.tsx

@@ -1,5 +1,5 @@
 import { Checkbox } from "@common/components/ui";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { FormControl, FormItem, FormLabel, FormMessage } from "../form";
 
 export const BZNM_TOT_NO = '종사업자등록번호';
@@ -17,7 +17,11 @@ interface FormElementProps extends React.HTMLAttributes<HTMLElement> {
 
 const FormUi = React.forwardRef<HTMLDivElement, FormUiProps>(
   ({ children, label, onCheckboxChange, isDisabled }, ref) => {
-    const [isChecked, setIsChecked] = useState(false);
+    const [isChecked, setIsChecked] = useState(isDisabled);
+
+    useEffect(() => {
+      setIsChecked(isDisabled);
+    }, [isDisabled]);
 
     const handleCheckboxChange = useCallback((checked: boolean) => {
       setIsChecked(checked);
@@ -50,7 +54,7 @@ const FormUi = React.forwardRef<HTMLDivElement, FormUiProps>(
         <FormControl>
           {React.isValidElement(children) && isDisabled
             ? React.cloneElement(children, { 
-                disabled: true,
+                disabled: isDisabled,
                 ...(children.props as FormElementProps)
               })
             : children}

packages/common/business_components/src/ui/index.ts

@@ -19,4 +19,4 @@ export * from "./tab";
 export * from "./table";
 export * from "./table_div";
 export * from "./title";
-
+export * from "./sdmSearchForm";

packages/common/business_components/src/ui/sdmSearchForm/index.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+type thisProps = {
+  label: string | undefined;
+  initValue: string | undefined;
+  setRtnData : (rtnData: any[]) => void;
+}
+
+export default function SdmSearchForm({label=undefined, initValue=undefined, setRtnData=()=>{}} :thisProps) {
+  
+  /* const { getDemandCompList, Sdm } = useDmStore((state) => state);
+
+  const { 
+    demandCompList 
+  } = Sdm; */
+  
+  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);
+    if (value) {
+      setIsOpen(true);
+    } else {
+      setIsOpen(false);
+    }
+  }, []);
+
+  /* const handleSuggestionClick = useCallback((dmdCoNm: string) => {
+    setTextValue(dmdCoNm);
+  }, []); */
+
+  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}>
+      <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=" z-1 w-full mt-2 bg-white border border-gray-300 rounded-md shadow-lg h-90 overflow-auto">
+          <div className="max-h-72">
+            {/* {demandCompList && demandCompList.length > 0 ? demandCompList.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.dmdCoNm)}
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    handleSuggestionClick(item.dmdCoNm);
+                  }
+                }}
+              >
+                {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">
+                검색 결과가 없습니다.
+              </div>
+            {/* )) : ( */}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}