refactor: 로딩기능 ,시도 선택, response 응답수정

apps/st/src/components/statistics/review/SeweragePenetrationRateRvw.tsx

@@ -1,23 +1,24 @@
 import { useState, useMemo } from "react";
-// import { DataGrid } from "@rsone/components";
 import DataGrid from "@/components/module/DataGrid";
 import SearchForm from "@/components/module/SearchForm";
 import SaveButton from "@/components/button/SaveButton";
 import ApproveButton from "@/components/button/ApproveButton";
 import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
 import ReturnButton from "@/components/button/ReturnButton";
+import { LoadingWithAnimation } from "@common/components"; 
+
 import { useAlertStore } from "@/shared/lib";
-import { sewerageSupplyRateReviewApi } from "@/entities/statistics/api/statistics-management-service";
-
-
-import type { SewerageSupplyRateReviewItem } from "@/entities/statistics/model/statistics-management-interface";
 import { SeweragePenetrationRateInfoList } from "@/components/util/column/review/SeweragePenetrationRateRvwColumn";
+import type { SewerageSupplyRateReviewItem } from "@/entities/statistics/model/statistics-sewerage-penetration-review-interface";
+import { statisticsManagementApi } from "@/entities/statistics/api/statistics-management-service";
 import type { SearchFormValues } from "@/components/type/SearchForm.type";
 import { toGridRows } from "@/components/util/grid/gridFunction";
 
-// 하수도 통계 검토 01. 하수도 보급률
+// 하수도 통계 검토 01.하수도 보급률
 const SeweragePenetrationRateRvw = () => {
     const { setMessage: alert } = useAlertStore((state) => state);
+    const [rowData, setRowData] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false); 
 
     const columnInfo = useMemo(() => {
         const { columns, columnLayout, fixedColumns, rowStartNum } = SeweragePenetrationRateInfoList;
@@ -33,39 +34,34 @@ const SeweragePenetrationRateRvw = () => {
         };
     }, []);
 
