상세데이터 state 처리

apps/wr/app/map/newWindowPopup.tsx

@@ -61,6 +61,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
   const [rainTable, setRainTable] = useState<customRainBdst[]>();
   const [rainPage, setRainPage] = useState(1)
   const [rainDetailModal, setRainDetailModal] = useState<{ isOpen: boolean, data: customRainBdst | undefined }>({ data: undefined, isOpen: false });
+  const [rainList, setRainList] = useState<customRainBdst[]>(rainSttnRes || []);
 
   // 중수도시설 변수
   const { rswtSttn, rswtSttnSearch, rswtSttnInit } = useWrStore(
@@ -70,6 +71,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
   const [rswtrTable, setRswtrTable] = useState<customRswtBdst[]>();
   const [rswtrDetailModal, setRswtrDetailModal] = useState<{ isOpen: boolean, data: customRswtBdst | undefined }>({ data: undefined, isOpen: false });
   const [rswtrPage, setRswtrPage] = useState(1);
+  const [rswtrList, setRswtrList] = useState<customRswtBdst[]>(rswtSttnRes || []);
 
   // 온배수시설 변수
   const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state);
@@ -77,6 +79,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 [htdflPage, setHtdflPage] = useState(1)
+  const [htdflList, setHtdflList] = useState<customHtdflBdst[]>(htdflSttnRes || []);
 
   //하수처리시설 변수
   const {
@@ -118,8 +121,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
   };
   const fetchHasuDetail = async (featureCd: string, data: string) => {
     try {
-      const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON);
-      //TODO : state 처리.
+      const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/10/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON)
       setHasuList(
         rainRes.data.map((item: any) => {
         return {
@@ -127,34 +129,41 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
           fctCpc: Number(item.fctCpc) || 0,
           ruse: item.ruse === false ? "N" : "Y",
         };
-      });
+      })
       ) 
-      pbnstHasuRes = hasuList
-      if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] });
-
     } catch (error) {
       console.error("Error fetching data:", error);
     }
   };
-
   const detainSttn = async (featureCd: string, layerNm: string) => {
     if (layerNm == '빗물이용시설') {
       const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`)
-      rainSttnRes = res
-      setRainDetailModal({ isOpen: true, data: rainSttnRes[0] });
+      setRainList(res)
     }
     else if(layerNm == '중수도시설'){
       const res = await getFetch(fetchType.WR,`/reuseFc/waterreuseFc/1/20/0/${featureCd}`)
-      rswtSttnRes = res
-      console.log('중수도', res, featureCd)
-      setRswtrDetailModal({isOpen:true,data:rswtSttnRes[0]})
+      setRswtrList(res)
     }
     else{
       const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`)
-      htdflSttnRes = res
+      setHtdflList(res)
       setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
     }
   }
+  // 상세 목록 데이터 상태 처리
+  useEffect(()=>{
+    if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] });
+  },[hasuList])  
+  useEffect(()=>{
+    if (rainList.length > 0) setRainDetailModal({ isOpen: true, data: rainList[0] });
+  },[rainList])
+  useEffect(()=>{
+    if (rswtrList.length > 0) setRswtrDetailModal({ isOpen: true, data: rswtrList[0] });
+  },[rswtrList])
+  useEffect(()=>{
+    if (htdflList.length > 0) setHtdflDetailModal({ isOpen: true, data: htdflList[0] });
+  },[htdflList])
+
   const layerId = getSelectedLayers();
     if (featureData && typeof featureData.getProperties === "function") {
       const selectedVal = featureData.getProperties();
@@ -174,7 +183,9 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
         else{
           featureCd = selectedVal?.bdst_nm;
           setFcltPk(featureCd)
-          detainSttn(featureCd,layerId)
+          if (layerId) {
+            detainSttn(featureCd, layerId);
+          }
         }
         setViewMode("detail")
       }