laanc 비행구역 허용고도0m 모달 표출

src/components/laanc/map/LaancAreaMap.js

@@ -56,7 +56,11 @@ export default function LaancAreaMap({
   );
 
   const [number, setNumber] = useState(0);
-  const [modal, setModal] = useState(false);
+  const [modal, setModal] = useState({
+    title: '',
+    desc: '',
+    isOpen: false
+  });
 
   const [detailLayer, setDetailLayer] = useState();
 

src/components/map/mapbox/draw/LaancDrawControl.js

@@ -79,6 +79,17 @@ export const LaancDrawControl = props => {
     const type = handlerReturnMode(drawObj.getMode());
     const obj = state[type?.toLowerCase()];
 
+    // const features = mapObject.queryRenderedFeatures(e.point, {
+    //   layers: ['maine']
+    // });
+    // if (features.length > 0 && obj) {
+    //   if (features[0].properties.description.includes('김포공항 비행불가')) {
+    //     if (!obj?.properties?.isUnable) {
+    //       drawObj.setFeatureProperty(obj.id, 'isUnable', true);
+    //     }
+    //   }
+    // }
+
     if (type && obj) {
       const feature = drawObj.get(obj.id);
       const coordinates = feature.geometry.coordinates;
@@ -236,8 +247,10 @@ export const LaancDrawControl = props => {
 
   // 모든 비정상상황 체크
   const handlerAbnormalityCheck = (data, mode) => {
-    const isBreak = handlerIsSpecialFlight(data, mode);
+    const isBreak1 = handlerIsSpecialFlight(data, mode);
-    if (isBreak) return;
+    const isBreak2 = handlerIsUnableArea(data, mode);
+    if (isBreak1) return;
+    if (isBreak2) return;
 
     const initCoord =
       mode === 'LINE'
@@ -252,7 +265,7 @@ export const LaancDrawControl = props => {
     handlerSaveAreaInfo(datas);
   };
 
-  // 현재 그려진 모든 도형에 대한 비가시권 검사
+  // 비가시권 검사
   const handlerIsSpecialFlight = (data, mode) => {
     console.log('specialFlight');
     let isBreak = false;
@@ -273,7 +286,66 @@ export const LaancDrawControl = props => {
     }
 
     if (isBreak) {
-      props.setModal(true);
+      props.setModal({
+        title: '특별 비행 신청',
+        desc: (
+          <>
+            육안으로 기체 확인이 불가능 합니다.
+            <br /> 가시권 밖 범위는 특별비행 신청을 진행하셔야 합니다. <br />
+            드론원스톱을 통해서 신청해 주시기 바랍니다.
+          </>
+        ),
+        isOpen: true
+      });
+      handlerRemoveError(data.id);
+      return true;
+    } else {
+      props.handlerSaveCheck(true);
+      return false;
+    }
+  };
+
+  // 비행불가지역 검사
+  const handlerIsUnableArea = (data, mode) => {
+    console.log('unableArea');
+    let isBreak = false;
+
+    if (mode === 'CIRCLE') {
+      const point = mapObject.project(data.coord);
+      const maine = mapObject.queryRenderedFeatures(point, {
+        layers: ['maine']
+      });
+
+      if (maine.length > 0) {
+        if (maine[0].properties.description.includes('김포공항 비행불가')) {
+          isBreak = true;
+          // break;
+        }
+      }
+    } else {
+      const coord = mode === 'LINE' ? data.coord : data.coord[0];
+
+      for (let i = 0; i < coord.length; i++) {
+        const point = mapObject.project(coord[i]);
+        const maine = mapObject.queryRenderedFeatures(point, {
+          layers: ['maine']
+        });
+
+        if (maine.length > 0) {
+          if (maine[0].properties.description.includes('김포공항 비행불가')) {
+            isBreak = true;
+            break;
+          }
+        }
+      }
+    }
+
+    if (isBreak) {
+      props.setModal({
+        title: '비행 불가 지역',
+        desc: <>비행불가!</>,
+        isOpen: true
+      });
       handlerRemoveError(data.id);
       return true;
     } else {

src/components/map/mapbox/draw/LaancModal.js

@@ -8,23 +8,22 @@ export default function LaancModal({ modal, handler }) {
   return (
     <div className='vertically-centered-modal'>
       <Modal
-        isOpen={modal}
+        isOpen={modal.isOpen}
         toggle={handler}
         modalClassName={'modal-primary'}
         className='modal-dialog-centered'
       >
-        <ModalHeader toggle={handler}>특별 비행 신청</ModalHeader>
+        <ModalHeader toggle={handler}>{modal.title}</ModalHeader>
-        <ModalBody>
+        <ModalBody>{modal.desc}</ModalBody>
-          육안으로 기체 확인이 불가능 합니다.<br/> 가시권 밖 범위는 특별비행 신청을
-          진행하셔야 합니다. <br/>드론원스톱을 통해서 신청해 주시기 바랍니다.
-        </ModalBody>
         <ModalFooter>
           <Button color='secondary' onClick={handler}>
             확인
           </Button>
-          <Button color='primary' onClick={handlerDroneOneStop}>
+          {modal.title === '특별 비행 신청' ? (
-            드론원스톱 바로가기
+            <Button color='primary' onClick={handlerDroneOneStop}>
-          </Button>
+              드론원스톱 바로가기
+            </Button>
+          ) : null}
         </ModalFooter>
       </Modal>
     </div>