dashboard toolkit 적용

src/_redux/features/dashboard/dashboardSlice.ts

@@ -0,0 +1,41 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { initMainDash } from './dashboardState';
+import {
+  getStcsAreaList,
+  getStcsDayList,
+  getAllDashboardData,
+  getDronOperationList
+} from './dashboardThunk';
+import {
+  IStcsDayListRs,
+  IStcsAreaListRs,
+  IDashBoardDataRs,
+  IDronOperationListRs
+} from './dashboardState';
+
+const dashboardSlice = createSlice({
+  name: 'dashboardSlice',
+  initialState: initMainDash,
+  reducers: {},
+  extraReducers: builder => {
+    builder
+      .addCase(getStcsDayList.fulfilled, (state, action) => {
+        const data = action.payload as IStcsDayListRs[];
+        state.stcsDayListRs = data;
+      })
+      .addCase(getStcsAreaList.fulfilled, (state, action) => {
+        const data = action.payload as IStcsAreaListRs[];
+        state.stcsAreaListRs = data;
+      })
+      .addCase(getAllDashboardData.fulfilled, (state, action) => {
+        const data = action.payload as IDashBoardDataRs;
+        state.dashboardDataRs = { ...data };
+      })
+      .addCase(getDronOperationList.fulfilled, (state, action) => {
+        const data = action.payload as IDronOperationListRs[];
+        state.dronOperationListRs = data;
+      });
+  }
+});
+
+export const dashboardReducer = dashboardSlice.reducer;

src/_redux/features/dashboard/dashboardState.ts

@@ -0,0 +1,100 @@
+export const initMainDash: MainDashState = {
+  stcsDayListRs: [],
+  stcsAreaListRs: [],
+  dashboardDataRs: {
+    dailyFlightWarn: [],
+    dailyFlightCount: [],
+    dailyFlightPlan: [],
+    dronSituation: []
+  },
+  dronOperationListRs: []
+};
+
+export enum EDateType {
+  yesterday = '전일',
+  today = '금일',
+  tomorrow = '명일'
+}
+
+export enum EDronStatus {
+  inFlight = '비행 중',
+  flightComplete = '비행 완료',
+  flightWaiting = '비행 대기 중 '
+}
+
+export interface MainDashState {
+  stcsDayListRs: IStcsDayListRs[];
+  stcsAreaListRs: IStcsAreaListRs[];
+  dashboardDataRs: IDashBoardDataRs;
+  dronOperationListRs: IDronOperationListRs[];
+}
+
+export interface IDronOperationListRs {
+  groupNm: string;
+  memberName: string;
+  idntfNum: string;
+  cntrlStDt: string;
+  cntrlEndDt: string;
+  totalFlightTime: string;
+  status: string;
+}
+
+export interface IDronSituationRs {
+  typeCd: string;
+  count: number;
+}
+
+export interface IDailyFlightPlanRs {
+  dateType: string;
+  plan: number;
+  aprvn: number;
+  count: number;
+  note: number;
+}
+export interface IDailyFlightWarnRs {
+  dateType: string;
+  plan: number;
+  altitude: number;
+  crash: number;
+  count: number;
+  note: number;
+}
+
+export interface IDailyFlightCountRs {
+  dateType: string;
+  flightPlan: number;
+  completeFlight: number;
+  notFlight: number;
+  note: number;
+}
+
+export interface IStcsDayListRs {
+  typeCd: string;
+  count: number;
+}
+
+export interface IStcsAreaListRs {
+  typeCd: string;
+  count: number;
+}
+
+export interface GroupListData {
+  groupNm: string;
+  groupId: string;
+  joinDt: Date;
+  createDt: Date;
+}
+
+export interface DronListData {
+  arcrftModelNm: string;
+  prdctNum: string;
+  createDt: Date;
+  groupNm: string;
+}
+
+export interface IDashBoardDataRs {
+  dailyFlightWarn: IDailyFlightWarnRs[];
+  dailyFlightCount: IDailyFlightCountRs[];
+  dailyFlightPlan: IDailyFlightPlanRs[];
+  dronSituation: IDronSituationRs[];
+}

