물재이용 지도 전반적인 수정 트리에서 클릭시 까지 완료(검색바 해야함)

apps/wr/components/ui/map/LayerPopUp/CoSttnMap/CoSttnMap.tsx

@@ -0,0 +1,195 @@
+import { useWrStore } from "@/app/store";
+import { costtnMapSize } from "@/app/store/map/coSttnMap";
+import {
+  formatPhoneNumber,
+  getCity,
+  tableData,
+} from "@/components/lib/func/commom";
+import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
+import {
+  ContentsDiv,
+  SearchDiv,
+  SearchFormLeft,
+  SearchFormRight,
+  SearchInput,
+  SelectBox,
+  Title,
+  UiTable,
+  type SelectDataType,
+} from "@common/business_components/ui";
+import type { DemandCompType } from "@common/business_components/ui/sdmInsertForm/form";
+import { Button } from "@common/components/ui";
+import moment from "moment";
+import { useCallback, useEffect, useState } from "react";
+
+export function CoSttnMap({
+  rtnFeature,
+}: {
+  rtnFeature: (feature: any) => void;
+}) {
+  const {
+    code,
+    coSttnMap,
+    coSttnMapInit,
+    coSttnMapSearch,
+    coSttnMapTxtSearch,
+  } = useWrStore((state) => state);
+  const [coSttnMapTable, setCoSttnMapTable] = useState<DemandCompType[]>();
+  const [isReset, setIsReset] = useState(false);
+  const { coSttMapHeadList, coSttnMapRes, coSttnMapResCount } = coSttnMap;
+  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>();
+  const [objSearch, setObjSearch] = useState<objSearchType>({
+    sgg: "",
+    city: "",
+  });
+
+  const [seartchTxt, setSearchTxt] = useState<string>();
+
+  const getSelCity = useCallback(
+    (val: string | number) => {
+      const cityValue = String(val);
+      const data = getCity(cityValue, code.sggCd);
+      setSelectSgg(data);
+      setObjSearch({ city: cityValue, sgg: "0" });
+    },
+    [code.sggCd]
+  );
+
+  const getSgg = useCallback((val: string | number) => {
+    setObjSearch((prev) => ({ ...prev, sgg: String(val) }));
+  }, []);
+
+  useEffect(() => {
+    // code.cityCd 데이터가 로드되었고, 아직 시/도 선택이 안된 초기 상태일 때 실행
+    if (code.cityCd && code.cityCd.length > 0 && !objSearch.city) {
+      const firstCityVal = code.cityCd[0]?.val;
+      if (firstCityVal) {
+        // 첫 번째 시/도 값으로 상태를 초기화합니다.
+        getSelCity(firstCityVal);
+      }
+    }
+  }, [code.cityCd, objSearch.city, getSelCity]);
+
+  useEffect(() => {
+    if (!coSttnMap.isInit) {
+      coSttnMapInit(1, costtnMapSize, "0");
+    }
+  }, [coSttnMap.isInit, coSttnMapInit]);
+
+  const coSttnMapCellClick = (index: number | undefined) => {
+    if (index !== undefined && coSttnMapTable !== undefined) {
+      rtnFeature(coSttnMapTable[index]);
+    }
+  };
+  useEffect(() => {
+    if (coSttnMapRes) {
+      if (coSttnMapRes?.length > 0 && code.cityCd.length > 0) {
+        const data = tableData(coSttnMapRes, { code });
+        const chData = data.map((item: any) => ({
+          ...item,
+          telno: formatPhoneNumber(item.telno || undefined),
+          regDt: moment(item.regDt).format("YYYY-MM-DD"),
+          dmdInfoId: `${item.dmdInfoId.slice(0, 3)}-${item.dmdInfoId.slice(3, 5)}-${item.dmdInfoId.slice(5, 10)}-${item.dmdInfoId.slice(10)}`,
+        }));
+        // .filter((item: any) => item !== undefined);
+        setCoSttnMapTable(chData);
+      }
+    }
+  }, [coSttnMapRes, code]);
+  return (
+    <>
+      <ContentsDiv>
+        <div className="grid grid-cols-4 gap-4 ">
+          <div className="col-span-4">
+            <Title title={"수요처 관리"} />
+            <SearchDiv>
+              <SearchFormLeft>
+                <div className="col-span-10 flex flex-row">
+                  <SelectBox
+                    className="col-span-3 w-1/6 h-full text-2xl"
+                    label="시도"
+                    selectClass={""}
+                    selectArray={code.cityCd || []}
+                    onSelectValue={(val) => {
+                      getSelCity(val);
+                    }}
+                    value={objSearch.city}
+                  />
+                  <SelectBox
+                    className="col-span-3 w-1/6 h-full text-2xl ml-4"
+                    label="시군구"
+                    selectClass={""}
+                    selectArray={selectSgg || []}
+                    onSelectValue={getSgg}
+                    value={objSearch.sgg}
+                  />
+                  <SearchInput
+                    className={"!text-3xl ml-4"}
+                    label="회사명"
+                    textValue={seartchTxt ?? ""}
+                    setText={(e) => {
+                      setSearchTxt(e);
+                    }}
+                  />
+                </div>
+              </SearchFormLeft>
+              <SearchFormRight className="w-3/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
+                <div className="flex flex-row space-x-2">
+                  <Button
+                    className="mt-2"
+                    size={"sm"}
+                    onClick={() => {
+                      const con =
+                        objSearch.sgg && objSearch.sgg !== "0"
+                          ? objSearch.sgg
+                          : objSearch.city;
+                      if (con) {
+                        if (seartchTxt && seartchTxt?.length > 0) {
+                          coSttnMapTxtSearch(
+                            1,
+                            costtnMapSize,
+                            String(con),
+                            seartchTxt ?? ""
+                          );
+                        } else {
+                          coSttnMapSearch(1, costtnMapSize, String(con));
+                        }
+                        setIsReset(true)
+                      }
+                    }}
+                  >
+                    조회
+                  </Button>
+                </div>
+              </SearchFormRight>
+            </SearchDiv>
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-4 ">
+          <div className="col-span-2">
+            <UiTable
+              headName={[]}
+              tableData={coSttnMapTable || []}
+              headlist={coSttMapHeadList}
+              pageSize={20}
+              total={coSttnMapResCount|| 0}
+              cellClick={(index: number | undefined) => {
+                coSttnMapCellClick(index);
+                // setUpdateData(coSttnRes[index as number]);
+              }}
+              onPageChange={(page) => {
+                const con =
+                  objSearch.sgg && objSearch.sgg !== "0"
+                    ? objSearch.sgg
+                    : objSearch.city;
+                coSttnMapSearch(page, costtnMapSize, String(con));
+                setIsReset(false);
+              }}
+              resetPageNo={isReset}
+            ></UiTable>
+          </div>
+        </div>
+      </ContentsDiv>
+    </>
+  );
+}

