레이어 피처 선택 시 해당 시설의 재이용시설 팝업 탭별로 나오도록 작업

apps/wr/app/map/newWindowPopup.tsx

@@ -2,12 +2,11 @@ import { useWrStore } from "@/app/store";
 import { btnClass } from "@/app/store/common/code";
 import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
 import { excelDownload } from "@/components/lib/func/commom";
-import { Title, UiTable, UITab, ContentsDiv } from '@common/business_components';
+import { Title, UiTable, UITab } from '@common/business_components';
 import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
 import { Button } from "@common/components/ui";
 import React, { useCallback, useState, useEffect } from 'react';
 import NewWindowPortal from '@/app/map/newWindowPortal';
-import PbnstPrfmncSttnPopup from "@/app/map/pbnstPrfmncSttnPopup";
 import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
 import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
 import type { chgBuilding, customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
@@ -16,6 +15,7 @@ import RswtrPrfmncsSttnPopup from "@/app/map/rswtrPrfmncSttnPopup";
 import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
 import HtdflPrfmncSttnPopup from "@/app/map/htdflPrfmncSttnPopup";
 import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
+import { getFetch } from "@/components/lib/api";
 
 interface NewWindowPopupProps {
   featureData: any;
@@ -24,13 +24,6 @@ interface NewWindowPopupProps {
   onClose: () => void;
 }
 
-// 탭
-const TABS = [
-  { val: "0", text: "재이용시설1" },
-  { val: "1", text: "재이용시설2" },
-  { val: "2", text: "재이용시설n" },
-];
-
 // 데이터의 속성(key)을 사용자에게 보여줄 한글 이름으로 변환하기 위한 맵
 // 실제 데이터에 맞게 이 부분을 확장해야 합니다.
 const propertyNameMap: { [key: string]: string } = {
@@ -47,7 +40,8 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
   checkedLayersData = [],
   onClose
 }) => {
-  const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? "0");
+  const [tabData, setTabData] = useState<{ id: string; name: string; data: any }[]>([]);
+  const [activeTab, setActiveTab] = useState<string>('0');
   // swcho : useState의 true, false 값 변경하여 목록, 상태 테스트 하였음
   const [showDetailView, setShowDetailView] = useState(true); // 상세정보 화면 표시 상태 추가
 
@@ -108,9 +102,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
     return null;
   }
 
-  // 2. RuseMngTable에 필요한 tableData를 생성합니다. (단일 행 데이터)
-  // 선택된 피쳐 데이터 속성값
-
   // 물재이용시설 cellClick 이벤트 (상세정보)
   const pbnstCellClick = (index: number | undefined) => {
     if (
@@ -127,17 +118,34 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
   //   setBdstTable(pbnstSttn.pbnstSttnRes);
   // }, [pbnstSttn.pbnstSttnRes]);
 
+  // 재이용시설 조회
+  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; // 이미 존재하는 탭이면 추가하지 않음
+        }
+        console.log('탭 idx',prev, prev.length)
+        return [...prev, { id: featureCd, name: `재이용시설 ${prev.length + 1}`, data: response }];
+      });
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  };
   useEffect(() => {
     if (featureData) {
       const selectedVal = featureData.getProperties();
-      const featureCd = selectedVal?.swtrmt_fclt_cd + '1';
-  
+      const featureCd = selectedVal?.swtrmt_fclt_cd;
       if (featureCd && featureCd !== pbnstRuseFcltPk) {
         setPbnstRuseFcltPk(featureCd); // 현재 호출된 featureCd 저장
-        getPbnStnDetail(featureCd);
+        setActiveTab(featureCd)
+        fetchpbnstDetail(featureCd); // 상세정보 가져오기
       }
     }
   }, [featureData]);
+
   useEffect(() => {
     if (pbnstSttn.pbnstDetail) {
       setPbnDetaileData({
@@ -198,7 +206,8 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
     const hasWaterTreatmentLayer = checkedLayersData.some(layer =>
       layer.data?.lyrNm?.includes('하수처리') || layer.data?.lyrNm?.includes('재이용시설')
     );
-
+    const actTabData = tabData.find((tab) => tab.id === activeTab);
+    
     // swcho : true, false 값 변경하여 시설 변경하여 테스트하였음
     // 재이용시설
     const isPbnst = true;
@@ -223,17 +232,17 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
                 </div>
                 <div className="flex justify-between items-center mb-8">
                   <UITab
-                    defaultValue={TABS[0]?.val}
-                    tabList={TABS.map((tab) => ({
-                      value: tab.val,
-                      label: tab.text,
-                      onClick: () => setActiveTab(tab.val),
+                    defaultValue={activeTab}
+                    tabList={tabData.map((tab) => ({
+                      value: tab.id,
+                      label: tab.name,
+                      onClick: () => setActiveTab(tab.id),
                     }))}
                     children={undefined}
                   />
                 </div>
                 <PbnstSttnModal
-                  data={pbnDetaileData.data || ({} as customPbnst)}
+                  data={actTabData?.data[0] || ({} as customPbnst)}
                   titleVisible={false}
                 />
               </>