재이용시설 현황 페이징 처리

apps/wr/app/map/newWindowPopup.tsx

@@ -130,7 +130,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
           sigunText: ""
         },  String(new Date().getFullYear()));
       }
-    }, [pbnstSttn.isInit, pbnSttnInit]);
+    }, [pbnstSttn.isInit]);
 
     useEffect(() => {
       setBdstTable(pbnstSttn.pbnstSttnRes);
@@ -155,6 +155,26 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       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<NewWindowPopupProps> = ({
     const isRswt = false;
     // 온배수시설
     const isHtdfl = false;
-    return (
-      <div className="mt-4">
-        {/* 체크된 레이어가 없는 경우 (재이용시설 목록) */}
-        {isPbnst && (
+    if (isPbnst) {
+      if (showDetailView) {
+        // 재이용시설 상세
+        return (
           <>
-            {showDetailView ? (
-              // 재이용시설 상세
-              <>
-                <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={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 (