From 3e7be809b0b62e91eec1f880a402b0404c16e3fe Mon Sep 17 00:00:00 2001
From: JANGHYUNn <kimjh2369@gmail.com>
Date: Wed, 31 Jul 2024 16:58:42 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=EB=B8=94=EB=A1=9D=20=EB=A7=88?=
 =?UTF-8?q?=EC=9A=B0=EC=8A=A4=EC=98=A4=EB=B2=84=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../flight/OperationApprovalsContainer.js     | 43 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js
index 725bf3ee..6e34c5c8 100644
--- a/src/containers/flight/OperationApprovalsContainer.js
+++ b/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();
+          }
+        });
       }
     }
   };