승인 제어 alert 제거 및 modal 추가

src/containers/basis/flight/aprv/FlightPlanAprvContainer.js

@@ -10,6 +10,7 @@ import * as FlightAction from '../../../../modules/basis/flight/actions/basisFli
 import {useHistory} from 'react-router-dom';
 import FlightPlanGroupGrid from '../../../../components/basis/flight/plan/FlightPlanGroupGrid';
 import { JOIN_LIST } from '../../../../modules/basis/group/actions/basisGroupAction';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
 
 const initSearchData = {
     schFltStDt: moment().set({'date': 1, 'h': 0, 'm': 0, 's': 0}).format('YYYY-MM-DD HH:mm:ss'),
@@ -28,6 +29,12 @@ const FlightPlanAprvContainer = () => {
   const {list: aprvList, aprvProc, selectGroup} = useSelector(state => state.flightState);
   const { joinList, joinListCount } = useSelector(state => state.groupState);
   const { user } = useSelector(state => state.authState, shallowEqual);
+  const [modal, setModal] = useState({
+    isOpen: false,
+    title: '',
+    desc: '',
+    color: ''
+  })
 
     const handleGroupSelect = ({ groupId, groupNm, groupAuthCd }) => {
       // 권한 상관 없이 모두 조회 가능
@@ -117,8 +124,16 @@ const FlightPlanAprvContainer = () => {
         // notAprov, aprv
       //  console.log(type, selPlanSnoList, e)
         if (!selPlanSnoList || selPlanSnoList.length < 1) {
-            alert('비행계획서를 선택해주세요.');
+            // alert('비행계획서를 선택해주세요.');
+            // return;
+            setModal({
+              isOpen: true,
+              title: '비행 계획 승인',
+              desc: '비행계획서를 선택해주세요.',
+              color: 'modal-danger'
+            })
             return;
+  
         }
         ;
         const sendData = {
@@ -186,7 +201,34 @@ const FlightPlanAprvContainer = () => {
                     </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>
+
         </CustomMainLayout>
+
+        
     )
 }