From 0507a8e66a27784e550d6f7318b7c75c23f21cb8 Mon Sep 17 00:00:00 2001
From: leedj312 <dlehd467@gmail.com>
Date: Tue, 10 Jun 2025 13:27:58 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=EB=AC=BC=EC=9E=AC=EC=9D=B4=EC=9A=A9?=
 =?UTF-8?q?=EC=82=AC=EB=A1=80=EA=B4=80=EB=A6=AC=20=ED=8D=BC=EB=B8=94?=
 =?UTF-8?q?=EB=A6=AC=EC=8B=B1=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/wr/app/matMng/matDmd/dmdReg/page.tsx     | 106 ------
 .../wr/app/matMng/matDmd/ruseCaseMng/page.tsx |  25 +-
 .../app/store/matDmd/ruseCaseMng/headList.tsx | 357 ++++++++++++++++--
 .../wr/app/store/matDmd/ruseCaseMng/index.tsx |  24 ++
 apps/wr/app/store/store.tsx                   |  13 +-
 .../ui/form/matDmd/coRegForm/component.tsx    |  91 -----
 .../ui/form/matDmd/dmdRegform/component.tsx   | 316 ----------------
 7 files changed, 377 insertions(+), 555 deletions(-)
 delete mode 100644 apps/wr/app/matMng/matDmd/dmdReg/page.tsx
 create mode 100644 apps/wr/app/store/matDmd/ruseCaseMng/index.tsx
 delete mode 100644 apps/wr/components/ui/form/matDmd/coRegForm/component.tsx
 delete mode 100644 apps/wr/components/ui/form/matDmd/dmdRegform/component.tsx

