운항과 비행구역 선택시 테이블 포커스

src/components/flight/OperationApprovalsTable.js

@@ -890,7 +890,6 @@ export default function OperationApprovalsTable(props) {
 
     // 초기화 및 다시 셋팅(열릴때)
     if (!expanded) {
-      console.log('----더보기');
       props.handlerDetail(record.areaList);
     }
   };
@@ -904,7 +903,6 @@ export default function OperationApprovalsTable(props) {
       row.areaList[0].fltElevMax
     );
     // 초기화 및 다시 셋팅
-    console.log('=====단건 클릭');
     props.handlerDetail([row.areaList[0]]);
   };
 
@@ -913,7 +911,6 @@ export default function OperationApprovalsTable(props) {
     handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax);
 
     // 초기화 하지말고 포커스만 하기
-    console.log('=====단건 중 다건 클릭');
     props.handlerDetail([row]);
   };
 

src/components/map/mapbox/feature/FeatureAirZone.js

@@ -96,13 +96,24 @@ export default function FeatureAirZone(props) {
     });
 
     props.map.on('click', 'maine', e => {
-      props.map.getCanvas().style.cursor = 'pointer';
+      let isMaine = false;
-      const feature = e.features[0];
+      let isOperation = false;
-      const data = feature.properties;
-      data.coord = e.lngLat;
-      data.title = feature.properties.name;
 
-      infowindowOpen(data);
+      props.map.queryRenderedFeatures(e.point).map(feature => {
+        if (feature.source === 'operationLayer') isOperation = true;
+        if (feature.source === 'maine') isMaine = true;
+      });
+
+      if (isMaine && !isOperation) {
+        props.map.getCanvas().style.cursor = 'pointer';
+
+        const feature = e.features[0];
+        const data = feature.properties;
+        data.coord = e.lngLat;
+        data.title = feature.properties.name;
+
+        infowindowOpen(data);
+      }
     });
 
     // props.map.on('mouseover', 'maine', e => {

src/containers/flight/OperationApprovalsContainer.js

@@ -109,6 +109,14 @@ export default function OperationApprovalsContainer({ mode }) {
 
   useEffect(() => {
     if (map) {
+      map.on('click', e => {
+        const features = map
+          .queryRenderedFeatures(e.point)
+          .find(feature => feature.source === 'operationLayer');
+
+        if (features) setSelected(features.properties.key);
+      });
+
       window._mapbox = map;
       let mapInstance = mode === 'container' ? map : window.opener._mapbox;
       setMapObject(mapInstance);
@@ -120,7 +128,7 @@ export default function OperationApprovalsContainer({ mode }) {
       if (e.data.type) {
         const { type } = e.data;
         const { payload } = e.data;
-        console.log(payload);
+        // console.log(payload);
         switch (type) {
           case 'initalState':
             popupRef.current.postMessage({
@@ -298,20 +306,20 @@ export default function OperationApprovalsContainer({ mode }) {
   const handlerMapInit = () => {
     let mapInstance = mode === 'container' ? map : window.opener._mapbox;
 
-    if (mapInstance.getSource('preview')) {
+    if (mapInstance.getSource('operationLayer')) {
     } else {
-      mapInstance.addSource('preview', {
+      mapInstance.addSource('operationLayer', {
         type: 'geojson',
         data: operationLayer
       });
-      mapInstance.addLayer(flightlayerWayPoint('preview'));
+      mapInstance.addLayer(flightlayerWayPoint('operationLayer'));
-      mapInstance.addLayer(flightlayerBuffer('preview'));
+      mapInstance.addLayer(flightlayerBuffer('operationLayer'));
-      mapInstance.addLayer(flightlayerPolygon('preview'));
+      mapInstance.addLayer(flightlayerPolygon('operationLayer'));
-      mapInstance.addLayer(flightlayerPolyline('preview'));
+      mapInstance.addLayer(flightlayerPolyline('operationLayer'));
     }
 
     dispatch(clientSetIsMapLoading(true));
-    // const preview = mapInstance.getSource('preview');
+    // const preview = mapInstance.getSource('operationLayer');
 
     // if (preview) setPreviewLayer(preview);
 
@@ -340,6 +348,10 @@ export default function OperationApprovalsContainer({ mode }) {
         const circle = InitFeature('Polygon', 'CIRCLE');
         circle.properties.center = [area.lon, area.lat];
         circle.geometry.coordinates = circleCoords;
+        circle.properties = {
+          ...circle.properties,
+          key: area?.planAreaSno
+        };
 
         operationLayer.features.push(circle);
       });
@@ -355,14 +367,13 @@ export default function OperationApprovalsContainer({ mode }) {
 
       if (areaCoordList.length !== 1 || !areaCoordList[0]?.key) {
         handlerInfoWindow(areaCoordList);
-        mapObject?.getSource('preview').setData(operationLayer);
+        mapObject?.getSource('operationLayer')?.setData(operationLayer);
       }
     }
   };
 
   // 데이터블록 표출 이벤트
   const handlerInfoWindow = areaList => {
-    console.log(areaList, '====areaList');
     if (dataBlocks.length > 0) {
       dataBlocks?.map(block => {
         block.remove();