From bfeb8246aa2fede37e7c1946f436f62a1442e138 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junh_eee@naver.com>
Date: Tue, 28 Nov 2023 13:19:54 +0900
Subject: [PATCH] =?UTF-8?q?laanc=20=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=A4=91=EB=B3=B5=EB=93=B1?=
 =?UTF-8?q?=EB=A1=9D=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/laanc/map/LaancDrawControl.js | 53 ++++++++++++++++----
 1 file changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/components/laanc/map/LaancDrawControl.js b/src/components/laanc/map/LaancDrawControl.js
index b57c2a2..cccdd47 100644
--- a/src/components/laanc/map/LaancDrawControl.js
+++ b/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,9 +154,11 @@ export const LaancDrawControl = props => {
     }
 
     if (state.currentVertexPosition > 6) {
-      drawObj.changeMode('direct_select', {
-        featureId: obj.id
-      });
+      if (obj) {
+        drawObj.changeMode('direct_select', {
+          featureId: obj.id
+        });
+      }
     }
   };