-    const [rowData, setRowData] = useState<any[]>([]);
-    const [isLoading, setIsLoading] = useState<boolean>(false);
-
     const handleReset = () => {
         setRowData([]);
     };
 
     const handleSearch = async (values: SearchFormValues) => {
+        if (values.sido === '' || values.sido === 'ALL') {
+            alert('시도를 선택해주세요.');
+            return;
+        }
+
         try {
             setIsLoading(true);
 
-            const response = await sewerageSupplyRateReviewApi.getSewerageSupplyRateReviewList({
+            const response = await statisticsManagementApi.getSewerageSupplyRateReviewList({
                 sido: values.sido,
                 gugun: values.gugun === 'ALL' ? '' : values.gugun,
                 bsnmCd: values.bsnmCd,
                 yr: values.year,
             });
 
-            console.log("네트워크 응답 전체:", response);
-
             if (response.status === 'success' && response.data) {
                 const rawList = response.data.sewerageSupplyRateList;
-                
-                console.log("받아온 리스트:", rawList);
-
                 const convertedData: SewerageSupplyRateReviewItem[] = rawList.map((item) => ({
                     ...item,
-
                     speclCntrplnAr: !item.speclCntrplnAr ? '해당없음' : item.speclCntrplnAr,
                 }));
 
-                setRowData(toGridRows(convertedData)); 
-
+                setRowData(toGridRows(convertedData));
             } else {
                 setRowData([]);
                 alert(response.message || "데이터가 없습니다.");
@@ -74,7 +70,7 @@ const SeweragePenetrationRateRvw = () => {
             console.error("조회 중 에러 발생:", error);
             alert('데이터 조회 중 오류가 발생했습니다.');
         } finally {
-            setIsLoading(false);
+            setIsLoading(false); 
         }
     };
 
@@ -84,8 +80,9 @@ const SeweragePenetrationRateRvw = () => {
     const returnFunc = () => console.log('returnFunc');
 
     return (
-        <>
+        <div className="relative"> 
             <SearchForm onSubmit={handleSearch} onReset={handleReset} />
+            
             <div className="card !py-0">
                 <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
                     <ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
@@ -94,15 +91,24 @@ const SeweragePenetrationRateRvw = () => {
                     <SaveButton saveFunc={saveFunc} />
                 </div>
             </div>
+
+            {isLoading && (
+                <div className="absolute inset-0 z-50 [data-theme='black']:bg-transparent bg-white/50 rounded-lg p-10 flex justify-center items-center">
+                    <div className="relative size-[5rem]">
+                        <LoadingWithAnimation color="primary" />
+                    </div>
+                </div>
+            )}
+
             <DataGrid
                 columnInfo={columnInfo}
-                isExcelImport={true}
+                isExcelImport={false}
                 fixedColumns={columnInfo.fixedColumns}
                 rowStartNum={columnInfo.rowStartNum}
                 rowData={rowData}
                 setRowData={setRowData}
             />
-        </>
+        </div>
     );
 };
 

apps/st/src/components/statistics/review/StatsInputStatusRvw.tsx

@@ -5,58 +5,60 @@ import SaveButton from "@/components/button/SaveButton";
 import ApproveButton from "@/components/button/ApproveButton";
 import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
 import ReturnButton from "@/components/button/ReturnButton";
-import { useAlertStore } from "@/shared/lib"; // 알림 스토어 추가
+import { LoadingWithAnimation } from "@common/components"; 
 
+import { useAlertStore } from "@/shared/lib";
 import { StatsInputStatusInfoList } from "@/components/util/column/review/StatsInputStatusRvwColumn";
-import { statsInputStatusReviewApi } from "@/entities/statistics/api/statistics-input-review-service";
+import { statisticsManagementApi } from "@/entities/statistics/api/statistics-management-service";
 import type { StatsInputStatusReviewItem } from "@/entities/statistics/model/statistics-input-review-interface";
+import { toGridRows } from "@/components/util/grid/gridFunction"; 
 
 // 하수도 통계 검토 00. 통계 입력 현황
 const StatsInputStatusRvw = () => {
     const { setMessage: alert } = useAlertStore((state) => state);
+    const [rowData, setRowData] = useState<any[]>([]);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
 
     const columnInfo = useMemo(() => {
-        const { columns, columnLayout} = StatsInputStatusInfoList;
+        const { columns, columnLayout } = StatsInputStatusInfoList;
         return {
             columnLayout,
             columns: columns.map((col) => ({
                 ...col,
-                editable: false as const
+                editable: false as const,
             })),
         };
     }, []);
 
-    const [rowData, setRowData] = useState<any[]>([]);
-    const [isLoading, setIsLoading] = useState<boolean>(false);
-
     const handleReset = () => {
         setRowData([]);
     };
 
     const handleSearch = async (values: any) => {
-        console.log("검색 폼 전달 값:", values);
+        if (!values.sido || values.sido === 'ALL') {
+            alert('시도를 선택해주세요.');
+            return;
+        }
+
         try {
             setIsLoading(true);
             
-            const response = await statsInputStatusReviewApi.getStatsInputStatusList({
+            const response = await statisticsManagementApi.getStatsInputStatusList({
                 sido: values.sido,
                 gugun: values.gugun === 'ALL' ? '' : values.gugun, 
                 yr: values.year || values.yr, 
                 bsnmCd: values.bsnmCd
             });
 
-            console.log("입력현황 네트워크 응답:", response);
-
             if (response.status === 'success' && response.data) {
-        
-                const rawList = response.data.sewerageSupplyRateList;
+                const rawList = response.data.sewerageSupplyRateList || response.data;
                 
                 const convertedData: StatsInputStatusReviewItem[] = rawList.map((item: any) => ({
                     ...item,
                     status: item.status || '미확인',
                 }));
 
-                setRowData(convertedData);
+                setRowData(toGridRows(convertedData));
             } else {
                 setRowData([]);
                 alert(response.message || "조회된 데이터가 없습니다.");
@@ -64,6 +66,7 @@ const StatsInputStatusRvw = () => {
         } catch (error) {
             console.error("입력현황 조회 중 에러 발생:", error);
             alert('데이터 조회 중 오류가 발생했습니다.');
+            setRowData([]);
         } finally {
             setIsLoading(false);
         }
@@ -75,7 +78,7 @@ const StatsInputStatusRvw = () => {
     const returnFunc = () => console.log('returnFunc');
 
     return (
-        <>
+        <div className="relative">
             <SearchForm onSubmit={handleSearch} onReset={handleReset} />
             
             <div className="card !py-0">
@@ -87,15 +90,23 @@ const StatsInputStatusRvw = () => {
                 </div>
             </div>
 
+            {isLoading && (
+                <div className="absolute inset-0 z-50 [data-theme='black']:bg-transparent bg-white/50 rounded-lg p-10 flex justify-center items-center">
+                    <div className="relative size-[5rem]">
+                        <LoadingWithAnimation color="primary" />
+                    </div>
+                </div>
+            )}
+
             <DataGrid
                 columnInfo={columnInfo}
-                isExcelImport={true} 
+                isExcelImport={false} 
                 rowStartNum={2} 
                 fixedColumns={2}
                 rowData={rowData}
                 setRowData={setRowData}
             />
-        </>
+        </div>
     );
 };