src/_redux/features/dashboard/dashboardThunk.ts

@@ -0,0 +1,162 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import qs from 'qs';
+import axios from '../../../modules/utils/customAxiosUtil';
+import { isError } from '../comn/message/messageSlice';
+import { ERROR_MESSAGE } from '@src/configs/constants';
+import {
+  EDronStatus,
+  IStcsDayListRs,
+  IStcsAreaListRs,
+  IDashBoardDataRs,
+  IDronSituationRs,
+  IDronOperationListRs
+} from './dashboardState';
+
+// 일 별 비행횟수 통계 날짜 리스트
+export const getStcsDayList = createAsyncThunk(
+  'dashboard/getStcsDayList',
+  async (rq: string, thunkAPI) => {
+    try {
+      const queryString = qs.stringify(rq, {
+        addQueryPrefix: true,
+        arrayFormat: 'repeat'
+      });
+
+      const { data, errorCode }: { data: IStcsDayListRs[]; errorCode: string } =
+        await axios.get(`api/main/dash/stcs/day${queryString}`);
+
+      if (errorCode) {
+        throw new Error(errorCode);
+      }
+
+      return data;
+    } catch (error) {
+      thunkAPI.dispatch(
+        isError({
+          errorCode: ERROR_MESSAGE,
+          errorMessage: '처리중 오류가 발생하였습니다',
+          isHistoryBack: false,
+          isRefresh: false
+        })
+      );
+    }
+  }
+);
+
+// top5 지역 별 비행횟수 통계 리스트
+export const getStcsAreaList = createAsyncThunk(
+  'dashboard/getStcsAreaList',
+  async (rq: string, thunkAPI) => {
+    try {
+      const queryString = qs.stringify(rq, {
+        addQueryPrefix: true,
+        arrayFormat: 'repeat'
+      });
+
+      const {
+        data,
+        errorCode
+      }: { data: IStcsAreaListRs[]; errorCode: string } = await axios.get(
+        `api/main/dash/stcs/area${queryString}`
+      );
+
+      if (errorCode) {
+        throw new Error(errorCode);
+      }
+
+      return data;
+    } catch (error) {
+      thunkAPI.dispatch(
+        isError({
+          errorCode: ERROR_MESSAGE,
+          errorMessage: '처리중 오류가 발생하였습니다',
+          isHistoryBack: false,
+          isRefresh: false
+        })
+      );
+    }
+  }
+);
+
+// 일일 비행계획 현황, 일일 비행건수 현황, 일일 비정상상황 현황 Promise.all 처리
+export const getAllDashboardData = createAsyncThunk(
+  'dashboard/getAllDashboardData',
+  async (_, thunkAPI) => {
+    try {
+      const allDashboardApi = [
+        'api/main/dash/current/flight-warn',
+        'api/main/dash/current/flight-plan',
+        'api/main/dash/stcs/dailyflight',
+        'api/main/dash/stcs/dron-flight'
+      ];
+
+      const promise = allDashboardApi.map(api => axios.get(api));
+
+      const res = await Promise.all(promise);
+
+      let errorCode = res.filter(i => i.hasOwnProperty('errorCode'));
+      if (errorCode.length > 0) {
+        throw new Error();
+      }
+
+      let dronSituationArr: IDronSituationRs[] = [];
+
+      if (res[3].data) {
+        Object.keys(res[3].data).forEach(i => {
+          dronSituationArr.push({
+            typeCd: EDronStatus[`${i}`],
+            count: Number(res[3].data[i])
+          });
+        });
+      }
+
+      const data: IDashBoardDataRs = {
+        dailyFlightWarn: res[0].data.slice(0, res[0].data.length - 1),
+        dailyFlightPlan: res[1].data,
+        dailyFlightCount: res[2].data,
+        dronSituation: dronSituationArr
+      };
+
+      return data;
+    } catch (error) {
+      thunkAPI.dispatch(
+        isError({
+          errorCode: ERROR_MESSAGE,
+          errorMessage: '처리중 오류가 발생하였습니다',
+          isHistoryBack: false,
+          isRefresh: false
+        })
+      );
+    }
+  }
+);
+
+// 드론 별 비행운항 목록 리스트
+export const getDronOperationList = createAsyncThunk(
+  'dashboard/getDronOperationList',
+  async (rq: string, thunkAPI) => {
+    try {
+      const {
+        data,
+        errorCode
+      }: { data: IDronOperationListRs[]; errorCode: string } = await axios.get(
+        `api/main/dash/dron-flight/list?serviceType=${rq}`
+      );
+
+      if (errorCode) {
+        throw new Error(errorCode);
+      }
+
+      return data;
+    } catch (error) {
+      thunkAPI.dispatch(
+        isError({
+          errorCode: ERROR_MESSAGE,
+          errorMessage: '처리중 오류가 발생하였습니다',
+          isHistoryBack: false,
+          isRefresh: false
+        })
+      );
+    }
+  }
+);