apps/wr/components/ui/map/LayerPopUp/HasuFacilty/HasuFacility.tsx

@@ -0,0 +1,109 @@
+import { useWrStore } from "@/app/store";
+import { btnClass } from "@/app/store/common/code";
+import { pbnMapTableSize } from "@/app/store/map/pbnstMap";
+import type { pubHasuType } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+import { tableData } from "@/components/lib/func/commom";
+import {
+  ContentsDiv,
+  SearchBaseForm,
+  SearchInput,
+  Title,
+  UiTable,
+  type ReturnType,
+} from "@common/business_components/ui";
+import { Label } from "@common/components/ui";
+import { useEffect, useRef, useState } from "react";
+
+export function HasuFacility({rtnFeature}:{rtnFeature:(feature:any)=>void } ) {
+  const { code, pbnMap, pbnMapInit } = useWrStore((state) => state);
+  const [hasuTable, setHasuTable] = useState<pubHasuType[]>();
+  const [isReset, setIsReset] = useState(false);
+  const [pbnRuseNm, setPbnRuseNm] = useState<string>("");
+  const ref = useRef<ReturnType>({} as ReturnType);
+  const { pbnMapHeadList, pbnMapRes, pbnMapCount } = pbnMap;
+
+  useEffect(() => {
+    if (!pbnMap.isInit) {
+      pbnMapInit(1, pbnMapTableSize, ref.current);
+    }
+  }, [pbnMap.isInit, pbnMapInit]);
+
+  useEffect(() => {
+    if (code.sggCd.length && pbnMapRes.length > 0) {
+      setHasuTable(tableData(pbnMapRes, { code }));
+    }
+  }, [code, pbnMapRes]);
+
+  const hasuCellClick = (index: number | undefined) => {
+    if (index !== undefined && pbnMapRes !== undefined) {
+        rtnFeature(pbnMapRes[index])
+    }
+  };
+  return (
+    <>
+      <ContentsDiv>
+        <div className="grid grid-cols-2 gap-4 ">
+          <div className="col-span-2">
+            <Title title="하수처리시설 현황" />
+            <SearchBaseForm
+              selectSidoData={code.cityCd}
+              selectSigunData={code.sggCd}
+              selectRegionData={code.rvbsnCd}
+              selectUnitWaterShedData={code.lgbsnCd}
+              selectMiddleRegionData={code.mdmbsnCd}
+              selectEnvPartData={code.lclgvrnmntCd}
+              buttonOrder={["query", "init", "excel"]}
+              rightClassName="ml-auto mr-6 flex items-center space-x-1"
+              leftClassName="flex gap-5 w-9/12 m-4"
+              leftSelectClassName="w-1/4"
+              rightChildren={<></>}
+              leftChildren={
+                <div className="col-span-3 flex items-center">
+                  <Label className="w-full mt-2 ml-4 text-xl text-gray-600">
+                    {"하수처리시설명"}
+                  </Label>
+                  <SearchInput
+                    className={"text-2xl w-full"}
+                    label=""
+                    textValue={pbnRuseNm || ""}
+                    setText={(e) => {
+                      setPbnRuseNm(e || "");
+                    }}
+                  />
+                </div>
+              }
+              queryClick={() => {
+                setIsReset(true);
+              }}
+              initClick={function (): void {
+                setPbnRuseNm("");
+              }}
+              btnClass={btnClass}
+              ref={ref}
+              isAdmin={false}
+              excelClick={function (returnType: ReturnType): void {
+                console.log("pbnstSttnSearch ", returnType);
+              }}
+            />
+          </div>
+          <div className="col-span-6">
+            {/* 높이 조정 */}
+            <UiTable
+              tableData={hasuTable || []}
+              headlist={pbnMapHeadList}
+              pageSize={pbnMapTableSize}
+              total={pbnMapCount || 0}
+              headName={""}
+              cellClick={hasuCellClick}
+              onPageChange={(page) => {
+                pbnMapInit(page, pbnMapTableSize, ref.current);
+                setIsReset(false);
+              }}
+              resetPageNo={isReset}
+            />
+          </div>
+        </div>
+      </ContentsDiv>
+    </>
+  );
+}

