온배수시설 상세정보 구현완료

apps/wr/app/map/newWindowPopup.tsx

@@ -105,6 +105,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
   const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>();
   const [htdflDetailModal, setHtdflDetailModal] = useState<{ isOpen: boolean, data: customHtdflBdst | undefined }>({ data: undefined, isOpen: false });
   const [bdstChgProps, setBdstChgProps] = useState<{ isOpen: boolean, chBuilding: chgBuilding[] }>({ isOpen: false, chBuilding: [] });
+  const [htdflPage,setHtdflPage] = useState(1)
   if(!featureData) return ;
   ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
   useEffect(() => {
@@ -132,6 +133,12 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
           rswtSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd);
           setRswtrDetailModal({ isOpen: true, data: rswtSttnRes[0] });
         }
+        else if(layerId == '온배수시설'){
+          featureCd = selectedVal?.bdst_nm;
+          setFcltPk(featureCd)
+          htdflSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd);
+          setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
+        }
         setViewMode("detail")
       }
     } else if (seletectedLayerNm) { setViewMode("list") }
@@ -363,9 +370,31 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       htdflTable !== undefined
     ) {
       setHtdflDetailModal({ isOpen: true, data: htdflTable[index] });
+      setViewMode('detail')
     }
   };
- 
+  useEffect(() => {
+      if (!htdflSttn.isInit) {
+        initHtdfl(1, "20", "0", '', code.cityCd, code.sggCd);
+      }
+    }, [htdflSttn.isInit, initHtdfl]);
+  
+    useEffect(() => {
+      const data = tableData(htdflSttnRes, { code });
+      const chData = data
+        .map((item: any) => ({
+          ...item,
+          ...item.reuseBuilding[0],
+          ...item.reuseBuilding[0].htdflObj,
+          chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N",
+        }))
+        .filter((item: any) => item.htdflObj !== undefined);
+        setHtdflTable(chData);
+    }, [code, htdflSttnRes, htdflSttn.htdflSttHeadList]);
+
+    useEffect(() => {
+        htdflSttnSearch(htdflPage, "20", '', '', code.cityCd, code.sggCd);
+      }, [htdflPage]);
   ///////////////////////////////////////////// 온배수 시설 //////////////////////////////////////////////////
 
   // 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수
@@ -555,7 +584,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
               cellClick={(index: number | undefined, headId: string) => {
                 htdflCellClick(index ?? undefined, headId);
               }}
-              onPageChange={() => { }}
+              onPageChange={setHtdflPage}
             />
           </>
         );