Merge commit 'e428e17b524e46d48f5d807abf6d00c8aceea7cf' into iipbs/wr/dev

apps/wr/app/map/htdflSttn/page.tsx

@@ -4,7 +4,7 @@ import Gis from "@common/business_components/ui/map/Gis";
 import { useEffect, useRef, useState, useCallback } from "react";
 import FeatureClickEventPopup from "../featureClickEventPopup";
 import { mapService } from "../service";
-import { MapSearchBar } from "../mapSearchBar";
+// import { MapSearchBar } from "../mapSearchBar";
 import NewWindowPopup from "../newWindowPopup";
 import GisApp from "@common/business_components/ui/map/lib/gis.core";
 
@@ -136,7 +136,7 @@ const Map = () => {
         //   />
         // )
         // }
-        detailView={(props: any) => (
+        detailView={(props: any) =>(
           <NewWindowPopup
             onClose={handlePopupClose} // 메모이제이션된 함수 사용
             checkedLayers={checkedLayers}
@@ -144,7 +144,7 @@ const Map = () => {
             {...props}
           />
         )}
-        onFeatureSelect={undefined}
+        onFeatureSelect={onFeatureSelect}
         setIsOpen={setIsOpen}
         setFeatureData={setFeatureData}
         featureData={featureData}

apps/wr/app/map/newWindowPopup.tsx

@@ -1,8 +1,8 @@
 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 type { customPbnst, pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+import { excelDownload, tableData } from "@/components/lib/func/commom";
+import { Title, UiTable, UITab, ContentsDiv, ScrollArea } 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';
@@ -16,11 +16,16 @@ 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";
+import { useGisContext } from "@common/business_components/ui/map/Gis";
+import ListDiv from "@common/business_components/ui/list_div";
 
 interface NewWindowPopupProps {
   featureData: any;
   checkedLayers?: string[];
   checkedLayersData?: any[];
+  seletectedLayerNm?: string
+  viewMode?: 'list' | 'detail' | 'nothing'
   onClose: () => void;
 }
 
@@ -45,11 +50,15 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
   featureData,
   checkedLayers = [],
   checkedLayersData = [],
+  seletectedLayerNm,
   onClose
 }) => {
-  const [activeTab, setActiveTab] = useState(TABS[0]?.val ?? "0");
-  // swcho : useState의 true, false 값 변경하여 목록, 상태 테스트 하였음
-  const [showDetailView, setShowDetailView] = useState(true); // 상세정보 화면 표시 상태 추가
+  const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
+  const [tabData, setTabData] = useState<{ id: string; name: string; data: any }[]>([]);
+  const [activeTab, setActiveTab] = useState<string>('0');
+  const [viewMode, setViewMode] = useState<'list' | 'detail' | 'nothing'>('list');
+  const [fcltPk, setFcltPk] = useState<string>('');
+
 
   // onClose 함수를 useCallback으로 메모이제이션
   const memoizedOnClose = useCallback(() => {
@@ -62,15 +71,8 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
     pbnstSttn,
     pbnstSttnSearch,
     pbnSttnInit,
-    getPbnStnDetail,
-    pbnNmSearch,
   } = useWrStore((state) => state);
-  const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>();
-  const [pageNation, setPageNation] = useState(1);
-  const [pbnDetaileData, setPbnDetaileData] = useState<{
-    isModal: boolean;
-    data: customPbnst;
-  }>({ isModal: false, data: {} as customPbnst });
+  const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>()
 
   // 빗물재이용시설 변수
   const { rainSttn, rainSttnSearch, rainSttnInit } = useWrStore(
@@ -82,6 +84,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
     isOpen: boolean;
     chBuilding: chgBuilding[];
   }>({ isOpen: false, chBuilding: [] });
+  const [rainPage, setRainPage] = useState(1)
   const [rainDetailModal, setRainDetailModal] = useState<{ isOpen: boolean, data: customRainBdst | undefined }>({ data: undefined, isOpen: false });
 
   // 중수도시설 변수
@@ -95,6 +98,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
     isOpen: boolean;
     chBuilding: chgBuilding[];
   }>({ isOpen: false, chBuilding: [] });
+  const [rswtrPage, setRswtrPage] = useState(1);
 
   // 온배수시설 변수
   const { htdflSttn, htdflSttnSearch, initHtdfl } = useWrStore((state) => state);
@@ -102,71 +106,151 @@ 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 null;
-  }
+  const {
+      pbnst,
+      pubHasuInit,
+      pubHasuSearch,
+    } = useWrStore((state) => state);
+    const { pubFacHeadList, pbnstHasuRes, pbnstRes } = pbnst;
+    const [isRuseReg, setIsRuseReg] = useState<{
+      isModal: boolean;
+    }>({ isModal: false });
+    const [hasuTable, setHasuTable] = useState<pubHasuType[]>();
+    const [selectRow, setSelectRow] = useState<pubHasuType>();
+    const [hasuPage, setHasuPage] = useState<number>(1);
+  if (!featureData) return;
+  ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
+  useEffect(() => {
+    if (featureData && typeof featureData.getProperties === "function") {
+      const selectedVal = featureData.getProperties();
+      const layerId = getSelectedLayers();
+      let featureCd = layerId == '하수재이용시설' ? selectedVal?.swtrmt_fclt_cd : layerId == '빗물이용시설' || layerId == '중수도시설' ? selectedVal?.bdst_nm : layerId == '하수처리시설' ? 'a' : null;
+      if (featureCd && featureCd !== fcltPk) {
+        if (layerId == '하수재이용시설') {
+          featureCd = selectedVal?.swtrmt_fclt_cd;
+          setFcltPk(featureCd); // 현재 호출된 featureCd 저장
+          setActiveTab(featureCd)
+          fetchpbnstDetail(featureCd); // 상세정보 
+        }
+        else if (layerId == '빗물이용시설') {
+          featureCd = selectedVal?.bdst_nm;
+          setFcltPk(featureCd)
+          rainSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd);
+          setRainDetailModal({ isOpen: true, data: rainSttn.rainSttnRes[0] });
+          setViewMode("detail")
+        }
+        else if (layerId == '중수도시설') {
+          featureCd = selectedVal?.bdst_nm;
+          console.log(featureCd)
+          setFcltPk(featureCd)
+          rswtSttnSearch(1, '20', '', featureCd, code.cityCd, code.sggCd);
+          setRswtrDetailModal({ isOpen: true, data: rswtSttnRes[0] });
+          setViewMode("detail")
+        }
+        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(layerId =='하수처리시설') setViewMode('nothing')
+      }
+    } else if (seletectedLayerNm) { setViewMode("list") }
+  }, [featureData]);
+  ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
 
-  // 2. RuseMngTable에 필요한 tableData를 생성합니다. (단일 행 데이터)
-  const tableData = [featureData];
-  console.log("tableData", tableData);
-
-  // 물재이용시설 cellClick 이벤트 (상세정보)
+  ///////////////////////////////////////////// 하수재이용시설 //////////////////////////////////////////////////
+  // 재이용시설 cellClick 이벤트 (상세정보)
   const pbnstCellClick = (index: number | undefined) => {
     if (
       index !== undefined &&
       pbnstSttn.pbnstSttnRes &&
       pbnstSttn.pbnstSttnRes[index]
     ) {
-      const pbnstRuseFcltPk = pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk;
-      getPbnStnDetail(pbnstRuseFcltPk);
+      setFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk);
+      fetchpbnstDetail(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk)
+      setActiveTab(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk)
+      setViewMode("detail")
     }
   };
+  const getSelectedLayers = () => {
+    let result = null;
+    const layers = gisMap ? gisMap.getLayers().getArray() : []; // gisMap이 null인지 확인 후 레이어 가져오기
+    let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수
+    layers.forEach((layer: any) => {
+      const source = layer.getSource();
+      if (source && source.hasFeature && featureData
+        && typeof featureData.getId === 'function' && source.hasFeature(featureData)) {
+        featureLayer = layer; // 피처가 속한 레이어 찾기
+      }
+    });
+    result = featureLayer.get('lyrNm');
+
+    return result;
+  };
+  // 재이용 현황 초기값
+  useEffect(() => {
+    if (!pbnstSttn.isInit) {
+      pbnSttnInit("1", "13", {
+        partValue: "A",
+        sidoValue: "0",
+        sigunValue: "",
+        regionValue: "",
+        unitWaterShedValue: "",
+        middleRegionValue: "",
+        envPartValue: "",
+        sidoText: "",
+        sigunText: ""
+      }, String(new Date().getFullYear()));
+    }
+  }, [seletectedLayerNm, pbnstSttn.isInit]);
 
   useEffect(() => {
     setBdstTable(pbnstSttn.pbnstSttnRes);
-  }, [pbnstSttn.pbnstSttnRes]);
+  }, [seletectedLayerNm, pbnstSttn.pbnstSttnRes]);
 
