diff --git a/apps/wr/app/map/newWindowPopup.tsx b/apps/wr/app/map/newWindowPopup.tsx index e14a4447d..777c3dcf2 100644 --- a/apps/wr/app/map/newWindowPopup.tsx +++ b/apps/wr/app/map/newWindowPopup.tsx @@ -130,7 +130,7 @@ const NewWindowPopup: React.FC = ({ sigunText: "" }, String(new Date().getFullYear())); } - }, [pbnstSttn.isInit, pbnSttnInit]); + }, [pbnstSttn.isInit]); useEffect(() => { setBdstTable(pbnstSttn.pbnstSttnRes); @@ -155,6 +155,26 @@ const NewWindowPopup: React.FC = ({ console.error("Error fetching data:", error); } }; + // 재이용시설 페이징처리 관련 함수 + const onPageChangeHandler = useCallback((page: number) => { + pbnstSttnSearch( + String(page), + String(13), + { + partValue: "A", + sidoValue: "0", + sigunValue: "", + regionValue: "", + unitWaterShedValue: "", + middleRegionValue: "", + envPartValue: "", + sidoText: "", + sigunText: "", + }, + "", + String(new Date().getFullYear()) + ); + }, []); // useEffect(() => { // if (featureData) { // const selectedVal = featureData.getProperties(); @@ -238,179 +258,181 @@ const NewWindowPopup: React.FC = ({ const isRswt = false; // 온배수시설 const isHtdfl = false; - return ( -
- {/* 체크된 레이어가 없는 경우 (재이용시설 목록) */} - {isPbnst && ( + if (isPbnst) { + if (showDetailView) { + // 재이용시설 상세 + return ( <> - {showDetailView ? ( - // 재이용시설 상세 - <> -
- - </div> - <div className="flex justify-between items-center mb-8"> - <UITab - defaultValue={activeTab} - tabList={tabData.map((tab) => ({ - value: tab.id, - label: tab.name, - onClick: () => setActiveTab(tab.id), - }))} - children={undefined} - /> - </div> - <PbnstSttnModal - data={actTabData?.data[0]|| ({} as customPbnst)} - titleVisible={false} - /> - </> - ) : ( - // 재이용시설 목록 - <> - <div className="flex justify-between items-center"> - <Title title='하수재이용시설 현황' /> - <div className="flex gap-2 mt-8"> - <Button className={btnClass} color="primary" onClick={excelClick}>엑셀다운로드</Button> - </div> - </div> - <UiTable - headName={[]} - tableData={bdstTable || []} - children={ - <HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} /> - } - headlist={pbnstSttn.pbnstSttHeadList} - pageSize={20} - total={100000} - cellClick={(index: number | undefined, headId: string) => { - pbnstCellClick(index); - }} - onPageChange={setPageNation} - /> - </> - )} + <div className="flex justify-between items-center mb-4"> + <Title title="하수재이용시설 상세정보" /> + </div> + <div className="flex justify-between items-center mb-8"> + <UITab + defaultValue={activeTab} + tabList={tabData.map((tab) => ({ + value: tab.id, + label: tab.name, + onClick: () => setActiveTab(tab.id), + }))} + children={undefined} + /> + </div> + <PbnstSttnModal + data={tabData.find((tab) => tab.id === activeTab)?.data[0] || ({} as customPbnst)} + titleVisible={false} + /> </> - )} - {/* 빗물이용시설 */} - {isRain && ( + ); + } else { + // 재이용시설 목록 + return ( <> - {showDetailView ? ( - // 빗물이용시설 상세 - <> - <div className="flex justify-between items-center mb-4"> - <Title title='빗물이용시설 상세정보' /> - </div> - <RainPrfmncSttnPopup rainForm={rainDetailModal.data as customRainBdst} isModal={false} /> - {/* TODO: 지도 점검 결과 현황 추가 할 것 */} - </> - ) : ( - // 빗물이용시설 목록 - <> - <div className="flex justify-between items-center"> - <Title title='빗물이용시설 현황' /> - <div className="flex gap-2 mt-8"> - <Button className={btnClass} color="primary" onClick={excelClick}>엑셀다운로드</Button> - </div> - </div> - <UiTable - headName={[]} - tableData={rainTable || []} - children={ - <HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} /> - } - headlist={rainSttn.rainSttHeadList} - pageSize={20} - total={100000} - cellClick={(index: number | undefined, headId: string) => { - rainCellClick(index ?? undefined, headId) - }} - onPageChange={setPageNation} - /> - </> - )} + <div className="flex justify-between items-center"> + <Title title="하수재이용시설 현황" /> + <div className="flex gap-2 mt-8"> + <Button className={btnClass} color="primary" onClick={excelClick}> + 엑셀다운로드 + </Button> + </div> + </div> + <UiTable + headName={[]} + tableData={bdstTable || []} + children={<HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />} + headlist={pbnstSttn.pbnstSttHeadList} + pageSize={20} + total={100000} + cellClick={(index: number | undefined, headId: string) => { + pbnstCellClick(index); + }} + onPageChange={onPageChangeHandler} + /> </> - )} - {/* 중수도시설 */} - {isRswt && ( + ); + } + } + + if (isRain) { + if (showDetailView) { + // 빗물이용시설 상세 + return ( <> - {showDetailView ? ( - // 재이용시설 상세 - <> - <div className="flex justify-between items-center mb-4"> - <Title title='중수도시설 상세정보' /> - </div> - <RswtrPrfmncsSttnPopup rswtForm={rswtrDetailModal.data as customRswtBdst} isModal={false} /> - {/* TODO: 지도 점검 결과 현황 추가 할 것 */} - </> - ) : ( - // 재이용시설 목록 - <> - <div className="flex justify-between items-center"> - <Title title='중수도시설 현황' /> - <div className="flex gap-2 mt-8"> - <Button className={btnClass} color="primary" onClick={excelClick}>엑셀다운로드</Button> - </div> - </div> - <UiTable - headName={[]} - tableData={rswtrTable || []} - children={ - <HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} /> - } - headlist={rswtSttn.rswtSttHeadList} - pageSize={20} - total={100000} - cellClick={(index: number | undefined, headId: string) => { - rswtCellClick(index, headId); - }} - onPageChange={setPageNation} - /> - </> - )} + <div className="flex justify-between items-center mb-4"> + <Title title="빗물이용시설 상세정보" /> + </div> + <RainPrfmncSttnPopup rainForm={rainDetailModal.data as customRainBdst} isModal={false} /> </> - )} - {/* 온배수시설 */} - {isHtdfl && ( + ); + } else { + // 빗물이용시설 목록 + return ( <> - {showDetailView ? ( - // 재이용시설 상세 - <> - <div className="flex justify-between items-center mb-4"> - <Title title='온배수시설 상세정보' /> - </div> - {/* <HtdflPrfmncSttnPopup htdflForm={htdflDetailModal.data as customHtdflBdst} isModal={false} /> */} - <HtdflPrfmncSttnPopup htdflForm={htdflDetailModal.data as customHtdflBdst} isModal={false} /> - </> - ) : ( - // 재이용시설 목록 - <> - <div className="flex justify-between items-center"> - <Title title='온배수시설 현황' /> - <div className="flex gap-2 mt-8"> - <Button className={btnClass} color="primary" onClick={excelClick}>엑셀다운로드</Button> - </div> - </div> - <UiTable - headName={[]} - tableData={bdstTable || []} - children={ - <HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} /> - } - headlist={htdflSttn.htdflSttHeadList} - pageSize={20} - total={100000} - cellClick={(index: number | undefined, headId: string) => { - htdflCellClick(index ?? undefined, headId); - }} - onPageChange={setPageNation} - /> - </> - )} + <div className="flex justify-between items-center"> + <Title title="빗물이용시설 현황" /> + <div className="flex gap-2 mt-8"> + <Button className={btnClass} color="primary" onClick={excelClick}> + 엑셀다운로드 + </Button> + </div> + </div> + <UiTable + headName={[]} + tableData={rainTable || []} + children={<HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />} + headlist={rainSttn.rainSttHeadList} + pageSize={20} + total={100000} + cellClick={(index: number | undefined, headId: string) => { + rainCellClick(index ?? undefined, headId); + }} + onPageChange={setPageNation} + /> </> - )} - </div> - ); + ); + } + } + + if (isRswt) { + if (showDetailView) { + // 중수도시설 상세 + return ( + <> + <div className="flex justify-between items-center mb-4"> + <Title title="중수도시설 상세정보" /> + </div> + <RswtrPrfmncsSttnPopup rswtForm={rswtrDetailModal.data as customRswtBdst} isModal={false} /> + </> + ); + } else { + // 중수도시설 목록 + return ( + <> + <div className="flex justify-between items-center"> + <Title title="중수도시설 현황" /> + <div className="flex gap-2 mt-8"> + <Button className={btnClass} color="primary" onClick={excelClick}> + 엑셀다운로드 + </Button> + </div> + </div> + <UiTable + headName={[]} + tableData={rswtrTable || []} + children={<HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />} + headlist={rswtSttn.rswtSttHeadList} + pageSize={20} + total={100000} + cellClick={(index: number | undefined, headId: string) => { + rswtCellClick(index, headId); + }} + onPageChange={setPageNation} + /> + </> + ); + } + } + + if (isHtdfl) { + if (showDetailView) { + // 온배수시설 상세 + return ( + <> + <div className="flex justify-between items-center mb-4"> + <Title title="온배수시설 상세정보" /> + </div> + <HtdflPrfmncSttnPopup htdflForm={htdflDetailModal.data as customHtdflBdst} isModal={false} /> + </> + ); + } else { + // 온배수시설 목록 + return ( + <> + <div className="flex justify-between items-center"> + <Title title="온배수시설 현황" /> + <div className="flex gap-2 mt-8"> + <Button className={btnClass} color="primary" onClick={excelClick}> + 엑셀다운로드 + </Button> + </div> + </div> + <UiTable + headName={[]} + tableData={htdflTable || []} + children={<HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />} + headlist={htdflSttn.htdflSttHeadList} + pageSize={20} + total={100000} + cellClick={(index: number | undefined, headId: string) => { + htdflCellClick(index ?? undefined, headId); + }} + onPageChange={setPageNation} + /> + </> + ); + } + } + + return null; // 조건에 맞는 콘텐츠가 없을 경우 }; return (