From bb6bba4497ba3e58bfcd3e356aae169d373d08b9 Mon Sep 17 00:00:00 2001 From: leedj312 Date: Wed, 6 Aug 2025 09:36:13 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AC=BC=EC=9E=AC=EC=9D=B4=EC=9A=A9=20?= =?UTF-8?q?=EB=A7=B5=20=EC=8B=9C=EC=84=A4=20=ED=98=84=ED=99=A9=20=ED=8C=9D?= =?UTF-8?q?=EC=97=85=20=EA=B2=80=EC=83=89=20=EC=A1=B0=EA=B1=B4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wr/app/store/map/htdflMap/index.tsx | 26 +++ apps/wr/app/store/map/rainMap/index.tsx | 26 +++ apps/wr/app/store/map/rswtMap/index.tsx | 27 +++ .../LayerPopUp/HedfFacilty/HtdfFacilty.tsx | 176 ++++++++++++++---- .../LayerPopUp/RainFacility/RainFacility.tsx | 126 ++++++++++++- .../LayerPopUp/RswtFacilty/RswtFacilty.tsx | 157 +++++++++++++--- 6 files changed, 463 insertions(+), 75 deletions(-) diff --git a/apps/wr/app/store/map/htdflMap/index.tsx b/apps/wr/app/store/map/htdflMap/index.tsx index 8b6f4513b..97f936ef8 100644 --- a/apps/wr/app/store/map/htdflMap/index.tsx +++ b/apps/wr/app/store/map/htdflMap/index.tsx @@ -16,6 +16,7 @@ export type htdfMapState = { type htdfMapActions = { htdfMapInit: (page: number, total: number, cityOrSgg: string) => void; + htdfMapSearch: (page: number, total: number, cityOrSgg:string, searchTxt?:string) =>void }; export type htdfMapType = htdfMapState & htdfMapActions; @@ -59,5 +60,30 @@ export const htdfMapActionsExport: (set: any) => htdfMapActions = ( console.log(e); } }, + htdfMapSearch: async (page: number, total: number, cityOrSgg:string, searchTxt?:string) => { + try { + const htdfMapRes = await getFetchWithCount( + fetchType.WR, + `/drain/facilityList` + + (page ? `/${page}` : "/1") + + (total ? `/${total}` : "/20") + + (cityOrSgg ? `/${cityOrSgg}` : "/0") + + (searchTxt ? `/${searchTxt}` : "") + ); + + set((state: htdfMapState) => { + return { + ...state, + htdfMap: { + ...state.htdfMap, + htdfMapRes: htdfMapRes.data, + htdfMapCount: htdfMapRes.count, + }, + }; + }); + } catch (e) { + console.log(e); + } + }, }; }; diff --git a/apps/wr/app/store/map/rainMap/index.tsx b/apps/wr/app/store/map/rainMap/index.tsx index 93b6bf9a4..9ddca1f91 100644 --- a/apps/wr/app/store/map/rainMap/index.tsx +++ b/apps/wr/app/store/map/rainMap/index.tsx @@ -20,6 +20,7 @@ export type rainMapState = { type rainMapActions = { rainMapInit: (page: number, total: number, cityOrSgg:string) => void; + rainMapSearch: (page: number, total: number, cityOrSgg:string, searchTxt?:string) =>void }; export type rainMapType = rainMapState & rainMapActions; @@ -63,5 +64,30 @@ export const rainMapActionsExport: (set: any) => rainMapActions = ( console.log(e); } }, + rainMapSearch: async (page: number, total: number, cityOrSgg:string, searchTxt?:string) => { + try { + const rainMapRes = await getFetchWithCount( + fetchType.WR, + `/reuseFc/rainyInfoList` + + (page ? `/${page}` : "/1") + + (total ? `/${total}` : "/20") + + (cityOrSgg ? `/${cityOrSgg}` : "/0") + + (searchTxt ? `/${searchTxt}` : "") + ); + + set((state: rainMapState) => { + return { + ...state, + rainMap: { + ...state.rainMap, + rainMapRes: rainMapRes.data, + rainMapCount: rainMapRes.count, + }, + }; + }); + } catch (e) { + console.log(e); + } + }, }; }; diff --git a/apps/wr/app/store/map/rswtMap/index.tsx b/apps/wr/app/store/map/rswtMap/index.tsx index b7b2f0651..c55cdc983 100644 --- a/apps/wr/app/store/map/rswtMap/index.tsx +++ b/apps/wr/app/store/map/rswtMap/index.tsx @@ -17,6 +17,7 @@ export type rswtMapState = { type rswtMapActions = { rswtMapInit: (page: number, total: number, cityOrSgg:string) => void; + rswtMapSearch: (page: number, total: number, cityOrSgg:string, searchTxt?:string) => void }; export type rswtMapType = rswtMapState & rswtMapActions; @@ -60,5 +61,31 @@ export const rswtMapActionsExport: (set: any) => rswtMapActions = ( console.log(e); } }, + rswtMapSearch: async (page: number, total: number, cityOrSgg:string, searchTxt?:string) => { + try { + const rswtMapRes = await getFetchWithCount( + fetchType.WR, + `/reuseFc/waterreuseFc` + + (page ? `/${page}` : "/1") + + (total ? `/${total}` : "/20") + + (cityOrSgg ? `/${cityOrSgg}` : "/0") + + (searchTxt ? `/${searchTxt}` : "") + ); + + set((state: rswtMapState) => { + return { + ...state, + rswtMap: { + ...state.rswtMap, + rswtMapRes: rswtMapRes.data, + rswtMapCount: rswtMapRes.count, + }, + }; + }); + } catch (e) { + console.log(e); + } + }, + }; }; diff --git a/apps/wr/components/ui/map/LayerPopUp/HedfFacilty/HtdfFacilty.tsx b/apps/wr/components/ui/map/LayerPopUp/HedfFacilty/HtdfFacilty.tsx index bca9128e1..05589e38a 100644 --- a/apps/wr/components/ui/map/LayerPopUp/HedfFacilty/HtdfFacilty.tsx +++ b/apps/wr/components/ui/map/LayerPopUp/HedfFacilty/HtdfFacilty.tsx @@ -1,26 +1,69 @@ import { useWrStore } from "@/app/store"; import { rainMapSize } from "@/app/store/map/rainMap"; import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg"; -import { tableData } from "@/components/lib/func/commom"; -import { Title, UiTable } from "@common/business_components/ui"; +import { getCity, tableData } from "@/components/lib/func/commom"; +import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal"; +import { + ContentsDiv, + SearchDiv, + SearchFormLeft, + SearchFormRight, + SearchInput, + SelectBox, + Title, + UiTable, + type SelectDataType, +} from "@common/business_components/ui"; import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan"; -import { useEffect, useState } from "react"; +import { Button } from "@common/components/ui"; +import { useCallback, useEffect, useState } from "react"; export function HtdflFacility({ - rtnFeature, - }: { - rtnFeature: (feature: any) => void; - }) { - const { code, htdfMap, htdfMapInit } = useWrStore((state) => state); + rtnFeature, +}: { + rtnFeature: (feature: any) => void; +}) { + const { code, htdfMap, htdfMapInit,htdfMapSearch } = useWrStore((state) => state); const { htdfMapCount, htdfMapRes, htdfSttHeadList, htdfSttNodeList } = htdfMap; const [htdflTable, setHtdflTable] = useState(); const [isReset, setIsReset] = useState(false); + const [selectSgg, setSelectSgg] = useState(); + const [objSearch, setObjSearch] = useState({ + sgg: "", + city: "", + }); + + const [seartchTxt, setSearchTxt] = useState(); + + const getSelCity = useCallback( + (val: string | number) => { + const cityValue = String(val); + const data = getCity(cityValue, code.sggCd); + setSelectSgg(data); + setObjSearch({ city: cityValue, sgg: "0" }); + }, + [code.sggCd] + ); + + const getSgg = useCallback((val: string | number) => { + setObjSearch((prev) => ({ ...prev, sgg: String(val) })); + }, []); + + useEffect(() => { + // code.cityCd 데이터가 로드되었고, 아직 시/도 선택이 안된 초기 상태일 때 실행 + if (code.cityCd && code.cityCd.length > 0 && !objSearch.city) { + const firstCityVal = code.cityCd[0]?.val; + if (firstCityVal) { + // 첫 번째 시/도 값으로 상태를 초기화합니다. + getSelCity(firstCityVal); + } + } + }, [code.cityCd, objSearch.city, getSelCity]); const htdflCellClick = (index: number | undefined) => { if (index !== undefined && htdflTable !== undefined) { - rtnFeature(htdflTable[index]); - + rtnFeature(htdflTable[index]); } }; @@ -45,33 +88,94 @@ export function HtdflFacility({ return ( <> -
-
- - {/* <div className="flex gap-2 mt-8"> - <Button className={btnClass} color="primary" onClick={excelClick}> - 엑셀다운로드 - </Button> - </div> */} + <ContentsDiv> + <div className="grid grid-cols-4 gap-4 "> + <div className="col-span-4"> + <Title title="온배수시설 현황" /> + <SearchDiv> + <SearchFormLeft> + <div className="col-span-10 flex flex-row"> + <SelectBox + className="col-span-3 w-1/6 h-full text-2xl" + label="시도" + selectClass={""} + selectArray={code.cityCd || []} + onSelectValue={(val) => { + getSelCity(val); + }} + value={objSearch.city} + /> + <SelectBox + className="col-span-3 w-1/6 h-full text-2xl ml-4" + label="시군구" + selectClass={""} + selectArray={selectSgg || []} + onSelectValue={getSgg} + value={objSearch.sgg} + /> + <SearchInput + className={"!text-3xl ml-4"} + label="회사명" + textValue={seartchTxt ?? ""} + setText={(e) => { + setSearchTxt(e); + }} + /> + </div> + </SearchFormLeft> + <SearchFormRight className="w-3/12 mx-5 flex flex-col items-center justify-center space-x-2 "> + <div className="flex flex-row space-x-2"> + <Button + className="mt-2" + size={"sm"} + onClick={() => { + setIsReset(true); + }} + > + 조회 + </Button> + </div> + </SearchFormRight> + </SearchDiv> + </div> </div> - <UiTable - headName={[]} - tableData={htdflTable || []} - headlist={htdfSttHeadList} - pageSize={rainMapSize} - total={htdfMapCount} - cellClick={(index: number | undefined) => { - htdflCellClick(index ?? undefined); - }} - onPageChange={(page) => { - htdfMapInit(page, rainMapSize, "0"); - setIsReset(false); - }} - resetPageNo={isReset} - > - <HeadMakeColSpan upHeadList={htdfSttNodeList} /> - </UiTable> - </div> + <div className="grid grid-cols-2 gap-4 "> + <div className="col-span-2"> + <UiTable + headName={[]} + tableData={htdflTable || []} + headlist={htdfSttHeadList} + pageSize={rainMapSize} + total={htdfMapCount} + cellClick={(index: number | undefined) => { + htdflCellClick(index ?? undefined); + }} + onPageChange={(page) => { + const con = + objSearch.sgg && objSearch.sgg !== "0" + ? objSearch.sgg + : objSearch.city; + if (con) { + if (seartchTxt && seartchTxt?.length > 0) { + htdfMapSearch( + page, + rainMapSize, + String(con), + seartchTxt ?? "" + ); + } else { + htdfMapSearch(page, rainMapSize, String(con)); + } + setIsReset(false); + } + }} + resetPageNo={isReset} + > + <HeadMakeColSpan upHeadList={htdfSttNodeList} /> + </UiTable> + </div> + </div> + </ContentsDiv> </> ); } diff --git a/apps/wr/components/ui/map/LayerPopUp/RainFacility/RainFacility.tsx b/apps/wr/components/ui/map/LayerPopUp/RainFacility/RainFacility.tsx index 348cf6b9e..e1a917e8f 100644 --- a/apps/wr/components/ui/map/LayerPopUp/RainFacility/RainFacility.tsx +++ b/apps/wr/components/ui/map/LayerPopUp/RainFacility/RainFacility.tsx @@ -1,24 +1,71 @@ import { useWrStore } from "@/app/store"; import { rainMapSize } from "@/app/store/map/rainMap"; import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg"; -import { tableData } from "@/components/lib/func/commom"; -import { ContentsDiv, Title, UiTable } from "@common/business_components/ui"; +import { getCity, tableData } from "@/components/lib/func/commom"; +import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal"; +import { + ContentsDiv, + SearchDiv, + SearchFormLeft, + SearchFormRight, + SearchInput, + SelectBox, + Title, + UiTable, + type SelectDataType, +} from "@common/business_components/ui"; import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan"; -import { useEffect, useState } from "react"; +import { Button } from "@common/components/ui"; +import { useCallback, useEffect, useState } from "react"; export function RainFacility({ rtnFeature, }: { rtnFeature: (feature: any) => void; }) { - const { code, rainMap, rainMapInit } = useWrStore((state) => state); + const { code, rainMap, rainMapInit, rainMapSearch } = useWrStore( + (state) => state + ); const { rainMapRes, rainMapCount, rainSttHeadList, rainSttNodeList } = rainMap; const [rainTable, setRainTable] = useState<customRainBdst[]>(); const [isReset, setIsReset] = useState(false); + const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>(); + const [objSearch, setObjSearch] = useState<objSearchType>({ + sgg: "", + city: "", + }); + + const [seartchTxt, setSearchTxt] = useState<string>(); + + const getSelCity = useCallback( + (val: string | number) => { + const cityValue = String(val); + const data = getCity(cityValue, code.sggCd); + setSelectSgg(data); + setObjSearch({ city: cityValue, sgg: "0" }); + }, + [code.sggCd] + ); + + const getSgg = useCallback((val: string | number) => { + setObjSearch((prev) => ({ ...prev, sgg: String(val) })); + }, []); + + useEffect(() => { + // code.cityCd 데이터가 로드되었고, 아직 시/도 선택이 안된 초기 상태일 때 실행 + if (code.cityCd && code.cityCd.length > 0 && !objSearch.city) { + const firstCityVal = code.cityCd[0]?.val; + if (firstCityVal) { + // 첫 번째 시/도 값으로 상태를 초기화합니다. + getSelCity(firstCityVal); + } + } + }, [code.cityCd, objSearch.city, getSelCity]); useEffect(() => { if (!rainMap.isInit) { + console.log(" init "); rainMapInit(1, rainMapSize, "0"); } }, [rainMapInit, rainMap.isInit]); @@ -34,7 +81,6 @@ export function RainFacility({ }; useEffect(() => { - const data = tableData(rainMapRes, { code }); const chData = data .map((item: any) => { @@ -74,9 +120,58 @@ export function RainFacility({ return ( <> <ContentsDiv> + <div className="grid grid-cols-4 gap-4 "> + <div className="col-span-4"> + <Title title="빗물이용시설 현황" /> + <SearchDiv> + <SearchFormLeft> + <div className="col-span-10 flex flex-row"> + <SelectBox + className="col-span-3 w-1/6 h-full text-2xl" + label="시도" + selectClass={""} + selectArray={code.cityCd || []} + onSelectValue={(val) => { + getSelCity(val); + }} + value={objSearch.city} + /> + <SelectBox + className="col-span-3 w-1/6 h-full text-2xl ml-4" + label="시군구" + selectClass={""} + selectArray={selectSgg || []} + onSelectValue={getSgg} + value={objSearch.sgg} + /> + <SearchInput + className={"!text-3xl ml-4"} + label="회사명" + textValue={seartchTxt ?? ""} + setText={(e) => { + setSearchTxt(e); + }} + /> + </div> + </SearchFormLeft> + <SearchFormRight className="w-3/12 mx-5 flex flex-col items-center justify-center space-x-2 "> + <div className="flex flex-row space-x-2"> + <Button + className="mt-2" + size={"sm"} + onClick={() => { + setIsReset(true); + }} + > + 조회 + </Button> + </div> + </SearchFormRight> + </SearchDiv> + </div> + </div> <div className="grid grid-cols-2 gap-4 "> <div className="col-span-2"> - <Title title="빗물이용시설 현황" /> <UiTable headName={[]} tableData={rainTable || []} @@ -87,8 +182,23 @@ export function RainFacility({ rainCellClick(index ?? undefined, headId); }} onPageChange={(page) => { - rainMapInit(page, rainMapSize, "0"); - setIsReset(false); + const con = + objSearch.sgg && objSearch.sgg !== "0" + ? objSearch.sgg + : objSearch.city; + if (con) { + if (seartchTxt && seartchTxt?.length > 0) { + rainMapSearch( + page, + rainMapSize, + String(con), + seartchTxt ?? "" + ); + } else { + rainMapSearch(page, rainMapSize, String(con)); + } + setIsReset(false); + } }} resetPageNo={isReset} > diff --git a/apps/wr/components/ui/map/LayerPopUp/RswtFacilty/RswtFacilty.tsx b/apps/wr/components/ui/map/LayerPopUp/RswtFacilty/RswtFacilty.tsx index 64d558b44..18a2b2c1d 100644 --- a/apps/wr/components/ui/map/LayerPopUp/RswtFacilty/RswtFacilty.tsx +++ b/apps/wr/components/ui/map/LayerPopUp/RswtFacilty/RswtFacilty.tsx @@ -1,22 +1,57 @@ import { useWrStore } from "@/app/store"; import { rainMapSize } from "@/app/store/map/rainMap"; import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg"; -import { tableData } from "@/components/lib/func/commom"; -import { Title, UiTable } from "@common/business_components/ui"; +import { getCity, tableData } from "@/components/lib/func/commom"; +import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal"; +import { ContentsDiv, SearchDiv, SearchFormLeft, SearchFormRight, SearchInput, SelectBox, Title, UiTable, type SelectDataType } from "@common/business_components/ui"; import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan"; -import { useEffect, useState } from "react"; +import { Button } from "@common/components/ui"; +import { useCallback, useEffect, useState } from "react"; export function RswtFacility({ rtnFeature, }: { rtnFeature: (feature: any) => void; }) { - const { code, rswtMap, rswtMapInit } = useWrStore((state) => state); + const { code, rswtMap, rswtMapInit,rswtMapSearch } = useWrStore((state) => state); const { rswtMapRes, rswtMapCount, rswtSttHeadList, rswtSttNodeList } = - rswtMap; + rswtMap; const [rswtrTable, setRswtrTable] = useState<customRswtBdst[]>(); const [isReset, setIsReset] = useState(false); + + const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>(); + const [objSearch, setObjSearch] = useState<objSearchType>({ + sgg: "", + city: "", + }); + + const [seartchTxt, setSearchTxt] = useState<string>(); + + const getSelCity = useCallback( + (val: string | number) => { + const cityValue = String(val); + const data = getCity(cityValue, code.sggCd); + setSelectSgg(data); + setObjSearch({ city: cityValue, sgg: "0" }); + }, + [code.sggCd] + ); + + const getSgg = useCallback((val: string | number) => { + setObjSearch((prev) => ({ ...prev, sgg: String(val) })); + }, []); + + useEffect(() => { + // code.cityCd 데이터가 로드되었고, 아직 시/도 선택이 안된 초기 상태일 때 실행 + if (code.cityCd && code.cityCd.length > 0 && !objSearch.city) { + const firstCityVal = code.cityCd[0]?.val; + if (firstCityVal) { + // 첫 번째 시/도 값으로 상태를 초기화합니다. + getSelCity(firstCityVal); + } + } + }, [code.cityCd, objSearch.city, getSelCity]); const rswtCellClick = (index: number | undefined, headId: string) => { if ( headId !== "chBuildingYn" && @@ -67,33 +102,93 @@ export function RswtFacility({ }, [code, rswtMapRes]); return ( <> - <div style={{ overflowY: "auto" }}> - <div className="flex justify-between items-center"> - <Title title="중수도시설 현황" /> - {/* <div className="flex gap-2 mt-8"> - <Button className={btnClass} color="primary" onClick={rswtSttnExcelDownload}> - 엑셀다운로드 - </Button> - </div> */} + <ContentsDiv> + <div className="grid grid-cols-4 gap-4 "> + <div className="col-span-4"> + <Title title="중수도이용시설 현황" /> + <SearchDiv> + <SearchFormLeft> + <div className="col-span-10 flex flex-row"> + <SelectBox + className="col-span-3 w-1/6 h-full text-2xl" + label="시도" + selectClass={""} + selectArray={code.cityCd || []} + onSelectValue={(val) => { + getSelCity(val); + }} + value={objSearch.city} + /> + <SelectBox + className="col-span-3 w-1/6 h-full text-2xl ml-4" + label="시군구" + selectClass={""} + selectArray={selectSgg || []} + onSelectValue={getSgg} + value={objSearch.sgg} + /> + <SearchInput + className={"!text-3xl ml-4"} + label="회사명" + textValue={seartchTxt ?? ""} + setText={(e) => { + setSearchTxt(e); + }} + /> + </div> + </SearchFormLeft> + <SearchFormRight className="w-3/12 mx-5 flex flex-col items-center justify-center space-x-2 "> + <div className="flex flex-row space-x-2"> + <Button + className="mt-2" + size={"sm"} + onClick={() => { + setIsReset(true); + }} + > + 조회 + </Button> + </div> + </SearchFormRight> + </SearchDiv> + </div> </div> - <UiTable - headName={[]} - tableData={rswtrTable || []} - headlist={rswtSttHeadList} - pageSize={20} - total={rswtMapCount} - cellClick={(index: number | undefined, headId: string) => { - rswtCellClick(index, headId); - }} - onPageChange={(page) => { - rswtMapInit(page, rainMapSize, "0"); - setIsReset(false); - }} - resetPageNo={isReset} - > - <HeadMakeColSpan upHeadList={rswtSttNodeList} /> - </UiTable> - </div> + <div className="grid grid-cols-2 gap-4 "> + <div className="col-span-2"> + <UiTable + headName={[]} + tableData={rswtrTable || []} + headlist={rswtSttHeadList} + pageSize={20} + total={rswtMapCount} + cellClick={(index: number | undefined, headId: string) => { + rswtCellClick(index, headId); + }} + onPageChange={(page) => { + const con = + objSearch.sgg && objSearch.sgg !== "0" + ? objSearch.sgg + : objSearch.city; + if (con) { + if (seartchTxt && seartchTxt?.length > 0) { + rswtMapSearch( + page, + rainMapSize, + String(con), + seartchTxt ?? "" + ); + } else { + rswtMapSearch(page, rainMapSize, String(con)); + } + setIsReset(false); + }}} + resetPageNo={isReset} + > + <HeadMakeColSpan upHeadList={rswtSttNodeList} /> + </UiTable> + </div> + </div> + </ContentsDiv> </> ); }