-  useEffect(() => {
-    if (pbnstSttn.pbnstDetail.pbnstRuseFcltPk) setShowDetailView(true);
-  }, [pbnstSttn.pbnstDetail]);
-
-
-  // 빗물재이용시설 cellClick 이벤트 (상세정보)
-  const rainCellClick = (index: number | undefined, headId: string) => {
-    if (
-      index !== undefined &&
-      rainTable !== undefined &&
-      headId !== 'chBuildingYn') {
-      setRainDetailModal({ isOpen: true, data: rainTable[index] })
-    } else if (headId === 'chBuildingYn' && index !== undefined && rainTable !== undefined) {
-      if (rainTable[index] && rainTable[index]?.chgBuilding[0]?.bdstChgNm !== null)
-        setRainBdstChgProps({ isOpen: true, chBuilding: rainTable[index].chgBuilding });
-    }
-  }
-
-  // 중수도시설 cellClick 이벤트 (상세정보)
-  const rswtCellClick = (index: number | undefined, headId: string) => {
-    if (headId !== 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) {
-      setRswtrDetailModal({ isOpen: true, data: rswtrTable[index] })
-    } else if (headId === 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) {
-      if (rswtrTable[index] && rswtrTable[index]?.chBuildingYn === 'Y') {
-        setRswtrBdstChgProps({ isOpen: true, chBuilding: rswtrTable[index].chgBuilding });
+  // 재이용시설 상세정보
+  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 }];
+    });
   }
