diff --git a/apps/wr/app/matMng/coMng/drgtSttn/page.tsx b/apps/wr/app/matMng/coMng/drgtSttn/page.tsx
index d7c5170b2..2f07dd6de 100644
--- a/apps/wr/app/matMng/coMng/drgtSttn/page.tsx
+++ b/apps/wr/app/matMng/coMng/drgtSttn/page.tsx
@@ -6,15 +6,15 @@ import { drgtHeadListExport } from "@/app/store/matDmd/drgtSttn/headList";
 import { excelDownload, getCity } from "@/components/lib/func/commom";
 import DrgtDetailModal from "@/components/ui/modal/coMat/drgtDetailModal";
 import type { objSearchType } from "@/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal";
-import { ContentsDiv, DateMonthPicker, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, Title, UiModal, UiTable, type SelectDataType } from "@common/business_components/ui";
+import { ContentsDiv, DateMonthPicker, downloadExcel, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, Title, UiModal, UiTable, type SelectDataType } from "@common/business_components/ui";
 import { MonthPicker } from "@common/business_components/ui/date_month_picker/mothPicker";
 import ListDiv from "@common/business_components/ui/list_div";
-import { Button, DatePicker, Label } from "@common/components/ui";
+import { Button, DatePicker, Label, ScrollArea } from "@common/components/ui";
 import { useCallback, useEffect, useState } from "react";
 import { toast, Toaster } from "react-hot-toast";
 
 export default function DrgtSttn() {
-    const { code, drgt, drgtSearch, drgtModalSearch } = useWrStore((state) => state);
+    const { code, drgt, drgtSearch, drgtModalSearch, drgtInit } = useWrStore((state) => state);
     const { drgtRes, drgtMoRes } = drgt;
     const [fromDate, setFromDate] = useState<string>();
     const [toDate, setToDate] = useState<string>();
@@ -22,6 +22,8 @@ export default function DrgtSttn() {
     const [objSearch, setObjSearch] = useState<objSearchType>({ sgg: "", city: "" });
     const [tableData, setTableData] = useState<customDrgt[]>();
     const [selectedSgg, setSelectedSgg] = useState<string>('');
+    const [excelData, setExcelData] = useState<any[]>();
+    const [num, setNum] = useState<string>();
     const [drgtModal, setDrgtModal] = useState<{
         isOpen: boolean;
         data: customDrgt | undefined;
@@ -35,6 +37,39 @@ export default function DrgtSttn() {
         }
     }
 
+    const excelClick = () => {
+        downloadExcel({
+            data: excelData ?? [],
+            fileName: "우리동네가뭄 현황",
+            sheetNameArray: ["Sheet1"],
+            headerRange: "A1:G1"
+        })
+    }
+
+    useEffect(() => {
+        if (!drgt.isInit) {
+            drgtInit();
+        }
+    }, [drgt.isInit, drgtInit]);
+
+    useEffect(() => {
+        const resData = Array.isArray(drgtRes) ? drgtRes : [drgtRes];
+        const data = Array.isArray(resData)
+            ? resData.map((item: customDrgt) => {
+                return {
+                    "시도": item.ctpvCd,
+                    "시군구": item.sggNm,
+                    "정상(횟수)": item.normal,
+                    "관심(횟수)": item.attention,
+                    "주의(횟수)": item.caution,
+                    "관심+주의(횟수)": item.warning,
+                    "가뭄순위": item.ranking,
+                }
+            }) : [];
+        setExcelData(data)
+        setTableData(drgtRes)
+    }, [drgtRes])
+
     useEffect(() => {
         if (drgtMoRes && drgtMoRes.length > 0) {
             setDrgtModal({ isOpen: true, data: drgtMoRes });
@@ -65,15 +100,6 @@ export default function DrgtSttn() {
         setObjSearch({ ...objSearch, sgg: String(val) });
     };
 
-    const excelClick = useCallback(() => {
-        excelDownload(
-            [[]],
-            "우리동네가뭄",
-            "sample_drgtSttn.xlsx",
-            "A1:H1"
-        );
-    }, []);
-
     useEffect(() => {
         if (fromDate === undefined && toDate === undefined) {
             const today = new Date();
@@ -101,7 +127,7 @@ export default function DrgtSttn() {
                                         onSelectValue={getSelCity}
                                     />
                                     <SelectBox
-                                        className="col-span-2 w-1/6 h-full text-2xl"
+                                        className="col-span-2 w-1/6 h-full text-2xl ml-8"
                                         label="시군구"
                                         selectClass={""}
                                         selectArray={selectSgg || []}
@@ -110,7 +136,7 @@ export default function DrgtSttn() {
                                     />
                                     <div className="col-span-5 w-auto">
                                         <div className="flex flex-row items-center">
-                                            <Label className="text-xl text-gray-600">조회기간</Label>
+                                            <Label className="text-xl text-gray-600 ml-8">조회기간</Label>
                                             <div className="flex flex-row w-1/4">
                                                 <DateMonthPicker
                                                     field={{
@@ -125,8 +151,9 @@ export default function DrgtSttn() {
                                                             setFromDate(formatted);
                                                         }
                                                     }}
+                                                    selectClass="ml-4 text-2xl"
                                                 />
-                                                <span>~</span>
+                                                <span className="ml-2 text-center">~</span>
                                                 <DateMonthPicker
                                                     field={{
                                                         value: toDate,
@@ -140,6 +167,7 @@ export default function DrgtSttn() {
                                                             setToDate(formatted);
                                                         }
                                                     }}
+                                                    selectClass="ml-4"
                                                 />
                                             </div>
                                         </div>
@@ -148,7 +176,7 @@ export default function DrgtSttn() {
                             </SearchFormLeft>
                             <SearchFormRight
                                 className="w-2/12 mx-5 flex flex-col items-center justify-center space-x-2 ">
-                                <div className="flex flex-row space-x-2">
+                                <div className="flex flex-row space-x-2 items-center">
                                     <Button
                                         size={"sm"}
                                         onClick={(e) => {
@@ -199,17 +227,19 @@ export default function DrgtSttn() {
                 <div className="grid grid-cols-6 gap-4 ">
                     <div className="col-span-6">
                         <ListDiv>
-                            <UiTable
-                                headName={[]}
-                                tableData={drgtRes || []}
-                                headlist={drgtHeadListExport}
-                                pageSize={20}
-                                total={10000}
-                                cellClick={(index: number | undefined, headId: string) => {
-                                    cellClick(index ?? undefined, headId);
-                                }}
-                                onPageChange={() => { }}
-                            ></UiTable>
+                            <ScrollArea className="h-[66vh]">
+                                <UiTable
+                                    headName={undefined}
+                                    tableData={tableData || []}
+                                    headlist={drgtHeadListExport}
+                                    pageSize={14}
+                                    total={0}
+                                    cellClick={(index: number | undefined, headId: string) => {
+                                        cellClick(index ?? undefined, headId);
+                                    }}
+                                    onPageChange={() => { }}
+                                ></UiTable>
+                            </ScrollArea>
                         </ListDiv>
                     </div>
                 </div>
diff --git a/apps/wr/app/store/matDmd/drgtSttn/index.tsx b/apps/wr/app/store/matDmd/drgtSttn/index.tsx
index 698ba5984..053bb12fc 100644
--- a/apps/wr/app/store/matDmd/drgtSttn/index.tsx
+++ b/apps/wr/app/store/matDmd/drgtSttn/index.tsx
@@ -14,10 +14,12 @@ export type drgtState = {
     drgtHeadList: CommonTableProps[];
     drgtRes: customDrgt[];
     drgtMoRes: customDrgt[];
+    isInit: boolean;
   }
 }
 
 type drgtActions = {
+  drgtInit: () => void
   drgtSearch: (fromDate: string, toDate: string, sido: string, sgg: string) => void
   drgtModalSearch: (fromDate: string, toDate: string, sgg: string) => void
 };
@@ -29,72 +31,105 @@ export const drgtStateExport: drgtState = {
     drgtHeadList: drgtHeadList,
     drgtRes: drgtRes,
     drgtMoRes: drgtRes,
+    isInit: false,
   }
 }
 
+const initFetch = async (fromDate: string, toDate: string, sido: string, sgg: string) => {
+
+  let searchUrl = "";
+
+  if (sido === "" || sido === "전체") {
+    searchUrl = `/il/getDataCount/${fromDate}/${toDate}`;
+  } else {
+    searchUrl = `/il/getDataCount/${fromDate}/${toDate}/${sido}/${sgg}`;
+  }
+
+  const drgtData = await getFetch(
+    fetchType.WR,
+    searchUrl
+  );
+
+  //주의, 관심, 정상 추출
+  const statusData = Array.from(
+    new Set(drgtData.map((e) => e.lvngMfgUswtrDrgtInfo))
+  );
+
+  const statusMap = drgtData.reduce((acc: any, { sggNm, lvngMfgUswtrDrgtInfo: status, countDrgt }: { sggNm: string; lvngMfgUswtrDrgtInfo: string; countDrgt: number }) => {
+    if (!acc[sggNm]) {
+      acc[sggNm] = { sggNm, ...Object.fromEntries(statusData.map((e) => [e, 0])) };
+    }
+    acc[sggNm][status] = Number(countDrgt);
+    return acc;
+  }, {});
+  const data = Object.values(statusMap);
+
+  const formatStatus = data.map((item) => {
+    const attention = item['관심'] || 0;
+    const caution = item['주의'] || 0;
+    return {
+      sggNm: item.sggNm,
+      normal: String(item['정상'] || 0),
+      caution: String(caution),
+      attention: String(attention),
+      warning: String(attention + caution),
+    };
+  });
+
+  const ranking = Array.from(
+    new Set(formatStatus.map(e => Number(e.warning)))
+  ).sort((a, b) => b - a);
+
+  const rankData = ranking.reduce((acc, val, idx) => {
+    acc[val] = idx + 1;
+    return acc;
+  }, {});
+
+  const drgtRes = formatStatus.map(item => ({
+    ...item,
+    warning: String(item.warning),
+    ranking: rankData[Number(item.warning)],
+  }));
+
+  return drgtRes;
+
+}
+
+
 export const drgtActionsExport: (set: any) => drgtActions = (
   set: any
 ) => {
   return {
+    drgtInit: async () => {
+      try {
+        const today = new Date();
+        const year = today.getFullYear();
+        const month = String(today.getMonth() + 1).padStart(2, '0');
+        const formatted = `${year}${month}`;
+        const fromDate = formatted;
+        const toDate = formatted;
+
+        //FIXME: 페이지 처음 로딩될때 데이터 보려고 6월로 박아놓음 이거 fromDate로 고치기
+        const drgtRes = await initFetch("202506", toDate, "", "");
+        set((state: drgtState) => {
+          return {
+            ...state,
+            drgt: {
+              ...state.drgt,
+              drgtRes: drgtRes,
+              isInit: false,
+            },
+          }
+        });
+      } catch (e) {
+        console.log(e)
+      }
+    },
     drgtSearch: async (fromDate: string, toDate: string, sido: string, sgg: string) => {
       try {
-        let searchUrl = "";
 
-        if (sido === "" || sido === "전체") {
-          searchUrl = `/il/getDataCount/${fromDate}/${toDate}`;
-        } else {
-          searchUrl = `/il/getDataCount/${fromDate}/${toDate}/${sido}/${sgg}`;
-        }
+        const drgtRes = await initFetch(fromDate, toDate, sido, sgg);
 
-        console.log("searchUrl", searchUrl);
-
-        const drgtData = await getFetch(
-          fetchType.WR,
-          searchUrl
-        );
-
-        console.log("drgtRes", drgtData)
-
-        //주의, 관심, 정상 추출
-        const statusData = Array.from(
-          new Set(drgtData.map((e) => e.lvngMfgUswtrDrgtInfo))
-        );
-
-        const statusMap = drgtData.reduce((acc: any, { sggNm, lvngMfgUswtrDrgtInfo: status, countDrgt }: { sggNm: string; lvngMfgUswtrDrgtInfo: string; countDrgt: number }) => {
-          if (!acc[sggNm]) {
-            acc[sggNm] = { sggNm, ...Object.fromEntries(statusData.map((e) => [e, 0])) };
-          }
-          acc[sggNm][status] = Number(countDrgt);
-          return acc;
-        }, {});
-        const data = Object.values(statusMap);
-
-        const formatStatus = data.map((item) => {
-          const attention = item['관심'] || 0;
-          const caution = item['주의'] || 0;
-          return {
-            sggNm: item.sggNm,
-            normal: String(item['정상'] || 0),
-            caution: String(caution),
-            attention: String(attention),
-            warning: String(attention + caution),
-          };
-        });
-
-        const ranking = Array.from(
-          new Set(formatStatus.map(e => Number(e.warning)))
-        ).sort((a, b) => b - a);
-
-        const rankData = ranking.reduce((acc, val, idx) => {
-          acc[val] = idx + 1;
-          return acc;
-        }, {});
-
-        const drgtRes = formatStatus.map(item => ({
-          ...item,
-          warning: String(item.warning),
-          ranking: rankData[Number(item.warning)],
-        }));
         set((state: drgtState) => {
           return {
             ...state,
@@ -115,10 +150,7 @@ export const drgtActionsExport: (set: any) => drgtActions = (
           `/il/getData/${fromDate}/${toDate}/${sgg}/${sgg}`
         );
 
-        console.log("drgtMoData", drgtMoData)
-
         const drgtMoRes = drgtMoData.map((item) => {
-          console.log("item", item)
           const year = item.anlsYmd.slice(0, 4);
           const month = item.anlsYmd.slice(4, 6);
           const drgtState = item.lvngMfgUswtrDrgtInfo;
diff --git a/apps/wr/components/ui/modal/coMat/drgtDetailModal.tsx b/apps/wr/components/ui/modal/coMat/drgtDetailModal.tsx
index 1be95fae6..102292ccf 100644
--- a/apps/wr/components/ui/modal/coMat/drgtDetailModal.tsx
+++ b/apps/wr/components/ui/modal/coMat/drgtDetailModal.tsx
@@ -4,24 +4,38 @@ import { btnClass } from "@/app/store/common/code"
 import type { customDrgt } from "@/app/store/matDmd/drgtSttn"
 import { drgtDetailHeadListExport } from "@/app/store/matDmd/drgtSttn/headList"
 import { excelDownload } from "@/components/lib/func/commom"
-import { Title, UiTable } from "@common/business_components/ui"
+import { downloadExcel, Title, UiTable } from "@common/business_components/ui"
 import ListDiv from "@common/business_components/ui/list_div"
-import { Button } from "@common/components/ui"
-import { useCallback, useEffect } from "react"
+import { Button, ScrollArea } from "@common/components/ui"
+import { useCallback, useEffect, useState } from "react"
 
 export default function DrgtDetailModal({
     data,
 }: {
     data: customDrgt;
 }) {
-    const excelClick = useCallback(() => {
-        excelDownload(
-            [[]],
-            "우리동네가뭄",
-            "sample_drgtSttn.xlsx",
-            "A1:H1"
-        );
-    }, []);
+    const [excelData, setExcelData] = useState<any[]>();
+    const excelClick = () => {
+        downloadExcel({
+            data: excelData ?? [],
+            fileName: "우리동네가뭄 상세현황",
+            sheetNameArray: ["Sheet1"],
+            headerRange: "A1:C1"
+        })
+    }
+
+    useEffect(() => {
+        const resData = Array.isArray(data) ? data : [data];
+        const exData = Array.isArray(resData)
+            ? resData.map((item: customDrgt) => {
+                return {
+                    "년": item.year,
+                    "월": item.month,
+                    "가뭄상태": item.drgtState,
+                }
+            }) : [];
+        setExcelData(exData)
+    }, [data])
 
     return (
         <>
@@ -43,15 +57,17 @@ export default function DrgtDetailModal({
                     <div className="grid grid-cols-6 gap-4 ">
                         <div className="col-span-6">
                             <ListDiv>
-                                <UiTable
-                                    headName={[]}
-                                    tableData={data}
-                                    headlist={drgtDetailHeadListExport}
-                                    pageSize={10}
-                                    total={10000}
-                                    cellClick={(index: number | undefined, headId: string) => { }}
-                                    onPageChange={() => { }}
-                                ></UiTable>
+                                <ScrollArea className="h-[63vh]">
+                                    <UiTable
+                                        headName={undefined}
+                                        tableData={data}
+                                        headlist={drgtDetailHeadListExport}
+                                        pageSize={10}
+                                        total={10000}
+                                        cellClick={(index: number | undefined, headId: string) => { }}
+                                        onPageChange={() => { }}
+                                    ></UiTable>
+                                </ScrollArea>
                             </ListDiv>
                         </div>
                     </div>