Merge branch 'iipbs/wr/form_fuction' of https://www.onasys.co.kr:3000/ONAANDALL/frontend into iipbs/wr/form_fuction

apps/wr/app/stats/rainStat/page.tsx

@@ -1,27 +1,29 @@
 "use client";
+
 import { useWrStore } from "@/app/store";
 import { yearOptions } from "@/components/lib/func/commom";
 import {
   ContentsDiv,
   SearchDiv,
-  SearchFormLeft,
   SelectBox,
   Title,
-  UiTable,
+  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";
+import { useEffect, useState } from "react";
 
-export default function rainStat() {
-  const { code, rainStat } = useWrStore((state) => {
-    return state;
-  });
-  const [pageNation, setPageNation] = useState(1);
+export default function RainStat() {
+  const { rainStat, searchRainStatList } = useWrStore((state) => state)
+  const [ pageNation, setPageNation] = useState(1);
   const [searchYear, setSearchYear] = useState<string>(
     String(new Date().getFullYear())
   );
 
+  useEffect(() => {
+    searchRainStatList(searchYear)
+  }, [searchRainStatList, searchYear])
+
   return (
     <>
       <ContentsDiv>
@@ -29,17 +31,19 @@ export default function rainStat() {
           <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="grid grid-cols-12 gap-5 m-4">
+                <div className="col-span-2">
+                  <SelectBox
+                    className="w-full 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 items-center">
                   <Button className="" size={"sm"} onClick={(e) => {}}>
                     조회
@@ -51,11 +55,10 @@ export default function rainStat() {
                     전체통계다운로드
                   </Button>
                 </div>
-              </SearchFormLeft>
-              {/* <SearchFormRight>
-                
-              </SearchFormRight> */}
+              </div>
             </SearchDiv>
+            {/* <SearchFormRight>
+              </SearchFormRight> */}
           </div>
         </div>
         <div className="grid grid-cols-6 gap-4">
@@ -78,4 +81,4 @@ export default function rainStat() {
       </ContentsDiv>
     </>
   );
-}
+}

apps/wr/app/store/stats/rainStat/index.tsx

@@ -1,13 +1,39 @@
 import type { TableUpperProps } from "../../common/type/header";
 import { rainStatHeadListExport } from "./headList";
 
-type rainStatActions = {
+export type RainStatProps = {
+    ctpvCd : string           //시도
+    sggCd : string            //시군구
+    areaNm : string           //행정구역명
+    archArea : number         //건축연면적
+    dtfcltCpct : number       //처리용량
+    annRnwtQty : number       //물사용량
+    jungsudo : number         //중수도​이용량
+    dachae : number           //대체수​이용량
+    way1 : number             //방법1
+    way2 : number             //방법2
+    way3 : number             //방법3
+    way4 : number             //방법4
+    way5 : number             //방법5
+    way6 : number             //방법6
+    way7 : number             //방법7
+    yearMoney : number        //연간운영비
 }
 
+const fetchRainStatList = async (year:string) => {
+    const res = await fetch(`/api/stats/rainStat?year=${year}`)
+    const data = await res.json()
+    return data
+}
+
+type rainStatActions = {
+    searchRainStatList : (year:string) => void
+}
 
 export type rainStatState = {
     rainStat: {
-        rainStatHeadList:TableUpperProps[]
+        rainStatHeadList:TableUpperProps[],
+        rainStatList : RainStatProps[]
     }
 }
 
@@ -15,14 +41,38 @@ export type rainStatType = rainStatState & rainStatActions;
 
 export const rainStatExport: rainStatState = {
     rainStat: {
-        rainStatHeadList:rainStatHeadListExport
+        rainStatHeadList:rainStatHeadListExport,
+        rainStatList : []
     }
 }
-
-export const rainStatActionsExport: (set: any) => rainStatActions = (
-    set: any
+export const rainStatActionsExport = (
+    set: (fn: (state: rainStatState) => rainStatState) => void
 ) => {
     return {
-       
+        searchRainStatList : async (year:string) => {
+            console.log(year);
+            //const data = await fetchRainStatList(year)
+            const rainStatList: never[] = [];
+            /* const rainStatHeadList = data.map((item:RainStatProps) => ({
+                ...item,
+                ctpvCd:item.ctpvCd,
+                sggCd:item.sggCd,
+                areaNm:item.areaNm,
+                archArea:item.archArea,
+                dtfcltCpct:item.dtfcltCpct,
+                annRnwtQty:item.annRnwtQty,
+                jungsudo:item.jungsudo,
+                dachae:item.dachae,
+                way1:item.way1,
+                way2:item.way2,
+                way3:item.way3,
+                way4:item.way4,
+                way5:item.way5,
+                way6:item.way6,
+                way7:item.way7,
+                yearMoney:item.yearMoney,
+            })) */
+            set((state:rainStatState) => ({...state, rainStat: {rainStatList:rainStatList}}))
+        }
     }
 }