재이용시설 팝업 화면 상세구현 완료

apps/wr/app/map/newWindowPopup.tsx

@@ -109,9 +109,9 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       pbnstSttn.pbnstSttnRes &&
       pbnstSttn.pbnstSttnRes[index]
     ) {
-      console.log(pbnstSttn.pbnstSttnRes[index])
       setPbnstRuseFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk);
-      getPbnStnDetail(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk);
+      fetchpbnstDetail(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk)
+      setActiveTab(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk)
       setShowDetailView(true); // 상세정보 화면 표시 상태 변경
     }
   };
@@ -136,33 +136,36 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       setBdstTable(pbnstSttn.pbnstSttnRes);
     }, [pbnstSttn.pbnstSttnRes]);
 
-
+// 재이용시설 상세정보
+  const setTabDataFunc = (res:any, pk:string) => {
+    setTabData((prev) => {
+      if (prev.some((tab) => tab.id === pk)) {
+        return prev; // 이미 존재하는 탭이면 추가하지 않음
+      } 
+      return [...prev, { id: pk, name: `재이용시설 ${prev.length + 1}`, data: res }];
+    });
+  }
   // 재이용시설 조회
   const fetchpbnstDetail = async (featureCd: string) => {
     try {
       const response = await getFetch("wr", `/reuseFc/pubFc/${featureCd}`);
       // 중복 데이터 추가 방지
-      setTabData((prev) => {
-        if (prev.some((tab) => tab.id === featureCd)) {
-          return prev; // 이미 존재하는 탭이면 추가하지 않음
-        }
-        return [...prev, { id: featureCd, name: `재이용시설 ${prev.length + 1}`, data: response }];
-      });
+      setTabDataFunc(response, featureCd);
     } catch (error) {
       console.error("Error fetching data:", error);
     }
   };
-  useEffect(() => {
-    if (featureData) {
-      const selectedVal = featureData.getProperties();
-      const featureCd = selectedVal?.swtrmt_fclt_cd;
-      if (featureCd && featureCd !== pbnstRuseFcltPk) {
-        setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장
-        setActiveTab(featureCd)
-        fetchpbnstDetail(featureCd); // 상세정보 가져오기
-      }
-    }
-  }, [featureData]);
+  // useEffect(() => {
+  //   if (featureData) {
+  //     const selectedVal = featureData.getProperties();
+  //     const featureCd = selectedVal?.swtrmt_fclt_cd;
+  //     if (featureCd && featureCd !== pbnstRuseFcltPk) {
+  //       setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장
+  //       setActiveTab(featureCd)
+  //       fetchpbnstDetail(featureCd); // 상세정보 가져오기
+  //     }
+  //   }
+  // }, [featureData]);
 
   useEffect(() => {
     if (pbnstSttn.pbnstDetail) {
@@ -225,7 +228,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       layer.data?.lyrNm?.includes('하수처리') || layer.data?.lyrNm?.includes('재이용시설')
     );
     const actTabData = tabData.find((tab) => tab.id === activeTab);
-
+    console.log('tavbData',actTabData)
     // swcho : true, false 값 변경하여 시설 변경하여 테스트하였음
     // 재이용시설
     const isPbnst = true;
@@ -235,8 +238,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
     const isRswt = false;
     // 온배수시설
     const isHtdfl = false;
-
-
     return (
       <div className="mt-4">
         {/* 체크된 레이어가 없는 경우 (재이용시설 목록) */}
@@ -260,7 +261,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
                   />
                 </div>
                 <PbnstSttnModal
-                  data={actTabData?.data[0] || ({} as customPbnst)}
+                  data={actTabData?.data[0]|| ({} as customPbnst)}
                   titleVisible={false}
                 />
               </>