지도 현재 만들어진것까지 수정 완료 추가로 만들것 확인해서 해야함

apps/wr/app/(popUp-layout)/mapFeaturePopup/page.tsx

@@ -0,0 +1,121 @@
+"use client";
+import { useWrStore } from "@/app/store";
+import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
+import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
+import { Title, UiTable } from "@common/business_components/ui";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+
+export default function MapFeaturePopup() {
+  const [isFeatureCd, setIsFeatureCd] = useState<any>(null);
+  const {
+    pbnMap,
+    ruseMapDetail,
+    rainMapDetile,
+    rswtMapDetile,
+    htdfMapDetile,
+    pbnMapDetaile,
+  } = useWrStore((state) => state);
+  const { pbnMapHeadList } = pbnMap;
+  const [isDetail, setIsDetail] = useState<any>(null);
+  const [layerNm, setLayerNm] = useState<string>();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    const layerName = searchParams.get("layerNm");
+    const featureCd = searchParams.get("featureCd");
+    setLayerNm(String(layerName));
+    setIsFeatureCd(featureCd);
+
+    const handleUnload = () => {
+      // 부모에게 닫힘 알림
+      window.opener?.postMessage(
+        { type: "POPUP_CLOSED", target: "detail" },
+        "*"
+      );
+    };
+
+    window.addEventListener("beforeunload", handleUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleUnload);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isFeatureCd && layerNm) {
+      let detail = {};
+      if (layerNm === "하수재이용시설") {
+        detail = ruseMapDetail(isFeatureCd);
+        setIsDetail(detail);
+      } else if (layerNm === "하수처리시설") {
+        pbnMapDetaile(isFeatureCd, isFeatureCd).then((res) => {
+          setIsDetail(res);
+        });
+      } else if (layerNm === "빗물이용시설") {
+        rainMapDetile(isFeatureCd).then((res) => {
+          setIsDetail(res);
+        });
+      } else if (layerNm === "중수도시설") {
+        rswtMapDetile(isFeatureCd).then((res) => {
+          setIsDetail(res);
+        });
+      } else if (layerNm === "온배수시설") {
+        htdfMapDetile(isFeatureCd).then((res) => {
+          setIsDetail(res);
+        });
+      }
+    }
+  }, [isFeatureCd, layerNm]);
+
+  if (!isDetail) return null; // 데이터 없으면 아무것도 안 그림
+  return (
+    <>
+      {isDetail ? (
+        <div className="fixed inset-0 w-screen h-screen m-0 p-0 overflow-auto bg-white">
+          {layerNm === "하수재이용시설" ? (
+            <PbnstSttnModal data={isDetail} />
+          ) : layerNm === "하수처리시설" ? (
+            <div style={{ overflowX: "hidden" }}>
+              <div className="flex justify-between items-center mb-4">
+                <Title title="하수처리시설 상세정보" />
+              </div>
+              {/* 높이 조정 */}
+              <UiTable
+                tableData={isDetail || []}
+                headlist={pbnMapHeadList.slice(0, 4)}
+                pageSize={1}
+                total={0}
+                headName={"위치정보"}
+                cellClick={() => {}}
+                onPageChange={() => {}}
+              />
+              <UiTable
+                tableData={isDetail || []}
+                headlist={pbnMapHeadList.slice(4)}
+                pageSize={1}
+                total={0}
+                headName={"기본정보"}
+                cellClick={() => {}}
+                onPageChange={() => {}}
+              />
+            </div>
+          ) : (
+            <SttnDetailModal
+              type={
+                layerNm === "빗물이용시설"
+                  ? "RNB"
+                  : layerNm === "중수도시설"
+                    ? "RST"
+                    : "HTB"
+              }
+              formObj={isDetail}
+            />
+          )}
+        </div>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+}

apps/wr/app/(with-layout)/map/mainMap/page.tsx

@@ -5,11 +5,11 @@ import { useEffect, useRef, useState, useCallback } from "react";
 import { mapService } from "../service";
 import GisApp from "@common/business_components/ui/map/lib/gis.core";
 import { useWrStore } from "@/app/store";
+import { getFeatureCd } from "@/components/lib/func/\bmapUtil";
 
 const Map = () => {
-
+  const { comMap } = useWrStore((state) => state);
-    const { comMap } = useWrStore((state) => state);
+  const { isFeatured } = comMap;
-    const {isFeatured} = comMap
   const [treeData, setTreeData] = useState([]); // 초기값을 객체 또는 null로 설정
   const gisMaps = useRef<any | null>(null);
   const [isOpen, setIsOpen] = useState(false); // 팝업 열기/닫기 상태
@@ -18,6 +18,7 @@ const Map = () => {
   const [checkedLayers, setCheckedLayers] = useState<string[]>([]);
   const [checkedLayersData, setCheckedLayersData] = useState<any[]>([]);
   const popupRef = useRef<Window | null>(null);
+  const popupDetailRef = useRef<Window | null>(null);
 
   const fetchData = async () => {
     try {
@@ -43,20 +44,41 @@ const Map = () => {
     const bc = new BroadcastChannel("mapDetailPopUp");
     bc.onmessage = (event) => {
       if (event.data.type === "SELECT_FEATURE") {
-        console.log('event.data.feature ', event.data.feature)
         onFeatureSelect(event.data.feature);
-        closePopup()
+        closePopup();
       }
     };
   }, []);
-  useEffect(() =>{
-    console.log('isFeatured ', isFeatured)
 
-    if(isFeatured){
+  useEffect(() => {
-      console.log('isFeatured ', isFeatured)
+    const messageHandler = (event: MessageEvent) => {
-      onFeatureSelect(isFeatured)
+      if (event.data.type === "POPUP_CLOSED") {
+        if (event.data.target === "detail") {
+          console.log("디테일 팝업 닫힘 감지됨");
+          setFeatureData(null);
+          setIsOpen(false);
+          setIsSearchModalOpen(true);
+          popupDetailRef.current = null;
+        } else {
+          console.log("기타 팝업 닫힘 감지됨");
+          popupRef.current = null;
+        }
+      }
+    };
+    window.addEventListener("message", messageHandler);
+    return () => {
+      window.removeEventListener("message", messageHandler);
+    };
+  }, []);
+
+  useEffect(() => {
+    console.log("isFeatured ", isFeatured);
+
+    if (isFeatured) {
+      console.log("isFeatured ", isFeatured);
+      onFeatureSelect(isFeatured);
     }
-  },[isFeatured])
+  }, [isFeatured]);
 
   // 체크된 레이어 정보를 받는 핸들러
   const handleCheckedLayersChange = (
@@ -67,8 +89,6 @@ const Map = () => {
     setCheckedLayersData(checkedNodesData);
   };
 
-  
-
   // SearchModal, GisContent 등에서 호출
   const onFeatureSelect = (data: any) => {
     const map = gisMaps.current;
@@ -92,16 +112,20 @@ const Map = () => {
     if (layerName === "하수재이용시설") {
       // 재이용시설
       featureId = `${layerName}.${data.searchPk}`;
-    } else if ( //빗물이용시설, 중수도시설 
+    } else if (
+      //빗물이용시설, 중수도시설
       layerName === "빗물이용시설" ||
       layerName == "중수도시설"
     ) {
       featureId = `${layerName}.${data.bdstInfoSn}`;
-    } else if (layerName === "하수처리시설") { //하수처리시설 
+    } else if (layerName === "하수처리시설") {
+      //하수처리시설
       featureId = `${layerName}.${data.bscFctCd}`;
-    } else if (layerName === "온배수시설") { //온배수시설 
+    } else if (layerName === "온배수시설") {
+      //온배수시설
       featureId = `${layerName}.${data.bdstRuseFcltSn}`;
-    } else if (layerName == "수요처") { //수요처 
+    } else if (layerName == "수요처") {
+      //수요처
       featureId = `${layerName}.${data.dmdInfoId.replaceAll("-", "")}`;
     } else {
       console.warn("해당 레이어에 대한 featureId 매핑 없음", layerName);
@@ -144,49 +168,79 @@ const Map = () => {
     setIsSearchModalOpen(false);
   };
 
-  // MapSearchBar 래퍼 컴포넌트
+
-  // const CustomMapSearchBar = (props: any) => {
+  const getSelectedLayers = (isFeature: any) => {
-  //   return (
+    const map = gisMaps.current;
-  //     <MapSearchBar
+    if (!map) {
-  //       {...props}
+      console.warn("지도가 초기화되지 않았습니다.");
-  //       searchType="공급처 후보지 조회"
+      return;
-  //       showApplyButton={false}
+    }
-  //     />
+    let result = null;
-  //   );
+    const layers = map
-  // };
+      ? map
+          .getLayers()
+          .getArray()
+          .filter((l: any) => l.getVisible())
+      : []; // gisMap이 null인지 확인 후 레이어 가져오기
+    let featureLayer: { get: (key: string) => any } = { get: () => null };
+    layers.forEach((layer: any) => {
+      const source = layer.getSource();
+      if (
+        source &&
+        source.hasFeature &&
+        isFeature &&
+        typeof isFeature.getId === "function" &&
+        source.hasFeature(isFeature)
+      ) {
+        featureLayer = layer; // 피처가 속한 레이어 찾기)
+      }
+    });
+    result = featureLayer.get("lyrNm");
+    return result;
+  };
 
   const renderDetailView = useCallback(
     (props: any) => {
-      console.log('props ', props.seletectedLayerNm)
+      const isFeature = props.featureData.getProperties();
-      const url = `/mapDetilePopUp?layerNm=${encodeURIComponent(props.seletectedLayerNm)}`;
+      if (
-      const width = window.screen.availWidth;
+        Object.keys(isFeature).length === 0 &&
-      const height = window.screen.availHeight;
+        isFeature.constructor === Object
-      const left = 0;
+      ) {
-      const top = 0;
+        const url = `/mapDetilePopUp?layerNm=${encodeURIComponent(props.seletectedLayerNm)}`;
-      const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
+        const width = window.screen.availWidth;
-      popupRef.current = window.open(url, "지도 레이어 팝업", popupOptions);
+        const height = window.screen.availHeight;
-        // return(
+        const left = 0;
-        //   <NewWindowPopup
+        const top = 0;
-        //     key={featureData?.fid || featureData?.id || featureData?.ftrIdn}
+        const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
-        //     onClose={handlePopupClose}
+        popupRef.current = window.open(url, "지도 레이어 팝업", popupOptions);
-        //     checkedLayers={checkedLayers}
+      } else {
-        //     checkedLayersData={checkedLayersData}
+        const layerNm = getSelectedLayers(featureData);
-        //     {...props}
+        const safeProps = featureData.getProperties();
-        //   />
+        const featureCd = getFeatureCd(safeProps, String(layerNm));
-        // )
+        const url = `/mapFeaturePopup?layerNm=${encodeURIComponent(String(layerNm))}&featureCd=${encodeURIComponent(featureCd)} `;
-    }
+        const width = Math.floor(window.innerWidth * 0.4); // 화면 폭의 40%
-    ,
+        const height = Math.floor(window.innerHeight - 450); // 150px 여백 확보; // calc(100% - 70px)
-    [checkedLayers, checkedLayersData] // 필요 시 의존성 넣기
+        const left = (window.screen.availWidth - width) / 2;
-    
+        const top = (window.screen.availHeight - height) / 2;
+        const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
+        popupDetailRef.current = window.open(
+          url,
+          "지도 시설 상세정보 팝업",
+          popupOptions
+        );
+      }
+    },
+    [checkedLayers, checkedLayersData, featureData] // 필요 시 의존성 넣기
   );
   const closePopup = () => {
     if (popupRef.current && !popupRef.current.closed) {
       popupRef.current.close();
       popupRef.current = null;
       setIsOpen(false);
-    setFeatureData(null);
+      setFeatureData(null);
     }
   };
+
   return (
     <div className="bg-container">
       <Gis

apps/wr/app/store/map/htdflMap/index.tsx

@@ -1,4 +1,4 @@
-import { fetchType, getFetchWithCount } from "@/components/lib/api";
+import { fetchType, getFetch, getFetchWithCount } from "@/components/lib/api";
 import type { CommonTableProps } from "../../common/type/header";
 import type { customHtdflBdst } from "../../ruseFcltMng/fcltReg/htdflReg";
 import { htdflSttHeadListExport, htdflSttNodeListExport } from "../../ruseFcltMng/fcltSttn/htdflSttn/headList";
@@ -17,6 +17,8 @@ export type htdfMapState = {
 type htdfMapActions = {
   htdfMapInit: (page: number, total: number, cityOrSgg: string) => void;
   htdfMapSearch: (page: number, total: number, cityOrSgg:string, searchTxt?:string) =>void
+  htdfMapDetile:(featureCd:string) => Promise<customHtdflBdst | undefined>;
+
 };
 
 export type htdfMapType = htdfMapState & htdfMapActions;
@@ -60,30 +62,52 @@ export const htdfMapActionsExport: (set: any) => htdfMapActions = (
         console.log(e);
       }
     },
-    htdfMapSearch: async (page: number, total: number, cityOrSgg:string, searchTxt?:string) => {
+    htdfMapSearch: async (
-          try {
+      page: number,
-            const htdfMapRes = await getFetchWithCount(
+      total: number,
-              fetchType.WR,
+      cityOrSgg: string,
-              `/drain/facilityList` +
+      searchTxt?: string
-                (page ? `/${page}` : "/1") +
+    ) => {
-                (total ? `/${total}` : "/20") +
+      try {
-                (cityOrSgg ? `/${cityOrSgg}` : "/0") +
+        const htdfMapRes = await getFetchWithCount(
-                (searchTxt ? `/${searchTxt}` : "") 
+          fetchType.WR,
-            );
+          `/drain/facilityList` +
-    
+            (page ? `/${page}` : "/1") +
-            set((state: htdfMapState) => {
+            (total ? `/${total}` : "/20") +
-              return {
+            (cityOrSgg ? `/${cityOrSgg}` : "/0") +
-                ...state,
+            (searchTxt ? `/${searchTxt}` : "")
-                htdfMap: {
+        );
-                  ...state.htdfMap,
+
-                  htdfMapRes: htdfMapRes.data,
+        set((state: htdfMapState) => {
-                  htdfMapCount: htdfMapRes.count,
+          return {
-                },
+            ...state,
-              };
+            htdfMap: {
-            });
+              ...state.htdfMap,
-          } catch (e) {
+              htdfMapRes: htdfMapRes.data,
-            console.log(e);
+              htdfMapCount: htdfMapRes.count,
-          }
+            },
-        },
+          };
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    htdfMapDetile: async (featureCd: string) => {
+      try {
+        const htdfDetail = await getFetch(
+          fetchType.WR,
+          `/drain/facilityList/1/3/0/${featureCd}`
+        );
+
+        if (htdfDetail && htdfDetail.length > 0) {
+          return htdfDetail[0];
+        } else {
+          return null;
+        }
+      } catch (error) {
+        console.log(error);
+        throw error; // 호출부에서 catch 가능하도록
+      }
+    },
   };
 };

apps/wr/app/store/map/pbnstMap/index.tsx

@@ -1,50 +1,48 @@
-import { fetchType,  postFectch } from "@/components/lib/api";
+import { fetchType, postFectch } from "@/components/lib/api";
 import type { pubHasuType } from "../../ruseFcltMng/fcltReg/pbnstReg/type";
 import { checkWrRegList } from "../../ruseFcltMng/fcltReg/pbnstReg";
 import type { ReturnType } from "@common/business_components/ui";
 import { pubFacHeadListExport } from "../../ruseFcltMng/fcltReg/pbnstReg/headList";
 import type { TableUpperProps } from "../../common/type/header";
 
+export const pbnMapTableSize = 20;
 
-export const pbnMapTableSize =20;
+const hasuListFetch = async (
+  page: number,
+  pageTotal: number,
+  reurnValue: ReturnType,
+  searchNm?: string
+) => {
+  let url = `/prcsFclt/ruseInfo/${page}/${pageTotal}/`;
+  const checkWrRegListRes = await checkWrRegList();
 
-const hasuListFetch = async (page: number, pageTotal:number, reurnValue: ReturnType, searchNm?:string) => {
+  if (reurnValue.partValue === "A") {
-
+    url += `${reurnValue.partValue}/${
-    let url = `/prcsFclt/ruseInfo/${page}/${pageTotal}/`;
+      // reurnValue.sidoValue ? reurnValue.sidoValue : reurnValue.sigunValue
-    const checkWrRegListRes = await checkWrRegList();
+      reurnValue.sigunValue !== "0"
-  
+        ? reurnValue.sigunValue
-    if (reurnValue.partValue === "A") {
+        : reurnValue.sidoValue
-      url += `${reurnValue.partValue}/${
+    }/0/1/SW`;
-        // reurnValue.sidoValue ? reurnValue.sidoValue : reurnValue.sigunValue
+  } else if (reurnValue.partValue === "R") {
-        reurnValue.sigunValue !== '0' ? reurnValue.sigunValue : reurnValue.sidoValue
+    url += `${reurnValue.partValue}/${
-        }/0/1/SW`
+      reurnValue.regionValue
-      
-      
-    } else if (reurnValue.partValue === "R") {
-      url += `${reurnValue.partValue}/${reurnValue.regionValue
         ? reurnValue.regionValue
         : reurnValue.unitWaterShedValue
           ? reurnValue.unitWaterShedValue
           : reurnValue.middleRegionValue
-        }/0/1/SW`
+    }/0/1/SW`;
-    } else if (reurnValue.partValue === 'G') {
+  } else if (reurnValue.partValue === "G") {
-      url += `${reurnValue.envPartValue}/${reurnValue.sigunValue !== '0' ? reurnValue.sigunValue : reurnValue.sidoValue}/0/1/SW`
+    url += `${reurnValue.envPartValue}/${reurnValue.sigunValue !== "0" ? reurnValue.sigunValue : reurnValue.sidoValue}/0/1/SW`;
-    } else {
+  } else {
-      url += `A/0/0/1/SW`
+    url += `A/0/0/1/SW`;
-    }
+  }
-    if (searchNm && searchNm?.length > 0) {
+  if (searchNm && searchNm?.length > 0) {
-      url += "/" + searchNm
+    url += "/" + searchNm;
-    }
+  }
-  
 
+  const data = checkWrRegListRes.filter((item: string) => item !== "");
 
-const data = checkWrRegListRes.filter((item:string) => item !== "")
+  const rainRes = await postFectch(url, data, fetchType.COMMON);
-
-  const rainRes = await postFectch(
-    url,
-    data,
-    fetchType.COMMON
-  );
 
   const hasuList = rainRes.data.map((item: any) => {
     return {
@@ -54,55 +52,77 @@ const data = checkWrRegListRes.filter((item:string) => item !== "")
     };
   });
 
-  return {data: hasuList, count:rainRes.count};
+  return { data: hasuList, count: rainRes.count };
 };
 
 export type pbnMapState = {
-    pbnMap: {
+  pbnMap: {
-        isInit:boolean,
+    isInit: boolean;
-        pbnMapRes:pubHasuType[]
+    pbnMapRes: pubHasuType[];
-        pbnMapCount:number;
+    pbnMapCount: number;
-        pbnMapHeadList:TableUpperProps[];
+    pbnMapHeadList: TableUpperProps[];
-    };
   };
-  
+};
-  type pbnMapActions = {
+
-    pbnMapInit: (page: number, pageTotal:number, reurnValue: ReturnType) => void;
+type pbnMapActions = {
-  };
+  pbnMapInit: (page: number, pageTotal: number, reurnValue: ReturnType) => void;
-  
+  pbnMapDetaile: (featureCd: string, data: string) => Promise<pubHasuType | undefined>;
-  export type pbnMapType = pbnMapState & pbnMapActions;
+};
-  
+
-  export const pbnMapStateExport: pbnMapState = {
+export type pbnMapType = pbnMapState & pbnMapActions;
-    pbnMap: {
+
-      isInit: false,
+export const pbnMapStateExport: pbnMapState = {
-      pbnMapRes:[],
+  pbnMap: {
-      pbnMapCount:1,
+    isInit: false,
-      pbnMapHeadList:pubFacHeadListExport
+    pbnMapRes: [],
+    pbnMapCount: 1,
+    pbnMapHeadList: pubFacHeadListExport,
+  },
+};
+
+export const pbnMapActionsExport: (set: any) => pbnMapActions = (set: any) => {
+  return {
+    pbnMapInit: async (
+      page: number,
+      pageTotal: number,
+      reurnValue: ReturnType
+    ) => {
+      try {
+        const pubMapRes = await hasuListFetch(page, pageTotal, reurnValue);
+        set((state: pbnMapState) => {
+          return {
+            ...state,
+            pbnMap: {
+              ...state.pbnMap,
+              pbnMapRes: pubMapRes.data,
+              pbnMapCount: pubMapRes.count,
+              isInit: false,
+            },
+          };
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    pbnMapDetaile: async (featureCd: string, data: string) => {
+      try {
+        const hasuRes = await postFectch(
+          `/prcsFclt/ruseInfo/1/20/A/0/0/1/SW/${featureCd}`,
+          [data],
+          fetchType.COMMON
+        );
+        const filteredData = hasuRes.data.map((item: any) => {
+          return {
+            ...item,
+            fctCpc: Number(item.fctCpc) || 0,
+            ruse: item.ruse === false ? "N" : "Y",
+          };
+        });
+        return filteredData;
+      } catch (error) {
+        console.log(error);
+        throw error; // 호출부에서 catch 가능하도록
+      }
     },
   };
-  
+};
-  
-  export const  pbnMapActionsExport: (set: any) => pbnMapActions = (
-    set: any
-  ) => {
-    return {
-      pbnMapInit: async (page: number, pageTotal:number, reurnValue: ReturnType) => {
-        try {
-          const pubMapRes = await hasuListFetch(page,pageTotal,reurnValue)
-          set((state: pbnMapState) => {
-            return {
-              ...state,
-              pbnMap: {
-                ...state.pbnMap,
-                pbnMapRes: pubMapRes.data,
-                pbnMapCount: pubMapRes.count,
-                isInit: false,
-              },
-            };
-          });
-        } catch (e) {
-          console.log(e)
-        }
-      },
-    }
-  }

apps/wr/app/store/map/rainMap/index.tsx

@@ -1,4 +1,4 @@
-import { fetchType, getFetchWithCount } from "@/components/lib/api";
+import { fetchType, getFetch, getFetchWithCount } from "@/components/lib/api";
 import type { CommonTableProps } from "../../common/type/header";
 import {
   rainSttHeadListExport,
@@ -21,6 +21,7 @@ export type rainMapState = {
 type rainMapActions = {
   rainMapInit: (page: number, total: number, cityOrSgg:string) => void;
   rainMapSearch:  (page: number, total: number, cityOrSgg:string, searchTxt?:string) =>void
+  rainMapDetile:(featureCd:string) => Promise<customRainBdst | undefined>;
 };
 
 export type rainMapType = rainMapState & rainMapActions;
@@ -89,5 +90,23 @@ export const rainMapActionsExport: (set: any) => rainMapActions = (
         console.log(e);
       }
     },
-  };
+    rainMapDetile: async (featureCd: string) => {
+      try {
+        console.log('featureCd    ', featureCd)
+
+        const  rainDetail = await getFetch(fetchType.WR,  
+            `/reuseFc/rainyInfoList/1/3/0/${featureCd}` )
+     
+            if(rainDetail&&rainDetail.length>0){
+
+              return rainDetail[0];
+            }else{
+              return null;
+            }
+      } catch (error) {
+        console.log(error);
+        throw error; // 호출부에서 catch 가능하도록
+      }
+  }
+}
 };

apps/wr/app/store/map/rswtMap/index.tsx

@@ -1,10 +1,12 @@
-import { fetchType, getFetchWithCount } from "@/components/lib/api";
+import { fetchType, getFetch, getFetchWithCount } from "@/components/lib/api";
 import type { CommonTableProps } from "../../common/type/header";
 import type { customRswtBdst } from "../../ruseFcltMng/fcltReg/rswtReg";
-import { rswtSttHeadListExport, rswtSttNodeListExport } from "../../ruseFcltMng/fcltSttn/rswtSttn/headList";
+import {
+  rswtSttHeadListExport,
+  rswtSttNodeListExport,
+} from "../../ruseFcltMng/fcltSttn/rswtSttn/headList";
 
-
+export const rswtMapSize = 15;
-export const  rswtMapSize = 15
 export type rswtMapState = {
   rswtMap: {
     rswtMapRes: customRswtBdst[];
@@ -16,8 +18,14 @@ export type rswtMapState = {
 };
 
 type rswtMapActions = {
-  rswtMapInit: (page: number, total: number, cityOrSgg:string) => void;
+  rswtMapInit: (page: number, total: number, cityOrSgg: string) => void;
-  rswtMapSearch:  (page: number, total: number, cityOrSgg:string, searchTxt?:string) => void
+  rswtMapSearch: (
+    page: number,
+    total: number,
+    cityOrSgg: string,
+    searchTxt?: string
+  ) => void;
+  rswtMapDetile: (featureCd: string) => Promise<customRswtBdst | undefined>;
 };
 
 export type rswtMapType = rswtMapState & rswtMapActions;
@@ -36,15 +44,15 @@ export const rswtMapActionsExport: (set: any) => rswtMapActions = (
   set: any
 ) => {
   return {
-    rswtMapInit: async (page: number, total: number, cityOrSgg:string) => {
+    rswtMapInit: async (page: number, total: number, cityOrSgg: string) => {
       try {
         const rswtMapRes = await getFetchWithCount(
-                 fetchType.WR,
+          fetchType.WR,
-                 `/reuseFc/waterreuseFc` +
+          `/reuseFc/waterreuseFc` +
-                 (page ? `/${page}` : "/1") +
+            (page ? `/${page}` : "/1") +
-                 (total ? `/${total}` : "/20") +
+            (total ? `/${total}` : "/20") +
-                 (cityOrSgg ? `/${cityOrSgg}` : "/0") 
+            (cityOrSgg ? `/${cityOrSgg}` : "/0")
-               );
+        );
 
         set((state: rswtMapState) => {
           return {
@@ -61,7 +69,12 @@ export const rswtMapActionsExport: (set: any) => rswtMapActions = (
         console.log(e);
       }
     },
-    rswtMapSearch: async (page: number, total: number, cityOrSgg:string, searchTxt?:string) => {
+    rswtMapSearch: async (
+      page: number,
+      total: number,
+      cityOrSgg: string,
+      searchTxt?: string
+    ) => {
       try {
         const rswtMapRes = await getFetchWithCount(
           fetchType.WR,
@@ -69,7 +82,7 @@ export const rswtMapActionsExport: (set: any) => rswtMapActions = (
             (page ? `/${page}` : "/1") +
             (total ? `/${total}` : "/20") +
             (cityOrSgg ? `/${cityOrSgg}` : "/0") +
-            (searchTxt ? `/${searchTxt}` : "") 
+            (searchTxt ? `/${searchTxt}` : "")
         );
 
         set((state: rswtMapState) => {
@@ -86,6 +99,22 @@ export const rswtMapActionsExport: (set: any) => rswtMapActions = (
         console.log(e);
       }
     },
+    rswtMapDetile: async (featureCd: string) => {
+      try {
+        const rswtDetail = await getFetch(
+          fetchType.WR,
+          `/reuseFc/waterreuseFc/1/3/0/${featureCd}`
+        );
 
+        if (rswtDetail && rswtDetail.length > 0) {
+          return rswtDetail[0];
+        } else {
+          return null;
+        }
+      } catch (error) {
+        console.log(error);
+        throw error; // 호출부에서 catch 가능하도록
+      }
+    },
   };
 };

apps/wr/app/store/map/ruseMap/index.tsx

@@ -7,6 +7,7 @@ import {
 } from "../../ruseFcltMng/fcltSttn/pbnstSttn/headList";
 import type { ReturnType } from "@common/business_components/ui";
 import { hasuListFetch } from "../../ruseFcltMng/fcltSttn/pbnstSttn";
+import type { customPbnst } from "../../ruseFcltMng/fcltReg/pbnstReg/type";
 
 export const ruseMapSize = 15;
 export type ruseMapState = {
@@ -29,6 +30,7 @@ type ruseMapActions = {
     year: string,
     fclts: string[]
   ) => void;
+  ruseMapDetail: (ruseFcltId: string) => Promise<customPbnst | undefined>;
 };
 
 export type ruseMapType = ruseMapState & ruseMapActions;
@@ -90,5 +92,20 @@ export const ruseMapActionsExport: (set: any) => ruseMapActions = (
         console.log(e);
       }
     },
+    ruseMapDetail: async (ruseFcltId: string) => {
+      try {
+        let ruseDetail = await getFetch("wr", `/reuseFc/pubFc/${ruseFcltId}`);
+        if (ruseDetail.length >= 0) {
+          ruseDetail = ruseDetail.find(
+            (item: customPbnst) => item.pbnstRuseFcltId === ruseFcltId
+          );
+        }
+        // 🔑 스토어 업데이트 대신 리턴
+        return ruseDetail;
+      } catch (errorHasu) {
+        console.log(errorHasu);
+        throw errorHasu; // 호출부에서 catch 가능하도록
+      }
+    },
   };
 };

apps/wr/components/lib/func/mapUtil.ts

@@ -0,0 +1,19 @@
+
+
+
+  export const getFeatureCd = (featurePropertise:any, layerNm:string) => {
+    console.log('layerNm ',  layerNm )
+
+    const featureCd =
+    layerNm === "하수재이용시설"
+      ? featurePropertise?.swtrmt_fclt_cd
+      : ["빗물이용시설", "중수도시설", "온배수시설", "수요처"].includes(
+        layerNm
+          )
+        ? featurePropertise?.bdst_nm
+        : layerNm === "하수처리시설"
+          ? featurePropertise?.swtrmt_fclt_nm
+          : null;
+
+          return featureCd;
+  };