diff --git a/apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx b/apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx index dd04974e5..9123d2c0b 100644 --- a/apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx +++ b/apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx @@ -4,37 +4,76 @@ import { btnClass } from "@/app/store/common/code"; import { ContentsDiv, SearchBaseForm, + SearchInput, + SelectBox, Title, UiModal, UiTable, type ReturnType, } from "@common/business_components/ui"; import ListDiv from "@common/business_components/ui/list_div"; -import { Button } from "@common/components/ui"; +import { Button, Label } from "@common/components/ui"; import HeadChModal from "@/components/ui/modal/sttn/headChModal/headChModal"; import { useCallback, useEffect, useRef, useState } from "react"; import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan"; -import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type"; -import { excelDownload, getCityOrSgg } from "@/components/lib/func/commom"; +import type { + customPbnst, + pubHasuType, +} from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type"; +import { excelDownload, getCityOrSgg, yearOptions } from "@/components/lib/func/commom"; +import { PbnstRegModal } from "@/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal"; +import SearchInputText from "@/components/ui/searchInput/searchInput"; +import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type"; export default function PbnstSttn() { - const { code, pbnstSttn, pbnstSttnSearch,pbnSttnInit } = useWrStore((state) => state); + const { + code, + pbnstSttn, + pbnstSttnSearch, + pbnSttnInit, + getPbnStnDetail, + pbnNmSearch, + } = useWrStore((state) => state); const ref = useRef({} as ReturnType); const codeData = getCityOrSgg(ref); + const [isRuseReg, setIsRuseReg] = useState<{ + isModal: boolean; + data: pubHasuType; + }>({ isModal: false, data: {} as pubHasuType }); + const [searchYear, setSearchYear] = useState( + String(new Date().getFullYear()) + ); const [pageNation, setPageNation] = useState(1); const [isChHead, setIsChHead] = useState(false); - const [bdstTable, setBdstTable] = useState(); + const [bdstTable, setBdstTable] = useState(); + const [pbnDetaileData, setPbnDetaileData] = useState<{ + isModal: boolean; + data: customPbnst; + }>({ isModal: false, data: {} as customPbnst }); + const [pbnRuseNm, setPbnRuseNm] = useState(""); const excelClick = useCallback(() => { - if (codeData) pbnstSttnSearch('1', "10000", codeData); - - }, [pbnstSttnSearch, codeData]); + pbnstSttnSearch("1", '10000', ref.current , '', searchYear); + }, [pbnstSttnSearch, searchYear,ref.current]); + const cellCLick = useCallback( + (index: number | undefined) => { + if ( + index !== undefined && + pbnstSttn.pbnstSttnRes && + pbnstSttn.pbnstSttnRes[index] + ) { + const pbnstRuseFcltPk = pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk; + getPbnStnDetail(pbnstRuseFcltPk.slice(0, 11)); + } + }, + [getPbnStnDetail, pbnstSttn.pbnstSttnRes] + ); useEffect(() => { - if(pbnstSttn.excelList.length > 0){ + if (pbnstSttn.excelList.length >= 0) { excelDownload( pbnstSttn.excelList, "하수재이용시설 현황", @@ -42,23 +81,22 @@ export default function PbnstSttn() { "A1:U2" ); } - }, [pbnstSttn.excelList]); useEffect(() => { if (!pbnstSttn.isInit) { - pbnSttnInit('1','11') + pbnSttnInit("1", "13", ref.current, searchYear); } + }, [pbnstSttn.isInit, pbnSttnInit,ref.current]); + useEffect(() => { + setBdstTable(pbnstSttn.pbnstSttnRes); + }, [pbnstSttn.pbnstSttnRes]); - },[pbnstSttn.isInit,pbnSttnInit]) - useEffect(() => { - console.log('pbnstSttn.pbnstSttnRes ', pbnstSttn.pbnstSttnRes) + useEffect(() => { - + if (pbnRuseNm.length > 1) + pbnNmSearch("1", "23", ref.current, pbnRuseNm, searchYear); + }, [pbnRuseNm]); - setBdstTable(pbnstSttn.pbnstSttnRes) - - },[pbnstSttn.pbnstSttnRes]) - return ( <> @@ -82,7 +120,34 @@ export default function PbnstSttn() { 조회항목설정 } - leftChildren={undefined} + leftChildren={ + <> +
+ + setSearchYear(String(val)) + } + /> +
+ { + setPbnRuseNm(searchNm || ""); + }} + setRtnData={function (rtnData: any[]): void { + setBdstTable(rtnData); + }} + searchList={pbnstSttn.pbnstSearchData||[]} + > + + + } queryClick={function (returnType: ReturnType): void { // '{partValue: 'A', sidoValue: '0', sigunValue: '0', regionValue: '0', unitWaterShedValue: '0', …}' let con; @@ -94,7 +159,7 @@ export default function PbnstSttn() { // pbnstSttnSearch(1, "20", con); }} excelClick={excelClick} - initClick={function (): void { }} + initClick={function (): void {}} btnClass={btnClass} ref={ref} /> @@ -112,7 +177,9 @@ export default function PbnstSttn() { headlist={pbnstSttn.pbnstSttHeadList} pageSize={20} total={100000} - cellClick={(index: number | undefined, headId: string) => { }} + cellClick={(index: number | undefined, headId: string) => { + cellCLick(index); + }} onPageChange={setPageNation} > @@ -134,6 +201,18 @@ export default function PbnstSttn() { /> } /> + + } + bodyClass="w-[68vw] max-w-none h-[90vh]" + open={isRuseReg.isModal} + onOpenChange={(open) => { + setIsRuseReg({ data: {} as pubHasuType, isModal: open }); + }} + /> ); diff --git a/apps/wr/app/store/prfmncReg/pbnstPrfmncReg/type.tsx b/apps/wr/app/store/prfmncReg/pbnstPrfmncReg/type.tsx index 89fced5a7..3bd741663 100644 --- a/apps/wr/app/store/prfmncReg/pbnstPrfmncReg/type.tsx +++ b/apps/wr/app/store/prfmncReg/pbnstPrfmncReg/type.tsx @@ -1,5 +1,6 @@ import { z } from "zod"; import type { TableUpperProps } from "../../common/type/header"; +import { fcOperSchema } from "../../ruseFcltMng/fcltReg/pbnstReg/type"; export const PrfSchema = z.object({ pbnstRuseFcltFk: z.string(), @@ -36,6 +37,7 @@ export const FcPrfSchema = z.object({ mdfcnDt: z.date().default(new Date()), mdfr: z.string(), prfList: z.array(PrfSchema), + operList:z.array(fcOperSchema), bscFctNm: z.string().nullish(), }); diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx index de7a71d4f..e22037892 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx @@ -273,7 +273,6 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => { }; }); - console.log(" pbnstBizCycle ", pbnstBizCycle); return set((state: pubFacState) => ({ ...state, pbnst: { diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx index 6f33baf72..cbc081c01 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx @@ -89,7 +89,7 @@ const fcFileSchema = z.object({ mdfr: z.string().nullish(), }); -const fcOperSchema = z.object({ +export const fcOperSchema = z.object({ pbnstRuseFcltOperInfoPk: z.number().nullish(), pbnstRuseFcltFk: z.string().nullish(), operMthd: z.string(), diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/headList.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/headList.tsx index cb3cf1731..a1043be1d 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/headList.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/headList.tsx @@ -65,7 +65,7 @@ export const pbnSttHeadListExport: z.infer = [ }, { - id: "mngMeth", + id: "operMthd", title: "운영방식", visible: true, }, @@ -75,12 +75,12 @@ export const pbnSttHeadListExport: z.infer = [ visible: true, }, { - id: "firstDay", + id: "bgngDt", title: "시작일", visible: true, }, { - id: "LastDay", + id: "endDt", title: "종료일", visible: true, }, diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx index deb2176a6..7ebfda0d8 100644 --- a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx +++ b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx @@ -7,15 +7,19 @@ import type { sttnHeadListType } from "../rainSttn/headList"; import type { customPbnst, pubHasuType } from "../../fcltReg/pbnstReg/type"; import { excelPbnstSttnParsing } from "./excel"; import type { FcPrfType } from "@/app/store/prfmncReg/pbnstPrfmncReg/type"; +import type { ReturnType } from "@common/business_components/ui"; +import type { WaterReuseFacility } from "./type"; const pbnstSttHeadList = pbnSttHeadListExport; const pbnstSttNodeList = pbnstSttNodeListExport; export type pbnstSttnState = { pbnstSttn: { - pbnstSttnRes: customPbnst[]; + pbnstSttnRes: WaterReuseFacility[]; + pbnstSearchData: WaterReuseFacility[]; pbnstSttHeadList: CommonTableProps[]; pbnstSttNodeList: CommonTableProps[]; + pbnstDetail: customPbnst; excelList: []; isInit: boolean; }; @@ -23,8 +27,27 @@ export type pbnstSttnState = { type pbnstSttnActions = { pbnstChSttnHead: (headList: z.infer) => void; - pbnstSttnSearch: (page: string, total: string, con: string) => void; - pbnSttnInit: (page: string, sggOrCity: string) => void; + pbnstSttnSearch: ( + page: string, + total: string, + reurnValue: ReturnType, + searchNm: string | undefined, + year: string + ) => void; + pbnSttnInit: ( + page: string, + total: string, + reurnValue: ReturnType, + year: string + ) => void; + getPbnStnDetail: (bscFctCd: string) => void; + pbnNmSearch: ( + page: string, + total: string, + reurnValue: ReturnType, + searchNm: string | undefined, + year: string + ) => void; }; export type pbnstSttnType = pbnstSttnState & pbnstSttnActions; @@ -34,74 +57,110 @@ export const pbnstSttnStateExport: pbnstSttnState = { pbnstSttHeadList: pbnstSttHeadList, pbnstSttNodeList: pbnstSttNodeList, pbnstSttnRes: [], + pbnstDetail: {} as customPbnst, + pbnstSearchData: [], excelList: [], isInit: false, }, }; -const checkWrRegList = async () => { - const wrRegList = await getFetch("wr", `/reuseFc/pubDetailList`); - return wrRegList; -}; -const hasuListFetch = async (page: string, sggOrCity: string) => { - const checkWrRegListRes = await checkWrRegList(); - const rainRes = await postFectch( - `/prcsFclt/ruseInfo/${page ? page : 1}/10/A/${sggOrCity ? sggOrCity : "11"}/0/1/SW`, - checkWrRegListRes?.fcltCds, - fetchType.COMMON +const hasuListFetch = async ( + page: string, + total: string, + reurnValue: ReturnType, + searchNm: string | undefined, + year: string +) => { + let url = ""; + if (reurnValue.partValue === "A") { + url = `/prcsFclt/info/${page}/${total}/${reurnValue.partValue}/${ + reurnValue.sidoValue ? reurnValue.sidoValue : reurnValue.sigunValue + }/0/1/SW` + } else if (reurnValue.partValue === "R") { + url = `/prcsFclt/info/${page}/${total}/${reurnValue.partValue}/${ + reurnValue.regionValue + ? reurnValue.regionValue + : reurnValue.unitWaterShedValue + ? reurnValue.unitWaterShedValue + : reurnValue.middleRegionValue + }/0/1/SW` + } else { + url = `/prcsFclt/info/${page}/${total}/${reurnValue.envPartValue}/${reurnValue.sidoValue ? reurnValue.sidoValue : reurnValue.sigunValue}/0/1/SW` + + } + if( searchNm&& searchNm?.length>0){ + url+="/"+searchNm + } + const pbnList = await getFetch(fetchType.COMMON, url); + const arrayList = pbnList.map((item: pubHasuType) => item.bscFctCd); + const getRuseList = await postFectch( + `/reuseFc/pubDetailList/${year}`, + arrayList, + fetchType.WR ); - const data = checkWrRegListRes.fcPrfList.map((item: FcPrfType) => { - const findData = rainRes.data.find( - (fclt: pubHasuType) => - fclt.bscFctCd === item.pbnstRuseFcltPk.substring(0, 11) - ); - const usage = item.prfList.reduce( - (acc, cur) => { - acc.inUsage += - cur.wshwtr + - cur.coolUswtr + - cur.cleanUswtr + - cur.drwtUswtr + - cur.dltnUswtr + - cur.ithlRswtr + - cur.ithlEtcUswtr + - cur.cleanToilUswtr + - cur.resn; - acc.outUsage += - cur.lndwtr + - cur.hydUswtr + - cur.ugwtChr + - cur.farmUswtr + - cur.rvrKeepUswtr + - cur.indstUswtr; - acc.total = acc.inUsage + acc.outUsage; + const checkWrRegListRes = getRuseList.data; - return acc; - }, - { total: 0, inUsage: 0, outUsage: 0 } - ); - return { - rvbsn: findData?.rvbsn, - lgbsn: findData?.lgbsn, - mdmbsn: findData?.mdmbsn, - rgnNm: findData?.rgnNm, - sido: findData?.sido, - gugun: findData?.gugun, - bscFctNm: findData?.bscFctNm, - efflWqltStndrdNm: findData?.efflWqltStndrdNm, - fctCpc: findData.fctCpc, - tel: findData?.lclgvrnmnt ?? "-", - ruseUtztnFcltNm: item.ruseUtztnFcltNm, - fcltCpct: item.fcltCpct, - splyExtraCpct: item.splyExtraCpct, - ruseCpct: item.ruseCpct, - pbnstRuseFcltPk: item.pbnstRuseFcltPk, - usageTotal: usage.total, - inUsage: usage.inUsage, - outUsage: usage.outUsage, - fcOpers: item?.fcOpers ?? [], - }; - }); + const data: WaterReuseFacility[] = checkWrRegListRes.map( + (item: FcPrfType) => { + const findData = pbnList.find( + (fclt: pubHasuType) => + fclt.bscFctCd === item.pbnstRuseFcltPk.substring(0, 11) + ); + + const usage = item.prfList.reduce( + (acc, cur) => { + acc.inUsage += + cur.wshwtr + + cur.coolUswtr + + cur.cleanUswtr + + cur.drwtUswtr + + cur.dltnUswtr + + cur.ithlRswtr + + cur.ithlEtcUswtr + + cur.cleanToilUswtr + + cur.resn; + acc.outUsage += + cur.lndwtr + + cur.hydUswtr + + cur.ugwtChr + + cur.farmUswtr + + cur.rvrKeepUswtr + + cur.indstUswtr; + acc.total = acc.inUsage + acc.outUsage; + + return acc; + }, + { total: 0, inUsage: 0, outUsage: 0 } + ); + + return { + rvbsn: findData?.rvbsn, + lgbsn: findData?.lgbsn, + mdmbsn: findData?.mdmbsn, + rgnNm: findData?.rgnNm, + sido: findData?.sido, + gugun: findData?.gugun, + bscFctNm: findData?.bscFctNm, + efflWqltStndrdNm: findData?.efflWqltStndrdNm, + fctCpc: findData.fctCpc, + tel: findData?.tel ?? "-", + ruseUtztnFcltNm: item.ruseUtztnFcltNm, + fcltCpct: item.fcltCpct, + splyExtraCpct: item.splyExtraCpct, + ruseCpct: item.ruseCpct, + pbnstRuseFcltPk: item.pbnstRuseFcltPk, + usageTotal: usage.total, + inUsage: usage.inUsage, + outUsage: usage.outUsage, + operMthd: item.operList[0]?.operMthd, + rprtvBzenty: item.operList[0]?.rprtvBzenty, + bgngDt: item.operList[0]?.bgngDt.toLocaleDateString ?? "", + endDt: item.operList[0]?.endDt.toLocaleDateString?? "", + searchNm: findData.bscFctNm, + searchPk: findData.bscFctCd, + }; + } + ); return data; }; @@ -122,10 +181,21 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = ( }, })); }, - pbnstSttnSearch: async (page: string, total: string, con: string) => { + pbnstSttnSearch: async ( + page: string, + total: string, + reurnValue: ReturnType, + searchNm: string | undefined, + year: string + ) => { try { - - const pbnstSttnRes = await hasuListFetch(page, con); + const pbnstSttnRes = await hasuListFetch( + page, + total, + reurnValue, + searchNm, + year + ); console.log("pbnstSttnRes", pbnstSttnRes); if (Number(total) > 9000) { const pbnstExcel = excelPbnstSttnParsing(pbnstSttnRes); @@ -153,10 +223,23 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = ( console.log("error", erTxt); } }, - pbnSttnInit: async (page: string, sggOrCity: string) => { + pbnSttnInit: async ( + page: string, + total: string, + reurnValue: ReturnType, + year: string + ) => { try { - const pbnstSttnRes = await hasuListFetch(page, sggOrCity); - console.log("pbnstSttnRes", pbnstSttnRes); + + const pbnstSttnRes = await hasuListFetch( + page, + total, + reurnValue, + undefined, + year + ); + + console.log('pbnstSttnRes ', pbnstSttnRes) set((state: pbnstSttnState) => { return { ...state, @@ -171,5 +254,52 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = ( console.log("error", erTxt); } }, + getPbnStnDetail: async (bscFctCd: string) => { + try { + const pbnstDetail = await getFetch("wr", `/reuseFc/pubFc/${bscFctCd}`); + console.log("pbnstDetail ", pbnstDetail); + set((state: pbnstSttnState) => { + return { + ...state, + pbnstSttn: { + ...state.pbnstSttn, + pbnstDetail: pbnstDetail, + }, + }; + }); + } catch (errorHasu) { + console.log(errorHasu); + } + }, + pbnNmSearch: async ( + page: string, + total: string, + reurnValue: ReturnType, + searchNm: string | undefined, + year: string + ) => { + try { + + const pbnstSttnRes = await hasuListFetch( + page, + total, + reurnValue, + searchNm, + year + ); + + set((state: pbnstSttnState) => { + return { + ...state, + pbnstSttn: { + ...state.pbnstSttn, + pbnstSearchData: pbnstSttnRes, + }, + }; + }); + } catch (e) { + console.log(e); + } + }, }; }; diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type.tsx new file mode 100644 index 000000000..0709d991b --- /dev/null +++ b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type.tsx @@ -0,0 +1,24 @@ +export type WaterReuseFacility = { + bscFctNm: string; // 기본시설명 (예: "난지") + efflWqltStndrdNm: string; // 방류수 수질 기준명 (예: "500톤 이상(Ⅲ지역)") + fcltCpct: number; // 시설 용량 (숫자형, 예: 1) + fctCpc: string; // 시설 처리 능력 (예: "2360000") + gugun: string; // 구군 정보 (예: " ") + inUsage: number; // 유입량 (예: 1387) + lgbsn: string; // 대수계 (예: "한강본류") + mdmbsn: string; // 중권역 (예: "한강서울") + outUsage: number; // 유출량 (예: 900) + pbnstRuseFcltPk: string; // 공공하수 재이용 시설 PK (예: "11000SW001R1") + rgnNm: string; // 관할 기관명 (예: "한강유역환경청") + ruseCpct: number; // 재이용 가능 용량 (예: 123) + ruseUtztnFcltNm: string; // 재사용 활용 시설명 (예: "난지 재사용") + rvbsn: string; // 소수계 (예: "한강") + sido: string; // 시도 정보 (예: "서울특별시") + splyExtraCpct: number; // 추가 공급 용량 (예: 123) + tel: string; // 전화번호 (예: "-") + usageTotal: number; // 총 사용량 (예: 2287) + operMthd: string; + rprtvBzenty: string; + bgngDt: string; + endDt: string; +}; 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 32878b736..f1d1ee464 100644 --- a/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx +++ b/apps/wr/components/ui/form/fcltReg/pbnstReg/buseReg/bugRegForm.tsx @@ -160,7 +160,6 @@ export function PbnstBuseForm({ formData.pplInstls = ref.current ? [...ref.current] : []; // ← form 내부 상태 기준으로 복사 formData.fcDemands = fcDemands; formData.fcOrgwts = fcOrgwtFiled; -ß if (formType === "reg") { if ( firstBizData && @@ -460,13 +459,13 @@ export function PbnstBuseForm({ render={({ field: f }) => ( { f.onChange(val); if (val) getDemandCompList(val, 3); }} - setRtnData={(valList: PbnstDemandComType[]) => { + setRtnData={(valList: any[]) => { if ( valList.length > 0 && valList['0'] @@ -507,6 +506,15 @@ export function PbnstBuseForm({ } }} + searchList={demandCompList?.map((item=>{ + return({ + ...item, + searchNm:item.dmdCoNm, + searchPk:item.dmdInfoPk + }) + })) + } + > )} diff --git a/apps/wr/components/ui/searchInput/searchInput.tsx b/apps/wr/components/ui/searchInput/searchInput.tsx index 413c3593a..e7097363f 100644 --- a/apps/wr/components/ui/searchInput/searchInput.tsx +++ b/apps/wr/components/ui/searchInput/searchInput.tsx @@ -1,56 +1,69 @@ +import React, { useCallback, useEffect, useRef, useState } from "react"; -import { useWrStore } from '@/app/store'; -import type { PbnstDemandComType } from '@/app/store/ruseFcltMng/fcltReg/pbnstReg/type'; -import type { DemandCompType } from '@common/business_components/ui'; -import React, { useCallback, useEffect, useRef, useState } from 'react'; - +type SearchType = { + searchNm: string; + searchPk: string; +}; type thisProps = { label: string | undefined; initValue: string | undefined; - setValue : (dmdCoNm?: string) => void; - setRtnData : (rtnData: PbnstDemandComType[]) => void; -} - - -export default function SearchInputText({label=undefined, initValue=undefined, setValue=()=>{}, setRtnData=()=>{}} :thisProps) { - - const { demandCompList } = useWrStore((state) => state); - - + 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(null); - const handleInputChange = useCallback((e: React.ChangeEvent) => { - const value = e.target.value; - setTextValue(value); - setValue(value); - if (value) { - setIsOpen(true); - } else { - setIsOpen(false); - } - }, [ setValue]); + const [textValue, setTextValue] = useState(initValue || ""); - const handleSuggestionClick = useCallback((dmdCoNm: string) => { - setTextValue(dmdCoNm); - setValue(dmdCoNm); - setIsOpen(false); - setRtnData(demandCompList); - }, [demandCompList, setRtnData, setValue]); + const wrapperRef = useRef(null); + const handleInputChange = useCallback( + (e: React.ChangeEvent) => { + const value = e.target.value; + setTextValue(value); + setValue(value); + if (value) { + setIsOpen(true); + } else { + setIsOpen(false); + } + }, + [setValue] + ); + + const handleSuggestionClick = useCallback( + (dmdCoNm: string) => { + setTextValue(dmdCoNm); + setValue(dmdCoNm); + setIsOpen(false); + setRtnData(searchList || []); + }, + [searchList, setRtnData, setValue] + ); 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); }; }, []); + return (
- {demandCompList && demandCompList.length > 0 ? demandCompList.map((item : DemandCompType, index : number) => ( -
handleSuggestionClick(item.dmdCoNm)} - role="button" - tabIndex={0} - onKeyDown={(e) => { - if (e.key === 'Enter' || e.key === ' ') { - handleSuggestionClick(item.dmdCoNm); - } - }} - > - {item.dmdInfoPk.substring(0,10)} {item.dmdCoNm} -
- )) : ( + {searchList && searchList.length > 0 ? ( + searchList.map((item: SearchType, index: number) => ( +
handleSuggestionClick(item.searchNm)} + role="button" + tabIndex={0} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + handleSuggestionClick(item.searchNm); + } + }} + > + {item.searchPk?.substring(0, 10)}  + {item.searchNm} +
+ )) + ) : (
검색 결과가 없습니다.
@@ -88,5 +104,5 @@ export default function SearchInputText({label=undefined, initValue=undefined, s
)}
- ) -} \ No newline at end of file + ); +}