빗물시설통계 엑셀다운로드 양식 및 다운로드 완료

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useWrStore } from "@/app/store";
-import { yearOptions } from "@/components/lib/func/commom";
+import { excelDownload, yearOptions } from "@/components/lib/func/commom";
 import {
   ContentsDiv,
   SearchDiv,
@@ -14,7 +14,9 @@ import { Button } from "@common/components/ui";
 import { useEffect, useState } from "react";
 
 export default function RainStat() {
+  const { code } = useWrStore((state) => state)
   const { rainStat, searchRainStatList } = useWrStore((state) => state)
+  const { rainDetailList } = rainStat;
   const [ pageNation, setPageNation] = useState(1);
   const [searchYear, setSearchYear] = useState<string>(
     String(new Date().getFullYear())
@@ -22,7 +24,22 @@ export default function RainStat() {
 
   useEffect(() => {
     searchRainStatList(searchYear);
-  }, [searchRainStatList, searchYear])
+  }, [code.cityCd, code.sggCd, searchRainStatList, searchYear])
+
+  const excelDownLoad=() =>{
+    rainDetailList.forEach((item) => {
+      item.forEach((item2) => {
+        console.log(item2);
+      })
+    })
+    excelDownload(
+      rainDetailList,
+      "빗물이용시설 통계",
+      "sample_rainStats.xlsx",
+      "A1:V3",
+      4
+    );
+  }
 
   return (
     <>
@@ -51,7 +68,7 @@ export default function RainStat() {
                   <Button className="" size={"sm"} onClick={(e) => {}}>
                     다운로드
                   </Button>
-                  <Button className="" size={"sm"} onClick={(e) => {}}>
+                  <Button className="" size={"sm"} onClick={() => excelDownLoad()}>
                     전체통계다운로드
                   </Button>
                 </div>

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

@@ -1,6 +1,6 @@
 import type { RainStatProps } from ".";
 
-export const excelRainStat = (excelList:RainStatProps[]) => {
+export const excelRainStat = (excelList:RainStatProps[]) : string[][] => {
   const excelData: string[][] = [];
     excelList.forEach((item) => {
       excelData.push([
@@ -8,21 +8,17 @@ export const excelRainStat = (excelList:RainStatProps[]) => {
         String(item.sggCd) ?? "",
         String(item.areaNm) ?? "",
         String(item.bdstNm) ?? "",
+        String(item.bdstUsgCd) ?? "",
+        String(item.daddr) ?? "",
+        String(item.lawTrgtYn) ?? "",
+        String(item.instlCmptnDt) ?? "", 
         String(item.instlCst) ?? "",
-        String(item.archArea) ?? "",
+        String(item.pntfColKnd) ?? "",
+        String(item.filtrTrtmfctYn) ?? "",
         String(item.dtfcltCpct) ?? "",
         String(item.wtrUsqty) ?? "",
+        String(item.utztnUsgCd) ?? "",
         String(item.anlOperCst) ?? "",
-        String(item.annRnwtQty) ?? "",
-        String(item.jungsudo) ?? "",
-        String(item.dachae) ?? "",
-        String(item.way1) ?? "",
-        String(item.way2) ?? "",
-        String(item.way3) ?? "",
-        String(item.way4) ?? "",
-        String(item.way5) ?? "",
-        String(item.way6) ?? "",
-        String(item.way7) ?? "",
       ]);
     });
   return excelData;

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

@@ -1,6 +1,7 @@
 import { fetchType, getFetch } from "@/components/lib/api";
 import type { TableUpperProps } from "../../common/type/header";
 import { rainStatHeadListExport } from "./headList";
+import { excelRainStat } from "./excel";
 
 export type RainStatProps = {
     ctpvCd : string           //시도
@@ -22,6 +23,11 @@ export type RainStatProps = {
     annRnwtQty : number       //물사용량
     jungsudo : number         //중수도​이용량
     dachae : number           //대체수​이용량
+    guideStats : [{
+        utztnUsgCd : string,
+        splyUswtrUtztnQnt : number,
+        ruseFcltUtztnQnt : number,
+    }]
     way1 : number             //방법1
     way2 : number             //방법2
     way3 : number             //방법3
@@ -43,7 +49,8 @@ type rainStatActions = {
 export type rainStatState = {
     rainStat: {
         rainStatHeadList:TableUpperProps[],
-        rainStatList : RainStatProps[]
+        rainStatList : RainStatProps[],
+        rainDetailList : [][]
     }
 }
 
@@ -52,7 +59,8 @@ export type rainStatType = rainStatState & rainStatActions;
 export const rainStatExport: rainStatState = {
     rainStat: {
         rainStatHeadList:rainStatHeadListExport,
-        rainStatList : []
+        rainStatList : [],
+        rainDetailList : []
     }
 }
 export const rainStatActionsExport = (
@@ -62,6 +70,18 @@ export const rainStatActionsExport = (
         searchRainStatList : async (year:string) => {
             const res = await fetchRainStatList(year);
             const rainStatList: never[] = [];
+            const rainDetailList : RainStatProps[] = [];
+            res.forEach((item:RainStatProps) => {
+                const utztnUsgArray = new Array<string>();
+                item.guideStats.forEach((guideStat) => {
+                    utztnUsgArray.push(guideStat.utztnUsgCd);
+                })
+                rainDetailList.push({
+                    ...item,
+                    utztnUsgCd : utztnUsgArray.join(', '),
+                })
+            })
+            const excelDetailData = excelRainStat(rainDetailList);
             /* const rainStatHeadList = data.map((item:RainStatProps) => ({
                 ...item,
                 ctpvCd:item.ctpvCd,
@@ -85,6 +105,7 @@ export const rainStatActionsExport = (
                 rainStat: {
                     ...state.rainStat,
                     rainStatList: rainStatList,
+                    rainDetailList: excelDetailData as [][]
                 }
             }));
         }