diff --git a/apps/wr/app/matMng/matDmd/dmdReg/page.tsx b/apps/wr/app/matMng/matDmd/dmdReg/page.tsx
deleted file mode 100644
index 75918d021..000000000
--- a/apps/wr/app/matMng/matDmd/dmdReg/page.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-"use client";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
-import { Form } from "@common/business_components/ui";
-import { Button } from "@common/components/ui";
-import { DmdRegForm } from "@/components/ui/form/matDmd/dmdRegform/component";
-import toast, { Toaster } from "react-hot-toast";
-import { useRouter } from "next/navigation";
-
-const formSchema = z.object({
-  dmdSel: z.string().min(1),
-  dmdTmng: z.coerce.date(),
-  dmdWq: z.string().min(1).optional(),
-  useUsgCd: z.string(),
-  wntUntprc: z.string().min(1),
-  grssClfg: z.string().min(1),
-  tn: z.string().min(1).optional(),
-  combResdch: z.string().min(1).optional(),
-  tp: z.string().min(1).optional(),
-  trbt: z.string().min(1).optional(),
-  ph: z.string().min(1).optional(),
-  bod: z.string().min(1).optional(),
-  clIonQnt: z.string().min(1).optional(),
-  smll: z.string().min(1).optional(),
-  cdtnv: z.string().min(1).optional(),
-  crmty: z.string().min(1).optional(),
-  rmrk: z.string().min(1).optional(),
-  sply1: z.string().min(1).optional(),
-  sply2: z.string().min(1).optional(),
-  sply3: z.string().min(1).optional(),
-  password: z.string().min(1),
-});
-
-export default function MyForm() {
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      dmdSel:'',
-      dmdTmng: new Date(),
-      dmdWq: "",
-      useUsgCd: "",
-      wntUntprc: "",
-      grssClfg: "",
-      tn: "",
-      combResdch: "",
-      tp: "",
-      trbt: "",
-      ph: "",
-      bod: "",
-      clIonQnt: "",
-      smll: "",
-      cdtnv: "",
-      crmty: "",
-      rmrk: "",
-      sply1: "",
-      sply2: "",
-      sply3: "",
-      password: "",
-    },
-  });
-
-  const router = useRouter();
-
-  async function onSubmit(values: z.infer<typeof formSchema>) {
-    try {
-
-      toast.success("✅ 수요신청이 완료되었습니다.");
-    await new Promise((resolve) => setTimeout(resolve, 3000));
-    router.push("../../")
-    } catch (error) {
-      toast.error("수요신청을 다시입력해주시길 바랍니다.");
-    }
-  }
-
-  return (
-    <>
-      <div className="grid h-40 grid-cols-3 place-content-center">
-        <h1 className="	col-start-2 col-span-1  text-4xl underline">
-          수요 신청정보입력
-        </h1>
-      </div>
-
-      <div className="grid grid-cols-5 gap-4  overflow-hidden">
-        <div className="col-span-1 " />
-        <div className="col-span-3  max-h-[78vh] overflow-y-scroll ">
-          <div>
-            <Form {...form}>
-              <form
-                onSubmit={form.handleSubmit(onSubmit)}
-                className="space-y-8 max-w-3xl mx-auto"
-              >
-                <DmdRegForm> {form}</DmdRegForm>
-
-                <Button type="submit"> 수요신청</Button>
-              </form>
-            </Form>
-          </div>
-        </div>
-        <div className="col-span-1 ">
-          <Toaster position="top-center" />
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/apps/wr/app/matMng/matDmd/ruseCaseMng/page.tsx b/apps/wr/app/matMng/matDmd/ruseCaseMng/page.tsx
index 6b0d73fd2..4950ab0da 100644
--- a/apps/wr/app/matMng/matDmd/ruseCaseMng/page.tsx
+++ b/apps/wr/app/matMng/matDmd/ruseCaseMng/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { useWrStore } from "@/app/store";
+import { ruseUtzType } from "@/app/store/matDmd/ruseCaseMng/headList";
 import { getCity } 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";
@@ -8,9 +9,11 @@ import { Button } from "@common/components/ui";
 import { useState } from "react";
 
 export default function RuseCaseMng() {
-    const { code, } = useWrStore((state) => state);
+    const { code,ruseCase} = useWrStore((state) => state);
     const [selectSgg, setSelectSgg] = useState<SelectDataType[] | []>()
     const [objSearch, setObjSearch] = useState<objSearchType>({ sgg: "", city: "" });
+    const [selectUtz, setSelectUtz] = useState<string[] | []>()
+    const [searchTxt, setSearchTxt] = useState<string>()
 
     const getSelCity = (val: string | number) => {
         const cityValue = String(val);
@@ -20,7 +23,6 @@ export default function RuseCaseMng() {
     };
 
     const getSgg = (val: string | number) => {
-        console.log(val);
         setObjSearch({ ...objSearch, sgg: String(val) })
     };
     return (
@@ -50,21 +52,18 @@ export default function RuseCaseMng() {
                                         className="col-span-2 w-1/3 h-full text-2xl"
                                         label="용도"
                                         selectClass={""}
-                                        selectArray={[]}
-                                        onSelectValue={() => { }}
-                                    />
-                                    <SelectBox
-                                        className="ml-4 col-span-2 w-1/3 h-full text-2xl"
-                                        label=" "
-                                        selectClass={""}
-                                        selectArray={[]}
-                                        onSelectValue={() => { }}
+                                        selectArray={ruseUtzType}
+                                        onSelectValue={(val) => {
+                                            if(val)
+                                            setSelectUtz([String(val)])}}
                                     />
+                                 
                                     <SearchInput
                                         className={"text-2xl"}
-                                        label=""
+                                        label="수요처명"
                                         textValue={""}
                                         setText={(e) => {
+                                            setSearchTxt(e)
                                         }}
                                     />
                                 </div>
@@ -111,7 +110,7 @@ export default function RuseCaseMng() {
                                 headName={"물재이용사례 현황"}
                                 tableData={[]}
                                 children={undefined}
-                                headlist={[]}
+                                headlist={ruseCase.ruseHeadList}
                                 pageSize={20}
                                 total={100000}
                                 cellClick={(index: number | undefined, headId: string) => {
diff --git a/apps/wr/app/store/matDmd/ruseCaseMng/headList.tsx b/apps/wr/app/store/matDmd/ruseCaseMng/headList.tsx
index 643e61fc5..f9ad1bcef 100644
--- a/apps/wr/app/store/matDmd/ruseCaseMng/headList.tsx
+++ b/apps/wr/app/store/matDmd/ruseCaseMng/headList.tsx
@@ -1,48 +1,355 @@
-import { z } from "zod";
-
-export const sttnHeadListType = z.array(
-  z.object({
-  id: z.string(),
-  title: z.string(),
-  visible: z.boolean(),
-  })
-);
+import type { SelectDataType } from "@common/business_components/ui";
+import type { TableUpperProps } from "../../common/type/header";
 
 //★☆★☆ 여기서부터 수정하기 ★☆★☆
-export const coRvwHeadListExport: z.infer<typeof sttnHeadListType> = [
+export const ruseCaseHeadListExport: TableUpperProps[] = [
   {
-    id: "ctpv",
-    title: "시도",
+    id: "a",
+    title: "사업명",
     visible: true,
+    row: 0,
+    rowSpan: 2,
   },
   {
-    id: "sgg",
-    title: "시군구",
+    id: "b",
+    title: "사업기간",
     visible: true,
+    row: 0,
+    rowSpan: 2,
   },
   {
-    id: "coNm",
-    title: "회사명",
+    id: "c",
+    title: "공급처",
     visible: true,
+    row: 0,
+    colSpan: 3,
   },
   {
-    id: "addr",
-    title: "공장주소",
+    id: "d",
+    title: "시설종류",
     visible: true,
+    row: 1,
   },
   {
-    id: "telNo",
-    title: "전화번호",
+    id: "e",
+    title: "공급처명",
     visible: true,
+    row: 1,
   },
   {
-    id: "regDt", //바꾸기
-    title: "신청일자",
+    id: "f",
+    title: "시설용량(m³/일)",
     visible: true,
+    row: 1,
   },
   {
-    id: "state", //바꾸기
-    title: "진행상태",
+    id: "g",
+    title: "수요처",
     visible: true,
+    row: 0,
+    colSpan: 2,
   },
-];
\ No newline at end of file
+  {
+    id: "h",
+    title: "수요처명",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "i",
+    title: "주소",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "q",
+    title: "재이용시설",
+    visible: true,
+    row: 0,
+    colSpan: 5,
+  },
+  {
+    id: "q2",
+    title: "시설용량(m³/일)",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "q3",
+    title: "관로(km)",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "q4",
+    title: "용도",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "q5",
+    title: "공급량(m³/일)",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "q6",
+    title: "처리공법",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "k",
+    title: "보증수질",
+    visible: true,
+    row: 0,
+    colSpan: 13,
+  },
+  {
+    id: "k1",
+    title: "용도별",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "k2",
+    title: "총대장균군수​(개/100ml)",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "k3",
+    title: "결합잔류염소(mg/L)",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "k4",
+    title: "탁도(NTU)",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "k5",
+    title: "생물학적​산소요구량(BOD)(mg/L)​",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "k6",
+    title: "냄새​",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "k7",
+    title: "색도​",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "k8",
+    title: "총질소(T-N)(mg/L)​",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "k9",
+    title: "총인(T-P)(mg/L)",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "k10",
+    title: "수소이온농도(PH)​",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "k11",
+    title: "수소이온농도(PH)​",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "k12",
+    title: "전기전도도​(㎲/cm",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "k13",
+    title: "비고​",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h",
+    title: "소요사업비(백만원)",
+    visible: true,
+    row: 0,
+    colSpan: 14,
+  },
+  {
+    id: "h1",
+    title: "총",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h2",
+    title: "토목재이용시설",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h3",
+    title: "토목관로",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h4",
+    title: "건축",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h5",
+    title: "기계",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h6",
+    title: "전기・계측",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h7",
+    title: "GIS・DB",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h8",
+    title: "CCTV",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h9",
+    title: "시공및준공",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h10",
+    title: "페기물",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h11",
+    title: "설계비",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h12",
+    title: "감리비",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h13",
+    title: "시설부대비",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "h14",
+    title: "기타",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "i",
+    title: "자원조달계획(백만원)",
+    visible: true,
+    row: 0,
+    colSpan: 4,
+  },
+  {
+    id: "i1",
+    title: "총",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "i2",
+    title: "국비",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "i3",
+    title: "지방비",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "i4",
+    title: "원인자부담",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "j",
+    title: "사업비정산(백만원)",
+    visible: true,
+    row: 0,
+    colSpan: 5,
+  },
+  {
+    id: "j1",
+    title: "총",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "j2",
+    title: "국비",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "j3",
+    title: "지방비",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "j4",
+    title: "원인자부담",
+    visible: true,
+    row: 1,
+  },
+  {
+    id: "j5",
+    title: "국고비율",
+    visible: true,
+    row: 1,
+  },
+];
+
+export const ruseUtzType: SelectDataType[] = [
+  { text: "조경용수", val: "조경용수" },
+  { text: "청소화장실용수", val: "청소화장실용수" },
+  { text: "세척살수용수", val: "세척살수용수" },
+  { text: "농업용수", val: "농업용수" },
+  { text: "공업용수", val: "공업용수" },
+  { text: "친수용수", val: "친수용수" },
+  { text: "기타", val: "기타" },
+];
diff --git a/apps/wr/app/store/matDmd/ruseCaseMng/index.tsx b/apps/wr/app/store/matDmd/ruseCaseMng/index.tsx
new file mode 100644
index 000000000..c54b0db1a
--- /dev/null
+++ b/apps/wr/app/store/matDmd/ruseCaseMng/index.tsx
@@ -0,0 +1,24 @@
+import type { TableUpperProps } from "../../common/type/header";
+import { ruseCaseHeadListExport } from "./headList";
+
+export type ruseCaseState = {
+    ruseCase: {
+        ruseHeadList:TableUpperProps[];
+    };
+  };
+type ruseCaseActions = {
+};
+export type ruseCaseType = ruseCaseState & ruseCaseActions;
+
+export const ruseCaseStateExport: ruseCaseState = {
+    ruseCase: {
+        ruseHeadList:ruseCaseHeadListExport,
+  },
+};
+export const  ruseCaseActionsExport: (set: any) => ruseCaseActions = (
+  set: any
+) => {
+  return {
+    
+  };
+};
diff --git a/apps/wr/app/store/store.tsx b/apps/wr/app/store/store.tsx
index dda146e98..64b05ab34 100644
--- a/apps/wr/app/store/store.tsx
+++ b/apps/wr/app/store/store.tsx
@@ -92,6 +92,7 @@ import { pbnstPrfmncActionsExport, pbnstPrfmncStateExport, type pbnstPrfmncState
 import { coRvwActionsExport, coRvwStateExport, type coRvwState, type coRvwType } from "./matDmd/coMatRvw";
 import { ruseHstryActionsExport, ruseHstryStateExport, type ruseHstryState, type ruseHstryType } from "./matDmd/ruseRvwHstry";
 import { pbnstPrfmncSttnActionsExport, pbnstPrfmncSttnExport, type pbnstPrfmncSttnState, type pbnstPrfmncSttnType } from "./prfmncSttn/pbnstPrfmncSttn";
+import { ruseCaseActionsExport, ruseCaseStateExport, type ruseCaseType, type ruseCaseState } from "./matDmd/ruseCaseMng";
 
 export type WrStore = comCodeType &
   pubFacType &
@@ -114,7 +115,8 @@ export type WrStore = comCodeType &
   pbnstPrfmncType&
   coRvwType&
   ruseHstryType&
-  pbnstPrfmncSttnType
+  pbnstPrfmncSttnType&
+  ruseCaseType
   ;
 
 export const StoreZus = (
@@ -138,7 +140,8 @@ export const StoreZus = (
     pbnstPrfmncState&
     coRvwState&
     ruseHstryState&
-    pbnstPrfmncSttnState
+    pbnstPrfmncSttnState&
+    ruseCaseState
     = {
     ...comCodeStateExport,
     ...pubFacStateExport,
@@ -160,7 +163,8 @@ export const StoreZus = (
     ...pbnstPrfmncStateExport,
     ...coRvwStateExport,
     ...ruseHstryStateExport,
-    ...pbnstPrfmncSttnExport
+    ...pbnstPrfmncSttnExport,
+    ...ruseCaseStateExport
   }
 ) => {
   return createStore<WrStore>()((set) => {
@@ -193,7 +197,8 @@ export const StoreZus = (
       ...pbnstPrfmncActionsExport(set),
       ...coRvwActionsExport(set),
       ...ruseHstryActionsExport(set),
-      ...pbnstPrfmncSttnActionsExport(set)
+      ...pbnstPrfmncSttnActionsExport(set),
+      ...ruseCaseActionsExport(set)
     };
   });
 };
diff --git a/apps/wr/components/ui/form/matDmd/coRegForm/component.tsx b/apps/wr/components/ui/form/matDmd/coRegForm/component.tsx
deleted file mode 100644
index 57fd9239e..000000000
--- a/apps/wr/components/ui/form/matDmd/coRegForm/component.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { useWrStore } from "@/app/store";
-import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
-import { DatePicker, FormField, FormItem, FormLabel, FormUi, SelectBox } from "@common/business_components";
-import {  Button, Input } from "@common/components";
-import { useState } from "react";
-
-export function CoRegForm(form:any){
-    
-  const { dmd } = useWrStore((state) => state);
-
-    return(
-
-      <>
-      <FormField
-      control={form.control}
-          name="ctpv"
-          render={({ field }) => (
-                <FormUi label="시도">
-                <SelectBox selectClass={selectClass} label={""} selectArray={dmd.selectSido} onSelectValue={field.onChange} className={""} />
-                </FormUi>
-
-          )}
-        />
-        
-        <FormField
-          control={form.control}
-          name="sgg"
-          render={({ field }) => (
-            <FormUi label="시군구">
-            <SelectBox selectClass={selectClass} label={""} selectArray={dmd.selectSgg} onSelectValue={field.onChange} className={""} />
-            </FormUi>
-         
-          )}
-        />
-        
-        <FormField
-          control={form.control}
-          name="coNm"
-          render={({ field }) => (
-            <FormUi label="회사명">
-                <Input placeholder="" type="text"  {...field} />
-            </FormUi>
-          )}
-        />
-        
-        <FormField
-          control={form.control}
-          name="bznmNo"
-          render={({ field }) => (
-            <FormUi label="사업자번호">
-                <Input 
-                placeholder="a0123456789"
-                type="text"
-                {...field} />
-            </FormUi>
-          )}
-        />
-        
-        <FormField
-          control={form.control}
-          name="addr"
-          render={({ field }) => (
-            <FormUi label="주소">
-                <Input 
-                placeholder="성북로24길 16"
-                
-                type="text"
-                {...field} />
-            </FormUi>
-          )}
-        />
-        
-          <FormField
-            control={form.control}
-            name="telNo"
-            render={({ field }) => (
-                <FormUi label="전화번호">
-                <Input 
-                placeholder="01033332222"
-                
-                type="text"
-                {...field} />
-            </FormUi>
-          
-            )}
-          />
-        
-      
-        </>
-    )
-}
\ No newline at end of file
diff --git a/apps/wr/components/ui/form/matDmd/dmdRegform/component.tsx b/apps/wr/components/ui/form/matDmd/dmdRegform/component.tsx
deleted file mode 100644
index efd3eb4ee..000000000
--- a/apps/wr/components/ui/form/matDmd/dmdRegform/component.tsx
+++ /dev/null
@@ -1,316 +0,0 @@
-import { useWrStore } from "@/app/store";
-import { selectClass } from "@/app/store/ruseFcltMng/fcltReg/rainReg";
-import { DatePicker, FormField, FormItem, FormLabel, FormUi, SelectBox } from "@common/business_components";
-import {  Button, Input } from "@common/components";
-import { useState } from "react";
-
-export function DmdRegForm(form: any) {
-  const { dmd } = useWrStore((state) => state);
-  
-    const [dmdDate, setDmdDate] = useState(new Date())
-
-
-  const onChangeDate = (val: Date|undefined) => {
-    if(val)setDmdDate(val)
-  }
-  
-  return (
-    <>
-      <FormField
-          control={form.control}
-          name="dmdSel"
-          render={({ field }) => (
-            <FormUi label="수요처명">
-            <Input 
-            placeholder="수요처명 검색"
-            
-             type="text"
-            {...field} />
-        </FormUi>
-          )}
-        />
-        
-      <FormField
-      control={form.control}
-      name="dmdTmng"
-      render={({ field }) => (
-        <FormItem className="flex flex-col">
-          <FormLabel>요구시기</FormLabel>
-         <DatePicker mode={"single"} field={{ value: dmdDate, onChange: onChangeDate }} selectClass={undefined} />
-        </FormItem>
-      )}
-    />
-        
-        <FormField
-          control={form.control}
-          name="dmdWq"
-          render={({ field }) => (
-            <FormUi label="요구수질">
-            <Input 
-            placeholder="55.22"
-            
-            type="text"
-            {...field} />
-        </FormUi>
-           
-          )}
-        />
-        
-        <FormField
-          control={form.control}
-          name="useUsgCd"
-          render={({ field }) => (
-            <FormUi label="사용용도">
-            <SelectBox selectClass={selectClass} label={""} selectArray={dmd.selectUsg} onSelectValue={field.onChange} className={""} />
-            </FormUi>
-           
-          )}
-        />
-        
-        <FormField
-          control={form.control}
-          name="wntUntprc"
-          render={({ field }) => (
-            <FormUi label="희망단가">
-            <Input 
-            placeholder="1000000000000000"
-            
-            type="text"
-            {...field} />
-            </FormUi>
-           
-          )}
-        />
-        
-       <div className="grid grid-cols-4">
-        <h1 className="	col-span-2  pl-5 text-2xl underline">
-            요구수질
-          </h1>
-        </div>
-      <div className="grid grid-cols-12 gap-4">
-     
-        <div className="col-span-6">
-          <FormField
-            control={form.control}
-            name="grssClfg"
-            render={({ field }) => (
-              <FormUi label="총대장균군">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-
-        <div className="col-span-6">
-          <FormField
-            control={form.control}
-            name="tn"
-            render={({ field }) => (
-              <FormUi label="총질소">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-12 gap-4">
-        <div className="col-span-6">
-          <FormField
-            control={form.control}
-            name="combResdch"
-            render={({ field }) => (
-              <FormUi label="결합잔류염소">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-
-        <div className="col-span-6">
-          <FormField
-            control={form.control}
-            name="tp"
-            render={({ field }) => (
-              <FormUi label="총인">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-12 gap-4">
-        <div className="col-span-6">
-          <FormField
-            control={form.control}
-            name="trbt"
-            render={({ field }) => (
-              <FormUi label="탁도">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-
-        <div className="col-span-6">
-          <FormField
-            control={form.control}
-            name="ph"
-            render={({ field }) => (
-              <FormUi label="수소이온농도">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-12 gap-4">
-        <div className="col-span-6">
-          <FormField
-            control={form.control}
-            name="bod"
-            render={({ field }) => (
-              <FormUi label="생물학적 산소요구량">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-
-        <div className="col-span-6">
-          <FormField
-            control={form.control}
-            name="clIonQnt"
-            render={({ field }) => (
-              <FormUi label="염화물">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-12 gap-4">
-        <div className="col-span-6">
-          <FormField
-            control={form.control}
-            name="smll"
-            render={({ field }) => (
-              <FormUi label="냄새">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-
-        <div className="col-span-6">
-          <FormField
-            control={form.control}
-            name="cdtnv"
-            render={({ field }) => (
-              <FormUi label="전기전도도">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-12 gap-4">
-        <div className="col-span-6">
-          <FormField
-            control={form.control}
-            name="crmty"
-            render={({ field }) => (
-              <FormUi label="색도">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-
-        <div className="col-span-6">
-          <FormField
-            control={form.control}
-            name="rmrk"
-            render={({ field }) => (
-              <FormUi label="비고">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-      </div>
-      <div className="grid grid-cols-4">
-        <h1 className="	 col-span-1  pl-2 text-2xl underline">
-            공급후보지 선택
-        </h1>
-        <div className="	col-start-3 col-span-1  ">
-        <Button >
-            후보지 조회 
-        </Button>
-          </div>
-          <div className="	col-start-4 col-span-1    ">
-         <Button  >
-           유사사례조회
-        </Button>
-          </div>
-                
-        </div>
-      <div className="grid grid-cols-12 gap-4">
-      <div className="col-span-4">
-          <FormField
-            control={form.control}
-            name="sply1"
-            render={({ field }) => (
-              <FormUi label="후보지_1">
-                <Input placeholder="후보지1" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-        <div className="col-span-4">
-          <FormField
-            control={form.control}
-            name="sply2"
-            render={({ field }) => (
-              <FormUi label="후보지_2">
-                <Input placeholder="후보지2" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-        <div className="col-span-4">
-          <FormField
-            control={form.control}
-            name="sply3"
-            render={({ field }) => (
-              <FormUi label="후보지_3">
-                <Input placeholder="후보지3" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-        </div>
-        <div className="grid grid-cols-4">
-        <h1 className="	 col-span-2  pl-2 text-2xl underline">
-            수요신청 비밀번호
-        </h1>
-    
-        <div className="col-start-3 col-span-2">
-          <FormField
-            control={form.control}
-            name="password"
-            render={({ field }) => (
-              <FormUi label="">
-                <Input placeholder="10" type="text" {...field} />
-              </FormUi>
-            )}
-          />
-        </div>
-     </div>
-    </>
-  );
-}

From 515441a9f469b62843d8c30265d58320736e4a92 Mon Sep 17 00:00:00 2001
From: leedj312 <dlehd467@gmail.com>
Date: Tue, 10 Jun 2025 15:57:23 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=ED=86=B5=EA=B3=84=20=ED=8D=BC=EB=B8=94?=
 =?UTF-8?q?=EB=A6=AC=EC=8B=B1=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/wr/app/page.tsx                          |  21 ++++
 apps/wr/app/stats/matStat/page.tsx            |  74 +++++++++++++
 apps/wr/app/stats/rainStat/page.tsx           |  81 ++++++++++++++
 apps/wr/app/stats/rswtStat/page.tsx           |  75 +++++++++++++
 .../app/store/matDmd/ruseCaseMng/headList.tsx |   2 +-
 apps/wr/app/store/stats/matStat/headList.tsx  |  68 ++++++++++++
 apps/wr/app/store/stats/matStat/index.tsx     |  28 +++++
 apps/wr/app/store/stats/rainStat/headList.tsx |  70 ++++++++++++
 apps/wr/app/store/stats/rainStat/index.tsx    |  28 +++++
 apps/wr/app/store/stats/rswtStat/headList.tsx | 101 ++++++++++++++++++
 apps/wr/app/store/stats/rswtStat/index.tsx    |  28 +++++
 apps/wr/app/store/store.tsx                   |  23 +++-
 12 files changed, 594 insertions(+), 5 deletions(-)
 create mode 100644 apps/wr/app/stats/matStat/page.tsx
 create mode 100644 apps/wr/app/stats/rainStat/page.tsx
 create mode 100644 apps/wr/app/stats/rswtStat/page.tsx
 create mode 100644 apps/wr/app/store/stats/matStat/headList.tsx
 create mode 100644 apps/wr/app/store/stats/matStat/index.tsx
 create mode 100644 apps/wr/app/store/stats/rainStat/headList.tsx
 create mode 100644 apps/wr/app/store/stats/rainStat/index.tsx
 create mode 100644 apps/wr/app/store/stats/rswtStat/headList.tsx
 create mode 100644 apps/wr/app/store/stats/rswtStat/index.tsx

diff --git a/apps/wr/app/page.tsx b/apps/wr/app/page.tsx
index d40e79eaf..eac339156 100644
--- a/apps/wr/app/page.tsx
+++ b/apps/wr/app/page.tsx
@@ -148,6 +148,27 @@ export default function Home() {
             </div>
           </div>
         </div>
+          {/* 통계*/}
+        <div>
+          <h2 className="text-xl font-semibold mb-4">통계 매칭</h2>
+          <div className="grid grid-cols-12 gap-4">
+            <div className="col-span-2">
+              <Button className="w-full">
+                <Link href="stats/rainStat">빗물재이용시설통계</Link>
+              </Button>
+            </div>
+            <div className="col-span-2">
+              <Button className="w-full">
+                <Link href="stats/rswtStat">중수도시설통계</Link>
+              </Button>
+            </div>
+            <div className="col-span-2">
+              <Button className="w-full">
+                <Link href="stats/matStat">물재이용사례 관리</Link>
+              </Button>
+            </div>
+          </div>
+        </div>
       </div>
     </>
   );
diff --git a/apps/wr/app/stats/matStat/page.tsx b/apps/wr/app/stats/matStat/page.tsx
new file mode 100644
index 000000000..a147ff597
--- /dev/null
+++ b/apps/wr/app/stats/matStat/page.tsx
@@ -0,0 +1,74 @@
+'use client'
+import { useWrStore } from "@/app/store";
+import { yearOptions } from "@/components/lib/func/commom";
+import { ContentsDiv, Title, SearchDiv, SearchFormLeft, SelectBox, UiTable } from "@common/business_components/ui";
+import ListDiv from "@common/business_components/ui/list_div";
+import  { Button } from "@common/components/ui";
+import { useState } from "react";
+
+export default function MatStat(){
+const { code, matStat } = useWrStore((state) => {
+    return state;
+  });
+  const [pageNation, setPageNation] = useState(1);
+  const [searchYear, setSearchYear] = useState<string>(
+    String(new Date().getFullYear())
+  );
+
+    return(
+        <>
+        <ContentsDiv>
+        <div className="grid grid-cols-4 gap-4">
+          <div className="col-span-4">
+            <Title title={"재이용 통계"} />
+            <SearchDiv>
+              <SearchFormLeft>
+                <SelectBox
+                  className="w-full h-full text-2xl"
+                  label="통계년도"
+                  selectClass={""}
+                  selectArray={yearOptions}
+                  value={searchYear}
+                  onSelectValue={(val: string | number) =>
+                    setSearchYear(String(val))
+                  }
+                />
+                <div className="flex flex-row space-x-2 items-center">
+                  <Button className="" size={"sm"} onClick={(e) => {}}>
+                    조회
+                  </Button>
+                  <Button className="" size={"sm"} onClick={(e) => {}}>
+                    다운로드
+                  </Button>
+                  <Button className="" size={"sm"} onClick={(e) => {}}>
+                    전체통계다운로드
+                  </Button>
+                </div>
+              </SearchFormLeft>
+              {/* <SearchFormRight>
+                
+              </SearchFormRight> */}
+            </SearchDiv>
+          </div>
+        </div>
+        <div className="grid grid-cols-6 gap-4">
+          <div className="col-span-6 h-full min-h-0">
+            <ListDiv className="min-h-0">
+              {/* <ScrollArea className="h-[60vh]"> */}
+              <UiTable
+                tableData={[]}
+                headlist={matStat.matStatHeadList}
+                pageSize={20}
+                total={10000}
+                headName={"건축물 목록"}
+                cellClick={(val, headId) => {}}
+                onPageChange={setPageNation}
+              ></UiTable>
+              {/* </ScrollArea> */}
+            </ListDiv>
+          </div>
+        </div>
+      </ContentsDiv>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/apps/wr/app/stats/rainStat/page.tsx b/apps/wr/app/stats/rainStat/page.tsx
new file mode 100644
index 000000000..f4d42e033
--- /dev/null
+++ b/apps/wr/app/stats/rainStat/page.tsx
@@ -0,0 +1,81 @@
+"use client";
+import { useWrStore } from "@/app/store";
+import { yearOptions } from "@/components/lib/func/commom";
+import {
+  ContentsDiv,
+  SearchDiv,
+  SearchFormLeft,
+  SelectBox,
+  Title,
+  UiTable,
+} from "@common/business_components/ui";
+import ListDiv from "@common/business_components/ui/list_div";
+import { Button } from "@common/components/ui";
+import { useState } from "react";
+
+export default function rainStat() {
+  const { code, rainStat } = useWrStore((state) => {
+    return state;
+  });
+  const [pageNation, setPageNation] = useState(1);
+  const [searchYear, setSearchYear] = useState<string>(
+    String(new Date().getFullYear())
+  );
+
+  return (
+    <>
+      <ContentsDiv>
+        <div className="grid grid-cols-4 gap-4">
+          <div className="col-span-4">
+            <Title title={"재이용 통계"} />
+            <SearchDiv>
+              <SearchFormLeft>
+                <SelectBox
+                  className="w-full h-full text-2xl"
+                  label="통계년도"
+                  selectClass={""}
+                  selectArray={yearOptions}
+                  value={searchYear}
+                  onSelectValue={(val: string | number) =>
+                    setSearchYear(String(val))
+                  }
+                />
+                <div className="flex flex-row space-x-2 items-center">
+                  <Button className="" size={"sm"} onClick={(e) => {}}>
+                    조회
+                  </Button>
+                  <Button className="" size={"sm"} onClick={(e) => {}}>
+                    다운로드
+                  </Button>
+                  <Button className="" size={"sm"} onClick={(e) => {}}>
+                    전체통계다운로드
+                  </Button>
+                </div>
+              </SearchFormLeft>
+              {/* <SearchFormRight>
+                
+              </SearchFormRight> */}
+            </SearchDiv>
+          </div>
+        </div>
+        <div className="grid grid-cols-6 gap-4">
+          <div className="col-span-6 h-full min-h-0">
+            <ListDiv className="min-h-0">
+              {/* <ScrollArea className="h-[60vh]"> */}
+              <UiTable
+                tableData={[]}
+                headlist={rainStat.rainStatHeadList}
+                pageSize={20}
+                total={10000}
+                headName={"건축물 목록"}
+                cellClick={(val, headId) => {}}
+                onPageChange={setPageNation}
+              ></UiTable>
+              {/* </ScrollArea> */}
+            </ListDiv>
+          </div>
+        </div>
+      </ContentsDiv>
+    </>
+  );
+}
diff --git a/apps/wr/app/stats/rswtStat/page.tsx b/apps/wr/app/stats/rswtStat/page.tsx
new file mode 100644
index 000000000..7514f98b1
--- /dev/null
+++ b/apps/wr/app/stats/rswtStat/page.tsx
@@ -0,0 +1,75 @@
+'use client'
+import { useWrStore } from "@/app/store";
+import { yearOptions } from "@/components/lib/func/commom";
+import { ContentsDiv, SearchDiv, SearchFormLeft, SelectBox, Title, UiTable } from "@common/business_components/ui";
+import ListDiv from "@common/business_components/ui/list_div";
+import { Button } from "@common/components/ui";
+import { useState } from "react";
+
+export default function RswtStat() {
+  const { code, rswtStat } = useWrStore((state) => {
+    return state;
+  });
+  const [pageNation, setPageNation] = useState(1);
+  const [searchYear, setSearchYear] = useState<string>(
+    String(new Date().getFullYear())
+  );
+
+    return(
+        <>
+           <ContentsDiv>
+        <div className="grid grid-cols-4 gap-4">
+          <div className="col-span-4">
+            <Title title={"재이용 통계"} />
+            <SearchDiv>
+              <SearchFormLeft>
+                <SelectBox
+                  className="w-full h-full text-2xl"
+                  label="통계년도"
+                  selectClass={""}
+                  selectArray={yearOptions}
+                  value={searchYear}
+                  onSelectValue={(val: string | number) =>
+                    setSearchYear(String(val))
+                  }
+                />
+                <div className="flex flex-row space-x-2 items-center">
+                  <Button className="" size={"sm"} onClick={(e) => {}}>
+                    조회
+                  </Button>
+                  <Button className="" size={"sm"} onClick={(e) => {}}>
+                    다운로드
+                  </Button>
+                  <Button className="" size={"sm"} onClick={(e) => {}}>
+                    전체통계다운로드
+                  </Button>
+                </div>
+              </SearchFormLeft>
+              {/* <SearchFormRight>
+                
+              </SearchFormRight> */}
+            </SearchDiv>
+          </div>
+        </div>
+        <div className="grid grid-cols-6 gap-4">
+          <div className="col-span-6 h-full min-h-0">
+            <ListDiv className="min-h-0">
+              {/* <ScrollArea className="h-[60vh]"> */}
+              <UiTable
+                tableData={[]}
+                headlist={rswtStat.rswtStatHeadList}
+                pageSize={20}
+                total={10000}
+                headName={"건축물 목록"}
+                cellClick={(val, headId) => {}}
+                onPageChange={setPageNation}
+              ></UiTable>
+              {/* </ScrollArea> */}
+            </ListDiv>
+          </div>
+        </div>
+      </ContentsDiv>
+        </>
+    )
+
+}
\ No newline at end of file
diff --git a/apps/wr/app/store/matDmd/ruseCaseMng/headList.tsx b/apps/wr/app/store/matDmd/ruseCaseMng/headList.tsx
index f9ad1bcef..125866601 100644
--- a/apps/wr/app/store/matDmd/ruseCaseMng/headList.tsx
+++ b/apps/wr/app/store/matDmd/ruseCaseMng/headList.tsx
@@ -210,7 +210,7 @@ export const ruseCaseHeadListExport: TableUpperProps[] = [
   },
   {
     id: "h4",
-    title: "건축",
+    title: "건축",
     visible: true,
     row: 1,
   },
diff --git a/apps/wr/app/store/stats/matStat/headList.tsx b/apps/wr/app/store/stats/matStat/headList.tsx
new file mode 100644
index 000000000..881662774
--- /dev/null
+++ b/apps/wr/app/store/stats/matStat/headList.tsx
@@ -0,0 +1,68 @@
+import type { TableUpperProps } from "../../common/type/header";
+
+export const matStatHeadListExport :TableUpperProps[]=[
+    {
+        id: "시도",
+        title: "시도",
+        row:0,
+        rowSpan:2
+      },
+      {
+        id: "개소",
+        title: "개소",
+        row:0,
+        rowSpan:2
+      },
+      {
+        id: "요구수량",
+        title: "요구수량",
+        row:0,
+        rowSpan:2
+      },
+    
+      
+      {
+        id: "용도",
+        title: "용도",
+        row:0,
+        colSpan:6
+      },
+      {
+        id: "조경용수",
+        title: "조경용수",
+        row:1,
+      },
+      {
+        id: "청소화장실용수",
+        title: "청소화장실용수",
+        row:1,
+      },
+      {
+        id: "농업용수",
+        title: "농업용수",
+        row:1,
+      },
+      {
+        id: "공업용수",
+        title: "공업용수",
+        row:1,
+      },
+      {
+        id: "친수용수",
+        title: "친수용수",
+        row:1,
+      },
+      {
+        id: "기타",
+        title: "기타",
+        row:1,
+      },
+      {
+        id: "사업비",
+        title: "사업비(천원)",
+        row:0,
+        rowSpan:2
+      },
+
+
+]
\ No newline at end of file
diff --git a/apps/wr/app/store/stats/matStat/index.tsx b/apps/wr/app/store/stats/matStat/index.tsx
new file mode 100644
index 000000000..3f2e5813f
--- /dev/null
+++ b/apps/wr/app/store/stats/matStat/index.tsx
@@ -0,0 +1,28 @@
+import type { TableUpperProps } from "../../common/type/header";
+import { matStatHeadListExport } from "./headList";
+
+type matStatActions = {
+}
+
+
+export type matStatState = {
+    matStat: {
+        matStatHeadList:TableUpperProps[]
+    }
+}
+
+export type matStatType = matStatState & matStatActions;
+
+export const matStatExport: matStatState = {
+    matStat: {
+        matStatHeadList:matStatHeadListExport
+    }
+}
+
+export const matStatActionsExport: (set: any) => matStatActions = (
+    set: any
+) => {
+    return {
+       
+    }
+}
\ No newline at end of file
diff --git a/apps/wr/app/store/stats/rainStat/headList.tsx b/apps/wr/app/store/stats/rainStat/headList.tsx
new file mode 100644
index 000000000..cc5386589
--- /dev/null
+++ b/apps/wr/app/store/stats/rainStat/headList.tsx
@@ -0,0 +1,70 @@
+import type { TableUpperProps } from "../../common/type/header";
+
+export const rainStatHeadListExport: TableUpperProps[] = [
+  {
+    id: "시도",
+    title: "시도",
+    row:0,
+    rowSpan:2
+  },
+  {
+    id: "개소",
+    title: "개소",
+    row:0,
+    rowSpan:2
+  },
+  {
+    id: "설치비",
+    title: "설치비(백만원)",
+    row:0,
+    rowSpan:2
+  },
+  {
+    id: "저류조용량",
+    title: "저류조용량(m³/년)",
+    row:0,
+    rowSpan:2
+  },
+  {
+    id: "이용용도",
+    title: "이용용도",
+    row:0,
+    colSpan:6
+  },
+  {
+    id: "조경용수",
+    title: "조경용수",
+    row:1,
+  },
+  {
+    id: "청소화장실용수",
+    title: "청소화장실용수",
+    row:1,
+  },
+  {
+    id: "농업용수",
+    title: "농업용수",
+    row:1,
+  },
+  {
+    id: "공업용수",
+    title: "공업용수",
+    row:1,
+  },
+  {
+    id: "친수용수",
+    title: "친수용수",
+    row:1,
+  },
+  {
+    id: "기타",
+    title: "기타",
+    row:1,
+  },
+  {
+    id: "연간운영비",
+    title: "연간운영비(백만원/년)",
+    row:0,
+    rowSpan:2
+  },
+];
diff --git a/apps/wr/app/store/stats/rainStat/index.tsx b/apps/wr/app/store/stats/rainStat/index.tsx
new file mode 100644
index 000000000..a50d54d58
--- /dev/null
+++ b/apps/wr/app/store/stats/rainStat/index.tsx
@@ -0,0 +1,28 @@
+import type { TableUpperProps } from "../../common/type/header";
+import { rainStatHeadListExport } from "./headList";
+
+type rainStatActions = {
+}
+
+
+export type rainStatState = {
+    rainStat: {
+        rainStatHeadList:TableUpperProps[]
+    }
+}
+
+export type rainStatType = rainStatState & rainStatActions;
+
+export const rainStatExport: rainStatState = {
+    rainStat: {
+        rainStatHeadList:rainStatHeadListExport
+    }
+}
+
+export const rainStatActionsExport: (set: any) => rainStatActions = (
+    set: any
+) => {
+    return {
+       
+    }
+}
\ No newline at end of file
diff --git a/apps/wr/app/store/stats/rswtStat/headList.tsx b/apps/wr/app/store/stats/rswtStat/headList.tsx
new file mode 100644
index 000000000..2c8aebec9
--- /dev/null
+++ b/apps/wr/app/store/stats/rswtStat/headList.tsx
@@ -0,0 +1,101 @@
+import type { TableUpperProps } from "../../common/type/header";
+
+export const rswtStatHeadListExport :TableUpperProps[]=[
+    {
+        id: "시도",
+        title: "시도",
+        row:0,
+        rowSpan:2
+      },
+      {
+        id: "개소",
+        title: "개소",
+        row:0,
+        rowSpan:2
+      },
+      {
+        id: "시설현황",
+        title: "시설현황",
+        row:0,
+        colSpan:2
+      },
+      {
+        id: "건축연면적(m³)",
+        title: "건축연면적(m³)",
+        row:1,
+      },
+      {
+        id: "처리용량",
+        title: "처리용량(m³)",
+        row:1,
+      },
+      {
+        id: "물사용량",
+        title: "물사용량(m³/년)",
+        row:0,
+        rowSpan:2
+      },
+      {
+        id: "청소화장실용수",
+        title: "중수도+대체수이용량(m³/년)",
+        row:0,
+        rowSpan:2
+      },
+      {
+        id: "중수도이용량",
+        title: "중수도이용량(m³/년)",
+        row:0,
+        rowSpan:2
+      },
+      {
+        id: "대체수이용량",
+        title: "대체수이용량(m³/년)",
+        row:0,
+        rowSpan:2
+      },
+      
+      {
+        id: "용도",
+        title: "용도",
+        row:0,
+        colSpan:6
+      },
+      {
+        id: "조경용수",
+        title: "조경용수",
+        row:1,
+      },
+      {
+        id: "청소화장실용수",
+        title: "청소화장실용수",
+        row:1,
+      },
+      {
+        id: "농업용수",
+        title: "농업용수",
+        row:1,
+      },
+      {
+        id: "공업용수",
+        title: "공업용수",
+        row:1,
+      },
+      {
+        id: "친수용수",
+        title: "친수용수",
+        row:1,
+      },
+      {
+        id: "기타",
+        title: "기타",
+        row:1,
+      },
+      {
+        id: "연간운영비",
+        title: "연간운영비(백만원/년)",
+        row:0,
+        rowSpan:2
+      },
+
+
+]
\ No newline at end of file
diff --git a/apps/wr/app/store/stats/rswtStat/index.tsx b/apps/wr/app/store/stats/rswtStat/index.tsx
new file mode 100644
index 000000000..652917bc3
--- /dev/null
+++ b/apps/wr/app/store/stats/rswtStat/index.tsx
@@ -0,0 +1,28 @@
+import type { TableUpperProps } from "../../common/type/header";
+import { rswtStatHeadListExport } from "./headList";
+
+type rswtStatActions = {
+}
+
+
+export type rswtStatState = {
+    rswtStat: {
+        rswtStatHeadList:TableUpperProps[]
+    }
+}
+
+export type rswtStatType = rswtStatState & rswtStatActions;
+
+export const rswtStatExport: rswtStatState = {
+    rswtStat: {
+        rswtStatHeadList:rswtStatHeadListExport
+    }
+}
+
+export const rswtStatActionsExport: (set: any) => rswtStatActions = (
+    set: any
+) => {
+    return {
+       
+    }
+}
\ No newline at end of file
diff --git a/apps/wr/app/store/store.tsx b/apps/wr/app/store/store.tsx
index 64b05ab34..36b905915 100644
--- a/apps/wr/app/store/store.tsx
+++ b/apps/wr/app/store/store.tsx
@@ -93,6 +93,9 @@ import { coRvwActionsExport, coRvwStateExport, type coRvwState, type coRvwType }
 import { ruseHstryActionsExport, ruseHstryStateExport, type ruseHstryState, type ruseHstryType } from "./matDmd/ruseRvwHstry";
 import { pbnstPrfmncSttnActionsExport, pbnstPrfmncSttnExport, type pbnstPrfmncSttnState, type pbnstPrfmncSttnType } from "./prfmncSttn/pbnstPrfmncSttn";
 import { ruseCaseActionsExport, ruseCaseStateExport, type ruseCaseType, type ruseCaseState } from "./matDmd/ruseCaseMng";
+import { rainStatActionsExport, rainStatExport, type rainStatState, type rainStatType } from "./stats/rainStat";
+import { type rswtStatType, type rswtStatState, rswtStatExport, rswtStatActionsExport } from "./stats/rswtStat";
+import { matStatActionsExport, matStatExport, type matStatState, type matStatType } from "./stats/matStat";
 
 export type WrStore = comCodeType &
   pubFacType &
@@ -116,7 +119,10 @@ export type WrStore = comCodeType &
   coRvwType&
   ruseHstryType&
   pbnstPrfmncSttnType&
-  ruseCaseType
+  ruseCaseType&
+  rainStatType&
+  rswtStatType&
+  matStatType
   ;
 
 export const StoreZus = (
@@ -141,7 +147,10 @@ export const StoreZus = (
     coRvwState&
     ruseHstryState&
     pbnstPrfmncSttnState&
-    ruseCaseState
+    ruseCaseState&
+    rainStatState&
+    rswtStatState&
+    matStatState
     = {
     ...comCodeStateExport,
     ...pubFacStateExport,
@@ -164,7 +173,10 @@ export const StoreZus = (
     ...coRvwStateExport,
     ...ruseHstryStateExport,
     ...pbnstPrfmncSttnExport,
-    ...ruseCaseStateExport
+    ...ruseCaseStateExport,
+    ...rainStatExport,
+    ...rswtStatExport,
+    ...matStatExport
   }
 ) => {
   return createStore<WrStore>()((set) => {
@@ -198,7 +210,10 @@ export const StoreZus = (
       ...coRvwActionsExport(set),
       ...ruseHstryActionsExport(set),
       ...pbnstPrfmncSttnActionsExport(set),
-      ...ruseCaseActionsExport(set)
+      ...ruseCaseActionsExport(set),
+      ...rainStatActionsExport(set),
+      ...rswtStatActionsExport(set),
+      ...matStatActionsExport(set)
     };
   });
 };

From c69a829de20d5c7241b458eb7a351e3b3414de28 Mon Sep 17 00:00:00 2001
From: leedj312 <dlehd467@gmail.com>
Date: Tue, 10 Jun 2025 23:30:42 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=ED=95=98=EC=8A=A4=EC=9E=AC=EC=9D=B4?=
 =?UTF-8?q?=EC=9A=A9=20=EC=8B=9C=EC=84=A4=20=ED=98=84=ED=99=A9=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ruseFcltMng/fcltSttn/pbnstSttn/page.tsx   |  77 +++--
 .../prfmncReg/pbnstPrfmncReg/page.tsx         |   6 +-
 .../ruseFcltMng/fcltReg/pbnstReg/type.tsx     |   1 -
 .../fcltSttn/pbnstSttn/headList.tsx           | 248 ++++++++++++++-
 .../ruseFcltMng/fcltSttn/pbnstSttn/index.tsx  |  28 +-
 .../ruseFcltMng/fcltSttn/pbnstSttn/type.tsx   |   3 +
 .../fcltReg/pbnstReg/mngReg/mngRegForm.tsx    |  77 ++---
 .../sttn/pbnstSttnModal/pbnstSttnModal.tsx    | 286 ++++++++++++++++++
 8 files changed, 641 insertions(+), 85 deletions(-)
 create mode 100644 apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx

diff --git a/apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx b/apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx
index 9123d2c0b..3f6ad7566 100644
--- a/apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx
+++ b/apps/wr/app/ruseFcltMng/fcltSttn/pbnstSttn/page.tsx
@@ -20,10 +20,14 @@ import type {
   customPbnst,
   pubHasuType,
 } from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
-import { excelDownload, getCityOrSgg, yearOptions } from "@/components/lib/func/commom";
-import { PbnstRegModal } from "@/components/ui/modal/fcltReg/pbnstRegModal/pbnstRegModal";
+import {
+  excelDownload,
+  getCityOrSgg,
+  yearOptions,
+} from "@/components/lib/func/commom";
 import SearchInputText from "@/components/ui/searchInput/searchInput";
 import type { WaterReuseFacility } from "@/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type";
+import { PbnstSttnModal } from "@/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal";
 
 export default function PbnstSttn() {
   const {
@@ -37,10 +41,6 @@ export default function PbnstSttn() {
 
   const ref = useRef<ReturnType>({} as ReturnType);
   const codeData = getCityOrSgg(ref);
-  const [isRuseReg, setIsRuseReg] = useState<{
-    isModal: boolean;
-    data: pubHasuType;
-  }>({ isModal: false, data: {} as pubHasuType });
   const [searchYear, setSearchYear] = useState<string>(
     String(new Date().getFullYear())
   );
@@ -52,11 +52,14 @@ export default function PbnstSttn() {
     isModal: boolean;
     data: customPbnst;
   }>({ isModal: false, data: {} as customPbnst });
+
+  const [clickPk , setClickPk] = useState<string>("")
   const [pbnRuseNm, setPbnRuseNm] = useState<string>("");
 
+
   const excelClick = useCallback(() => {
-    pbnstSttnSearch("1", '10000', ref.current , '', searchYear);
-  }, [pbnstSttnSearch,  searchYear,ref.current]);
+    pbnstSttnSearch("1", "10000", ref.current, "", searchYear);
+  }, [pbnstSttnSearch, searchYear, ref.current]);
 
   const cellCLick = useCallback(
     (index: number | undefined) => {
@@ -66,7 +69,8 @@ export default function PbnstSttn() {
         pbnstSttn.pbnstSttnRes[index]
       ) {
         const pbnstRuseFcltPk = pbnstSttn.pbnstSttnRes[index].pbnstRuseFcltPk;
-        getPbnStnDetail(pbnstRuseFcltPk.slice(0, 11));
+       // setClickPk(pbnstRuseFcltPk)
+        getPbnStnDetail(pbnstRuseFcltPk);
       }
     },
     [getPbnStnDetail, pbnstSttn.pbnstSttnRes]
@@ -86,17 +90,28 @@ export default function PbnstSttn() {
     if (!pbnstSttn.isInit) {
       pbnSttnInit("1", "13", ref.current, searchYear);
     }
-  }, [pbnstSttn.isInit, pbnSttnInit,ref.current]);
+  }, [pbnstSttn.isInit, pbnSttnInit, ref.current]);
   useEffect(() => {
     setBdstTable(pbnstSttn.pbnstSttnRes);
   }, [pbnstSttn.pbnstSttnRes]);
 
   useEffect(() => {
-
     if (pbnRuseNm.length > 1)
       pbnNmSearch("1", "23", ref.current, pbnRuseNm, searchYear);
   }, [pbnRuseNm]);
 
+  useEffect(() => {
+    if (pbnstSttn.pbnstDetail.pbnstRuseFcltPk)
+      setPbnDetaileData({
+        isModal: true,
+        data: pbnstSttn.pbnstDetail,
+      });
+  }, [pbnstSttn.pbnstDetail]);
+
+
+  useEffect(() => { 
+      console.log('pbnDetaileData.isModal ', pbnDetaileData.isModal)
+},[pbnDetaileData.isModal])
   return (
     <>
       <ContentsDiv>
@@ -122,18 +137,18 @@ export default function PbnstSttn() {
               }
               leftChildren={
                 <>
-                <div className="flex flex-row space-x-2">
-                  <SelectBox
-                    className="w-48 h-full text-2xl"
-                    label="연도"
-                    selectClass={""}
-                    selectArray={yearOptions}
-                    value={searchYear}
-                    onSelectValue={(val: string | number) =>
-                      setSearchYear(String(val))
-                    }
-                  />
-                </div>
+                  <div className="flex flex-row space-x-2">
+                    <SelectBox
+                      className="w-48 h-full text-2xl"
+                      label="연도"
+                      selectClass={""}
+                      selectArray={yearOptions}
+                      value={searchYear}
+                      onSelectValue={(val: string | number) =>
+                        setSearchYear(String(val))
+                      }
+                    />
+                  </div>
                   <SearchInputText
                     label={"하수처리시설"}
                     initValue={pbnRuseNm ?? ""}
@@ -143,10 +158,9 @@ export default function PbnstSttn() {
                     setRtnData={function (rtnData: any[]): void {
                       setBdstTable(rtnData);
                     }}
-                    searchList={pbnstSttn.pbnstSearchData||[]}
+                    searchList={pbnstSttn.pbnstSearchData || []}
                   ></SearchInputText>
-                  </>
-
+                </>
               }
               queryClick={function (returnType: ReturnType): void {
                 // '{partValue: 'A', sidoValue: '0', sigunValue: '0', regionValue: '0', unitWaterShedValue: '0', …}'
@@ -162,6 +176,7 @@ export default function PbnstSttn() {
               initClick={function (): void {}}
               btnClass={btnClass}
               ref={ref}
+              isAdmin={false}
             />
           </div>
         </div>
@@ -203,14 +218,14 @@ export default function PbnstSttn() {
         />
         <UiModal
           body={
-            <PbnstRegModal
-              data={isRuseReg.data || ({} as customPbnst)}
-            ></PbnstRegModal>
+            <PbnstSttnModal
+              data={pbnDetaileData.data || ({} as customPbnst)}
+            ></PbnstSttnModal>
           }
           bodyClass="w-[68vw] max-w-none h-[90vh]"
-          open={isRuseReg.isModal}
+          open={pbnDetaileData.isModal}
           onOpenChange={(open) => {
-            setIsRuseReg({ data: {} as pubHasuType, isModal: open });
+            setPbnDetaileData({ data: {} as customPbnst, isModal: false });
           }}
         />
       </ContentsDiv>
diff --git a/apps/wr/app/ruseFcltMng/prfmncReg/pbnstPrfmncReg/page.tsx b/apps/wr/app/ruseFcltMng/prfmncReg/pbnstPrfmncReg/page.tsx
index 4efa94fa1..fed0338f0 100644
--- a/apps/wr/app/ruseFcltMng/prfmncReg/pbnstPrfmncReg/page.tsx
+++ b/apps/wr/app/ruseFcltMng/prfmncReg/pbnstPrfmncReg/page.tsx
@@ -84,12 +84,10 @@ export default function prfmncPrfmncReg() {
           isModal: false,
           data: prfmncRes[index] || ({} as FcPrfType),
         });
-        const inUsageData = initValInUsage;
-        const outUsageData = initValOutUsage;
-
+        const inUsageData = [...initValInUsage];
+        const outUsageData = [...initValOutUsage];
         const inSubtotal = subTotalObj;
         const outSubtotal = subTotalObj;
-
         if (prfmncRes[index]?.prfList) {
           prfmncRes[index].prfList?.forEach((prfItem) => {
             const month = Number(prfItem?.ym?.slice(4)); // "MM"
diff --git a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx
index cbc081c01..972e245cd 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/type.tsx
@@ -158,7 +158,6 @@ const dmdColist = z.object({
 
 
 
-
 export const fcBizSchema = z.object({
   pbnstRuseFcltBizPk: z.number().nullish(),
   pbnstRuseFcltFk: z.string().nullish(),
diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/headList.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/headList.tsx
index a1043be1d..9fe7fddc9 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/headList.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/headList.tsx
@@ -1,5 +1,8 @@
 import type { sttnHeadListType } from "../rainSttn/headList";
-import type { CommonTableProps } from "@/app/store/common/type/header";
+import type {
+  CommonTableProps,
+  TableUpperProps,
+} from "@/app/store/common/type/header";
 import { z } from "zod";
 
 export const pbnSttHeadListExport: z.infer<typeof sttnHeadListType> = [
@@ -27,7 +30,7 @@ export const pbnSttHeadListExport: z.infer<typeof sttnHeadListType> = [
   },
   { id: "bscFctNm", title: "시설명", visible: true },
   { id: "efflWqltStndrdNm", title: "지역구분", visible: true },
-  
+
   { id: "fctCpc", title: "시설용량(톤/일)", visible: true },
   { id: "tel", title: "전화번호", visible: true },
   { id: "ruseUtztnFcltNm", title: "재이용시설명", visible: true },
@@ -203,7 +206,7 @@ export const pbnstSttNodeListExport: CommonTableProps[] = [
     rowSpan: 1,
     colSpan: 1,
   },
- {
+  {
     id: "cityText",
     title: "시도",
     upName: "adminDiv",
@@ -310,5 +313,240 @@ export const pbnstSttNodeListExport: CommonTableProps[] = [
     row: 2,
     rowSpan: 1,
     colSpan: 1,
-  }
-];
\ No newline at end of file
+  },
+];
+
+export const ruseFcltNodeListExport: TableUpperProps[] = [
+  { id: "cycl", title: "차수", visible: true, row: 1, rowSpan: 3, colSpan: 1 },
+  { id: "seCd", title: "구분", visible: true, row: 1, rowSpan: 3, colSpan: 1 },
+  {
+    id: "busiTotal",
+    title: "사업개요",
+    visible: true,
+    row: 1,
+    rowSpan: 1,
+    colSpan: 10,
+  },
+  {
+    id: "ruseFclt",
+    title: "재처리시설",
+    visible: true,
+    row: 1,
+    rowSpan: 1,
+    colSpan: 5,
+  },
+  {
+    id: "mainSply",
+    title: "메인공급펌프용량",
+    visible: true,
+    row: 1,
+    rowSpan: 3,
+    colSpan: 1,
+  },
+  {
+    id: "buziFee",
+    title: "사업비(백만원)",
+    visible: true,
+    row: 2,
+    rowSpan: 1,
+    colSpan: 6,
+  },
+  {
+    id: "instlAprvSncnDt",
+    title: "설치승인・인가일",
+    visible: true,
+    row: 2,
+    rowSpan: 2,
+    colSpan: 1,
+  },
+  {
+    id: "bizCmcnDay",
+    title: "사업준공일",
+    visible: true,
+    row: 2,
+    rowSpan: 2,
+    colSpan: 1,
+  },
+  {
+    id: "rprcsFcltCpct",
+    title: "시설용량(m³/일)",
+    visible: true,
+    row: 2,
+    rowSpan: 2,
+    colSpan: 1,
+  },
+  {
+    id: "rprcsMthdCd",
+    title: "재처리방식",
+    visible: true,
+    row: 2,
+    rowSpan: 2,
+    colSpan: 1,
+  },
+  {
+    id: "majorPrcsMsrcCd",
+    title: "주처리공법",
+    visible: true,
+    row: 2,
+    rowSpan: 2,
+    colSpan: 1,
+  },
+  {
+    id: "inoutYn",
+    title: "위치처리장(내・외)",
+    visible: true,
+    row: 2,
+    rowSpan: 2,
+    colSpan: 1,
+  },
+  {
+    id: "addr",
+    title: "위치(주소)",
+    visible: true,
+    row: 2,
+    rowSpan: 2,
+    colSpan: 1,
+  },
+  { id: "gvsbs", title: "국고", visible: true, row: 3, rowSpan: 1, colSpan: 1 },
+  {
+    id: "lcep",
+    title: "지방비",
+    visible: true,
+    row: 3,
+    rowSpan: 1,
+    colSpan: 1,
+  },
+  {
+    id: "cusrAlotm",
+    title: "민간투자비",
+    visible: true,
+    row: 3,
+    rowSpan: 1,
+    colSpan: 1,
+  },
+  {
+    id: "cusrAlotm2",
+    title: "원인자부담금",
+    visible: true,
+    row: 3,
+    rowSpan: 1,
+    colSpan: 1,
+  },
+  { id: "etc", title: "기타", visible: true, row: 3, rowSpan: 1, colSpan: 1 },
+  {
+    id: "totalMoney",
+    title: "합계",
+    visible: true,
+    row: 3,
+    rowSpan: 1,
+    colSpan: 1,
+  },
+];
+
+export const ruseSplyHeadListExport: TableUpperProps[] = [
+  { id: "cycl", title: "차수", visible: true },
+  { id: "orgwtWtritQnt", title: "원수취수량", visible: true },
+  { id: "tmsYn", title: "하수처리량TMS 전후", visible: true },
+  { id: "dschgFmYn", title: "하수처리장 방류 유량계 전·후​", visible: true },
+  { id: "dtlPstnExpln", title: "상세위치 설명", visible: true },
+];
+
+export const rusePplHeadListExport: TableUpperProps[] = [
+  { id: "cycl", title: "차수", visible: true },
+  { id: "ppMqlt", title: "관재질", type: "select", visible: true },
+  { id: "pdmt", title: "관경", type: "select", visible: true },
+  { id: "cpct", title: "연장", edit: true, visible: true },
+];
+
+export const ruseGuranteeHeadListExport: TableUpperProps[] = [
+  { id: "cycl", title: "차수", visible: true },
+  { id: "bod", title: "BOD(mg/L)", visible: true },
+  { id: "grssClfg", title: "총대장균군수(개/mg)", visible: true },
+  { id: "combResdch", title: "결합잔류염소(mh/L)", visible: true },
+  { id: "trbt", title: "탁도(NTU)", visible: true },
+  { id: "smll", title: "냄새", visible: true },
+  { id: "crmty", title: "색도", visible: true },
+  { id: "tn", title: "총질소(mg/L)", visible: true },
+  { id: "tph", title: "총인(mg/L)", visible: true },
+  { id: "ph", title: "수소이온농도", visible: true },
+  { id: "clIonQnt", title: "염화물(mg/L)", visible: true },
+  { id: "cdtnv", title: "전기전도도(μs/cm)​", visible: true },
+];
+
+export const ruseDmdHeadListExport: TableUpperProps[] = [
+  { id: "cycl", title: "차수", visible: true },
+  { id: "dmdCoNm", title: "수요처명", visible: true },
+  { id: "daddr", title: "위치(주소)", visible: true },
+  { id: "useUsgCd", title: "사용용도", visible: true },
+  { id: "splyBgngDay", title: "공급시작일", visible: true },
+  { id: "splyEndDay", title: "공급종료일", visible: true },
+  { id: "splyCpct", title: "공급량(m³/일)", visible: true },
+  { id: "splyFmYon", title: "공급유량계 유무", visible: true },
+];
+
+export const ruseFcltHeadListExport: CommonTableProps[] = [
+  { id: "cycl", title: "차수", visible: true},
+  { id: "seCd", title: "구분", visible: true},
+  { id: "gvsbs", title: "국고", visible: true },
+  {
+    id: "lcep",
+    title: "지방비",
+    visible: true,
+  },
+  {
+    id: "cusrAlotm",
+    title: "민간투자비",
+    visible: true,
+  },
+  {
+    id: "cusrAlotm2",
+    title: "원인자부담금",
+    visible: true,
+  },
+  { id: "etc", title: "기타", visible: true },
+  {
+    id: "totalMoney",
+    title: "합계",
+    visible: true,
+  },
+  {
+    id: "instlAprvSncnDt",
+    title: "설치승인・인가일",
+    visible: true,
+  },
+  {
+    id: "bizCmcnDay",
+    title: "사업준공일",
+    visible: true,
+  },
+  {
+    id: "rprcsFcltCpct",
+    title: "시설용량(m³/일)",
+    visible: true,
+  },
+  {
+    id: "rprcsMthdCd",
+    title: "재처리방식",
+    visible: true,
+  },
+  {
+    id: "majorPrcsMsrcCd",
+    title: "주처리공법",
+    visible: true,
+  },
+  {
+    id: "inoutYn",
+    title: "위치처리장(내・외)",
+    visible: true,
+  },
+  {
+    id: "addr",
+    title: "위치(주소)",
+    visible: true,
+  },
+  {
+    id: "mainSply",
+    title: "메인공급펌프용량",
+    visible: true,
+  },
+];
diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx
index 7ebfda0d8..6ce27db86 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/index.tsx
@@ -1,6 +1,6 @@
-import type { CommonTableProps } from "@/app/store/common/type/header";
+import type { CommonTableProps, TableUpperProps } from "@/app/store/common/type/header";
 import type { z } from "zod";
-import { pbnSttHeadListExport, pbnstSttNodeListExport } from "./headList";
+import {  pbnSttHeadListExport, pbnstSttNodeListExport, ruseDmdHeadListExport, ruseFcltHeadListExport, ruseFcltNodeListExport, ruseGuranteeHeadListExport, rusePplHeadListExport, ruseSplyHeadListExport } from "./headList";
 import { fetchType, getFetch, postFectch } from "@/components/lib/api";
 import { controlHeadView } from "../rainSttn";
 import type { sttnHeadListType } from "../rainSttn/headList";
@@ -20,6 +20,12 @@ export type pbnstSttnState = {
     pbnstSttHeadList: CommonTableProps[];
     pbnstSttNodeList: CommonTableProps[];
     pbnstDetail: customPbnst;
+    ruseFcltNodeList:TableUpperProps[]
+    ruseSplyHeadList:TableUpperProps[]
+    rusePplHeadList:TableUpperProps[]
+    ruseGuranteeHeadList:TableUpperProps[]
+    ruseDmdHeadList:TableUpperProps[]
+    ruseFcltHeadList:TableUpperProps[]
     excelList: [];
     isInit: boolean;
   };
@@ -40,7 +46,7 @@ type pbnstSttnActions = {
     reurnValue: ReturnType,
     year: string
   ) => void;
-  getPbnStnDetail: (bscFctCd: string) => void;
+  getPbnStnDetail: (pbnstRuseFcltPk: string) => void;
   pbnNmSearch: (
     page: string,
     total: string,
@@ -56,6 +62,12 @@ export const pbnstSttnStateExport: pbnstSttnState = {
   pbnstSttn: {
     pbnstSttHeadList: pbnstSttHeadList,
     pbnstSttNodeList: pbnstSttNodeList,
+    ruseFcltNodeList:ruseFcltNodeListExport,
+    ruseSplyHeadList:ruseSplyHeadListExport,
+    rusePplHeadList:rusePplHeadListExport,
+    ruseGuranteeHeadList:ruseGuranteeHeadListExport,
+    ruseDmdHeadList:ruseDmdHeadListExport,
+    ruseFcltHeadList:ruseFcltHeadListExport,
     pbnstSttnRes: [],
     pbnstDetail: {} as customPbnst,
     pbnstSearchData: [],
@@ -158,6 +170,7 @@ const hasuListFetch = async (
         endDt: item.operList[0]?.endDt.toLocaleDateString?? "",
         searchNm: findData.bscFctNm,
         searchPk: findData.bscFctCd,
+        prfList:item?.prfList??[]
       };
     }
   );
@@ -254,10 +267,13 @@ export const pbnstSttnActionsExport: (set: any) => pbnstSttnActions = (
         console.log("error", erTxt);
       }
     },
-    getPbnStnDetail: async (bscFctCd: string) => {
+    getPbnStnDetail: async (pbnstRuseFcltPk: string) => {
       try {
-        const pbnstDetail = await getFetch("wr", `/reuseFc/pubFc/${bscFctCd}`);
-        console.log("pbnstDetail ", pbnstDetail);
+        let pbnstDetail = await getFetch("wr", `/reuseFc/pubFc/${pbnstRuseFcltPk}`);
+        if(pbnstDetail.length>=0){
+          pbnstDetail=  pbnstDetail.find((item: customPbnst) =>item.pbnstRuseFcltPk === pbnstRuseFcltPk)
+        }
+        console.log( 'pbnstDetail  ', pbnstDetail)
         set((state: pbnstSttnState) => {
           return {
             ...state,
diff --git a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type.tsx b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type.tsx
index 0709d991b..e4e86da5d 100644
--- a/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type.tsx
+++ b/apps/wr/app/store/ruseFcltMng/fcltSttn/pbnstSttn/type.tsx
@@ -1,3 +1,5 @@
+import type { PrfType } from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
+
 export type WaterReuseFacility = {
   bscFctNm: string; // 기본시설명 (예: "난지")
   efflWqltStndrdNm: string; // 방류수 수질 기준명 (예: "500톤 이상(Ⅲ지역)")
@@ -21,4 +23,5 @@ export type WaterReuseFacility = {
   rprtvBzenty: string;
   bgngDt: string;
   endDt: string;
+  prfList:PrfType[];
 };
diff --git a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx
index eb2f47ede..7e7374ef4 100644
--- a/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx
+++ b/apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx
@@ -46,7 +46,7 @@ export function PbnstMngForm({
     fileDownLoad,
     getBizCycle,
     getpbnstInsertIndex,
-    appendRuseFclt
+    appendRuseFclt,
   } = useWrStore((state) => state);
 
   const [regFileList, setRegFileList] = useState<fcFileType[] | null>(null);
@@ -69,7 +69,17 @@ export function PbnstMngForm({
             pbnst.pbnsUpdateIndex.mng >= 0 &&
             pbnst.pbnstRes
           ? pbnst.pbnstRes[pbnst.pbnsUpdateIndex.mng]
-          : pbnstRegZod.parse({}),
+          : formType === "sttn" && firstFcltData
+            ? {
+                ruseUtztnFcltNm: firstFcltData?.ruseUtztnFcltNm,
+                fcltCpct: firstFcltData?.fcltCpct,
+                hasuhasu: firstFcltData?.hasuhasu,
+                ruseCpct: firstFcltData?.ruseCpct,
+                splyExtraCpct: firstFcltData?.splyExtraCpct,
+                fcOpers: firstFcltData?.fcOpers,
+                fcFiles: firstFcltData?.fcFiles,
+              }
+            : pbnstRegZod.parse({}),
   });
   const {
     fields: fcOpersField,
@@ -89,17 +99,16 @@ export function PbnstMngForm({
       getBizCycle(pbnst.pbnstRes[val]);
       form.reset(pbnst.pbnstRes[val]);
 
-      form.setValue('hasuhasu' , Number(pbnst.efflAmnt)??0)
+      form.setValue("hasuhasu", Number(pbnst.efflAmnt) ?? 0);
       getpbnstInsertIndex({ ...pbnst.pbnsUpdateIndex, mng: val });
     }
   };
 
-
   const plusHist = () => {
     const currentTableDataFromRef = ref.current ? [...ref.current] : [];
     const regData = {
       choose: false,
-      pbnstRuseFcltFk:form.getValues('pbnstRuseFcltPk')??"",
+      pbnstRuseFcltFk: form.getValues("pbnstRuseFcltPk") ?? "",
       rgtr: "",
       mdfr: "",
       operMthd: "",
@@ -195,15 +204,13 @@ export function PbnstMngForm({
   // 등록할때 신규 값을 계속 가지고 있으려고
   useEffect(() => {
     if (
+      formType === "reg" &&
       firstFcltData &&
       (form.getValues("swtrmtFcltFk") === "" ||
         form.getValues("swtrmtFcltFk") === undefined)
     ) {
       form.setValue("swtrmtFcltFk", firstFcltData.swtrmtFcltFk);
-      form.setValue(
-        "pbnstRuseFcltPk",
-        String(firstFcltData.pbnstRuseFcltPk)
-      );
+      form.setValue("pbnstRuseFcltPk", String(firstFcltData.pbnstRuseFcltPk));
       form.setValue("fcBizs", firstFcltData.fcBizs);
     }
   }, [firstFcltData]);
@@ -251,41 +258,38 @@ export function PbnstMngForm({
       }
     }
   }, [pbnst.pbnsUpdateIndex, pbnst.pbnstRes, formType, getBizCycle]);
-  
+
   //신규 등록시 입력할때 데이터 넣기
   useEffect(() => {
     const formData = form.watch();
     formData.fcOpers = ref.current ? [...ref.current] : [];
     formData.fcFiles = regFileList ? [...regFileList] : [];
     if (formType === "reg") {
-      console.log('formData ',  formData)
+      console.log("formData ", formData);
       pbnstMngData([formData] as customPbnst[]);
-    } else if (formType === "update"){
-      const updateRes = pbnst.pbnstRes?.map((item)=>{
-        if(item.pbnstRuseFcltPk === item.pbnstRuseFcltPk){
-          item=formData as customPbnst
+    } else if (formType === "update") {
+      const updateRes = pbnst.pbnstRes?.map((item) => {
+        if (item.pbnstRuseFcltPk === item.pbnstRuseFcltPk) {
+          item = formData as customPbnst;
         }
-        return item
-      })
+        return item;
+      });
       pbnstMngData(updateRes as customPbnst[]);
     }
   }, [form.formState, regFileList, formType, pbnst.pbnstRes]);
 
   useEffect(() => {
-   // pbnstMngData(pbnst.pbnstMngRegData);
+    // pbnstMngData(pbnst.pbnstMngRegData);
   }, [pbnst.pbnstMngRegData]);
 
   useEffect(() => {
-
-    if ( pbnst.pbnstRes && pbnst.pbnstRes?.length<= 0) return;
+    if (pbnst.pbnstRes && pbnst.pbnstRes?.length <= 0) return;
     const fcltNmList = pbnst.pbnstRes?.map((item, index) => ({
       text: item.ruseUtztnFcltNm,
       val: String(index),
     }));
 
-    if(fcltNmList)
-    setFcltNm(fcltNmList);
-
+    if (fcltNmList) setFcltNm(fcltNmList);
   }, [pbnst.pbnstRes]);
 
   // 2. Define a submit handler.
@@ -295,9 +299,6 @@ export function PbnstMngForm({
     pbnstInsert(values);
   }
 
-
-
-
   useEffect(() => {
     if (relationfiles) {
       setRegFileList(regFileFilter(relationfiles, "계통도", regFileList || []));
@@ -324,7 +325,18 @@ export function PbnstMngForm({
                   재이용 시설명
                 </Label>
 
-                {formType === "reg" ? (
+                {formType === "update" ? (
+                  <SelectBox
+                    label=""
+                    className="mt-4 ml-2"
+                    selectClass={undefined}
+                    selectArray={fcltNm ?? []}
+                    onSelectValue={(val) => {
+                      selectFclt(Number(val));
+                    }}
+                    value={""}
+                  />
+                ) : (
                   <FormField
                     control={form.control}
                     name="ruseUtztnFcltNm"
@@ -342,17 +354,6 @@ export function PbnstMngForm({
                       </FormUi>
                     )}
                   />
-                ) : (
-                  <SelectBox
-                    label=""
-                    className="mt-4 ml-2"
-                    selectClass={undefined}
-                    selectArray={fcltNm ?? []}
-                    onSelectValue={(val) => {
-                      selectFclt(Number(val));
-                    }}
-                    value={""}
-                  />
                 )}
               </div>
 
diff --git a/apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx b/apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx
new file mode 100644
index 000000000..1704a481d
--- /dev/null
+++ b/apps/wr/components/ui/modal/sttn/pbnstSttnModal/pbnstSttnModal.tsx
@@ -0,0 +1,286 @@
+import { useWrStore } from "@/app/store";
+import type { TableUpperProps } from "@/app/store/common/type/header";
+import { initValInUsage, initValOutUsage, subTotalObj, totalObj, type PrfType } from "@/app/store/prfmncReg/pbnstPrfmncReg/type";
+import type {
+  customPbnst,
+  fcBizType,
+} from "@/app/store/ruseFcltMng/fcltReg/pbnstReg/type";
+import { PbnstMngForm } from "@/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm";
+import { ScrollArea, Title, UiTable } from "@common/business_components/ui";
+import { HeadMakeColSpan } from "@common/business_components/ui/table/HeadMakeColSpan";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  Button,
+  TabsContent,
+} from "@common/components/ui";
+import { useEffect, useState } from "react";
+import { set } from "react-hook-form";
+
+export function PbnstSttnModal({ data }: { data: customPbnst }) {
+  const { code, pbnstSttn,prfmnc } = useWrStore((state) => state);
+  const [fcltTab, setFcltTab] = useState<string>("fclt");
+  const [ruseTab, setRuseTab] = useState<string>("inoutTotal");
+  const [ruseBizData, setRuseBizData] = useState<{
+    data: any[];
+    head: TableUpperProps[];
+  }>();
+  const [ruseHeadList, setRuseHeadList] = useState<TableUpperProps[]>([]);
+  const [ruseTableData, setRuseTableData] = useState<TableUpperProps[]>([]);
+  const [prfData , setPrfData] = useState<{inPrf: any[],outPrf: any[], totalPrf:any[] }> ()
+
+  const {monthHeadList } = prfmnc;
+  useEffect(() => {
+    let tableData;
+    if (fcltTab === "fclt") {
+      tableData = data.fcBizs?.map((item: fcBizType) => {
+        return {
+          cycl: item.cycl + "차",
+          seCd: item.seCd,
+          gvsbs: item.gvsbs??'-',
+          lcep: item.lcep??'-',
+          cusrAlotm: item.cusrAlotm??'-',
+          etc: item.etc??'-',
+          totalMoney:
+            Number(item.addr) +
+            Number(item.gvsbs) +
+            Number(item.lcep) +
+            Number(item.cusrAlotm),
+          instlAprvSncnDt: item.instlAprvSncnDt?.toISOString??'-',
+          bizCmcnDay: item.bizCmcnDay?.toISOString??'-',
+          rprcsFcltCpct: item.rprcsFcltCpct??'-',
+          rprcsMthdCd: item.rprcsMthdCd??'-',
+          majorPrcsMsrcCd: item.majorPrcsMsrcCd??'-',
+          inoutYn: item.inoutYn??'-',
+          addr: item.addr??'-',
+        };
+      });
+    } else if (fcltTab === "sply") {
+      tableData = data.fcBizs.flatMap((item: fcBizType) => {
+         return item?.fcOrgwts?.map((fcOrgwt) => {
+            return {
+              cycl: item.cycl + "차",
+              orgwtWtritQnt: fcOrgwt.orgwtWtritQnt,
+              tmsYn: fcOrgwt.tmsYn,
+              dschgFmYn: fcOrgwt.dschgFmYn,
+              dtlPstnExpln: fcOrgwt.dtlPstnExpln,
+            };
+          }) 
+      });
+    } else if (fcltTab === "ppi") {
+      tableData = data.fcBizs?.flatMap((item: fcBizType) => {
+        return     item?.pplInstls?.map((ppl) => {
+            return {
+              cycl: item.cycl + "차",
+              ppMqlt: ppl.ppMqlt,
+              pdmt: ppl.pdmt,
+              cpct: ppl.cpct,
+            };
+          })
+      });
+    } else if (fcltTab === "guarantee") {
+      tableData = data.fcBizs?.map((item: fcBizType) => {
+        return {
+          cycl: item.cycl + "차",
+          bod: item.bod,
+          grssClfg: item.grssClfg,
+          combResdch: item.combResdch,
+          trbt: item.trbt,
+          smll: item.smll,
+          crmty: item.crmty,
+          tph: item.tph,
+          tn: item.tn,
+          ph: item.ph,
+          cdtnv: item.cdtnv,
+        };
+      });
+    } else if (fcltTab === "dmdCo") {
+      tableData = data.fcBizs?.flatMap((item: fcBizType) => {
+        return item?.fcDemands?.map((dmd) => {
+            return {
+              cycl: item.cycl + "차",
+              dmdCoNm: dmd.dmdCoNm,
+              daddr: dmd.daddr,
+              useUsgCd: dmd.useUsgCd,
+              splyBgngDay: dmd.splyBgngDay?.toISOString,
+              splyEndDay: dmd.splyEndDay?.toISOString,
+              splyCpct: dmd.splyCpct,
+              splyFmYn: dmd.splyFmYn,
+            };
+          }) 
+      });
+    }
+    console.log(tableData);
+    if (tableData && tableData.length > 0) {
+      setRuseTableData(tableData as any[]);
+    }
+  }, [fcltTab, data]);
+  useEffect(() => {
+    if (fcltTab === "fclt") {
+      setRuseHeadList(pbnstSttn.ruseFcltHeadList);
+    } else if (fcltTab === "sply") {
+      setRuseHeadList(pbnstSttn.ruseSplyHeadList);
+    } else if (fcltTab === "ppi") {
+      setRuseHeadList(pbnstSttn.rusePplHeadList);
+    } else if (fcltTab === "guarantee") {
+      setRuseHeadList(pbnstSttn.ruseGuranteeHeadList);
+    } else if (fcltTab === "dmdCo") {
+      setRuseHeadList(pbnstSttn.ruseDmdHeadList);
+    }
+  }, [
+    fcltTab,
+    pbnstSttn.ruseFcltHeadList,
+    pbnstSttn.ruseSplyHeadList,
+    pbnstSttn.rusePplHeadList,
+    pbnstSttn.ruseGuranteeHeadList,
+    pbnstSttn.ruseDmdHeadList,
+  ]);
+
+  const getTablePrfData = (prfList:PrfType[]) => {
+    const inUsageData = [...initValInUsage];
+    const outUsageData = [...initValOutUsage];
+    const inSubtotal = subTotalObj;
+    const outSubtotal = subTotalObj;
+  
+    if (prfList) {
+      prfList?.forEach((prfItem) => {
+         const month = Number(prfItem?.ym?.slice(4)); // "MM"
+         const monthKey = `${month}월`;
+
+         inUsageData.forEach((inData: any) => {
+           const usageKey = inData.usage;
+           const value = (prfItem as any)[usageKey] ?? 0;
+
+           inData[monthKey] = value;
+           inData.total += value;
+
+           if (inSubtotal && usageKey !== "subtotal") {
+             (inSubtotal as any)[monthKey] =
+               ((inSubtotal as any)[monthKey] ?? 0) + value;
+             inSubtotal.total += value;
+           }
+         });
+
+         outUsageData.forEach((outData: any) => {
+           const usageKey = outData.usage;
+           const value = (prfItem as any)[usageKey] ?? 0;
+
+           outData[monthKey] = value;
+           outData.total += value;
+
+           if (usageKey !== "subtotal") {
+             (outSubtotal as any)[monthKey] =
+               ((outSubtotal as any)[monthKey] ?? 0) + value;
+             outSubtotal.total += value;
+           }
+         });
+       });
+       inUsageData.push(inSubtotal);
+       outUsageData.push(outSubtotal);
+       const usageTotalObj: { [key: string]: any } = totalObj;
+       for (const key in usageTotalObj) {
+         if (["usage", "gubun", "edit"].includes(key)) continue;
+         const val =
+           (Number((inSubtotal as any)[key]) || 0) +
+           (Number((outSubtotal as any)[key]) || 0);
+
+         (usageTotalObj as any)[key] = val;
+       }
+       const tableData = [...inUsageData, ...outUsageData, usageTotalObj];
+
+       setPrfData({
+         inPrf: inUsageData,
+         outPrf: outUsageData,
+         totalPrf: tableData,
+       });
+    }
+
+  }
+  useEffect(() => { 
+
+    if(pbnstSttn.pbnstSttnRes&&data){
+    const prfList =  pbnstSttn.pbnstSttnRes.find((item) => item.pbnstRuseFcltPk=== data.pbnstRuseFcltPk )?.prfList
+   
+    if(prfList){
+      getTablePrfData(prfList)
+    }
+
+  }
+  }, [pbnstSttn.pbnstSttnRes, data]);
+
+  useEffect(() => {}, [ruseBizData?.head]);
+  return (
+    <>
+      <div>
+        <Title title={"하수재이용 시설 상세정보"} />
+        <ScrollArea className={"h-[70vh]"}>
+          <PbnstMngForm firstFcltData={data} formType={"sttn"} />
+          <Tabs defaultValue="mng" onValueChange={setFcltTab}>
+            <TabsList className="">
+              <TabsTrigger className="!text-xl" value="fclt">
+                하수처리수 재이용시설 현황
+              </TabsTrigger>
+              <TabsTrigger className="!text-xl" value="sply">
+                재이용 원수 취수 현황
+              </TabsTrigger>
+              <TabsTrigger className="!text-xl" value="ppi">
+                재이용 공급관로 현황
+              </TabsTrigger>
+              <TabsTrigger className="!text-xl" value="guarantee">
+                재이용 보증수질 현황
+              </TabsTrigger>
+              <TabsTrigger className="!text-xl" value="dmdCo">
+                재이용 수요처 현황
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent className="max-h-full" value={fcltTab}>
+              <UiTable
+                headName={undefined}
+                tableData={ruseTableData || []}
+                headlist={ruseHeadList || []}
+                pageSize={0}
+                total={0}
+                cellClick={undefined}
+                onPageChange={function (page: number): void {
+                  throw new Error("Function not implemented.");
+                }}
+                children={fcltTab==='fclt'?<HeadMakeColSpan upHeadList={pbnstSttn.ruseFcltNodeList} />:undefined}
+              ></UiTable>
+            </TabsContent>
+          </Tabs>
+
+          <Tabs defaultValue="mng" onValueChange={setRuseTab}>
+            <TabsList className="">
+              <TabsTrigger className="!text-xl" value="totalPrf">
+                장내외합계
+              </TabsTrigger>
+              <TabsTrigger className="!text-xl" value="inPrf">
+                장내용수
+              </TabsTrigger>
+              <TabsTrigger className="!text-xl" value="outPrf">
+                장외용수
+              </TabsTrigger>
+            </TabsList>
+            <TabsContent className="max-h-full" value={ruseTab}>
+            {prfData && (
+            <UiTable
+              headName={undefined}
+              tableData={prfData[ruseTab as keyof typeof prfData] || []}
+              headlist={monthHeadList || []}
+              pageSize={0}
+              total={0}
+              cellClick={undefined}
+              onPageChange={function (page: number): void {
+                throw new Error("Function not implemented.");
+              }}
+            ></UiTable>
+          )}
+            </TabsContent>
+          </Tabs>
+        
+        </ScrollArea>
+      </div>
+    </>
+  );
+}