컴포넌ㅌ트 분리중 ..

2025-07-31 14:38:14 +09:00
parent 80156bd349
commit 7ee7a0fc69
5 changed files with 344 additions and 309 deletions
@@ -0,0 +1,89 @@
+import { useWrStore } from "@/app/store";
+import type { pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+import { tableData } from "@/components/lib/func/commom";
+import { Title, UiTable } from "@common/business_components/ui";
+import { useEffect, useState } from "react";
+interface Props {
+    seletectedLayerNm: string;
+    viewMode: 'list' | 'detail' | 'nothing';
+    onFeatureSelect: (feature: any) => void;
+    onClose: () => void;
+    isRuseReg: { data: any | undefined };
+}
+const HasuFacility = ({ seletectedLayerNm, viewMode, onClose, onFeatureSelect, isRuseReg }: Props) => {
+    const {
+        code,
+        pbnst,
+        pubHasuInit,
+    } = useWrStore((state) => state);
+    const { pubFacHeadList, pbnstHasuRes, pbnstHasuResCount } = pbnst;
+    const [hasuTable, setHasuTable] = useState<pubHasuType[]>();
+    const [hasuPage, setHasuPage] = useState<number>(1);
+    useEffect(() => {
+        if (code.sggCd.length && pbnstHasuRes.length > 0) {
+            setHasuTable(tableData(pbnstHasuRes, { code }));
+        }
+    }, [code, pbnstHasuRes]);
+    useEffect(() => {
+        if (seletectedLayerNm !== '하수처리시설') return;
+        if (!pbnst.isInit) {
+            pubHasuInit("1", "0");
+        }
+    }, [pbnst.isInit, pubHasuInit]);
+    useEffect(() => {
+        if (seletectedLayerNm !== '하수처리시설') return;
+        pubHasuInit(String(hasuPage), "0");
+    }, [hasuPage, pubHasuInit]);
+
+    const hasuCellClick = (index: number | undefined) => {
+        if (index !== undefined && pbnstHasuRes !== undefined) {
+            onFeatureSelect(pbnstHasuRes[index]);
+            onClose();
+        }
+    };
+    return (viewMode == 'list' ? (
+        <div style={{ overflowY: 'auto' }}>
+            <div className="flex justify-between items-center mb-4">
+                <Title title="하수처리시설 현황" />
+            </div>
+            {/* 높이 조정 */}
+            <UiTable
+                tableData={hasuTable || []}
+                headlist={pubFacHeadList}
+                pageSize={11}
+                total={pbnstHasuResCount || 0}
+                headName={""}
+                cellClick={hasuCellClick}
+                onPageChange={setHasuPage}
+            />
+        </div>
+    ) :
+        (
+            <div style={{ overflowX: 'hidden' }}>
+                <div className="flex justify-between items-center mb-4">
+                    <Title title="하수처리시설 상세정보" />
+                </div>
+                {/* 높이 조정 */}
+                <UiTable
+                    tableData={isRuseReg?.data || []}
+                    headlist={pubFacHeadList.slice(0, 4)}
+                    pageSize={1}
+                    total={0}
+                    headName={"위치정보"}
+                    cellClick={() => { }}
+                    onPageChange={() => { }}
+                />
+                <UiTable
+                    tableData={isRuseReg?.data || []}
+                    headlist={pubFacHeadList.slice(4)}
+                    pageSize={1}
+                    total={0}
+                    headName={"기본정보"}
+                    cellClick={() => { }}
+                    onPageChange={() => { }}
+                />
+            </div>
+        )
+    )
+}
+export default HasuFacility;
@@ -0,0 +1,147 @@
+import { useWrStore } from "@/app/store";
+import type { customPbnst } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
+import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
+import { Title, UITab, UiTable } from "@common/business_components/ui";
+import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
+import { useState, useEffect, useCallback } from "react";
+interface Props {
+    seletectedLayerNm: string;
+    viewMode: 'list' | 'detail' | 'nothing';
+    setFcltPk: (pk: string) => void;
+    onFeatureSelect: (feature: any) => void;
+    onClose: () => void;
+    actTabData: { id: string; name: string; data: any } | undefined;
+    tabData: { id: string; name: string; data: any }[];
+}
+const ResueFacility = ({ viewMode, seletectedLayerNm, tabData, actTabData, setFcltPk, onFeatureSelect, onClose}: Props) => {
+    const [activeTab, setActiveTab] = useState<string>(''); // 현재 활성화된 탭
+    // 하수재이용시설 변수
+    const {
+        pbnstSttn,
+        pbnstSttnSearch,
+        pbnSttnInit,
+        getFlcts
+    } = useWrStore((state) => state);
+    const { fclts, pbnstSttnResCount } = pbnstSttn
+    const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>()
+    // 재이용시설 cellClick 이벤트 (상세정보)
+    const pbnstCellClick = (index: number | undefined) => {
+        if (
+            index !== undefined &&
+            pbnstSttn.pbnstSttnRes &&
+            pbnstSttn.pbnstSttnRes[index]
+        ) {
+            setFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltId);
+            onFeatureSelect(pbnstSttn.pbnstSttnRes[index]);
+            onClose()
+        }
+    };
+
+    // 재이용 현황 초기값
+    useEffect(() => {
+        console.log('재이용시설 초기값 호출', viewMode)
+        if (seletectedLayerNm !== '하수재이용시설') return;
+        if (!pbnstSttn.isInit) {
+            getFlcts()
+        }
+    }, [seletectedLayerNm, pbnstSttn.isInit]);
+    useEffect(() => {
+        if (seletectedLayerNm !== '하수재이용시설') return;
+        pbnSttnInit("1", "20", {
+            partValue: "A",
+            sidoValue: '0',
+            sigunValue: "0",
+            regionValue: "",
+            unitWaterShedValue: "",
+            middleRegionValue: "",
+            envPartValue: "",
+            sidoText: "",
+            sigunText: ""
+        }, String(new Date().getFullYear()), pbnstSttn.fclts);
+    }, [fclts, pbnSttnInit, pbnstSttn.fclts, seletectedLayerNm])
+    useEffect(() => {
+        setBdstTable(pbnstSttn.pbnstSttnRes);
+    }, [seletectedLayerNm, pbnstSttn.pbnstSttnRes]);
+
+    // 재이용시설 조회
+    // 재이용시설 페이징처리 관련 함수
+    const onPageChangeHandler = useCallback((page: number) => {
+        if (seletectedLayerNm !== '하수재이용시설') return;
+        pbnstSttnSearch(
+            false,
+            String(page),
+            String(20),
+            {
+                partValue: "A",
+                sidoValue: "0",
+                sigunValue: "0",
+                regionValue: "",
+                unitWaterShedValue: "",
+                middleRegionValue: "",
+                envPartValue: "",
+                sidoText: "",
+                sigunText: "",
+            },
+            "",
+            String(new Date().getFullYear()), fclts
+        );
+    }, [fclts, pbnstSttnSearch]);
+    // FIXME: 윤선화차장님 요구사항으로 엑셀 다운로드 삭제.
+    // const excelClick = useCallback(() => {
+    //   // if (codeData) pbnstSttnSearch(1, "10000", codeData);
+    //   excelDownload(
+    //     [[]],
+    //     "하수재이용시설 현황",
+    //     "sample_pbnstSttn.xlsx",
+    //     "A1:U2"
+    //   );
+    // }, [pbnstSttnSearch]);
+    return (
+        viewMode == 'detail' ?
+            // 재이용시설 상세
+            <>
+                <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),
+                        }))}
+                    />
+                </div>
+                <PbnstSttnModal
+                    data={actTabData?.data[0] || ({} as customPbnst)}
+                    titleVisible={false}
+                />
+            </> :
+            <div style={{ overflowY: 'auto' }}>
+                <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 || []}
+                    headlist={pbnstSttn.pbnstSttHeadList}
+                    pageSize={20}
+                    total={pbnstSttnResCount || 0}
+                    cellClick={(index: number | undefined) => {
+                        pbnstCellClick(index);
+                    }}
+                    onPageChange={onPageChangeHandler}
+                >
+                    <HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />
+                </UiTable>
+            </div>
+    )
+}
+export default ResueFacility;
@@ -135,13 +135,14 @@ const Map = () => {
  const renderDetailView = useCallback(
    (props: any) => (
      <NewWindowPopup
+        key={featureData?.fid || featureData?.id || featureData?.ftrIdn}
        onClose={handlePopupClose}
        checkedLayers={checkedLayers}
        checkedLayersData={checkedLayersData}
        {...props}
      />
    ),
-    [handlePopupClose, checkedLayers, checkedLayersData] // 필요 시 의존성 넣기
+    [checkedLayers, checkedLayersData] // 필요 시 의존성 넣기
  );
  return (
    <div className="bg-container">
@@ -2,20 +2,20 @@
 import NewWindowPortal from '@/app/map/newWindowPortal';
 import { useWrStore } from "@/app/store";
 import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
-import type { customPbnst, pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+import type { pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
 import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
 import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
-import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
-import { fetchType, getFetch, postFectch } from "@/components/lib/api";
 import { formatPhoneNumber, tableData } from "@/components/lib/func/commom";
-import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
 import SttnDetailModal from "@/components/ui/modal/sttn/sttnDetailModal/sttnDetailModal";
-import { Title, UITab, UiTable } from '@common/business_components';
+import { Title, UiTable } from '@common/business_components';
 import { useGisContext } from "@common/business_components/ui/map/Gis";
 import type { DemandCompType } from '@common/business_components/ui/sdmInsertForm/form';
 import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
 import moment from 'moment';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ResueFacility from './components/reuseFacility';
+import { detainSttn, fetchHasuDetail, fetchpbnstDetail } from './util';
+import HasuFacility from './components/hasuFacility';

 interface NewWindowPopupProps {
  featureData: any;
@@ -44,15 +44,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  }, [onClose]);

  // 하수재이용시설 변수
-  const {
-    code,
-    pbnstSttn,
-    pbnstSttnSearch,
-    pbnSttnInit,
-    getFlcts
-  } = useWrStore((state) => state);
-  const { fclts, pbnstSttnResCount } = pbnstSttn
-  const [bdstTable, setBdstTable] = useState<WaterReuseFacility[]>()
+  const {code} = useWrStore((state) => state);

  // 빗물재이용시설 변수
  const { rainSttn, rainSttnSearch, rainSttnInit } = useWrStore(
@@ -82,18 +74,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  const [htdflPage, setHtdflPage] = useState(1)
  const [htdflList, setHtdflList] = useState<customHtdflBdst[]>(htdflSttnRes || []);

-  //하수처리시설 변수
-  const {
-    pbnst,
-    pubHasuInit,
-  } = useWrStore((state) => state);
-  const { pubFacHeadList, pbnstHasuRes, pbnstHasuResCount } = pbnst;
-  const [hasuList, setHasuList] = useState<pubHasuType[]>(pbnstHasuRes || []);
+  // 하수처리시설 변수
+  const [hasuList, setHasuList] = useState<pubHasuType[]>([]);
  const [isRuseReg, setIsRuseReg] = useState<{
    data: any | undefined;
  }>({ data: undefined });
-  const [hasuTable, setHasuTable] = useState<pubHasuType[]>();
-  const [hasuPage, setHasuPage] = useState<number>(1);

  // 수요처관리 변수
  const {
@@ -111,7 +96,7 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
  const [mngList, setMngList] = useState<DemandCompType[]>(coSttnRes || []);
  ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////
  const getSelectedLayers = () => {
-    console.trace('호출확인',1)
+    console.trace('호출확인', 1)
    let result = null;
    const layers = gisMap ? gisMap.getLayers().getArray().filter((l: any) => l.getVisible()) : []; // gisMap이 null인지 확인 후 레이어 가져오기
    let featureLayer: { get: (key: string) => any } = { get: () => null };
@@ -125,50 +110,6 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
    result = featureLayer.get('lyrNm');
    return result;
  };
-  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 fetchHasuDetail = async (featureCd: string, data: string) => {
-    try {
-      const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/20/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON)
-      setHasuList(
-        rainRes.data.map((item: any) => {
-          return {
-            ...item,
-            fctCpc: Number(item.fctCpc) || 0,
-            ruse: item.ruse === false ? "N" : "Y",
-          };
-        })
-      )
-    } 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}`)
-      setRainList(res)
-    }
-    else if (layerNm == '중수도시설') { //중수도 시설 
-      const res = await getFetch(fetchType.WR, `/reuseFc/waterreuseFc/1/20/0/${featureCd}`)
-      setRswtrList(res)
-    }
-    else if (layerNm == '수요처') { //수요처 
-      const res = await getFetch(fetchType.WR, `/reuseFc/request/1/20/0/${featureCd}`)
-      setMngList(res)
-    }
-    else {
-      const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`)
-      setHtdflList(res)
-      setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
-    }
-  }
  // 상세 목록 데이터 상태 처리
  useEffect(() => {
    if (hasuList.length > 0) setIsRuseReg({ data: [hasuList[0]] });
@@ -186,12 +127,11 @@ const NewWindowPopup: React.FC<NewWindowPopupProps> = ({
    if (mngList.length > 0) setIsDmdModal({ isMoal: true, data: [mngList[0]] });
  }, [mngList])
  const lastCalledIdRef = useRef<string | null>(null);
-  const [layerId, setLayerId] = useState<string|null>();
-useEffect(() => {
-  const layers = getSelectedLayers();
-  setLayerId(layers);
-}, []); // 최초 렌더링 시 호출
-
+  const [layerId, setLayerId] = useState<string | null>();
+  useEffect(() => {
+    const layers = getSelectedLayers();
+    setLayerId(layers);
+  }, []); // 최초 렌더링 시 호출
  useEffect(() => {
    if (!featureData || typeof featureData.getProperties !== "function" || featureData.getProperties() == '') return;
    const selectedProps = featureData.getProperties();
@@ -205,106 +145,28 @@ useEffect(() => {
    if (!layerId || typeof layerId !== 'string') return;
    const featureCd =
      layerId === '하수재이용시설' ? selectedProps?.swtrmt_fclt_cd :
-      ['빗물이용시설', '중수도시설', '온배수시설', '수요처'].includes(layerId) ? selectedProps?.bdst_nm :
-      layerId === '하수처리시설' ? selectedProps?.swtrmt_fclt_nm :
-      null;
+        ['빗물이용시설', '중수도시설', '온배수시설', '수요처'].includes(layerId) ? selectedProps?.bdst_nm :
+          layerId === '하수처리시설' ? selectedProps?.swtrmt_fclt_nm :
+            null;
    if (!featureCd || featureCd === fcltPk) return;
-    if (layerId === '하수재이용시설') {
-      fetchpbnstDetail(featureCd);
-    } else if (layerId === '하수처리시설') {
-      fetchHasuDetail(featureCd, selectedProps?.swtrmt_fclt_cd);
-    } else {
-      detainSttn(featureCd, layerId);
-    }
    setFcltPk(featureCd);
-    setViewMode("detail");
    setActiveTab(featureCd);
+    setViewMode("detail");
+    if (layerId === '하수재이용시설') {
+      fetchpbnstDetail(featureCd, setTabData);
+    } else if (layerId === '하수처리시설') {
+      fetchHasuDetail(featureCd, selectedProps?.swtrmt_fclt_cd).then((data) => { setHasuList(data) })
+    } else {
+      detainSttn(featureCd, layerId).then((res) => {
+        if (layerId === '빗물이용시설') setRainList(res);
+        else if (layerId === '중수도시설') setRswtrList(res);
+        else if (layerId === '온배수시설'){ setHtdflList(res); setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });}
+        else if (layerId === '수요처') setMngList(res);
+      });
+    }
  }, [featureData]);
  ///////////////////////////////////////////// 피쳐데이터 선택 시 각 시설별 데이터 처리 ///////////////////////////////////////////////

-  ///////////////////////////////////////////// 하수재이용시설 //////////////////////////////////////////////////
-  // 재이용시설 cellClick 이벤트 (상세정보)
-  const pbnstCellClick = (index: number | undefined) => {
-    if (
-      index !== undefined &&
-      pbnstSttn.pbnstSttnRes &&
-      pbnstSttn.pbnstSttnRes[index]
-    ) {
-      setFcltPk(pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltId);
-      onFeatureSelect(pbnstSttn.pbnstSttnRes[index]);
-      onClose()
-    }
-  };
-
-  // 재이용 현황 초기값
-  useEffect(() => {
-    if (!pbnstSttn.isInit && seletectedLayerNm === '하수재이용시설') {
-      getFlcts()
-    }
-  }, [seletectedLayerNm, pbnstSttn.isInit, getFlcts]);
-  useEffect(() => {
-    if(seletectedLayerNm !== '하수재이용시설') return;
-    console.trace('check', 1)
-    pbnSttnInit("1", "20", {
-      partValue: "A",
-      sidoValue: '0',
-      sigunValue: "0",
-      regionValue: "",
-      unitWaterShedValue: "",
-      middleRegionValue: "",
-      envPartValue: "",
-      sidoText: "",
-      sigunText: ""
-    }, String(new Date().getFullYear()), pbnstSttn.fclts);
-  }, [fclts, pbnSttnInit, pbnstSttn.fclts, seletectedLayerNm])
-  useEffect(() => {
-    setBdstTable(pbnstSttn.pbnstSttnRes);
-  }, [seletectedLayerNm, 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 onPageChangeHandler = useCallback((page: number) => {
-    if(seletectedLayerNm!== '하수재이용시설') return;
-    pbnstSttnSearch(
-      false,
-      String(page),
-      String(20),
-      {
-        partValue: "A",
-        sidoValue: "0",
-        sigunValue: "0",
-        regionValue: "",
-        unitWaterShedValue: "",
-        middleRegionValue: "",
-        envPartValue: "",
-        sidoText: "",
-        sigunText: "",
-      },
-      "",
-      String(new Date().getFullYear()), fclts
-    );
-  }, [fclts, pbnstSttnSearch]);
-  // FIXME: 윤선화차장님 요구사항으로 엑셀 다운로드 삭제.
-  // const excelClick = useCallback(() => {
-  //   // if (codeData) pbnstSttnSearch(1, "10000", codeData);
-  //   excelDownload(
-  //     [[]],
-  //     "하수재이용시설 현황",
-  //     "sample_pbnstSttn.xlsx",
-  //     "A1:U2"
-  //   );
-  // }, [pbnstSttnSearch]);
-  ///////////////////////////////////////////// 하수재이용시설 //////////////////////////////////////////////////
-
  ///////////////////////////////////////////// 빗물 재이용 //////////////////////////////////////////////////
  // 빗물재이용시설 cellClick 이벤트 (상세정보)
  const rainCellClick = (index: number | undefined, headId: string) => {
@@ -321,7 +183,7 @@ useEffect(() => {


  useEffect(() => {
-    if(seletectedLayerNm !== '빗물이용시설') return;
+    if (seletectedLayerNm !== '빗물이용시설') return;
    if (!rainSttn.isInit) {
      rainSttnInit(false, 1, "20", "0", '', code.cityCd, code.sggCd);
    }
@@ -359,7 +221,7 @@ useEffect(() => {
  }, [code, rainSttnRes, rainSttn.rainSttHeadList]);

  useEffect(() => {
-    if(seletectedLayerNm !== '빗물이용시설') return;
+    if (seletectedLayerNm !== '빗물이용시설') return;
    rainSttnSearch(false, rainPage, "20", '', '', code.cityCd, code.sggCd);
  }, [code.cityCd, code.sggCd, rainPage, rainSttnSearch]);
  ///////////////////////////////////////////// 빗물 재이용 //////////////////////////////////////////////////
@@ -375,14 +237,14 @@ useEffect(() => {
    }
  }
  useEffect(() => {
-    if(seletectedLayerNm !== '중수도시설') return;
+    if (seletectedLayerNm !== '중수도시설') return;
    if (!rswtSttn.isInit) {
      rswtSttnInit(false, 1, "20", "0", '', code.cityCd, code.sggCd);
    }
  }, [code.cityCd, code.sggCd, rswtSttn.isInit, rswtSttnInit]);

  useEffect(() => {
-    if(seletectedLayerNm !== '중수도시설') return;
+    if (seletectedLayerNm !== '중수도시설') return;
    const data = tableData(rswtSttnRes, { code });
    const chData = data
      .map((item: customRswtBdst) => {
@@ -416,7 +278,7 @@ useEffect(() => {
  // }, [rswtSttn.excelList])

  useEffect(() => {
-    if(seletectedLayerNm !== '중수도시설') return;
+    if (seletectedLayerNm !== '중수도시설') return;
    rswtSttnSearch(false, rswtrPage, "20", '', '', code.cityCd, code.sggCd);
  }, [code.cityCd, code.sggCd, rswtSttnSearch, rswtrPage]);
  ///////////////////////////////////////////// 중수도 시설 //////////////////////////////////////////////////
@@ -430,14 +292,14 @@ useEffect(() => {
    }
  };
  useEffect(() => {
-    if(seletectedLayerNm !== '온배수시설') return;
+    if (seletectedLayerNm !== '온배수시설') return;
    if (!htdflSttn.isInit) {
      initHtdfl(false, 1, "20", "0", '', code.cityCd, code.sggCd);
    }
  }, [code.cityCd, code.sggCd, htdflSttn.isInit, initHtdfl]);

  useEffect(() => {
-    if(seletectedLayerNm !== '온배수시설') return;
+    if (seletectedLayerNm !== '온배수시설') return;
    const data = tableData(htdflSttnRes, { code });
    const chData = data
      .map((item: any) => ({
@@ -451,38 +313,14 @@ useEffect(() => {
  }, [code, htdflSttnRes, htdflSttn.htdflSttHeadList]);

  useEffect(() => {
-    if(seletectedLayerNm !== '온배수시설') return;
+    if (seletectedLayerNm !== '온배수시설') return;
    htdflSttnSearch(true, htdflPage, "20", '', '', code.cityCd, code.sggCd);
  }, [code.cityCd, code.sggCd, htdflPage, htdflSttnSearch]);
  ///////////////////////////////////////////// 온배수 시설 //////////////////////////////////////////////////

-  ///////////////////////////////////////////// 하수처리 시설 //////////////////////////////////////////////////
-  useEffect(() => {
-    if (code.sggCd.length && pbnstHasuRes.length > 0) {
-      setHasuTable(tableData(pbnstHasuRes, { code }));
-    }
-  }, [code, pbnstHasuRes]);
-  useEffect(() => {
-    if(seletectedLayerNm !== '하수처리시설') return;
-    if (!pbnst.isInit) {
-      pubHasuInit("1", "0");
-    }
-  }, [pbnst.isInit, pubHasuInit]);
-  useEffect(() => {
-    pubHasuInit(String(hasuPage), "0");
-  }, [hasuPage, pubHasuInit]);
-
-  const hasuCellClick = (index: number | undefined) => {
-    if (index !== undefined && pbnstHasuRes !== undefined) {
-      onFeatureSelect(pbnstHasuRes[index]);
-      onClose();
-    }
-  };
-  ///////////////////////////////////////////// 하수처리 시설 //////////////////////////////////////////////////
-
  ///////////////////////////////////////////// 수요처 관리 //////////////////////////////////////////////////
  useEffect(() => {
-    if(seletectedLayerNm !== '수요처') return;
+    if (seletectedLayerNm !== '수요처') return;
    if (!coSttn.isInit) {
      coSttnInit("1", "20", "0");
    }
@@ -494,7 +332,7 @@ useEffect(() => {
    }
  };
  useEffect(() => {
-    if(seletectedLayerNm !== '수요처') return;
+    if (seletectedLayerNm !== '수요처') return;
    if (coSttnRes) {
      if (coSttnRes?.length > 0 && code.cityCd.length > 0) {
        const data = tableData(coSttnRes, { code });
@@ -510,7 +348,7 @@ useEffect(() => {
    }
  }, [coSttnRes, code]);
  useEffect(() => {
-    if(seletectedLayerNm !== '수요처') return;
+    if (seletectedLayerNm !== '수요처') return;
    coSttnSearch(String(mngPage), "20", String(0));
  }, [coSttnSearch, mngPage]);
  ///////////////////////////////////////////// 수요처 관리 //////////////////////////////////////////////////
@@ -521,10 +359,6 @@ useEffect(() => {
    if (layerId === null || layerId === undefined) {
      setLayerId(seletectedLayerNm || '');
    }
-    //하수처리시설
-    const isPrcsFclt = layerId == '하수처리시설'
-    // 재이용시설
-    const isPbnst = layerId == '하수재이용시설';
    // 빗물이용시설
    const isRain = layerId == '빗물이용시설';
    // 중수도시설
@@ -533,108 +367,14 @@ useEffect(() => {
    const isHtdfl = layerId == '온배수시설';
    // 수요처관리
    const isReuseMng = layerId == '수요처';
-    if (isPrcsFclt) {
-      if (viewMode == 'list') {
-        return (
-          <div style={{ overflowY: 'auto' }}>
-            <div className="flex justify-between items-center mb-4">
-              <Title title="하수처리시설 현황" />
-            </div>
-            {/* 높이 조정 */}
-            <UiTable
-              tableData={hasuTable || []}
-              headlist={pubFacHeadList}
-              pageSize={11}
-              total={pbnstHasuResCount || 0}
-              headName={""}
-              cellClick={hasuCellClick}
-              onPageChange={setHasuPage}
-            />
-          </div>
-        )
-      } else {
-        return (
-          <div style={{ overflowX: 'hidden' }}>
-            <div className="flex justify-between items-center mb-4">
-              <Title title="하수처리시설 상세정보" />
-            </div>
-            {/* 높이 조정 */}
-            <UiTable
-              tableData={isRuseReg?.data || []}
-              headlist={pubFacHeadList.slice(0, 4)}
-              pageSize={1}
-              total={0}
-              headName={"위치정보"}
-              cellClick={() => { }}
-              onPageChange={() => { }}
-            />
-            <UiTable
-              tableData={isRuseReg?.data || []}
-              headlist={pubFacHeadList.slice(4)}
-              pageSize={1}
-              total={0}
-              headName={"기본정보"}
-              cellClick={() => { }}
-              onPageChange={() => { }}
-            />
-          </div>
-        )
-      }
+    switch (layerId) {
+      case '하수재이용시설':
+        return (<ResueFacility viewMode={viewMode} seletectedLayerNm={layerId} tabData={tabData} actTabData={actTabData} setFcltPk={setFcltPk} onFeatureSelect={onFeatureSelect} onClose={onClose} />)
+      case '하수처리시설':
+        return(<HasuFacility seletectedLayerNm={layerId} viewMode={viewMode} onFeatureSelect={onFeatureSelect} onClose={onClose} isRuseReg={isRuseReg}/>)
+      default:
+        break;
    }
-    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),
-                }))}
-              />
-            </div>
-            <PbnstSttnModal
-              data={actTabData?.data[0] || ({} as customPbnst)}
-              titleVisible={false}
-            />
-          </>
-        );
-      } else {
-        // 재이용시설 목록
-        return (
-          <div style={{ overflowY: 'auto' }}>
-            <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 || []}
-              headlist={pbnstSttn.pbnstSttHeadList}
-              pageSize={20}
-              total={pbnstSttnResCount || 0}
-              cellClick={(index: number | undefined) => {
-                pbnstCellClick(index);
-              }}
-              onPageChange={onPageChangeHandler}
-            >
-              <HeadMakeColSpan upHeadList={pbnstSttn.pbnstSttNodeList} />
-            </UiTable>
-          </div>
-        );
-      }
-    }
-
    if (isRain) {
      if (viewMode == 'detail') {
        // 빗물이용시설 상세
@@ -0,0 +1,58 @@
+import { getFetch, postFectch, fetchType } from "@/components/lib/api";
+
+const fetchpbnstDetail = async (featureCd: string, setTabData: any) => {
+    try {
+        const response = await getFetch("wr", `/reuseFc/pubFc/${featureCd}`);
+        // 중복 데이터 추가 방지
+        setTabDataFunc(response, featureCd, setTabData);
+    } catch (error) {
+        console.error("Error fetching data:", error);
+    }
+};
+const fetchHasuDetail = async (featureCd: string, data: string) => {
+    try {
+        const rainRes = await postFectch(`/prcsFclt/ruseInfo/1/20/A/0/0/1/SW/${featureCd}`, [data], fetchType.COMMON)
+        // setHasuList
+        const filteredData = rainRes.data.map((item: any) => {
+            return {
+                ...item,
+                fctCpc: Number(item.fctCpc) || 0,
+                ruse: item.ruse === false ? "N" : "Y",
+            };
+        })
+        return filteredData
+    } catch (error) {
+        console.error("Error fetching data:", error);
+    }
+};
+// 재이용시설 상세정보
+const setTabDataFunc = (res: any, pk: string, setTabData: any) => {
+    setTabData((prev) => {
+        if (prev.some((tab) => tab.id === pk)) {
+            return prev; // 이미 존재하는 탭이면 추가하지 않음
+        }
+        return [...prev, { id: pk, name: `재이용시설 ${prev.length + 1}`, data: res }];
+    });
+}
+
+const detainSttn = async (featureCd: string, layerNm: string) => {
+    if (layerNm == '빗물이용시설') { //빗물이용시설 
+        const res = await getFetch(fetchType.WR, `/reuseFc/rainyInfoList/1/20/0/${featureCd}`)
+        return res
+    }
+    else if (layerNm == '중수도시설') { //중수도 시설 
+        const res = await getFetch(fetchType.WR, `/reuseFc/waterreuseFc/1/20/0/${featureCd}`)
+        return res
+    }
+    else if (layerNm == '수요처') { //수요처 
+        const res = await getFetch(fetchType.WR, `/reuseFc/request/1/20/0/${featureCd}`)
+        return res
+    }
+    else {
+        const res = await getFetch(fetchType.WR, `/drain/facilityList/1/20/0/${featureCd}`)
+        return res
+        // setHtdflDetailModal({ isOpen: true, data: htdflSttnRes[0] });
+    }
+}
+
+export { fetchHasuDetail, fetchpbnstDetail, detainSttn };