Laanc Modal 파일 추가

src/components/laanc/LaancModal.js

@@ -0,0 +1,44 @@
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+export const LaancModal = props => {
+  return (
+    <div className='vertically-centered-modal'>
+      <Modal
+        isOpen={props.modal.isOpen}
+        toggle={() =>
+          props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
+        }
+        modalClassName='modal-danger'
+        className='modal-dialog-centered'
+      >
+        <ModalHeader
+          toggle={() =>
+            props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
+          }
+        >
+          {props.modal.title}
+        </ModalHeader>
+        <ModalBody>{props.modal.desc}</ModalBody>
+        <ModalFooter>
+          <Button
+            color='danger'
+            onClick={() =>
+              props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
+            }
+          >
+            취소
+          </Button>
+          <Button
+            onClick={() =>
+              props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
+            }
+          >
+            {props.modal.type === 'fltMethod'
+              ? '처리부서안내 바로가기'
+              : '드론원스톱 바로가기'}
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </div>
+  );
+};

src/views/laanc/LaancStep1.js

@@ -16,6 +16,8 @@ import {
   Info
 } from 'react-feather';
 import { ErrorModal } from '../../components/modal/ErrorModal';
+import { InfoModal } from '../../components/modal/InfoModal';
+import { LaancModal } from '../../components/laanc/LaancModal';
 import moment from 'moment';
 import {
   Row,
@@ -65,12 +67,22 @@ export default function LaancStep1({
   const [popoverSchFltStDt, setPopoverSchFltStDt] = useState(false);
   const [popoverSchFltEndDt, setPopoverSchFltEndDt] = useState(false);
 
-  const [modal2, setModal2] = useState({
+  const [isErrorModal, setIsErrorModal] = useState({
     isOpen: false,
     title: '',
     desc: ''
   });
-
+  const [isInfoModal, setIsInfoModal] = useState({
+    isOpen: false,
+    title: '',
+    desc: ''
+  });
+  const [isLaancModal, setIsLaancModal] = useState({
+    isOpen: false,
+    title: '',
+    desc: '',
+    type: ''
+  });
   useEffect(() => {
     // URL 쿼리 파라미터 중 'map' 값을 가져옵니다.
     if (!currentParm) setCenteredModal(mapParam != 'true' ? false : true);
@@ -123,7 +135,7 @@ export default function LaancStep1({
   // 날짜 선택 핸들러
   const handleOpenFlatpickr = () => {
     if (data.areaList[0].coordList[0].lat === 0) {
-      setModal2({
+      setIsInfoModal({
         isOpen: true,
         title: '비행 구역 설정',
         desc: '비행 구역 설정을 먼저 설정 해 주세요'
@@ -138,7 +150,7 @@ export default function LaancStep1({
     switch (type) {
       case 'fltElev':
         if (parseInt(value.replace('/^0+/', 'm', ''), 10) <= 150) {
-          setModal2({
+          setIsErrorModal({
             isOpen: true,
             title: '고도 알림',
             desc: (
@@ -155,7 +167,7 @@ export default function LaancStep1({
             name: 'fltElev',
             value: 0
           });
-          setModal2({
+          setIsErrorModal({
             isOpen: true,
             title: '고도 재설정 알림',
             desc: (
@@ -176,7 +188,7 @@ export default function LaancStep1({
             name: 'fltMethod',
             value: ''
           });
-          setModal2({
+          setIsLaancModal({
             isOpen: true,
             title: '군집 비행 목적',
             desc: (
@@ -184,7 +196,8 @@ export default function LaancStep1({
                 군집 비행의 경우 담당자와 협의가 필요합니다. <br />
                 아래 링크를 통해 담당자와 협의 부탁드립니다.
               </>
-            )
+            ),
+            type: 'fltMethod'
           });
         }
     }
@@ -717,7 +730,9 @@ export default function LaancStep1({
           다음
         </Button>
       </ModalFooter>
-      <ErrorModal modal={modal2} setModal={setModal2} />
+      <ErrorModal modal={isErrorModal} setModal={setIsErrorModal} />
+      <InfoModal modal={isInfoModal} setModal={setIsInfoModal} />
+      <LaancModal modal={isLaancModal} setModal={setIsLaancModal} />
     </>
   );
 }