운항과 데이터블록 단건 임시표출

src/containers/flight/OperationApprovalsContainer.js

@@ -34,6 +34,7 @@ import {
   Table
 } from '@component/ui';
 import { FiUsers, FiFileText } from 'react-icons/fi';
+import mapboxgl from 'mapbox-gl';
 
 export default function OperationApprovalsContainer({ mode }) {
   const dispatch = useDispatch();
@@ -73,6 +74,9 @@ export default function OperationApprovalsContainer({ mode }) {
   const savedRightMenuRef = useRef(null);
   const [clientX, setClientX] = useState(0);
 
+  // 비행구역 데이터블록
+  const [dataBlocks, setDataBlocks] = useState([]);
+
   const previewGeo2 = {
     type: 'FeatureCollection',
     features: []
@@ -333,7 +337,61 @@ export default function OperationApprovalsContainer({ mode }) {
 
       // mapObject.setPaintProperty('waypoint', 'circle-radius', 10);
       mapObject?.getSource('preview').setData(previewGeo2);
+
+      handlerInfoWindow(areaCoordList);
+    }
+  };
+
+  const handlerInfoWindow = data => {
+    if (dataBlocks.length > 0) {
+      dataBlocks?.map(block => {
+        block.remove();
+      });
     }
+
+    data.map((apply, idx) => {
+      const divCd =
+        apply.fltElevMax === 120
+          ? '원추'
+          : apply.fltElevMax > 45 && apply.fltElevMax < 100
+          ? '수평'
+          : '-';
+
+      const content =
+        '<div class="tooltip-box">' +
+        '<div class="tooltip-ti">' +
+        '<span>' +
+        apply?.applyNo +
+        '</span>' +
+        '</div>' +
+        '<div class="tooltip-txt">' +
+        '<div class="tooltip-txt-list">' +
+        '<span>' +
+        '비행구역' +
+        (idx + 1) +
+        ' / ' +
+        '주소-' +
+        ' / ' +
+        divCd +
+        '</span>' +
+        '</div>' +
+        '</div>' +
+        '</div>';
+
+      if (mapObject) {
+        const dataBlock = new mapboxgl.Popup({
+          offset: [0, 0],
+          closeButton: false,
+          closeOnClick: false,
+          closeOnMove: false
+        })
+          .setLngLat({ lng: apply?.lon, lat: apply?.lat })
+          .setHTML(content)
+          .addTo(mapObject);
+
+        setDataBlocks(prev => [...prev, dataBlock]);
+      }
+    });
   };
 
   const handlerLogout = async () => {