From 6e96477174cf40b3f69813664f72f2418af51917 Mon Sep 17 00:00:00 2001
From: leedj312 <dlehd467@gmail.com>
Date: Wed, 4 Jun 2025 11:10:42 +0900
Subject: [PATCH] =?UTF-8?q?=ED=95=98=EC=88=98=EC=9E=AC=EC=9D=B4=EC=9A=A9?=
 =?UTF-8?q?=20=EB=93=B1=EB=A1=9D=20=EC=84=9C=EC=B9=98=ED=8F=BC=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/wr/app/store/common/searchCode/index.ts  | 67 ++++++++------
 apps/wr/app/store/common/searchCode/type.tsx  | 13 +++
 .../ruseFcltMng/fcltReg/pbnstReg/index.tsx    |  2 +-
 .../fcltReg/pbnstReg/buseReg/bugRegForm.tsx   | 31 +++----
 .../fcltReg/pbnstReg/mngReg/mngRegForm.tsx    |  8 +-
 .../components/ui/searchInput/searchInput.tsx | 92 +++++++++++++++++++
 6 files changed, 165 insertions(+), 48 deletions(-)
 create mode 100644 apps/wr/app/store/common/searchCode/type.tsx
 create mode 100644 apps/wr/components/ui/searchInput/searchInput.tsx