-
-  // 온배수시설 cellClick 이벤트 (상세정보)
-  const htdflCellClick = (index: number | undefined, headId: string) => {
-    if (
-      headId !== "chBuildingYn" &&
-      index !== undefined &&
-      htdflTable !== undefined
-    ) {
-      setHtdflDetailModal({ isOpen: true, data: htdflTable[index] });
+  // 재이용시설 조회
+  const fetchpbnstDetail = async (featureCd: string) => {
+    try {
+      const response = await getFetch("wr", `/reuseFc/pubFc/${featureCd}`);
+      // 중복 데이터 추가 방지
+      setTabDataFunc(response, featureCd);
+    } catch (error) {
+      console.error("Error fetching data:", error);
     }
   };
-
+  // 재이용시설 페이징처리 관련 함수
+  const onPageChangeHandler = useCallback((page: number) => {
+    pbnstSttnSearch(
+      String(page),
+      String(13),
+      {
+        partValue: "A",
+        sidoValue: "0",
+        sigunValue: "",
+        regionValue: "",
+        unitWaterShedValue: "",
+        middleRegionValue: "",
+        envPartValue: "",
+        sidoText: "",
+        sigunText: "",
+      },
+      "",
+      String(new Date().getFullYear())
+    );
+  }, []);
   const excelClick = useCallback(() => {
     // if (codeData) pbnstSttnSearch(1, "10000", codeData);
     excelDownload(
@@ -176,6 +260,173 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
       "A1:U2"
     );
   }, [pbnstSttnSearch]);
+  ///////////////////////////////////////////// 하수재이용시설 //////////////////////////////////////////////////
+
+
+  ///////////////////////////////////////////// 빗물 재이용 //////////////////////////////////////////////////
+  // 빗물재이용시설 cellClick 이벤트 (상세정보)
+  const rainCellClick = (index: number | undefined, headId: string) => {
+    if (
+      index !== undefined &&
+      rainTable !== undefined &&
+      headId !== 'chBuildingYn') {
+      setRainDetailModal({ isOpen: true, data: rainTable[index] })
+      setViewMode('detail')
+    } else if (headId === 'chBuildingYn' && index !== undefined && rainTable !== undefined) {
+      if (rainTable[index] && rainTable[index]?.chgBuilding[0]?.bdstChgNm !== null)
+        setRainBdstChgProps({ isOpen: true, chBuilding: rainTable[index].chgBuilding });
+    }
+  }
+
+  useEffect(() => {
+    if (!rainSttn.isInit) {
+      rainSttnInit(1, "20", "0", '', code.cityCd, code.sggCd);
+    }
+  }, [rainSttn.isInit, rainSttnInit]);
+
+  useEffect(() => {
+    const data = tableData(rainSttnRes, { code });
+    const chData = data
+      .map((item: any) => {
+        return {
+          ...item,
+          ...item.reuseBuilding[0],
+          ...item.reuseBuilding[0].rainyObj,
+          dtfcltCpct: item.reuseBuilding[0].rainyObj.dtfcltCpct === -1
+            ? "확인불가"
+            : item.reuseBuilding[0].rainyObj.dtfcltCpct,
+          instlCst: item.reuseBuilding[0].instlCst === -1
+            ? "확인불가"
+            : item.reuseBuilding[0].instlCst,
+          instlCstSprtAmt: item.reuseBuilding[0].instlCstSprtAmt === -1
+            ? "확인불가"
+            : item.reuseBuilding[0].instlCstSprtAmt,
+          chBuildingYn: item.chgBuilding[0]?.bdstChgNm !== null ? "Y" : "N",
+          pntfColArea: item.reuseBuilding[0].rainyObj.pntfColArea === -1
+            ? "확인불가"
+            : item.reuseBuilding[0].rainyObj.pntfColArea,
+          filtrTrtmfctCpct: item.reuseBuilding[0].rainyObj.filtrTrtmfctCpct === -1
+            ? "확인불가"
+            : item.reuseBuilding[0].rainyObj.filtrTrtmfctCpct,
+          archArea: Math.floor(item.archArea) === -1 ? "확인불가" : item.archArea,
+        };
+      })
+      .filter((item: any) => item.rainyObj !== undefined);
+    setRainTable(chData);
+  }, [code, rainSttnRes, rainSttn.rainSttHeadList]);
+
+  useEffect(() => {
+    rainSttnSearch(rainPage, "20", '', '', code.cityCd, code.sggCd);
+  }, [rainPage]);
+  ///////////////////////////////////////////// 빗물 재이용 //////////////////////////////////////////////////
+
+  ///////////////////////////////////////////// 중수도 시설 //////////////////////////////////////////////////
+  // 중수도시설 cellClick 이벤트 (상세정보)
+  const rswtCellClick = (index: number | undefined, headId: string) => {
+    if (headId !== 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) {
+      setRswtrDetailModal({ isOpen: true, data: rswtrTable[index] });
+      setViewMode('detail')
+    } else if (headId === 'chBuildingYn' && index !== undefined && rswtrTable !== undefined) {
+      if (rswtrTable[index] && rswtrTable[index]?.chBuildingYn === 'Y') {
+        setRswtrBdstChgProps({ isOpen: true, chBuilding: rswtrTable[index].chgBuilding });
+      }
+    }
+  }
+  useEffect(() => {
+    if (!rswtSttn.isInit) {
+      rswtSttnInit(1, "20", "0", '', code.cityCd, code.sggCd);
+    }
+  }, [rswtSttn.isInit, rswtSttnInit]);
+
+  useEffect(() => {
+    const data = tableData(rswtSttnRes, { code });
+    const chData = data
+      .map((item: customRswtBdst) => {
+        return {
+          ...item,
+          ...item.reuseBuilding[0],
+          ...item.reuseBuilding[0]?.rswtrObj,
+          chBuildingYn: item?.chgBuilding[0]?.bdstChgNm !== null && item?.chgBuilding.length > 0 ? 'Y' : 'N',
+          instlCst: item.reuseBuilding[0]?.instlCst === -1 ? "확인불가" : item.reuseBuilding[0]?.instlCst,
+          instlCstSprtAmt: item.reuseBuilding[0]?.instlCstSprtAmt === -1 ? "확인불가" : item.reuseBuilding[0]?.instlCstSprtAmt,
+          archArea: item?.archArea.split('.')[0] !== '-1' ? item?.archArea.split('.')[0] : '확인불가'
+        }
+      })
+      .filter(
+        (item: customRswtBdst) =>
+          item.reuseBuilding[0]?.rswtrObj !== undefined
+      );
+
+    setRswtrTable(chData);
+  }, [code, rswtSttnRes]);
+  // 엑셀 관련 
+  const rswtSttnExcelDownload = useCallback(() => {
+    console.log('excel', rswtSttn.excelList, rswtrTable)
+    if (rswtSttn.excelList.length > 0) {
+      if (rswtSttn.excelList.length === 0) return;
+      excelDownload(
+        rswtSttn.excelList,
+        "중수도시설 현황",
+        "sample_rswtSttn.xlsx",
+        "A1:W3",
+      );
+    }
+  }, [rswtSttn.excelList])
+
+  useEffect(() => {
+    rswtSttnSearch(rswtrPage, "20", '', '', code.cityCd, code.sggCd);
+  }, [rswtrPage]);
+  ///////////////////////////////////////////// 중수도 시설 //////////////////////////////////////////////////
+
+  ///////////////////////////////////////////// 온배수 시설 //////////////////////////////////////////////////
+  // 온배수시설 cellClick 이벤트 (상세정보)
+  const htdflCellClick = (index: number | undefined, headId: string) => {
+    if (
+      headId !== "chBuildingYn" &&
+      index !== undefined &&
+      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]);
+  ///////////////////////////////////////////// 온배수 시설 //////////////////////////////////////////////////
+
+   useEffect(() => {
+      if (code.sggCd.length && pbnstHasuRes.length > 0) {
+        setHasuTable(tableData(pbnstHasuRes, { code }));
+      }
+    }, [code, pbnstHasuRes]);
+    useEffect(() => {
+      if (!pbnst.isInit) {
+        pubHasuInit("1", "41");
+      }
+    }, [pbnst.isInit, pubHasuInit]);
+    useEffect(() => {
+      pubHasuInit(String(hasuPage), "41");
+    }, [hasuPage, pubHasuInit]);
 
   // 체크된 레이어에 따른 조건부 컴포넌트 렌더링 함수
   const renderConditionalContent = () => {
@@ -183,195 +434,222 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
     const hasWaterTreatmentLayer = checkedLayersData.some(layer =>
       layer.data?.lyrNm?.includes('하수처리') || layer.data?.lyrNm?.includes('재이용시설')
     );
-
-    // swcho : true, false 값 변경하여 시설 변경하여 테스트하였음
+    const actTabData = tabData.find((tab) => tab.id === activeTab);
+    let layerId = getSelectedLayers();
+    if (layerId === null || layerId === undefined) {
+      layerId = seletectedLayerNm || '';
+    }
+    //하수처리시설
+    let isPrcsFclt = layerId == '하수처리시설'
     // 재이용시설
-    const isPbnst = true;
+    let isPbnst = layerId == '하수재이용시설';
     // 빗물이용시설
-    const isRain = false;
+    let isRain = layerId == '빗물이용시설';
     // 중수도시설
-    const isRswt = false;
+    let isRswt = layerId == '중수도시설';
     // 온배수시설
-    const isHtdfl = false;
+    let isHtdfl = layerId == '온배수시설';
+    if (isPrcsFclt) {
+      if (viewMode == 'list') {
+        return (
+          <>
+            <div className="flex justify-between items-center mb-4">
+              <Title title="하수처리시설 현황" />
+            </div>
+              {/* 높이 조정 */}
+              <UiTable
+                tableData={bdstTable || []}
+                headlist={pubFacHeadList}
+                pageSize={10}
+                total={100000}
+                headName={""}
+                cellClick={()=>{}}
+                onPageChange={setHasuPage}
+                children={undefined}
+              />
+          </>
+        )
+      }
+    }
+    if (isPbnst) {
+      if (viewMode == 'detail') {
+        // 재이용시설 상세
+        return (
+          <>
+            <div className="flex justify-between items-center mb-4">
+              <Title title="하수재이용시설 상세정보" />
+            </div>
+            <div className="flex justify-between items-center mb-8">
+              <UITab
+                defaultValue={activeTab}
+                tabList={tabData.map((tab) => ({
+                  value: tab.id,
+                  label: tab.name,
+                  onClick: () => setActiveTab(tab.id),
+                }))}
+                children={undefined}
+              />
+            </div>
+            <PbnstSttnModal
+              data={actTabData?.data[0] || ({} as customPbnst)}
+              titleVisible={false}
+            />
+          </>
+        );
+      } else {
+        // 재이용시설 목록
+        return (
+          <>
+            <div className="flex justify-between items-center">
+              <Title title="하수재이용시설 현황" />
+              {/* <div className="flex gap-2 mt-8">
+                <Button className={btnClass} color="primary" onClick={excelClick}>
+                  엑셀다운로드
+                </Button>
+              </div> */}
+            </div>
+            <UiTable
+              headName={[]}
+              tableData={bdstTable || []}
+              children={<HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />}
+              headlist={pbnstSttn.pbnstSttHeadList}
+              pageSize={20}
+              total={100000}
+              cellClick={(index: number | undefined, headId: string) => {
+                pbnstCellClick(index);
+              }}
+              onPageChange={onPageChangeHandler}
+            />
+          </>
+        );
+      }
+    }
 
+    if (isRain) {
+      if (viewMode == 'detail') {
+        // 빗물이용시설 상세
+        return (
+          <>
+            <div className="flex justify-between items-center mb-4">
+              <Title title="빗물이용시설 상세정보" />
+            </div>
+            <RainPrfmncSttnPopup rainForm={rainDetailModal.data as customRainBdst} isModal={false} />
+          </>
+        );
+      } else {
+        // 빗물이용시설 목록
+        return (
+          <>
+            <div className="flex justify-between items-center">
+              <Title title="빗물이용시설 현황" />
+              {/* <div className="flex gap-2 mt-8">
+                <Button className={btnClass} color="primary" onClick={excelClick}>
+                  엑셀다운로드
+                </Button>
+              </div> */}
+            </div>
+            <UiTable
+              headName={[]}
+              tableData={rainTable || []}
+              children={<HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />}
+              headlist={rainSttn.rainSttHeadList}
+              pageSize={20}
+              total={100000}
+              cellClick={(index: number | undefined, headId: string) => {
+                rainCellClick(index ?? undefined, headId);
+              }}
+              onPageChange={setRainPage}
+            />
+          </>
+        );
+      }
+    }
 
-    return (
-      <div className="mt-4">
-        {/* 체크된 레이어가 없는 경우 (재이용시설 목록) */}
-        {isPbnst && (
+    if (isRswt) {
+      if (viewMode == 'detail') {
+        // 중수도시설 상세
+        return (
           <>
-            {showDetailView ? (
-              // 재이용시설 상세
-              <>
-                <div className="flex justify-between items-center mb-4">
-                  <Title title='하수재이용시설 상세정보' />
-                </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),
-                    }))}
-                    children={undefined}
-                  />
-                </div>
-                <PbnstSttnModal
-                  data={pbnDetaileData.data || ({} as customPbnst)}
-                  titleVisible={false}
-                />
-                <PbnstPrfmncSttnPopup isVisible={false} />
-              </>
-            ) : (
-              // 재이용시설 목록
-              <>
-                <div className="flex justify-between items-center">
-                  <Title title='하수재이용시설 현황' />
-                  <div className="flex gap-2 mt-8">
-                    <Button className={btnClass} color="primary" onClick={excelClick}>엑셀다운로드</Button>
-                  </div>
-                </div>
-                <UiTable
-                  headName={[]}
-                  tableData={bdstTable || []}
-                  children={
-                    <HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />
-                  }
-                  headlist={pbnstSttn.pbnstSttHeadList}
-                  pageSize={20}
-                  total={100000}
-                  cellClick={(index: number | undefined, headId: string) => {
-                    pbnstCellClick(index);
-                  }}
-                  onPageChange={setPageNation}
-                />
-              </>
-            )}
+            <div className="flex justify-between items-center mb-4">
+              <Title title="중수도시설 상세정보" />
+            </div>
+            <RswtrPrfmncsSttnPopup rswtForm={rswtrDetailModal.data as customRswtBdst} isModal={false} />
           </>
-        )}
-        {/* 빗물이용시설 */}
-        {isRain && (
+        );
+      } else {
+        // 중수도시설 목록
+        return (
           <>
-            {showDetailView ? (
-              // 빗물이용시설 상세
-              <>
-                <div className="flex justify-between items-center mb-4">
-                  <Title title='빗물이용시설 상세정보' />
-                </div>
-                <RainPrfmncSttnPopup rainForm={rainDetailModal.data as customRainBdst} isModal={false} />
-                {/* TODO: 지도 점검 결과 현황 추가 할 것 */}
-              </>
-            ) : (
-              // 빗물이용시설 목록
-              <>
-                <div className="flex justify-between items-center">
-                  <Title title='빗물이용시설 현황' />
-                  <div className="flex gap-2 mt-8">
-                    <Button className={btnClass} color="primary" onClick={excelClick}>엑셀다운로드</Button>
-                  </div>
-                </div>
-                <UiTable
-                  headName={[]}
-                  tableData={rainTable || []}
-                  children={
-                    <HeadMakeColSpan upHeadList={rainSttn.rainSttNodeList} />
-                  }
-                  headlist={rainSttn.rainSttHeadList}
-                  pageSize={20}
-                  total={100000}
-                  cellClick={(index: number | undefined, headId: string) => {
-                    rainCellClick(index ?? undefined, headId)
-                  }}
-                  onPageChange={setPageNation}
-                />
-              </>
-            )}
+            <div className="flex justify-between items-center">
+              <Title title="중수도시설 현황" />
+              {/* <div className="flex gap-2 mt-8">
+                <Button className={btnClass} color="primary" onClick={rswtSttnExcelDownload}>
+                  엑셀다운로드
+                </Button>
+              </div> */}
+            </div>
+            <UiTable
+              headName={[]}
+              tableData={rswtrTable || []}
+              children={<HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />}
+              headlist={rswtSttn.rswtSttHeadList}
+              pageSize={20}
+              total={100000}
+              cellClick={(index: number | undefined, headId: string) => {
+                rswtCellClick(index, headId);
+              }}
+              onPageChange={setRswtrPage}
+            />
           </>
-        )}
-        {/* 중수도시설 */}
-        {isRswt && (
+        );
+      }
+    }
+
+    if (isHtdfl) {
+      if (viewMode == 'detail') {
+        // 온배수시설 상세
+        return (
           <>
-            {showDetailView ? (
-              // 재이용시설 상세
-              <>
-                <div className="flex justify-between items-center mb-4">
-                  <Title title='중수도시설 상세정보' />
-                </div>
-                <RswtrPrfmncsSttnPopup rswtForm={rswtrDetailModal.data as customRswtBdst} isModal={false} />
-                {/* TODO: 지도 점검 결과 현황 추가 할 것 */}
-              </>
-            ) : (
-              // 재이용시설 목록
-              <>
-                <div className="flex justify-between items-center">
-                  <Title title='중수도시설 현황' />
-                  <div className="flex gap-2 mt-8">
-                    <Button className={btnClass} color="primary" onClick={excelClick}>엑셀다운로드</Button>
-                  </div>
-                </div>
-                <UiTable
-                  headName={[]}
-                  tableData={rswtrTable || []}
-                  children={
-                    <HeadMakeColSpan upHeadList={rswtSttn.rswtSttNodeList} />
-                  }
-                  headlist={rswtSttn.rswtSttHeadList}
-                  pageSize={20}
-                  total={100000}
-                  cellClick={(index: number | undefined, headId: string) => {
-                    rswtCellClick(index, headId);
-                  }}
-                  onPageChange={setPageNation}
-                />
-              </>
-            )}
+            <div className="flex justify-between items-center mb-4">
+              <Title title="온배수시설 상세정보" />
+            </div>
+            <HtdflPrfmncSttnPopup htdflForm={htdflDetailModal.data as customHtdflBdst} isModal={false} />
           </>
-        )}
-        {/* 온배수시설 */}
-        {isHtdfl && (
+        );
+      } else {
+        // 온배수시설 목록
+        return (
           <>
-            {showDetailView ? (
-              // 재이용시설 상세
-              <>
-                <div className="flex justify-between items-center mb-4">
-                  <Title title='온배수시설 상세정보' />
-                </div>
-                {/* <HtdflPrfmncSttnPopup htdflForm={htdflDetailModal.data as customHtdflBdst} isModal={false} /> */}
-                <HtdflPrfmncSttnPopup htdflForm={htdflDetailModal.data as customHtdflBdst} isModal={false} />
-              </>
-            ) : (
-              // 재이용시설 목록
-              <>
-                <div className="flex justify-between items-center">
-                  <Title title='온배수시설 현황' />
-                  <div className="flex gap-2 mt-8">
-                    <Button className={btnClass} color="primary" onClick={excelClick}>엑셀다운로드</Button>
-                  </div>
-                </div>
-                <UiTable
-                  headName={[]}
-                  tableData={bdstTable || []}
-                  children={
-                    <HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />
-                  }
-                  headlist={htdflSttn.htdflSttHeadList}
-                  pageSize={20}
-                  total={100000}
-                  cellClick={(index: number | undefined, headId: string) => {
-                    htdflCellClick(index ?? undefined, headId);
-                  }}
-                  onPageChange={setPageNation}
-                />
-              </>
-            )}
+            <div className="flex justify-between items-center">
+              <Title title="온배수시설 현황" />
+              {/* <div className="flex gap-2 mt-8">
+                <Button className={btnClass} color="primary" onClick={excelClick}>
+                  엑셀다운로드
+                </Button>
+              </div> */}
+            </div>
+            <UiTable
+              headName={[]}
+              tableData={htdflTable || []}
+              children={<HeadMakeColSpan upHeadList={htdflSttn.htdflSttNodeList} />}
+              headlist={htdflSttn.htdflSttHeadList}
+              pageSize={20}
+              total={100000}
+              cellClick={(index: number | undefined, headId: string) => {
+                htdflCellClick(index ?? undefined, headId);
+              }}
+              onPageChange={setHtdflPage}
+            />
           </>
-        )}
-      </div>
-    );
+        );
+      }
+    }
+
+    return null; // 조건에 맞는 콘텐츠가 없을 경우
   };
 
   return (
+    viewMode == 'nothing' ? <></> : 
     <NewWindowPortal onClose={memoizedOnClose} title="시설 상세 정보">
       {/* 체크된 레이어에 따른 조건부 렌더링 */}
       {renderConditionalContent()}

apps/wr/app/map/rainPrfmncSttnPopup.tsx

@@ -261,7 +261,7 @@ export default function RainPrfmncSttnPopup({
                         handleCommaNumberChange(e, field.onChange);
                       }}
                       value={formatCommaNumber(field.value)}
-                      readOnly={filtrTrtmfctYn !== "Y"}
+                      readOnly={true}
                     />
                   </FormUi>
                 )}