apps/wr/components/ui/map/LayerPopUp/HedfFacilty/HtdfFacilty.tsx

@@ -0,0 +1,77 @@
+import { useWrStore } from "@/app/store";
+import { rainMapSize } from "@/app/store/map/rainMap";
+import type { customHtdflBdst } from "@/app/store/ruseFcltMng/fcltReg/htdflReg";
+import { tableData } from "@/components/lib/func/commom";
+import { Title, UiTable } from "@common/business_components/ui";
+import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
+import { useEffect, useState } from "react";
+
+export function HtdflFacility({
+    rtnFeature,
+  }: {
+    rtnFeature: (feature: any) => void;
+  }) {
+  const { code, htdfMap, htdfMapInit } = useWrStore((state) => state);
+  const { htdfMapCount, htdfMapRes, htdfSttHeadList, htdfSttNodeList } =
+    htdfMap;
+  const [htdflTable, setHtdflTable] = useState<customHtdflBdst[]>();
+  const [isReset, setIsReset] = useState(false);
+
+  const htdflCellClick = (index: number | undefined) => {
+    if (index !== undefined && htdflTable !== undefined) {
+        rtnFeature(htdflTable[index]);
+
+    }
+  };
+
+  useEffect(() => {
+    if (!htdfMap.isInit) {
+      htdfMapInit(1, rainMapSize, "0");
+    }
+  }, [htdfMap.isInit, htdfMapInit]);
+
+  useEffect(() => {
+    const data = tableData(htdfMapRes, { 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, htdfMapRes]);
+
+  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={htdflTable || []}
+          headlist={htdfSttHeadList}
+          pageSize={rainMapSize}
+          total={htdfMapCount}
+          cellClick={(index: number | undefined) => {
+            htdflCellClick(index ?? undefined);
+          }}
+          onPageChange={(page) => {
+            htdfMapInit(page, rainMapSize, "0");
+            setIsReset(false);
+          }}
+          resetPageNo={isReset}
+        >
+          <HeadMakeColSpan upHeadList={htdfSttNodeList} />
+        </UiTable>
+      </div>
+    </>
+  );
+}

apps/wr/components/ui/map/LayerPopUp/LdrmntCoMap/LdrmntCoMap.tsx

@@ -0,0 +1,189 @@
+import { useWrStore } from "@/app/store";
+import { ldrmntMapSize } from "@/app/store/map/ldrmntCoMap";
+import type { customLdrmnt } from "@/app/store/matDmd/ldrmntCoSttn";
+import { getCity, tableData } from "@/components/lib/func/commom";
+import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
+import {
+  ContentsDiv,
+  SearchDiv,
+  SearchFormLeft,
+  SearchFormRight,
+  SearchInput,
+  SelectBox,
+  Title,
+  UiTable,
+  type SelectDataType,
+} from "@common/business_components/ui";
+import ListDiv from "@common/business_components/ui/list_div";
+import { Button } from "@common/components/ui";
+import { useEffect, useState } from "react";
+
+export function LdrmntCoMap({
+  rtnFeature,
+}: {
+  rtnFeature: (feature: any) => void;
+}) {
+  const { code, ldrmntMap, ldrmntMapInit, ldrmntMapSearch } = useWrStore(
+    (state) => state
+  );
+
+  const { ldrmntMapRes, ldrmntMapResCount, ldrmntMapHeadList } = ldrmntMap;
+  const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>();
+  const [objSearch, setObjSearch] = useState<objSearchType>({
+    sgg: "",
+    city: "",
+  });
+  const [bdstTable, setBdstTable] = useState<customLdrmnt[]>();
+  const [searchTxt, setSearchTxt] = useState<string>();
+  const [resetPage, isResetPage] = useState(false);
+
+  const computeCityNm = () => {
+    let cityTxt = "";
+    let sggTxt = "";
+
+    if (objSearch.city) {
+      cityTxt = code.cityCd.find((c) => c.val === objSearch.city)?.text || "";
+    }
+    if (objSearch.sgg) {
+      sggTxt = code.sggCd.find((s) => s.val === objSearch.sgg)?.text || "";
+    }
+
+    if (cityTxt === "" || cityTxt === "전체") cityTxt = "0";
+
+    return sggTxt && sggTxt !== "0" ? `${cityTxt} ${sggTxt}` : cityTxt;
+  };
+
+  const cellClick = (index: number | undefined) => {
+    if (index !== undefined) {
+      rtnFeature(ldrmntMapRes[index]);
+    }
+  };
+
+  const getSelCity = (val: string | number) => {
+    const cityValue = String(val);
+
+    if (cityValue === "0") {
+      setSelectSgg([]);
+      setObjSearch({ city: cityValue, sgg: "" });
+    } else {
+      const data = getCity(cityValue, code.sggCd);
+      setSelectSgg(data);
+      const firstSggVal =
+        data.find((item) => item.val === "0")?.val || (data[0]?.val ?? "");
+      setObjSearch({ city: cityValue, sgg: firstSggVal });
+    }
+  };
+
+  const getSgg = (val: string | number) => {
+    setObjSearch({ ...objSearch, sgg: String(val) });
+  };
+
+  useEffect(() => {
+    if (!ldrmntMap.isInit) {
+      ldrmntMapInit(1, ldrmntMapSize, "0");
+    }
+  }, [ldrmntMap.isInit, ldrmntMapInit]);
+
+  useEffect(() => {
+    const transData = Array.isArray(ldrmntMapRes)
+      ? ldrmntMapRes
+      : [ldrmntMapRes];
+    const data = tableData(transData, { code });
+    const tbData = Array.isArray(data)
+      ? data.map((item: customLdrmnt) => ({
+          ...item,
+          ctpvCd: item.fctryAddr?.split(" ")[0] || "",
+          sggCd: item.fctryAddr?.split(" ")[1] || "",
+        }))
+      : [];
+
+    setBdstTable(tbData);
+  }, [ldrmntMapRes, code]);
+
+  return (
+    <>
+      <ContentsDiv>
+        <div className="grid grid-cols-4 gap-4 ">
+          <div className="col-span-4">
+            <Title title={"잠재수요처 관리"} />
+            <SearchDiv>
+              <SearchFormLeft>
+                <div className="col-span-10 flex flex-row">
+                  <SelectBox
+                    className="col-span-2 w-1/6 h-full text-2xl"
+                    label="시도"
+                    selectClass={""}
+                    selectArray={code.cityCd}
+                    onSelectValue={getSelCity}
+                  />
+                  <SelectBox
+                    className="col-span-2 w-1/6 h-full text-2xl ml-4"
+                    label="시군구"
+                    selectClass={""}
+                    selectArray={selectSgg || []}
+                    value={objSearch.sgg} // value props 추가
+                    onSelectValue={getSgg}
+                  />
+                  <SearchInput
+                    className={"text-2xl ml-4"}
+                    label="회사명"
+                    textValue={searchTxt || ""}
+                    setText={(e) => {
+                      setSearchTxt(e);
+                    }}
+                  />
+                </div>
+              </SearchFormLeft>
+              <SearchFormRight className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
+                <div className="flex flex-row space-x-2 items-center">
+                  <Button
+                    size={"sm"}
+                    onClick={() => {
+                      ldrmntMapSearch(
+                        1,
+                        ldrmntMapSize,
+                        computeCityNm(),
+                        searchTxt || ""
+                      );
+                      isResetPage(true);
+                    }}
+                  >
+                    조회
+                  </Button>
+                </div>
+              </SearchFormRight>
+            </SearchDiv>
+          </div>
+        </div>
+        <div className="grid grid-cols-6 gap-4 ">
+          <div className="col-span-6">
+            <div className="overflow-x-auto">
+              <ListDiv className="min-w-max">
+                <UiTable
+                  headName={undefined}
+                  tableData={bdstTable || []}
+                  headlist={ldrmntMapHeadList}
+                  pageSize={20}
+                  total={ldrmntMapResCount || 0}
+                  cellClick={(index: number | undefined) => {
+                    cellClick(index ?? undefined);
+                  }}
+                  onPageChange={(page) => {
+                    ldrmntMapSearch(
+                      page,
+                      ldrmntMapSize,
+                      computeCityNm(),
+                      searchTxt || ""
+                    );
+                    isResetPage(false);
+                  }}
+                  resetPageNo={resetPage}
+                />
+              </ListDiv>
+            </div>
+          </div>
+        </div>
+      </ContentsDiv>
+    </>
+  );
+}

apps/wr/components/ui/map/LayerPopUp/RainFacility/RainFacility.tsx

@@ -0,0 +1,102 @@
+import { useWrStore } from "@/app/store";
+import { rainMapSize } from "@/app/store/map/rainMap";
+import type { customRainBdst } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
+import { tableData } from "@/components/lib/func/commom";
+import { ContentsDiv, Title, UiTable } from "@common/business_components/ui";
+import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
+import { useEffect, useState } from "react";
+
+export function RainFacility({
+  rtnFeature,
+}: {
+  rtnFeature: (feature: any) => void;
+}) {
+  const { code, rainMap, rainMapInit } = useWrStore((state) => state);
+  const { rainMapRes, rainMapCount, rainSttHeadList, rainSttNodeList } =
+    rainMap;
+  const [rainTable, setRainTable] = useState<customRainBdst[]>();
+  const [isReset, setIsReset] = useState(false);
+
+  useEffect(() => {
+    if (!rainMap.isInit) {
+      rainMapInit(1, rainMapSize, "0");
+    }
+  }, [rainMapInit, rainMap.isInit]);
+
+  const rainCellClick = (index: number | undefined, headId: string) => {
+    if (
+      index !== undefined &&
+      rainTable !== undefined &&
+      headId !== "chBuildingYn"
+    ) {
+      rtnFeature(rainTable[index]);
+    }
+  };
+
+  useEffect(() => {
+
+    const data = tableData(rainMapRes, { 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, rainMapRes]);
+
+  return (
+    <>
+      <ContentsDiv>
+        <div className="grid grid-cols-2 gap-4 ">
+          <div className="col-span-2">
+            <Title title="빗물이용시설 현황" />
+            <UiTable
+              headName={[]}
+              tableData={rainTable || []}
+              headlist={rainSttHeadList}
+              pageSize={20}
+              total={rainMapCount}
+              cellClick={(index: number | undefined, headId: string) => {
+                rainCellClick(index ?? undefined, headId);
+              }}
+              onPageChange={(page) => {
+                rainMapInit(page, rainMapSize, "0");
+                setIsReset(false);
+              }}
+              resetPageNo={isReset}
+            >
+              <HeadMakeColSpan upHeadList={rainSttNodeList} />
+            </UiTable>
+          </div>
+        </div>
+      </ContentsDiv>
+    </>
+  );
+}

apps/wr/components/ui/map/LayerPopUp/RswtFacilty/RswtFacilty.tsx

@@ -0,0 +1,99 @@
+import { useWrStore } from "@/app/store";
+import { rainMapSize } from "@/app/store/map/rainMap";
+import type { customRswtBdst } from "@/app/store/ruseFcltMng/fcltReg/rswtReg";
+import { tableData } from "@/components/lib/func/commom";
+import { Title, UiTable } from "@common/business_components/ui";
+import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
+import { useEffect, useState } from "react";
+
+export function RswtFacility({
+  rtnFeature,
+}: {
+  rtnFeature: (feature: any) => void;
+}) {
+  const { code, rswtMap, rswtMapInit } = useWrStore((state) => state);
+  const { rswtMapRes, rswtMapCount, rswtSttHeadList, rswtSttNodeList } =
+  rswtMap;
+  const [rswtrTable, setRswtrTable] = useState<customRswtBdst[]>();
+  const [isReset, setIsReset] = useState(false);
+
+  const rswtCellClick = (index: number | undefined, headId: string) => {
+    if (
+      headId !== "chBuildingYn" &&
+      index !== undefined &&
+      rswtrTable !== undefined
+    ) {
+      rtnFeature(rswtrTable[index]);
+    }
+  };
+
+  useEffect(() => {
+    if (!rswtMap.isInit) {
+      rswtMapInit(1, rainMapSize, "0");
+    }
+  }, [rswtMapInit, rswtMap.isInit]);
+
+  useEffect(() => {
+    const data = tableData(rswtMapRes, { 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, rswtMapRes]);
+  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={rswtSttnExcelDownload}>
+                          엑셀다운로드
+                        </Button>
+                      </div> */}
+        </div>
+        <UiTable
+          headName={[]}
+          tableData={rswtrTable || []}
+          headlist={rswtSttHeadList}
+          pageSize={20}
+          total={rswtMapCount}
+          cellClick={(index: number | undefined, headId: string) => {
+            rswtCellClick(index, headId);
+          }}
+          onPageChange={(page) => {
+            rswtMapInit(page, rainMapSize, "0");
+            setIsReset(false);
+          }}
+          resetPageNo={isReset}
+        >
+          <HeadMakeColSpan upHeadList={rswtSttNodeList} />
+        </UiTable>
+      </div>
+    </>
+  );
+}

apps/wr/components/ui/map/LayerPopUp/RuseFacilty/RuseFacility.tsx

@@ -0,0 +1,140 @@
+import { useWrStore } from "@/app/store";
+import { btnClass } from "@/app/store/common/code";
+import { ruseMapSize } from "@/app/store/map/ruseMap";
+import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
+import { yearOptions } from "@/components/lib/func/commom";
+import {
+  ContentsDiv,
+  SearchBaseForm,
+  SearchInput,
+  SelectBox,
+  Title,
+  UiTable,
+  type ReturnType,
+} from "@common/business_components/ui";
+import { Label } from "@common/components/ui";
+import { useEffect, useRef, useState } from "react";
+
+export function RuseFacility({
+    rtnFeature,
+  }: {
+    rtnFeature: (feature: any) => void;
+  }) {
+  const { code, ruseMap, ruseMapInit, getMapFlcts } = useWrStore(
+    (state) => state
+  );
+
+  const { ruseMapCount, fclts, ruseMapRes,ruseMapHeadList } = ruseMap;
+
+  const [ruseTable, setRuseTable] = useState<WaterReuseFacility[]>();
+  const [isReset, setIsReset] = useState(false);
+  const ref = useRef<ReturnType>({} as ReturnType);
+  const [searchYear, setSearchYear] = useState<string>(
+    String(new Date().getFullYear())
+  );
+  const [pbnRuseNm, setPbnRuseNm] = useState<string>("");
+
+  const ruseCellClick = (index: number | undefined) => {
+    if (
+      index !== undefined &&
+      ruseTable !== undefined
+    ) {
+      rtnFeature(ruseTable[index]);
+    }
+  };
+  useEffect(() => {
+    if (!ruseMap.isInit) {
+      getMapFlcts();
+    }
+  }, [ruseMap.isInit]);
+  useEffect(() => {
+    ruseMapInit(1,ruseMapSize, ref.current, searchYear, fclts);
+  }, [fclts]);
+
+  useEffect(() => {
+    if (ruseMapRes && ruseMapRes.length > 0) {
+        setRuseTable(ruseMapRes);
+    } else {
+        setRuseTable([]);
+    }
+  }, [ruseMapRes]);
+
+
+  return (
+    <>
+      <ContentsDiv>
+        <div className="grid grid-cols-2 gap-4 ">
+          <div className="col-span-2">
+            <Title title="하수재이용 시설 현황" />
+            <SearchBaseForm
+              selectSidoData={code.cityCd}
+              selectSigunData={code.sggCd}
+              selectRegionData={code.rvbsnCd}
+              selectUnitWaterShedData={code.lgbsnCd}
+              selectMiddleRegionData={code.mdmbsnCd}
+              selectEnvPartData={code.lclgvrnmntCd}
+              buttonOrder={["query", "init", "excel"]}
+              rightClassName="ml-auto mr-6 flex items-center space-x-1"
+              leftClassName="flex gap-5 w-9/12 m-4"
+              leftSelectClassName="w-1/4"
+              rightChildren={<></>}
+              leftChildren={
+                <div className="col-span-3 flex items-center">
+                <SelectBox
+                  className="w-48 h-full text-2xl"
+                  label="연도"
+                  selectClass={"w-full "}
+                  selectArray={yearOptions}
+                  value={searchYear}
+                  onSelectValue={(val: string | number) =>
+                    setSearchYear(String(val))
+                  }
+                />
+                <Label className="w-full mt-2 ml-4 text-xl text-gray-600">
+                  {"하수처리시설명"}
+                </Label>
+                <SearchInput
+                  className={"text-2xl w-full"}
+                  label=""
+                  textValue={pbnRuseNm || ""}
+                  setText={(e) => {
+                    setPbnRuseNm(e || "");
+                  }}
+                />
+              </div>
+              }
+              queryClick={() => {
+                setIsReset(true);
+              }}
+              initClick={function (): void {
+                setPbnRuseNm("");
+              }}
+              btnClass={btnClass}
+              ref={ref}
+              isAdmin={false}
+              excelClick={function (returnType: ReturnType): void {
+                console.log("pbnstSttnSearch ", returnType);
+              }}
+            />
+          </div>
+          <div className="col-span-6">
+            {/* 높이 조정 */}
+            <UiTable
+              tableData={ruseTable || []}
+              headlist={ruseMapHeadList}
+              pageSize={ruseMapSize}
+              total={ruseMapCount || 0}
+              headName={""}
+              cellClick={ruseCellClick}
+              onPageChange={(page) => {
+                ruseMapInit(page,ruseMapSize , ref.current, searchYear, fclts);
+                setIsReset(false);
+              }}
+              resetPageNo={isReset}
+            />
+          </div>
+        </div>
+      </ContentsDiv>
+    </>
+  );
+}

apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx

@@ -1,4 +1,4 @@
-import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
+import { headMakeprfmnc } from "@/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
 import { useWrStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common/type/header";
 import {

apps/wr/components/ui/table/chkgdTable/guideDetailTable/guideDetailTable.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
+import { headMakeprfmnc } from "@/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
 import type { TableUpperProps } from "@/app/store/common/type/header";
 import type {
 } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn";

apps/wr/components/ui/table/chkgdTable/rainChkgd/rainChkgdTable.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
+import { headMakeprfmnc } from "@/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
 import { useWrStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common/type/header";
 import { rainPageSize, type rainChkZodType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn";

apps/wr/components/ui/table/chkgdTable/rswtChkgd/rswtChkgdTable.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
+import { headMakeprfmnc } from "@/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
 import { useWrStore } from "@/app/store";
 import type { TableUpperProps } from "@/app/store/common/type/header";
 import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList";

apps/wr/components/ui/table/pbnstReg/ruseMngTable/ruseMngTable.tsx

@@ -1,4 +1,4 @@
-import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
+import { headMakeprfmnc } from "@/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
 import type { TableUpperProps } from "@/app/store/common/type/header";
 import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList";
 import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";

apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx

@@ -1,4 +1,4 @@
-import { headMakeprfmnc } from "@/app/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
+import { headMakeprfmnc } from "@/app/(with-layout)/ruseFcltMng/prfmncReg/chkgdnReg/TableHead";
 import type { TableUpperProps } from "@/app/store/common/type/header";
 import type { chHeadType } from "@/app/store/prfmncReg/chkgdnReg/rainChkgdn/headList";
 import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";