diff --git a/apps/wr/app/store/common/searchCode/index.ts b/apps/wr/app/store/common/searchCode/index.ts
index 579c7c528..d87e0836c 100644
--- a/apps/wr/app/store/common/searchCode/index.ts
+++ b/apps/wr/app/store/common/searchCode/index.ts
@@ -1,29 +1,44 @@
-import { fetchType, getFetch, postFectch } from "@/components/lib/api"
-import type { pubHasuType } from "../../ruseFcltMng/fcltReg/pbnstReg/type"
+import { fetchType, getFetch, postFectch } from "@/components/lib/api";
+import type { pubHasuType } from "../../ruseFcltMng/fcltReg/pbnstReg/type";
+import type { DemandCompType } from "./type";
 export type comFcltState = {
-    searchFclts: pubHasuType
-}
+  searchFclts: pubHasuType;
+  demandCompList: DemandCompType[];
+};
 export type comFcltActions = {
-    getSwtrmtFcltNm: (searchNm: string) => void
-}
-  
+  getSwtrmtFcltNm: (searchNm: string) => void;
+  getDemandCompList :(searchNm: string) => void
+};
+
 export const searchActions: (set: any) => comFcltActions = (set: any) => {
-    return {
-        getSwtrmtFcltNm: async (searchNm: string) => {
-            const fcltNm = await getFetch("common", `/prcsFclt/info/1/20/${searchNm}`);
-            const fcltNmCd: pubHasuType[] = fcltNm.map((item: any) => ({
-                bscFctCd: item.bscFctCd,
-                sido: item.sido,
-                gugun: item.gugun,
-                bscFctNm: item.bscFctNm,
-                addr: item.addr,
-                fctCpc: item.fctCpc
-            }))
-            return set((state: comFcltState) => ({
-                ...state,
-                searchFclts: fcltNmCd
-            }
-            ))
-        },
-    }
-}
\ No newline at end of file
+  return {
+    getSwtrmtFcltNm: async (searchNm: string) => {
+      const fcltNm = await getFetch(
+        "common",
+        `/prcsFclt/info/1/20/${searchNm}`
+      );
+      const fcltNmCd: pubHasuType[] = fcltNm.map((item: any) => ({
+        bscFctCd: item.bscFctCd,
+        sido: item.sido,
+        gugun: item.gugun,
+        bscFctNm: item.bscFctNm,
+        addr: item.addr,
+        fctCpc: item.fctCpc,
+      }));
+      return set((state: comFcltState) => ({
+        ...state,
+        searchFclts: fcltNmCd,
+      }));
+    },
+    getDemandCompList: async (searchNm: string) => {
+      const coList = await getFetch(
+        fetchType.WR,
+        `reuseFc/request/${searchNm}/{3}`
+      );
+      return set((state: comFcltState) => ({
+        ...state,
+        demandCompList: coList,
+      }));
+    },
+  };
+};
diff --git a/apps/wr/app/store/common/searchCode/type.tsx b/apps/wr/app/store/common/searchCode/type.tsx
new file mode 100644
index 000000000..a8cfb2e69
--- /dev/null
+++ b/apps/wr/app/store/common/searchCode/type.tsx
@@ -0,0 +1,13 @@
+
+export type DemandCompType = {
+    dmdInfoPk : string | '';
+    bzmnNo : string | '';
+    dmdCoNm : string | '';
+    daddr : string | '';
+    telno : string | '';
+    rgtr : string | '';
+    useUsgCd : string | '';
+    ctpvCd : string | '';
+    sggCd : string | '';
+    
+  }
\ No newline at end of file
diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx
index 62a6447f7..73bdf9665 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx
@@ -173,6 +173,7 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
     pbnstRegClick: async (pubHasuRes: pubHasuType) => {
       try {
         const pbnstRes = await initFetch(pubHasuRes.bscFctCd);
+        console.log('pbnstRes ' , pbnstRes)
         return set((state: pubFacState) => ({
           ...state,
           pbnst: {
@@ -204,7 +205,6 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
     pbnstInsert: async (pbnstRes: customPbnst) => {
       try {
 
-        console.log('writeRgtrAndMdfr(pbnstRes) ', writeRgtrAndMdfr(pbnstRes))
         const response = await postFectch(
           `/reuseFc/pubFc`,
           JSON.stringify( writeRgtrAndMdfr(pbnstRes))
diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx
index 608b2ccab..4ef27037b 100644
--- a/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx
+++ b/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx
@@ -37,10 +37,10 @@ import { useEffect, useRef, useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import MngRegFormDetail from "../mngReg/mngRegFormDetail/mngRegFormDetail";
 import {
-  handleCommaNumberChange,
-  formatCommaNumber,
   safeDate,
 } from "@/components/lib/func/commom";
+import SearchInputText from "@/components/ui/searchInput/searchInput";
+import type { DemandCompType } from "@/app/store/common/searchCode/type";
 
 export function PbnstBuseForm({
   formType,
@@ -66,7 +66,7 @@ export function PbnstBuseForm({
   const [ppiYn, setPpiYn] = useState("Y");
   const [isFcOrgwts, setIsFcOrgwts] = useState<boolean>(false);
   const [sumCpct, setSumCpct] = useState<number>(0);
-  const [searchDmdCo, setSeachDmdCo] = useState<String>();
+  const [searchDmdCo, setSeachDmdCo] = useState<DemandCompType[]>();
 
   const form = useForm<fcBizType>({
     resolver: zodResolver(fcBizSchema),
@@ -195,9 +195,7 @@ export function PbnstBuseForm({
   };
 
   const plusArray = () => {
-
-    console
-    .log('qweqwe ')
+    console.log("qweqwe ");
     appendDemand({
       dmdCoNm: "",
       daddr: "",
@@ -404,7 +402,7 @@ export function PbnstBuseForm({
                 sonClass="col-span-4"
               />
               <div>
-              <h1 className={formH1Class}>{'하수처리수 재이용수 수요처'}</h1>
+                <h1 className={formH1Class}>{"하수처리수 재이용수 수요처"}</h1>
                 <div className="text-right mb-3">
                   <Button
                     type="button"
@@ -423,19 +421,14 @@ export function PbnstBuseForm({
                         name={`fcDemands.${index}.dmdCoNm`}
                         render={({ field: f }) => (
                           <FormUi label="수요처명">
-                            <SearchInputSelect
-                              className={""}
-                              label={""}
-                              selectData={[]}
-                              onSelectValue={(val) => {
-                                searchDmdColist(val);
+                            <SearchInputText
+                              label={undefined}
+                              initValue={f.value}
+                              setValue={f.onChange}
+                              setRtnData={(valList : DemandCompType[]) =>{
+                                setSeachDmdCo(valList)
                               }}
-                              textValue={f.value}
-                              setText={(val) => {
-                                setSeachDmdCo(val);
-                              }}
-                              selectValue={searchDmdCo}
-                            ></SearchInputSelect>
+                            ></SearchInputText>
                           </FormUi>
                         )}
                       />
diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx
index ed78452d0..c809b3653 100644
--- a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx
+++ b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx
@@ -91,6 +91,8 @@ export function PbnstMngForm({
       getpbnstInsertIndex({ ...pbnst.pbnsUpdateIndex, mng: val });
     }
   };
+
+
   const plusHist = () => {
     const regData = {
       choose: false,
@@ -246,6 +248,8 @@ export function PbnstMngForm({
       }
     }
   }, [pbnst.pbnsUpdateIndex, pbnst.pbnstRes, formType, getBizCycle]);
+  
+  //신규 등록시 입력할때 데이터 넣기
   useEffect(() => {
     if (formType === "reg") {
       const formData = form.watch();
@@ -260,13 +264,13 @@ export function PbnstMngForm({
   }, [pbnst.pbnstMngRegData]);
 
   useEffect(() => {
-    if ( pbnst.pbnstRes && pbnst.pbnstRes?.length> 0) return;
+
+    if ( pbnst.pbnstRes && pbnst.pbnstRes?.length<= 0) return;
     const fcltNmList = pbnst.pbnstRes?.map((item, index) => ({
       text: item.ruseUtztnFcltNm,
       val: String(index),
     }));
 
-
     if(fcltNmList)
     setFcltNm(fcltNmList);
 
diff --git a/apps/wr/components/ui/searchInput/searchInput.tsx b/apps/wr/components/ui/searchInput/searchInput.tsx
new file mode 100644
index 000000000..3b645a467
--- /dev/null
+++ b/apps/wr/components/ui/searchInput/searchInput.tsx
@@ -0,0 +1,92 @@
+
+import { useWrStore } from '@/app/store';
+import type { DemandCompType } from '@/app/store/common/searchCode/type';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+type thisProps = {
+  label: string | undefined;
+  initValue: string | undefined;
+  setValue : (dmdCoNm?: string) => void;
+  setRtnData : (rtnData: DemandCompType[]) => void;
+}
+
+
+export default function SearchInputText({label=undefined, initValue=undefined, setValue=()=>{}, setRtnData=()=>{}} :thisProps) {
+  
+  const { getDemandCompList, demandCompList } = useWrStore((state) => state);
+
+
+  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) {
+      setIsOpen(true);
+      getDemandCompList(value);
+    } else {
+      setIsOpen(false);
+    }
+  }, [getDemandCompList, setValue]);
+
+  const handleSuggestionClick = useCallback((dmdCoNm: string) => {
+    setTextValue(dmdCoNm);
+    setValue(dmdCoNm);
+    setIsOpen(false);
+    setRtnData(demandCompList);
+  }, [demandCompList, 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}>
+      <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>
+  )
+}
\ No newline at end of file