공통모달 cstmrService 컴포넌트 적용

src/components/laanc/map/LaancDrawControl.js

@@ -23,7 +23,6 @@ import Constants from 'mapbox-gl-draw-circle/node_modules/@mapbox/mapbox-gl-draw
 import { openModal } from '@src/_redux/features/comn/message/messageSlice';
 import { MODAL_BODY, MODAL_HEADER } from '@src/configs/msgConst';
 
-const ErrorModal = lazy(() => import('../../modal/ErrorModal'));
 export default function LaancDrawControl(props) {
   const dispatch = useDispatch();
   const drawObj = props.drawObj;

src/components/layout/CustomDetailLayout.js

@@ -1,9 +1,6 @@
 import { Button } from '@component/ui';
 import { useHistory } from 'react-router-dom';
 import { X } from 'react-feather';
-import { MessageErrorModal } from '../message/MessageErrorModal';
-import { MessageInfoModal } from '../message/MessageInfoModal';
-import { MessageModal } from '../message/MessageModal';
 
 export const CustomDetailLayout = ({ children, ...props }) => {
   const history = useHistory();
@@ -26,9 +23,6 @@ export const CustomDetailLayout = ({ children, ...props }) => {
       </div>
 
       {children}
-      {/* <MessageErrorModal />
-      <MessageInfoModal />
-      <MessageModal /> */}
     </div>
   );
 };

src/components/layout/CustomMainLayout.js

@@ -1,7 +1,3 @@
-import { MessageErrorModal } from '../message/MessageErrorModal';
-import { MessageInfoModal } from '../message/MessageInfoModal';
-import { MessageModal } from '../message/MessageModal';
-
 export const CustomMainLayout = ({ children, ...props }) => {
   return (
     <div className='pal-card'>
@@ -11,9 +7,6 @@ export const CustomMainLayout = ({ children, ...props }) => {
         </div>
       </div>
       {children}
-      {/* <MessageErrorModal />
-      <MessageInfoModal />
-      <MessageModal /> */}
     </div>
   );
 };

src/containers/basis/group/BasisGroupApprovalContainer.js

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import { Button } from '@component/ui';
 import { BasisGroupApprovalSearch } from '../../../components/basis/group/BasisGroupApprovalSearch';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
-import InfoModal from '../../../components/modal/InfoModal';
 import { BasisContainer } from '../BasisContainer';
 import { BasisDataGrid } from '../../../components/basis/BasisDataGrid';
 import {
@@ -13,6 +12,7 @@ import {
   updateAprv
 } from '@src/_redux/features/basis/group/groupThunk';
 import { clientSelectAprvGroup } from '@src/_redux/features/basis/group/groupSlice';
+import { openModal } from '@src/_redux/features/comn/message/messageSlice';
 
 export const BasisGroupApprovalContainer = ({ user }) => {
   const dispatch = useDispatch();
@@ -50,13 +50,6 @@ export const BasisGroupApprovalContainer = ({ user }) => {
     desc: ''
   });
 
-  // info 모달
-  const [infoModal, setInfoModal] = useState({
-    isOpen: false,
-    title: '',
-    desc: ''
-  });
-
   // 그룹목록 컬럼명
   const column = [
     {
@@ -273,11 +266,12 @@ export const BasisGroupApprovalContainer = ({ user }) => {
         );
       }
     } else {
-      setInfoModal({
-        isOpen: true,
-        title: '권한 확인',
-        desc: '승인관리 확인을 위해서는 운영자 권한이 필요합니다. 운영자에게 권한을 부여받고 다시 시도해 주세요.'
-      });
+      dispatch(
+        openModal({
+          header: '권한 확인',
+          body: '승인관리 확인을 위해서는 운영자 권한이 필요합니다. 운영자에게 권한을 부여받고 다시 시도해 주세요.'
+        })
+      );
       return;
     }
   };
@@ -341,7 +335,7 @@ export const BasisGroupApprovalContainer = ({ user }) => {
     setModal({
       isOpen: true,
       title: '승인 취소',
-      desc: '해당 사용자를 승인취소 처리 하시겠습니까?'
+      desc: '해당 사용자를 승인취소 처리하시겠습니까?'
     });
 
     setSaveData({
@@ -393,7 +387,6 @@ export const BasisGroupApprovalContainer = ({ user }) => {
             handlerConfirm={handlerAprvSave}
             color='primary'
           />
-          <InfoModal modal={infoModal} setModal={setInfoModal} />
         </>
       }
     />

src/containers/cstmrService/faq/FaqContainer.js

@@ -6,9 +6,9 @@ import * as Actions from '../../../_redux/features/customerService/faq/faqThunk'
 import FaqSearchBox from '../../../components/cstmrService/faq/FaqSearchBox';
 import FaqForm from '../../../components/cstmrService/faq/FaqForm';
 import FaqTab from '../../../components/cstmrService/faq/FaqTab';
-import ErrorModal from '../../../components/modal/ErrorModal';
-import InfoModal from '../../../components/modal/InfoModal';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
+import { MODAL_BODY, MODAL_HEADER } from '@src/configs/msgConst';
+import { openModal } from '@src/_redux/features/comn/message/messageSlice';
 const tabList = [
   {
     title: '전체',
@@ -59,16 +59,6 @@ export default function FaqContainer() {
   const [isOpenFormModal, setIsOpenFormModal] = useState(false);
   // validation Modal
   const [validationModal, setValidationModal] = useState({
-    errorType: {
-      isOpen: false,
-      desc: '',
-      title: '필수값 입력 오류'
-    },
-    successType: {
-      isOpen: false,
-      desc: '',
-      title: '필수값 입력 오류'
-    },
     confirmType: {
       isOpen: false,
       desc: '',
@@ -84,6 +74,16 @@ export default function FaqContainer() {
     handlerGetFaqList();
   }, [activeTab]);
 
+  // 단순 메시지 표출 모달
+  const handlerOpenModal = (header, body) => {
+    dispatch(
+      openModal({
+        header: header,
+        body: body
+      })
+    );
+  };
+
   // 질문 목록 가져오는 handler
   const handlerGetFaqList = () => {
     dispatch(
@@ -136,26 +136,12 @@ export default function FaqContainer() {
   // 질문 등록, 수정 Submit handler
   const handlerSubmitForm = () => {
     if (!formData.title) {
-      setValidationModal({
-        ...validationModal,
-        errorType: {
-          ...validationModal.errorType,
-          isOpen: true,
-          desc: '제목을 입력해주세요.'
-        }
-      });
+      handlerOpenModal(MODAL_HEADER.valid, '제목을' + MODAL_BODY.valid);
       return;
     }
 
     if (!formData.content) {
-      setValidationModal({
-        ...validationModal,
-        errorType: {
-          ...validationModal.errorType,
-          isOpen: true,
-          desc: '내용을 입력해주세요.'
-        }
-      });
+      handlerOpenModal(MODAL_HEADER.valid, '내용을' + MODAL_BODY.valid);
       return;
     }
 
@@ -187,14 +173,8 @@ export default function FaqContainer() {
 
     setIsOpenFormModal(false);
     setFormData(initFormData);
-    setValidationModal({
-      ...validationModal,
-      successType: {
-        title: formMode === 'create' ? '등록' : '수정',
-        isOpen: true,
-        desc: `${formMode === 'create' ? '등록' : '수정'}되었습니다.`
-      }
-    });
+    const title = formMode === 'create' ? '등록' : '수정';
+    handlerOpenModal(title, 'title' + '되었습니다.');
   };
 
   // 수정하기 button click handler
@@ -330,28 +310,6 @@ export default function FaqContainer() {
         user={user}
         formMode={formMode}
       />
-      <ErrorModal
-        modal={validationModal.errorType}
-        setModal={val => {
-          setValidationModal({
-            ...validationModal,
-            errorType: {
-              ...val
-            }
-          });
-        }}
-      />
-      <InfoModal
-        modal={validationModal.successType}
-        setModal={val => {
-          setValidationModal({
-            ...validationModal,
-            successType: {
-              ...val
-            }
-          });
-        }}
-      />
       <ConfirmModal
         modal={validationModal.confirmType}
         setModal={val => {

src/containers/cstmrService/inquiry/AdminInquiryContainer.js

@@ -10,9 +10,9 @@ import { clientAdminDetailInital } from '@src/_redux/features/customerService/qn
 import QnaSearchBox from '../../../components/cstmrService/inquiry/QnaSearchBox';
 import QnaGrid from '../../../components/cstmrService/inquiry/QnaGrid';
 import QnaDetail from '../../../components/cstmrService/inquiry/QnaDetail';
-import InfoModal from '../../../components/modal/InfoModal';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
 import { HOST } from '@src/configs/constants';
+import { openModal } from '@src/_redux/features/comn/message/messageSlice';
 
 const initalSearch = {
   category: '',
@@ -29,16 +29,6 @@ export default function AdminInquiryContainer() {
   const [adminDetailForm, setAdminDetailForm] = useState({});
   // 수정 validation modal state
   const [validationModal, setValidationModal] = useState({
-    errorType: {
-      isOpen: false,
-      desc: '',
-      title: '필수값 입력 오류'
-    },
-    successType: {
-      isOpen: false,
-      desc: '',
-      title: '필수값 입력 오류'
-    },
     confirmType: {
       isOpen: false,
       desc: '',
@@ -71,6 +61,16 @@ export default function AdminInquiryContainer() {
     }
   }, [isDetailModal]);
 
+  // 단순 메시지 표출 모달
+  const handlerOpenModal = (header, body) => {
+    dispatch(
+      openModal({
+        header: header,
+        body: body
+      })
+    );
+  };
+
   // 관리자 문의 목록 조회
   const handlerGetQnaList = () => {
     const { category, anserStatus, createUserNm } = searchData;
@@ -134,14 +134,7 @@ export default function AdminInquiryContainer() {
       })
     );
     setIsDetailModal(false);
-    setValidationModal({
-      ...validationModal,
-      successType: {
-        title: '저장',
-        isOpen: true,
-        desc: '저장 되었습니다.'
-      }
-    });
+    handlerOpenModal('저장', '저장 되었습니다.');
   };
 
   // Qna 삭제 Confirm
@@ -187,17 +180,6 @@ export default function AdminInquiryContainer() {
         handlerFileDownload={handlerFileDownload}
         handlerDeleteConfirQna={handlerDeleteConfirQna}
       />
-      <InfoModal
-        modal={validationModal.successType}
-        setModal={val => {
-          setValidationModal({
-            ...validationModal,
-            successType: {
-              ...val
-            }
-          });
-        }}
-      />
       <ConfirmModal
         modal={validationModal.confirmType}
         setModal={val => {

src/containers/cstmrService/inquiry/UserInquiryContainer.js

@@ -12,9 +12,9 @@ import {
 } from '@src/_redux/features/customerService/qna/qnaThunk';
 import { clientUserDetailInital } from '@src/_redux/features/customerService/qna/qnaSlice';
 import InquiryWrite from '../../../components/cstmrService/inquiry/InquiryWrite';
-import InfoModal from '../../../components/modal/InfoModal';
-import ErrorModal from '../../../components/modal/ErrorModal';
 import { ConfirmModal } from '../../../components/modal/ConfirmModal';
+import { openModal } from '@src/_redux/features/comn/message/messageSlice';
+import { MODAL_BODY, MODAL_HEADER } from '@src/configs/msgConst';
 
 export default function UserInquiryContainer({ memberName }) {
   const dispatch = useDispatch();
@@ -40,16 +40,6 @@ export default function UserInquiryContainer({ memberName }) {
 
   // 등록 validation modal state
   const [validationModal, setValidationModal] = useState({
-    errorType: {
-      isOpen: false,
-      desc: '',
-      title: '필수값 입력 오류'
-    },
-    successType: {
-      isOpen: false,
-      desc: '',
-      title: '필수값 입력 오류'
-    },
     confirmType: {
       isOpen: false,
       desc: '',
@@ -65,6 +55,16 @@ export default function UserInquiryContainer({ memberName }) {
     if (detail) setInquiryForm({ ...detail });
   }, [detail]);
 
+  // 단순 메시지 표출 모달
+  const handlerOpenModal = (header, body) => {
+    dispatch(
+      openModal({
+        header: header,
+        body: body
+      })
+    );
+  };
+
   // 줄바꿈 문자를 <br>로 변환
   const textLineBreaks = text => {
     const lines = text.split(/\r?\n/);
@@ -185,44 +185,17 @@ export default function UserInquiryContainer({ memberName }) {
       inquiryForm;
 
     if (!contact) {
-      setValidationModal({
-        ...validationModal,
-        errorType: {
-          title: '필수값 입력 오류',
-          isOpen: true,
-          desc: '연락처를 입력해주세요.'
-        }
-      });
+      handlerOpenModal(MODAL_HEADER.valid, '연락처를' + MODAL_BODY.valid);
+
       return;
     } else if (!title) {
-      setValidationModal({
-        ...validationModal,
-        errorType: {
-          title: '필수값 입력 오류',
-          isOpen: true,
-          desc: '제목을 입력해주세요.'
-        }
-      });
+      handlerOpenModal(MODAL_HEADER.valid, '제목을' + MODAL_BODY.valid);
       return;
     } else if (!content) {
-      setValidationModal({
-        ...validationModal,
-        errorType: {
-          title: '필수값 입력 오류',
-          isOpen: true,
-          desc: '내용을 입력해주세요.'
-        }
-      });
+      handlerOpenModal(MODAL_HEADER.valid, '내용을' + MODAL_BODY.valid);
       return;
     } else if (content.length > 300) {
-      setValidationModal({
-        ...validationModal,
-        errorType: {
-          title: '필수값 입력 오류',
-          isOpen: true,
-          desc: '300자 이하로 작성해주세요.'
-        }
-      });
+      handlerOpenModal(MODAL_HEADER.valid, '300자 이하로 작성해 주세요.');
       return;
     } else if (fileInfos.length > 0) {
       const allowedExtensions = ['jpg', 'png', 'jpeg', 'gif'];
@@ -234,26 +207,12 @@ export default function UserInquiryContainer({ memberName }) {
       const maxFileSize = 3 * 1024 * 1024; // 3MB
 
       if (!allowedExtensions.includes(fileExtension)) {
-        setValidationModal({
-          ...validationModal,
-          errorType: {
-            title: '파일 형식 오류',
-            isOpen: true,
-            desc: '파일 형식을 다시 확인 해주십시요.'
-          }
-        });
+        handlerOpenModal('파일 형식 오류', '파일 형식을 다시 확인해 주세요.');
         return;
       }
 
       if (fileInfos[0].size > maxFileSize) {
-        setValidationModal({
-          ...validationModal,
-          errorType: {
-            title: '파일 크기 오류',
-            isOpen: true,
-            desc: '최대 허용 용량을 초과 하였습니다.'
-          }
-        });
+        handlerOpenModal('파일 크기 오류', '최대 허용 용량을 초과하였습니다.');
         return;
       }
     }
@@ -331,29 +290,6 @@ export default function UserInquiryContainer({ memberName }) {
         handlerFileChange={handlerFileChange}
         handlerFileClear={handlerFileClear}
       />
-
-      <InfoModal
-        modal={validationModal.successType}
-        setModal={val => {
-          setValidationModal({
-            ...validationModal,
-            successType: {
-              ...val
-            }
-          });
-        }}
-      />
-      <ErrorModal
-        modal={validationModal.errorType}
-        setModal={val => {
-          setValidationModal({
-            ...validationModal,
-            errorType: {
-              ...val
-            }
-          });
-        }}
-      />
       <ConfirmModal
         modal={validationModal.confirmType}
         setModal={val => {

src/containers/laanc/LaancPlanContainer.js

@@ -1,5 +1,4 @@
 import { lazy, useEffect, useState, Suspense } from 'react';
-import LaancModal from '../../components/laanc/LaancModal';
 import { initFlightBasState } from '@src/_redux/features/laanc/laancState';
 import { Modal } from '@component/ui';
 import { clientInitAreaDetailInitial } from '../../modules/laanc/actions';
@@ -9,7 +8,6 @@ import { clientDrawTypeChange } from '@src/_redux/features/control/map/mapSlice'
 const LaancStep1 = lazy(() => import('../../components/laanc/step/LaancStep1'));
 const LaancStep2 = lazy(() => import('../../components/laanc/step/LaancStep2'));
 const LaancStep3 = lazy(() => import('../../components/laanc/step/LaancStep3'));
-const ErrorModal = lazy(() => import('../../components/modal/ErrorModal'));
 
 export default function LaancPlanContainer({
   currentParm,
@@ -27,20 +25,6 @@ export default function LaancPlanContainer({
   // 비행 구역 보달
   const [centeredModal, setCenteredModal] = useState(false);
 
-  // 모달
-  const [isErrorModal, setIsErrorModal] = useState({
-    isOpen: false,
-    title: '',
-    desc: ''
-  });
-  const [isLaancModal, setIsLaancModal] = useState({
-    isOpen: false,
-    title: '',
-    desc: '',
-    type: '',
-    url: ''
-  });
-
   // 로그인 회원 정보 세팅
   useEffect(() => {
     if (user) {
@@ -115,10 +99,6 @@ export default function LaancPlanContainer({
             )}
           </Suspense>
         </Modal>
-        <Suspense fallback=''>
-          <ErrorModal modal={isErrorModal} setModal={setIsErrorModal} />
-          <LaancModal modal={isLaancModal} setModal={setIsLaancModal} />
-        </Suspense>
       </div>
     </>
   );