@@ -279,7 +279,7 @@ export default function RainPrfmncSttnPopup({
                       type=""
                       value={field.value ?? ""}
                       onChange={field.onChange}
-                      readOnly={filtrTrtmfctYn !== "Y"}
+                      readOnly={true}
                     />
                   </FormUi>
                 )}
@@ -328,7 +328,7 @@ export default function RainPrfmncSttnPopup({
                         handleCommaNumberChange(e, field.onChange);
                       }}
                       value={formatCommaNumber(field.value)}
-                      readOnly={instlCstSprtYn !== "Y"}
+                      readOnly={true}
                     />
                   </FormUi>
                 )}
@@ -371,7 +371,7 @@ export default function RainPrfmncSttnPopup({
                       type=""
                       value={field.value ?? ""}
                       onChange={field.onChange}
-                      readOnly={grntchBdstCertYn !== "Y"}
+                      readOnly={true}
                     />
                   </FormUi>
                 )}
@@ -389,7 +389,7 @@ export default function RainPrfmncSttnPopup({
                       type=""
                       value={field.value ?? ""}
                       onChange={field.onChange}
-                      readOnly={grntchBdstCertYn !== "Y"}
+                      readOnly={true}
                     />
                   </FormUi>
                 )}
@@ -407,7 +407,7 @@ export default function RainPrfmncSttnPopup({
                       type=""
                       value={field.value ?? ""}
                       onChange={field.onChange}
-                      readOnly={grntchBdstCertYn !== "Y"}
+                      readOnly={true}
                     />
                   </FormUi>
                 )}

packages/common/business_components/src/ui/map/Gis.js

@@ -8,6 +8,7 @@ import * as olProj from 'ol/proj';
 import { register } from 'ol/proj/proj4';
 import proj4 from 'proj4';
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createRoot } from 'react-dom/client';
 import GisLonLat from './GisLonLat';
 import GisMapToggle from './GisMapToggle';
 import GisSelect from './GisSelect';
@@ -46,7 +47,7 @@ function Gis({
 	const gisCore = useMemo(() => new GisApp.core({ targetId: mapRef.current }), []);
 	const mapInstanceRef = useRef(null);
 	const checkedLayerIds = useRef([]);
-	
+	const [viewMode, setViewMode] = useState('list'); // 상태로 관리
 
 	// 팝업 데이터를 저장할 상태와 오버레이 참조를 저장할 ref 추가
 	// const [facilityInfoPopupData, setFacilityInfoPopupData] = useState([]);