공통모달 비행이력, 시뮬레이션 적용

src/_redux/features/analysis/history/historyThunk.ts

@@ -1,25 +1,17 @@
 import axios from '../../../../modules/utils/customAxiosUtil';
 import qs from 'qs';
 import { createAsyncThunk } from '@reduxjs/toolkit';
-import { isError, isMessage } from '../../comn/message/messageSlice';
-import {
-  ERROR_MESSAGE,
-  DUPLATE_MESSAGE,
-  SAVE_MESSAGE,
-  DELETE_MESSAGE
-} from '@src/configs/constants';
+import { openModal } from '../../comn/message/messageSlice';
+import { QS_OPTION } from '@src/configs/constants';
 import { IHstryListRq } from './historyState';
+import { MODAL_DESC, MODAL_TITLE } from '@src/configs/msgConst';
 
 // 비행이력 조회
 export const getHstryList = createAsyncThunk(
   'analysis/getHstryList',
   async (data: IHstryListRq, thunkAPI) => {
-    const { rejectWithValue } = thunkAPI;
     try {
-      const queryString = qs.stringify(data.searchParams, {
-        addQueryPrefix: true,
-        arrayFormat: 'repeat'
-      });
+      const queryString = qs.stringify(data.searchParams, QS_OPTION);
       const res: any = await axios.get(
         `/api/anls/hstry/list${queryString}&page=${data.page}`
       );
@@ -27,14 +19,11 @@ export const getHstryList = createAsyncThunk(
       return res.data;
     } catch (error) {
       thunkAPI.dispatch(
-        isError({
-          errorCode: ERROR_MESSAGE.code,
-          errorMessage: ERROR_MESSAGE.message,
-          isHistoryBack: false,
-          isRefresh: false
+        openModal({
+          header: MODAL_TITLE.error,
+          body: MODAL_DESC.error
         })
       );
-      return rejectWithValue(error);
     }
   }
 );
@@ -43,21 +32,16 @@ export const getHstryList = createAsyncThunk(
 export const getHstryLog = createAsyncThunk(
   'analysis/getHstryLog',
   async (id: string, thunkAPI) => {
-    const { rejectWithValue } = thunkAPI;
-
     try {
       const res: any = await axios.get(`/api/anls/hstry/log/${id}`);
       return res.data;
     } catch (error) {
       thunkAPI.dispatch(
-        isError({
-          errorCode: ERROR_MESSAGE.code,
-          errorMessage: ERROR_MESSAGE.message,
-          isHistoryBack: false,
-          isRefresh: false
+        openModal({
+          header: MODAL_TITLE.error,
+          body: MODAL_DESC.error
         })
       );
-      return rejectWithValue(error);
     }
   }
 );
@@ -66,21 +50,16 @@ export const getHstryLog = createAsyncThunk(
 export const getHstryDetail = createAsyncThunk(
   'analysis/getHstryDetail',
   async (id: string, thunkAPI) => {
-    const { rejectWithValue } = thunkAPI;
-
     try {
       const res: any = await axios.get(`/api/anls/hstry/detail/${id}`);
       return res.data;
     } catch (error) {
       thunkAPI.dispatch(
-        isError({
-          errorCode: ERROR_MESSAGE.code,
-          errorMessage: ERROR_MESSAGE.message,
-          isHistoryBack: false,
-          isRefresh: false
+        openModal({
+          header: MODAL_TITLE.error,
+          body: MODAL_DESC.error
         })
       );
-      return rejectWithValue(error);
     }
   }
 );

src/_redux/features/analysis/simulation/simulationThunk.ts

@@ -1,42 +1,29 @@
 import axios from '../../../../modules/utils/customAxiosUtil';
 import qs from 'qs';
 import { createAsyncThunk } from '@reduxjs/toolkit';
-import { isError, isMessage } from '../../comn/message/messageSlice';
-import {
-  ERROR_MESSAGE,
-  DUPLATE_MESSAGE,
-  SAVE_MESSAGE,
-  DELETE_MESSAGE
-} from '@src/configs/constants';
+import { openModal } from '../../comn/message/messageSlice';
+import { QS_OPTION } from '@src/configs/constants';
 import { IAnalysisSimulatorListRq } from './simulationState';
+import { MODAL_DESC, MODAL_TITLE } from '@src/configs/msgConst';
 
 // 비행 현황 목록
 export const getSmltList = createAsyncThunk(
   'analysis/getSmltList',
   async (data: IAnalysisSimulatorListRq, thunkAPI) => {
-    const { rejectWithValue } = thunkAPI;
     try {
-      const queryString = qs.stringify(data.searchParams, {
-        addQueryPrefix: true,
-        arrayFormat: 'repeat'
-      });
+      const queryString = qs.stringify(data.searchParams, QS_OPTION);
       const res: any = await axios.get(
         `/api/anls/smlt/list${queryString}&page=${data.page}`
       );
 
-      console.log('>>', res.data);
-
       return res.data;
     } catch (error) {
       thunkAPI.dispatch(
-        isError({
-          errorCode: ERROR_MESSAGE.code,
-          errorMessage: ERROR_MESSAGE.message,
-          isHistoryBack: false,
-          isRefresh: false
+        openModal({
+          header: MODAL_TITLE.error,
+          body: MODAL_DESC.error
         })
       );
-      return rejectWithValue(error);
     }
   }
 );
@@ -45,21 +32,16 @@ export const getSmltList = createAsyncThunk(
 export const getSmltLog = createAsyncThunk(
   'analysis/getSmltLog',
   async (id: string, thunkAPI) => {
-    const { rejectWithValue } = thunkAPI;
-
     try {
       const res: any = await axios.get(`/api/anls/smlt/hist/${id}`);
       return res.data;
     } catch (error) {
       thunkAPI.dispatch(
-        isError({
-          errorCode: ERROR_MESSAGE.code,
-          errorMessage: ERROR_MESSAGE.message,
-          isHistoryBack: false,
-          isRefresh: false
+        openModal({
+          header: MODAL_TITLE.error,
+          body: MODAL_DESC.error
         })
       );
-      return rejectWithValue(error);
     }
   }
 );
@@ -68,21 +50,16 @@ export const getSmltLog = createAsyncThunk(
 export const getSmltDetail = createAsyncThunk(
   'analysis/getSmltDetail',
   async (id: string, thunkAPI) => {
-    const { rejectWithValue } = thunkAPI;
-
     try {
       const res: any = await axios.get(`/api/anls/smlt/detail/${id}`);
       return res.data;
     } catch (error) {
       thunkAPI.dispatch(
-        isError({
-          errorCode: ERROR_MESSAGE.code,
-          errorMessage: ERROR_MESSAGE.message,
-          isHistoryBack: false,
-          isRefresh: false
+        openModal({
+          header: MODAL_TITLE.error,
+          body: MODAL_DESC.error
         })
       );
-      return rejectWithValue(error);
     }
   }
 );
@@ -91,21 +68,16 @@ export const getSmltDetail = createAsyncThunk(
 export const getSmltStcs = createAsyncThunk(
   'analysis/getSmltStcs',
   async (id: string, thunkAPI) => {
-    const { rejectWithValue } = thunkAPI;
-
     try {
       const res: any = await axios.get(`/api/anls/smlt/stcs/${id}`);
       return res.data;
     } catch (error) {
       thunkAPI.dispatch(
-        isError({
-          errorCode: ERROR_MESSAGE.code,
-          errorMessage: ERROR_MESSAGE.message,
-          isHistoryBack: false,
-          isRefresh: false
+        openModal({
+          header: MODAL_TITLE.error,
+          body: MODAL_DESC.error
         })
       );
-      return rejectWithValue(error);
     }
   }
 );

src/containers/analysis/history/AnalysisHistoryContainer.js

@@ -9,21 +9,15 @@ import { CustomMainLayout } from '../../../components/layout/CustomMainLayout';
 import { clientSelectHstryGroup } from '@src/_redux/features/analysis/history/historySlice';
 import { getHstryList } from '@src/_redux/features/analysis/history/historyThunk';
 import FlightPlanGroupGrid from '../../../components/basis/flight/plan/FlightPlanGroupGrid';
-import {
-  Col,
-  Row,
-  Button,
-  Modal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter
-} from '@component/ui';
+import { Col, Row } from '@component/ui';
 import { clientRoupSelect } from '@src/_redux/features/laanc/laancSlice';
 import { MessageErrorModal } from '../../../components/message/MessageErrorModal';
 import {
   getGroupList,
   getJoinGroupList
 } from '@src/_redux/features/basis/group/groupThunk';
+import { openModal } from '@src/_redux/features/comn/message/messageSlice';
+import { MODAL_DESC, MODAL_TITLE } from '@src/configs/msgConst';
 
 export const AnalysisHistoryContainer = props => {
   const dispatch = useDispatch();
@@ -61,16 +55,6 @@ export const AnalysisHistoryContainer = props => {
   // user: 로그인한 user 정보
   const { user } = useSelector(state => state.authState, shallowEqual);
 
-  /**
-   * Modal 초기값 state
-   */
-  const [modal, setModal] = useState({
-    isOpen: false,
-    title: '',
-    desc: '',
-    color: ''
-  });
-
   /**
    * 검색조건 초기값
    */
@@ -206,19 +190,19 @@ export const AnalysisHistoryContainer = props => {
   // 검색 버튼 click handler
   const handlerSearch = () => {
     if (!params.stDate || !params.endDate) {
-      setModal({
-        isOpen: true,
-        title: '필수값 입력 오류',
-        desc: '올바른 일자를 입력해 주세요.',
-        color: 'modal-danger'
-      });
+      dispatch(
+        openModal({
+          header: MODAL_TITLE.valid,
+          body: '올바른 일자를' + MODAL_DESC.valid
+        })
+      );
     } else if (!params.groupId) {
-      setModal({
-        isOpen: true,
-        title: '필수값 입력 오류',
-        desc: '그룹 선택 해주세요.',
-        color: 'modal-danger'
-      });
+      dispatch(
+        openModal({
+          header: MODAL_TITLE.valid,
+          body: '그룹을 선택해주세요.'
+        })
+      );
     } else {
       dispatch(clientRoupSelect({ ...params }));
       dispatch(getHstryList({ searchParams: params, page: 1 }));
@@ -326,29 +310,6 @@ export const AnalysisHistoryContainer = props => {
           </Col>
         </Row>
       </div>
-      <div className='vertically-centered-modal'>
-        <Modal
-          isOpen={modal.isOpen}
-          toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
-          modalClassName={modal.color}
-          className='modal-dialog-centered'
-        >
-          <ModalHeader
-            toggle={() => setModal({ ...modal, isOpen: !modal.isOpen })}
-          >
-            {modal.title}
-          </ModalHeader>
-          <ModalBody>{modal.desc}</ModalBody>
-          <ModalFooter>
-            <Button
-              color='danger'
-              onClick={() => setModal({ ...modal, isOpen: !modal.isOpen })}
-            >
-              확인
-            </Button>{' '}
-          </ModalFooter>
-        </Modal>
-      </div>
       <MessageErrorModal />
     </CustomMainLayout>
   );