From 8b2f95378d91b7ff50f334f6a24d83b29e59d138 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: Mon, 23 Oct 2023 13:23:53 +0900
Subject: [PATCH] =?UTF-8?q?laanc=20=EB=B9=84=ED=96=89=EA=B5=AC=EC=97=AD=20?=
 =?UTF-8?q?=ED=8F=B4=EB=A6=AC=EA=B3=A4=20=EB=A7=88=EC=A7=80=EB=A7=89=20?=
 =?UTF-8?q?=EB=A7=88=EC=BB=A4=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../map/mapbox/draw/LaancDrawControl.js       | 39 ++++++++++++++-----
 src/utility/DrawUtil.js                       |  2 +-
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/components/map/mapbox/draw/LaancDrawControl.js b/src/components/map/mapbox/draw/LaancDrawControl.js
index 735a9e05..159d026b 100644
--- a/src/components/map/mapbox/draw/LaancDrawControl.js
+++ b/src/components/map/mapbox/draw/LaancDrawControl.js
@@ -12,12 +12,7 @@ import {
 } from '../../../../utility/DrawUtil';
 import { drawTypeChangeAction } from '../../../../modules/control/map/actions/controlMapActions';
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
-import {
-  CircleMode,
-  DragCircleMode,
-  DirectMode,
-  SimpleSelectMode
-} from 'mapbox-gl-draw-circle';
+import { CircleMode } from 'mapbox-gl-draw-circle';
 
 export const LaancDrawControl = props => {
   const dispatch = useDispatch();
@@ -223,8 +218,8 @@ export const LaancDrawControl = props => {
           id: obj.id
         };
 
-        handlerRemoveGroupMarker(obj.id);
-        handlerCreateGroupMarker(data, mode);
+        // handlerRemoveGroupMarker(obj.id);
+        // handlerCreateGroupMarker(data, mode);
         handlerAbnormalityCheck(data, mode);
       }
     }
@@ -385,7 +380,7 @@ export const LaancDrawControl = props => {
       const objs = drawObj?.getAll().features;
       const areas = props.areaCoordList;
       if (areas.length > 0 && objs.length > 0) {
-        // areas -> 지도에 그려진 모든 구역 정보여야함
+        // areas -> 현재는 1개이지만 추후에 데이터가 바뀌면 여러개의 도형도 처리 가능!
         areas.forEach((area, idx) => {
           const paths = [];
           area.coordList.forEach(coord => paths.push([coord.lon, coord.lat]));
@@ -393,6 +388,7 @@ export const LaancDrawControl = props => {
             console.log('pastDraw', area);
             if (area.areaType === 'CIRCLE') {
             } else {
+              let objId = '';
               if (area.areaType === 'LINE') {
                 // 버퍼 생성
                 if (area.bufferCoordList) {
@@ -431,10 +427,35 @@ export const LaancDrawControl = props => {
                   const newBufferId = drawObj.add(newBuffer);
                   drawObj.setFeatureProperty(newBufferId[0], 'id', 'BUFFER');
                   drawObj.setFeatureProperty(newBufferId[0], 'lineId', lineId);
+
+                  objId = lineId;
                 }
               } else if (area.areaType === 'POLYGON') {
                 paths.push(paths[0]);
+
+                let polygonId = '';
+                const polygons = objs.filter(
+                  o => o.properties.id === 'POLYGON'
+                );
+                for (let i = 0; i < polygons.length; i++) {
+                  const result = handlerArraysAreEqual(
+                    polygons[i].geometry.coordinates[0],
+                    paths
+                  );
+                  if (result) {
+                    polygonId = polygons[i].id;
+                    break;
+                  }
+                }
+                objId = polygonId;
               }
+              // 마커를 삭제하고 다시 그려주기
+              const data = {
+                coord: area.areaType === 'LINE' ? paths : [paths],
+                id: objId
+              };
+              handlerRemoveGroupMarker(data.id);
+              handlerCreateGroupMarker(data, area.areaType);
             }
             dispatch(drawTypeChangeAction('DONE'));
           }
diff --git a/src/utility/DrawUtil.js b/src/utility/DrawUtil.js
index 5daba2e4..a91beedf 100644
--- a/src/utility/DrawUtil.js
+++ b/src/utility/DrawUtil.js
@@ -60,7 +60,7 @@ export const handlerGetHtmlContent = (distance, id) => {
 
   return (
     '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>' +
-    `<div style="display:hidden;" className=${id}></div>` +
+    `<div style="display:hidden;" id=${id}></div>` +
     text +
     '</span></div>'
   );