비행구역 데이터블록 마우스오버로 수정

src/containers/flight/OperationApprovalsContainer.js

@@ -428,6 +428,9 @@ export default function OperationApprovalsContainer({ mode }) {
 
         const circle = InitFeature('Polygon', 'CIRCLE');
         circle.properties.center = [area.lon, area.lat];
+        circle.properties.limitZoneNm = area.limitZoneNm || '-';
+        circle.properties.applyNo = area.applyNo;
+        circle.properties.zoneNo = area.zoneNo;
         circle.geometry.coordinates = circleCoords;
         circle.properties = {
           ...circle.properties,
@@ -451,8 +454,46 @@ export default function OperationApprovalsContainer({ mode }) {
       handlerFitBounds(mapObject, fitZoomPaths, 400, 'POLYGON', 'flight');
 
       if (areaCoordList.length !== 1 || !areaCoordList[0]?.key) {
-        handlerInfoWindow(areaCoordList);
         mapObject?.getSource('operationLayer')?.setData(operationLayer);
+        let dataBlock = null;
+        mapObject?.on('mousemove', 'polygon-flight', e => {
+          if (dataBlock) {
+            dataBlock.remove();
+          }
+          const data = e.features[0].properties;
+          const lnglat = JSON.parse(data?.center);
+
+          const content = `
+                <div class="tooltip-box">
+                  <div class="tooltip-ti">
+                    <span>${data?.applyNo}</span>
+                  </div>
+                  <div class="tooltip-txt">
+                    <div class="tooltip-txt-list">
+                      <span>비행구역 ${data?.zoneNo} / 주소- / ${data.limitZoneNm}</span>
+                    </div>
+                  </div>
+                </div>
+                `;
+
+          if (mapObject) {
+            dataBlock = new mapboxgl.Popup({
+              anchor: 'bottom-left',
+              offset: [20, -20],
+              closeButton: false,
+              closeOnClick: false,
+              closeOnMove: false
+            })
+              .setLngLat({ lng: lnglat[0], lat: lnglat[1] })
+              .setHTML(content)
+              .addTo(mapObject);
+          }
+        });
+        mapObject?.on('mouseleave', 'polygon-flight', e => {
+          if (dataBlock) {
+            dataBlock.remove();
+          }
+        });
       }
     }
   };