laanc 비행구역 이벤트 중복등록 제거

src/components/laanc/map/LaancDrawControl.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { InfoModal } from '../../modal/InfoModal';
 import { ErrorModal } from '../../modal/ErrorModal';
 import { useDispatch, useSelector } from 'react-redux';
@@ -13,7 +13,11 @@ import {
 } from '../../../utility/DrawUtil';
 import { drawTypeChangeAction } from '../../../modules/control/map/actions/controlMapActions';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
-import { CircleMode } from 'mapbox-gl-draw-circle';
+import {
+  CircleMode,
+  DirectMode,
+  SimpleSelectMode
+} from 'mapbox-gl-draw-circle';
 import axios from '../../../modules/utils/customAxiosUtil';
 
 export const LaancDrawControl = props => {
@@ -47,25 +51,54 @@ export const LaancDrawControl = props => {
     // if (areaType !== drawType) drawInit();
   }, [mapControl.drawType]);
 
+  const originClickRef = useRef(null);
+
   useEffect(() => {
     if (mapObject) {
-      mapObject.on('draw.update', handlerUpdateSetting);
-
       const DrawLineStringMode = MapboxDraw.modes.draw_line_string;
       const DrawPolygonMode = MapboxDraw.modes.draw_polygon;
       const DrawCircleMode = CircleMode;
       const modeArr = [DrawLineStringMode, DrawPolygonMode, DrawCircleMode];
 
+      const cleanUp = () => {
+        modeArr.forEach(m => {
+          m.onStop = null;
+          m.onClick = originClickRef.current;
+        });
+      };
+
+      mapObject.on('draw.update', handlerUpdateSetting);
+
       modeArr.forEach(m => {
         m.onStop = state => handlerFinishDraw(state);
 
         // onClick 이벤트 오버라이드
-        const origin = m.onClick;
+        const mOriginClick = m.onClick;
         m.onClick = function (state, e) {
-          origin.call(this, state, e);
+          mOriginClick.call(this, state, e);
           handlerCustomOnClick(state, e);
         };
+
+        if (originClickRef.current === null) {
+          originClickRef.current = mOriginClick;
+        }
       });
+
+      return () => {
+        mapObject.off('draw.update', handlerUpdateSetting);
+        cleanUp();
+      };
+
+      // const DirectSelect = DirectMode;
+      // console.log(DirectSelect, '---');
+      // const originSetup = DirectSelect.toDisplayFeatures;
+      // DirectSelect.toDisplayFeatures = function (state, geojson, push) {
+      //   originSetup.call(this, state, geojson, push);
+      //   // console.log(state, geojson, push, '----');
+      //   if (geojson.properties.active === 'true') {
+      //     console.log(state, geojson, push, '------');
+      //   }
+      // };
     }
   }, [mapObject]);
 
@@ -121,10 +154,12 @@ export const LaancDrawControl = props => {
     }
 
     if (state.currentVertexPosition > 6) {
+      if (obj) {
         drawObj.changeMode('direct_select', {
           featureId: obj.id
         });
       }
+    }
   };
 
   // 도형 그리기 완료 시