src/_redux/rootReducer.ts

@@ -1,10 +1,14 @@
 import { combineReducers } from '@reduxjs/toolkit';
+import { layoutReducer } from './features/layout/layoutSlice';
+import { dashboardReducer } from './features/dashboard/dashboardSlice';
 import { droneReducer } from './features/basis/drone/droneSlice';
 import { laancReducer } from './features/laanc/laancSlice';
 import { messageReducer2 } from './features/comn/message/messageSlice';
 
 const rootReducer = (state: any, action: any) => {
   const combineReducer = combineReducers({
+    layout: layoutReducer,
+    dashboard: dashboardReducer,
     drone: droneReducer,
     laanc: laancReducer,
     message: messageReducer2

src/components/dashboard/DroneFlightSchedule.js

@@ -1,4 +1,4 @@
-import { useSelector } from 'react-redux';
+import { useSelector } from '@store/storeConfig/store';
 import { Plus } from 'react-feather';
 import {
   Card,
@@ -117,7 +117,9 @@ export default function DroneFlightSchedule({
   handlerDronOperationChange,
   user
 }) {
-  const { dronOperationList } = useSelector(state => state.mainDashState);
+  const { dronOperationListRs: dronOperationList } = useSelector(
+    state => state.dashboardState
+  );
 
   return (
     <div className='invoice-list-wrapper'>

src/containers/main/dash/MainDashContainer.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector } from '@store/storeConfig/store';
 import { useHistory } from 'react-router-dom';
 import dayjs from 'dayjs';
 import { Col, Row } from '@component/ui';
@@ -7,7 +7,7 @@ import DroneFlightSchedule from '../../../components/dashboard/DroneFlightSchedu
 import { DashboardGroupList } from '../../../components/dashboard/DashboardGroupList';
 import { DashboardStcsArea } from '../../../components/dashboard/DashboardStcsArea';
 import { DashboardStcsDay } from '../../../components/dashboard/DashboardStcsDay';
-import * as DashActions from '../../../modules/main/dash/actions/mainDashAction';
+import * as Actions from '../../../_redux/features/dashboard/dashboardThunk';
 import { MessageErrorModal } from '../../../components/message/MessageErrorModal';
 
 export const MainDashContainer = () => {
@@ -17,12 +17,11 @@ export const MainDashContainer = () => {
     stcsAreaList: TOP 5 지역 별 비행횟수
   */
 
-  const [dashboardData] = useSelector(
-    state => [state.mainDashState.dashboardData],
-    shallowEqual
-  );
+  const [dashboardData] = useSelector(state => [
+    state.dashboardState.dashboardDataRs
+  ]);
   const { stcsDayList, stcsAreaList } = useSelector(
-    state => state.mainDashState
+    state => state.dashboardState
   );
   const { user } = useSelector(state => state.authState);
 
@@ -32,38 +31,34 @@ export const MainDashContainer = () => {
 
   useEffect(() => {
     // 일일 비행계획 현황, 일일 비행건수 현황, 일일 비정상상황 현황 Promise.all 처리
-    dispatch(DashActions.DASHBOARD_DATA.request());
+    dispatch(Actions.getAllDashboardData());
     handlerStcsDaySearch(dayStartDate);
     handlerStcsAreaSearch(areaStartDate);
   }, []);
 
   useEffect(() => {
-    handlerDronOperationList(
-      user?.authId === 'SUPER' ? 'all' : user?.cptAuthCode
-    );
+    if (user) {
+      handlerDronOperationList(
+        user?.authId === 'SUPER' ? 'all' : user?.cptAuthCode
+      );
+    }
   }, [user]);
 
   // 일 별 비행횟수 통계 날짜 리스트 dispatch
   const handlerStcsDaySearch = date => {
-    dispatch(
-      DashActions.STCS_DAY.request({
-        yyyymm: dayjs(date).format('YYYY-MM')
-      })
-    );
+    dispatch(Actions.getStcsDayList({ yyyymm: dayjs(date).format('YYYY-MM') }));
   };
 
   // top5 지역 별 비행횟수 통계 리스트 dispatch
   const handlerStcsAreaSearch = date => {
     dispatch(
-      DashActions.STCS_AREA.request({
-        yyyymm: dayjs(date).format('YYYY-MM')
-      })
+      Actions.getStcsAreaList({ yyyymm: dayjs(date).format('YYYY-MM') })
     );
   };
 
   // 드론 별 비행운항 목록 리스트 dispatch
   const handlerDronOperationList = data => {
-    dispatch(DashActions.DRON_OPERRATION_LIST.request(data));
+    dispatch(Actions.getDronOperationList(data));
   };
 
   // 일 별 비행횟수 통계 날짜 변경 핸들러

src/redux/reducers/rootReducer.ts

@@ -34,16 +34,16 @@ import { controlMapReducer } from '../../modules/control/map';
 import { faqSaga, faqReducer } from '../../modules/cstmrService/faq';
 import { qnaSaga, qnaReducer } from '../../modules/cstmrService/inquiry';
 // import { laancSaga, laancReducer } from '../../modules/laanc';
-import { mainDashSaga, mainDahReducer } from '../../modules/main/dash';
+
 import { menuReducer } from '../../modules/menu';
 import { statisticsSaga, statisticsReducer } from '../../modules/statistics';
 import { droneReducer } from '../../_redux/features/basis/drone/droneSlice';
 import { laancReducer } from '../../_redux/features/laanc/laancSlice';
 import { layoutReducer } from '../../_redux/features/layout/layoutSlice';
 import { messageReducer2 } from '../../_redux/features/comn/message/messageSlice';
+import { dashboardReducer } from '../../_redux/features/dashboard/dashboardSlice';
 
 export function* saga() {
-  yield all([fork(mainDashSaga)]);
   yield all([fork(controlGpSaga)]);
   yield all([fork(analysisHistorySaga)]);
   yield all([fork(accountSaga)]);
@@ -60,7 +60,6 @@ export function* saga() {
 
 const rootReducer = combineReducers({
   controlMapReducer,
-  mainDashState: mainDahReducer,
   messageState: messageReducer,
   groupState: groupReducer,
   // droneState: droneReducer,
@@ -83,7 +82,7 @@ const rootReducer = combineReducers({
   qnaState: qnaReducer,
   statisticsState: statisticsReducer,
   // ------------------------------------------------
-
+  dashboardState: dashboardReducer,
   droneState: droneReducer,
   layoutState: layoutReducer,
   messageState2: messageReducer2