From 1120701ed45e8a28c4a10f9d46d871928e08d4c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junheee@palnet.co.kr>
Date: Wed, 10 Jul 2024 14:54:44 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9A=B4=ED=95=AD=EA=B3=BC=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=EB=B8=94=EB=A1=9D=20=EB=8B=A8=EA=B1=B4=20?=
 =?UTF-8?q?=EC=9E=84=EC=8B=9C=ED=91=9C=EC=B6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../flight/OperationApprovalsContainer.js     | 58 +++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/src/containers/flight/OperationApprovalsContainer.js b/src/containers/flight/OperationApprovalsContainer.js
index 44895d85..d3c021c9 100644
--- a/src/containers/flight/OperationApprovalsContainer.js
+++ b/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 () => {