laanc 상세맵 이벤트 에러 수정중

src/components/map/mapbox/draw/LaancDraw.js

@@ -1,6 +1,6 @@
 import { useSelector } from 'react-redux';
 import { InfoModal } from '../../../modal/InfoModal';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   CalculateDistance,
   FormattingCoord,
@@ -20,6 +20,10 @@ export const LaancDraw = props => {
   // const isDone = props.isDone;
   // const isDisabled = props.isDisabled;
 
+  const [clickEve, setClickEve] = useState();
+
+  const [mouseMoveEve, setMouseMoveEve] = useState(false);
+
   const [alertModal, setAlertModal] = useState({
     isOpen: false,
     title: '',
@@ -31,16 +35,12 @@ export const LaancDraw = props => {
 
   const [mouseDownEve, setMouseDownEve] = useState(false);
 
-  const areaInfo = {
-    coordinates: [],
-    bufferZone: 0,
-    areaType: ''
-  };
-
   const geojson = props.geojson;
   const [geoState, setGeoState] = useState(geojson);
   const detailLayer = props.detailLayer;
 
+  const [clickNum, setClickNum] = useState(0);
+
   let mode = props.mode;
 
   let guideLine = InitFeature('LineString', 'guideline');
@@ -66,6 +66,17 @@ export const LaancDraw = props => {
     }
   }, [mapControl.drawType, detailLayer]);
 
+  useEffect(() => {
+    const area = props.areaCoordList[0];
+    //자세히보기 두번째에는 area가 사라져..! 왜?!
+    //첫번째 열면 도형 그려진 다음에 areaCoordList가 사라짐 왜????
+    //clearMode가 자동으로 실행돼서 props.handlerInitCoordinates도 실행되기 때문 ㅠㅠ 그래서 초기화 됨
+    //해결완료. 나중에 꼬일 때 까먹지 말라고 주석 삭제 안함
+    if (area.areaType && area.areaType !== '') {
+      if (detailLayer) handlerPastDraw();
+    }
+  }, [props.areaCoordList, detailLayer]);
+
   useEffect(() => {
     if (isDrawDone) {
       props.handlerConfirm(props.areaCoordList);
@@ -74,15 +85,10 @@ export const LaancDraw = props => {
   }, [isDrawDone]);
 
   useEffect(() => {
-    const area = props.areaCoordList[0];
+    if (clickEve) {
-    //자세히보기 두번째에는 area가 사라져..! 왜?!
+      console.log('click>>>>>>>>>>>>>>>>>>>>>>>>>');
-    //첫번째 열면 도형 그려진 다음에 areaCoordList가 사라짐 왜????
-    //clearMode가 자동으로 실행돼서 props.handlerInitCoordinates도 실행되기 때문 ㅠㅠ 그래서 초기화 됨
-    //해결완료. 나중에 꼬일 때 까먹지 말라고 주석 삭제 안함
-    if (area.areaType && area.areaType !== '') {
-      if (props.centeredModal && detailLayer) handlerPastDraw();
     }
-  }, [props.areaCoordList, props.centeredModal, detailLayer]);
+  }, [clickEve]);
 
   const drawInit = () => {
     handlerButtonClick(mapControl.drawType);
@@ -111,14 +117,23 @@ export const LaancDraw = props => {
   const handlerStartMode = mode => {
     if (!mode || mode === 'RESET') return;
 
+    // mapObject.off('click', onClickFeature);
+
     console.log('startMode');
-    mapObject.on('click', clickEve);
+    // mapObject.on('click', clickEve);
+    const drawType = mapControl.drawType;
+    if (drawType === 'LINE') mapObject.on('click', onClickFeature);
+    if (drawType === 'POLYGON') mapObject.on('click', onClickFeature);
+    if (drawType === 'RESET') mapObject.off('click', onClickFeature);
+
+    // setClickEve(onClickFeature);
   };
 
   const removeListener = () => {
     console.log('removeListener');
 
-    mapObject.off('click', clickEve);
+    // mapObject.off('click', clickEve);
+    mapObject.off('click', onClickFeature);
     mapObject.off('click', onClickCircle);
     mapObject.off('mouseup', onMouseUp);
     mapObject.off('mousedown', 'waypoint', onMouseDown);
@@ -128,8 +143,13 @@ export const LaancDraw = props => {
     mapObject.off('mousemove', onMouseMovePolygon);
     mapObject.off('contextmenu', onRightClick);
 
+    console.log(mapObject._listeners.click, '>>>>>');
+    // mapObject.off('click', clickEve);
+    // console.log(mapObject._listeners.click, '>>>>>');
+
     // 이거 있나 없나 뭔 차이지?
     setMouseDownEve(false);
+    setClickNum(0);
   };
 
   const removeGeoJson = () => {
@@ -196,17 +216,18 @@ export const LaancDraw = props => {
     }
   };
 
-  const clickEve = e => {
+  // const clickEve = e => {
-    const drawType = mapControl.drawType;
+  //   const drawType = mapControl.drawType;
-    if (drawType === 'LINE') onClickFeature(e, lineString);
+  //   if (drawType === 'LINE') onClickFeature(e, lineString);
-    if (drawType === 'POLYGON') onClickFeature(e, polygon);
+  //   if (drawType === 'POLYGON') onClickFeature(e, polygon);
-    if (drawType === 'CIRCLE') onClickCircle(e);
+  //   if (drawType === 'CIRCLE') onClickCircle(e);
-  };
+  // };
 
   // polyline, polygon 생성
-  const onClickFeature = (e, obj) => {
+  const onClickFeature = e => {
     console.log('click');
     const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
+    const obj = mapControl.drawType === 'LINE' ? lineString : polygon;
     //현재 내 좌표가 waypoint레이어의 geojson도형 안에 속해있는지 안해있는지?
     //geojson을 반환해주는 듯?
     const features = mapObject.queryRenderedFeatures(e.point, {
@@ -223,11 +244,7 @@ export const LaancDraw = props => {
       const featuresId = features[0].properties.id;
       handlerReplaceDuplicate(featuresId, '');
     } else {
-      // const index = geojson.features.filter(
+      const index = geojson.features.filter(
-      //   geo => geo.properties?.id === 'point'
-      // ).length;
-      const geoCopy = geojson.features.concat();
-      const index = geoCopy.filter(
         geo => geo.properties?.id === 'point'
       ).length;
 
@@ -276,7 +293,8 @@ export const LaancDraw = props => {
   };
 
   // polygon 가이드 생성
-  const onMouseMovePolygon = e => {
+  const onMouseMovePolygon = useCallback(
+    e => {
       const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
 
       if (polygon.geometry.coordinates.length > 0) {
@@ -293,7 +311,9 @@ export const LaancDraw = props => {
       // 이거.. 왜 안해도 잘 되지....?
       // handlerReplaceDuplicate('polygon', polygon);
       handlerGetSourceSetData();
-  };
+    },
+    [geoState]
+  );
 
   // circle 생성
   const onClickCircle = e => {
@@ -315,7 +335,8 @@ export const LaancDraw = props => {
     handlerGetSourceSetData();
   };
 
-  const onMouseDown = e => {
+  const onMouseDown = useCallback(
+    e => {
       e.preventDefault();
       console.log('down');
       //타입 교체만 하면 왜 처음엔 down이 두번 잡힐까...
@@ -331,11 +352,15 @@ export const LaancDraw = props => {
       }
 
       mapObject.on('mousemove', onMouseMove);
+      setMouseDownEve(true);
       mapObject.on('mouseup', onMouseUp);
 
       // 이거 왜 필요했던 거지?
-    mapObject.off('click', clickEve);
+      // mapObject.off('click', clickEve);
-  };
+      mapObject.off('click', onClickFeature);
+    },
+    [mapControl.drawType]
+  );
 
   const onMouseMove = e => {
     const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
@@ -375,6 +400,10 @@ export const LaancDraw = props => {
     handlerGetSourceSetData();
   };
 
+  useEffect(() => {
+    console.log('-------------');
+  }, [onMouseMovePolyline]);
+
   const onMouseUp = () => {
     canvas.style.cursor = '';
     console.log('up');
@@ -385,7 +414,8 @@ export const LaancDraw = props => {
     mapObject.off('mouseup', onMouseUp);
 
     // 이거 왜 필요했던 거지?
-    mapObject.off('click', clickEve);
+    // mapObject.off('click', clickEve);
+    mapObject.off('click', onClickFeature);
     setMouseDownEve(false);
 
     const type = mapControl.drawType;
@@ -406,7 +436,8 @@ export const LaancDraw = props => {
           : obj.geometry.coordinates[0];
 
       if (id === 'circle') {
-        mapObject.on('click', clickEve);
+        // mapObject.on('click', clickEve);
+        mapObject.on('click', onClickFeature);
         handlerSaveAreaInfo('');
       } else {
         // mapObject.on('mousedown', 'waypoint', onMouseDown);
@@ -433,6 +464,12 @@ export const LaancDraw = props => {
   // 도형 정보 변경되면 저장
   const handlerSaveAreaInfo = coord => {
     console.log('areaInfo');
+    const areaInfo = {
+      coordinates: [],
+      bufferZone: 0,
+      areaType: ''
+    };
+
     const bufferZone = polygon.geometry.coordinates.length > 0 ? 0 : 100;
     const prePath = [];
 

src/components/map/mapbox/draw/LaancDrawRe.js

@@ -0,0 +1,571 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { InfoModal } from '../../../modal/InfoModal';
+import { FormattingCoord, InitFeature } from './MapBoxDraw';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { AREA_COORDINATE_LIST_SAVE } from '../../../../modules/basis/flight/actions/basisFlightAction';
+import {
+  CalculateDistance,
+  handlerCreatePoint,
+  handlerGetCircleCoord,
+  handlerGetHtmlContent,
+  handlerGetMidPoint
+} from '../../../../utility/DrawUtil';
+
+export const LaancDrawRe = props => {
+  const dispatch = useDispatch();
+  const mapControl = useSelector(state => state.controlMapReducer);
+  const mapObject = props.mapObject;
+  const canvas = mapObject.getCanvasContainer();
+
+  const [isDrawDone, setIsDrawDone] = useState(false);
+  const [alertModal, setAlertModal] = useState({
+    isOpen: false,
+    title: '',
+    desc: ''
+  });
+
+  const detailLayer = props.detailLayer;
+  const geojson = props.geojson;
+
+  const [clickCoord, setClickCoord] = useState([]);
+
+  const drawObj = InitFeature('', '');
+  const guideLine = InitFeature('LineString', 'guideline');
+  const bufferLine = InitFeature('LineString', 'buffer');
+
+  const [pastPoint, setPoint] = useState([]);
+  let point = [];
+
+  const mode = props.mode;
+
+  let dragCircleIdx;
+
+  useEffect(() => {
+    const areaType = props.areaCoordList[0].areaType;
+
+    if (areaType !== mode && detailLayer) {
+      drawInit();
+    }
+  }, [mode, detailLayer]);
+
+  useEffect(() => {
+    const areaType = props.areaCoordList[0].areaType;
+
+    if (areaType && areaType !== '' && detailLayer) {
+      handlerPastDraw();
+    }
+  }, [props.areaCoordList, detailLayer]);
+
+  useEffect(() => {
+    if (isDrawDone) {
+      handlerDrawConfirm(props.areaCoordList);
+      setIsDrawDone(false);
+    }
+  }, [isDrawDone]);
+
+  const drawInit = useCallback(() => {
+    console.log('drawInit');
+    handlerRemoveEvent();
+    handlerRemoveGeoJson();
+    props.handlerInitCoordinates();
+
+    handlerStartMode();
+  }, [mode]);
+
+  const handlerRemoveEvent = useCallback(() => {
+    console.log('removeEvent');
+    mapObject.off('click', onClickDrawObj);
+    mapObject.off('mousemove', onMouseMoveDrawObj);
+    mapObject.off('contextmenu', onRightClick);
+  }, [mode]);
+
+  const handlerRemoveGeoJson = useCallback(() => {
+    console.log('removeGeoJson');
+    handlerRemoveMarker();
+
+    guideLine.geometry.coordinates = [];
+    bufferLine.geometry.coordinates = [];
+    drawObj.geometry.coordinates = [];
+    geojson.features = [];
+
+    point = [];
+    setPoint([]);
+
+    handlerGetSourceSetData();
+  }, [mode]);
+
+  const handlerStartMode = () => {
+    if (!mode || mode === 'RESET') return;
+
+    console.log('startMode');
+    if (mode === 'LINE') {
+      handlerSetDrawObj('LineString', 'LINE');
+    } else if (mode === 'POLYGON') {
+      handlerSetDrawObj('Polygon', 'POLYGON');
+    } else if (mode === 'CIRCLE') {
+      handlerSetDrawObj('Polygon', 'CIRCLE');
+    }
+
+    mapObject.on('click', onClickDrawObj);
+  };
+
+  const onClickDrawObj = useCallback(
+    e => {
+      console.log('click');
+      const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
+      const id = drawObj.properties.id;
+
+      const features = mapObject.queryRenderedFeatures(e.point, {
+        layers: ['waypoint']
+      });
+
+      if (geojson.features.length > 1) {
+        handlerReplaceDuplicate(drawObj.properties.id, '');
+      }
+
+      if (features.length) {
+        const featuresId = features[0].properties.id;
+        handlerReplaceDuplicate(featuresId, '');
+      } else {
+        const index = geojson.features.filter(
+          geo => geo.properties.id === 'point'
+        ).length;
+
+        const wayPoint = handlerCreatePoint(formatCoord, index, id);
+        point.push(wayPoint);
+        handlerReplaceDuplicate('point', '');
+        point.forEach(p => geojson.features.push(p));
+        setPoint(p => [...p, wayPoint]);
+      }
+
+      if (id === 'LINE') guideLine.geometry.coordinates = [formatCoord];
+
+      if (geojson.features.length > 1) {
+        const coordinates = handlerGetGeoJsonCoord('point');
+
+        drawObj.geometry.coordinates =
+          id === 'LINE' ? coordinates : [coordinates];
+
+        geojson.features.push(drawObj);
+
+        addMileStone(coordinates, '');
+      } else {
+        mapObject.on('contextmenu', onRightClick);
+        mapObject.on('mousemove', onMouseMoveDrawObj);
+        addMileStone(formatCoord, '');
+      }
+      handlerGetSourceSetData();
+      setClickCoord(coord => [...coord, [formatCoord]]);
+    },
+    [clickCoord, point]
+  );
+
+  const onMouseMoveDrawObj = e => {
+    const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
+    const id = drawObj.properties.id;
+    if (id === 'LINE') {
+      if (guideLine.geometry.coordinates.length > 1) {
+        guideLine.geometry.coordinates.pop();
+        handlerReplaceDuplicate('guideline', guideLine);
+      }
+      guideLine.geometry.coordinates.push(formatCoord);
+    } else if (id === 'POLYGON') {
+      if (drawObj.geometry.coordinates.length > 0) {
+        if (drawObj.geometry.coordinates[0].length > 1) {
+          if (guideLine.geometry.coordinates.length > 1) {
+            guideLine.geometry.coordinates.pop();
+            drawObj.geometry.coordinates[0].pop();
+          }
+          guideLine.geometry.coordinates.push(formatCoord);
+          drawObj.geometry.coordinates[0].push(formatCoord);
+        }
+      }
+    }
+
+    handlerGetSourceSetData();
+  };
+
+  const onRightClick = e => {
+    handlerRemoveEvent();
+
+    const drawType = mapControl.drawType;
+    const path = handlerGetGeoJsonCoord('point');
+
+    if (path.length > 0) {
+      if (drawType === 'LINE') {
+        if (path.length > 1) {
+          handlerReplaceDuplicate('guideline', '');
+          handlerSaveAreaInfo(drawObj.geometry.coordinates);
+        } else {
+          setAlertModal({
+            isOpen: true,
+            title: '좌표 최소 개수',
+            desc: '좌표를 두 개 점으로 이어주세요.'
+          });
+          handlerRemoveGeoJson();
+          // props.handlerDrawType('RESET');
+        }
+        handlerGetSourceSetData();
+      } else if (drawType === 'POLYGON') {
+        if (path.length > 2) {
+          drawObj.geometry.coordinates[0] = path;
+
+          handlerReplaceDuplicate('POLYGON', drawObj);
+          handlerSaveAreaInfo(drawObj.geometry.coordinates[0]);
+        } else {
+          setAlertModal({
+            isOpen: true,
+            title: '좌표 최소 개수',
+            desc: '좌표를 세 개 점으로 이어주세요.'
+          });
+          handlerRemoveGeoJson();
+          // props.handlerDrawType('RESET');
+        }
+      }
+      handlerGetSourceSetData();
+    }
+  };
+
+  const onClickCircle = e => {
+    console.log('click');
+    const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
+
+    if (drawObj.geometry.coordinates.length === 0) {
+      mapObject.on('mousedown', 'polygon', onMouseDown);
+    }
+
+    const circleCoords = handlerGetCircleCoord(formatCoord, 100);
+    drawObj.properties.center = formatCoord;
+    drawObj.geometry.coordinates = circleCoords;
+
+    handlerReplaceDuplicate('CIRCLE', drawObj);
+    handlerSaveAreaInfo('');
+
+    addMileStone(formatCoord, 100);
+    handlerGetSourceSetData();
+  };
+
+  const onMouseDown = e => {
+    e.preventDefault();
+
+    canvas.style.cursor = 'grab';
+
+    const id = drawObj.properties.id;
+    const coord = handlerGetGeoJsonCoord(id);
+
+    if (id !== mode || coord.length === 0) {
+      mapObject.off('mousedown', 'waypoint', onMouseDown);
+      handlerReplaceDuplicate(id, '');
+      return;
+    }
+    // if (coord.length === 0) return;
+
+    console.log('down');
+    if (id === 'CIRCLE') {
+      handlerRemoveEvent();
+      mapObject.on('mousedown', 'polygon', onMouseDown);
+    } else {
+      dragCircleIdx = e.features[0].properties.index;
+    }
+
+    mapObject.on('mousemove', onMouseMove);
+    mapObject.on('mouseup', onMouseUp);
+
+    mapObject.off('click', onClickDrawObj);
+    mapObject.off('click', onClickCircle);
+  };
+
+  const onMouseMove = e => {
+    const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
+    canvas.style.cursor = 'grabbing';
+
+    const id = drawObj.properties.id;
+
+    if (id === 'CIRCLE') {
+      const distance = CalculateDistance(
+        formatCoord,
+        drawObj.properties.center
+      );
+      const center = drawObj.properties.center;
+      const circleCoords = handlerGetCircleCoord(center, distance);
+      drawObj.geometry.coordinates = circleCoords;
+    } else {
+      geojson.features = geojson.features.map(geo => {
+        const coord = formatCoord;
+
+        if (geo.properties?.index === dragCircleIdx) {
+          geo.geometry.coordinates = coord;
+        }
+
+        if (geo.properties?.id === 'LINE') {
+          geo.geometry.coordinates[dragCircleIdx] = coord;
+          drawObj.geometry.coordinates = geo.geometry.coordinates;
+        }
+
+        if (geo.properties?.id === 'buffer') {
+          geo.geometry.coordinates = [];
+        }
+
+        if (geo.properties?.id === 'POLYGON') {
+          geo.geometry.coordinates[0][dragCircleIdx] = coord;
+          drawObj.geometry.coordinates[0] = geo.geometry.coordinates[0];
+        }
+
+        return geo;
+      });
+    }
+
+    handlerGetSourceSetData();
+  };
+
+  const onMouseUp = e => {
+    canvas.style.cursor = '';
+    console.log('up');
+
+    mapObject.off('mousedown', 'waypoint', onMouseDown);
+    mapObject.off('mousemove', onMouseMove);
+    mapObject.off('mouseup', onMouseUp);
+
+    const obj =
+      mode === 'LINE' || mode === 'POLYGON' || mode === 'CIRCLE' ? true : false;
+
+    const objGeo = drawObj.geometry;
+    const coord = mode === 'LINE' ? objGeo.coordinates : objGeo.coordinates[0];
+
+    if (obj) {
+      if (mode === 'CIRCLE') {
+        mapObject.on('click', onClickCircle);
+        handlerSaveAreaInfo('');
+      } else {
+        handlerSaveAreaInfo(coord);
+      }
+    } else {
+      const areas = props.areaCoordList[0];
+      const type = areas.areaType;
+
+      const paths = [];
+      areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat]));
+
+      if (type === 'CIRCLE') {
+        handlerSaveAreaInfo('');
+      } else {
+        handlerSaveAreaInfo(coord);
+      }
+    }
+  };
+
+  const handlerPastDraw = () => {
+    console.log('pastDraw');
+    const areas = props.areaCoordList[0];
+    const paths = [];
+    areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat]));
+
+    if (areas.areaType) {
+      if (areas.areaType === 'CIRCLE') {
+        const radius = areas.bufferZone;
+        const circleCoords = handlerGetCircleCoord(paths[0], radius);
+
+        drawObj.properties.center = paths[0];
+        drawObj.geometry.coordinates = circleCoords;
+        drawObj.properties.id = 'CIRCLE';
+        drawObj.geometry.type = 'Polygon';
+
+        geojson.features.push(drawObj);
+      } else {
+        if (areas.areaType === 'LINE') {
+          drawObj.geometry.coordinates = paths;
+          drawObj.properties.id = 'LINE';
+          drawObj.geometry.type = 'LineString';
+          geojson.features.push(drawObj);
+
+          // 버퍼 생성
+          if (areas.bufferCoordList) {
+            const bufferPaths = [];
+
+            areas.bufferCoordList.forEach(bfCoord =>
+              bufferPaths.push([bfCoord.lon, bfCoord.lat])
+            );
+
+            bufferLine.geometry.coordinates = bufferPaths;
+
+            handlerReplaceDuplicate('buffer', bufferLine);
+          }
+        } else if (areas.areaType === 'POLYGON') {
+          drawObj.geometry.coordinates = [paths];
+          drawObj.properties.id = 'POLYGON';
+          drawObj.geometry.type = 'Polygon';
+          geojson.features.push(drawObj);
+        }
+
+        handlerReplaceDuplicate(drawObj.properties.id, drawObj);
+
+        // 포인트 생성
+        paths.forEach((p, i) => {
+          const wayPoint = handlerCreatePoint(p, i, areas.areaType);
+          point.push(wayPoint);
+          // setPoint(po => [...po, wayPoint]);
+        });
+        handlerReplaceDuplicate('point', '');
+        point.forEach(p => geojson.features.push(p));
+        // pastPoint.forEach(p => geojson.features.push(p));
+
+        // mouseDown이벤트
+        mapObject.on('mousedown', 'waypoint', onMouseDown);
+
+        // 기존 마커 제거 후 재 생성
+        handlerRemoveMarker();
+        handlerCreateAllMarker(paths);
+
+        mapObject.setPaintProperty('waypoint', 'circle-radius', 8);
+        handlerGetSourceSetData();
+      }
+    }
+  };
+
+  const handlerSaveAreaInfo = coord => {
+    console.log('areaInfo', coord);
+    const type = mapControl.drawType;
+
+    const areaInfo = {
+      coordinates: [],
+      bufferZone: 0,
+      areaType: ''
+    };
+
+    const bufferZone = type === 'POLYGON' ? 0 : 100;
+    const prePath = [];
+
+    areaInfo.areaType = type;
+
+    if (areaInfo.areaType !== 'CIRCLE') {
+      coord.forEach(item => {
+        const p = {
+          lat: item[1],
+          lon: item[0]
+        };
+        prePath.push(p);
+      });
+    }
+
+    areaInfo.coordinates = prePath;
+    areaInfo.bufferZone = bufferZone;
+    if (areaInfo.areaType === 'CIRCLE') {
+      const point = {
+        lat: drawObj.properties.center[1],
+        lon: drawObj.properties.center[0]
+      };
+      areaInfo.coordinates = [point];
+      areaInfo.bufferZone = CalculateDistance(
+        drawObj.geometry.coordinates[0][0],
+        drawObj.properties.center
+      );
+    }
+
+    props.handlerCoordinates(areaInfo);
+    setIsDrawDone(true);
+  };
+
+  const handlerDrawConfirm = useCallback(
+    areaList => {
+      if (areaList === undefined) {
+        alert('영역을 설정해 주세요.');
+        return false;
+      }
+
+      dispatch(AREA_COORDINATE_LIST_SAVE(areaList));
+    },
+    [isDrawDone]
+  );
+
+  const handlerSetDrawObj = useCallback(
+    (type, id) => {
+      drawObj.geometry.type = type;
+      drawObj.properties.id = id;
+    },
+    [mode]
+  );
+
+  // 새로운 popup 한 개 추가 (coord의 뒤에서 두개의 좌표 이용)
+  const addMileStone = (coord, radius) => {
+    const len = coord.length;
+    let lngLat = coord;
+    let anchor;
+    let distance;
+
+    if (coord[0].length) {
+      if (mode !== 'CIRCLE' || props.areaCoordList[0].areaType !== 'CIRCLE') {
+        lngLat = handlerGetMidPoint(coord[len - 2], coord[len - 1]);
+        anchor = [0, 0];
+        distance = CalculateDistance(coord[len - 2], coord[len - 1]);
+      }
+    } else {
+      if (mode === 'CIRCLE' || props.areaCoordList[0].areaType === 'CIRCLE') {
+        anchor = [20, 35];
+        distance = radius;
+      } else {
+        anchor = [0, -10];
+        distance = 'Start';
+      }
+    }
+
+    const popup = new props.mapboxgl.Popup({
+      offset: anchor,
+      closeButton: false,
+      closeOnClick: false
+    })
+      .setLngLat(lngLat)
+      .setHTML(handlerGetHtmlContent(distance))
+      .addTo(mapObject);
+  };
+
+  // 좌표 기반으로 모든 마커 재 생성
+  const handlerCreateAllMarker = coord => {
+    console.log('allCreateMarker');
+    const areas = props.areaCoordList[0];
+
+    if (areas.areaType !== 'CIRCLE') {
+      for (let i = 0; i < coord.length; i++) {
+        if (i == 0) {
+          addMileStone(coord[i], '');
+        } else {
+          addMileStone([coord[i], coord[i - 1]], '');
+        }
+      }
+
+      if (areas.areaType === 'POLYGON') {
+        addMileStone([coord[0], coord[coord.length - 1]], '');
+      }
+    } else {
+      addMileStone(coord[0], areas.bufferZone);
+    }
+  };
+
+  // 모든 마커 삭제
+  const handlerRemoveMarker = () => {
+    const ele = document.getElementsByClassName('mapboxgl-popup');
+    const eleArr = Array.from(ele);
+    eleArr?.forEach(marker => marker.remove());
+  };
+
+  // geojson에서 중복되는 obj 제거 or 제거 후 새로 생성
+  const handlerReplaceDuplicate = (id, obj) => {
+    geojson.features = geojson.features.filter(
+      geo => geo.properties?.id !== id
+    );
+    if (obj !== '') geojson.features.push(obj);
+  };
+
+  // geojson에서 원하는 Id의 coord만 추출
+  const handlerGetGeoJsonCoord = id => {
+    return geojson.features
+      .filter(geo => geo.properties?.id === id)
+      .map(geo => geo.geometry.coordinates);
+  };
+
+  // 지도에 geojson데이터 새로고침
+  const handlerGetSourceSetData = () => {
+    mapObject.getSource('detail').setData(geojson);
+  };
+
+  return <InfoModal modal={alertModal} setModal={setAlertModal} />;
+};

src/utility/DrawUtil.js

@@ -158,7 +158,7 @@ export const layerPolyline = source => {
       'line-color': '#283046',
       'line-width': 2
     },
-    filter: ['in', ['get', 'id'], ['literal', ['polyline', 'outline']]]
+    filter: ['in', ['get', 'id'], ['literal', ['LINE', 'outline']]]
   };
 };
 

src/views/laanc/FlightArea.js

@@ -59,7 +59,7 @@ export default function FlightArea({
     desc: ''
   });
 
-  console.log('>>>');
+  // console.log('>>>');
   //날씨 임시 데이터
   const [wheather, setWheather] = useState([]);
 
@@ -279,7 +279,7 @@ export default function FlightArea({
           const radius = areas.bufferZone;
           const circleCoords = handlerGetCircleCoord(paths[0], radius);
 
-          const circle = InitFeature('Polygon', 'circle');
+          const circle = InitFeature('Polygon', 'CIRCLE');
           circle.properties.center = paths[0];
           circle.geometry.coordinates = circleCoords;
 
@@ -289,9 +289,9 @@ export default function FlightArea({
 
           fitZoomPaths = circleCoords[0];
         } else {
-          const lineString = InitFeature('LineString', 'polyline');
+          const lineString = InitFeature('LineString', 'LINE');
           const bufferPolyline = InitFeature('LineString', 'buffer');
-          const polygon = InitFeature('Polygon', 'polygon');
+          const polygon = InitFeature('Polygon', 'POLYGON');
           const point = [];
           if (areas.areaType === 'LINE') {
             lineString.geometry.coordinates = paths;

src/views/laanc/LaancAreaMap.js

@@ -3,7 +3,7 @@ import mapboxgl from 'mapbox-gl';
 import threebox from 'threebox-plugin';
 import MapboxLanguage from '@mapbox/mapbox-gl-language';
 import { MAPBOX_TOKEN } from '../../configs/constants';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Card, CardBody } from 'reactstrap';
 import { initFlightBas } from '../../modules/basis/flight/models/basisFlightModel';
@@ -12,6 +12,7 @@ import {
   FLIGHT_PLAN_AREA_BUFFER_LIST
 } from '../../modules/basis/flight/actions/basisFlightAction';
 import { LaancDraw } from '../../components/map/mapbox/draw/LaancDraw';
+import { LaancDrawRe } from '../../components/map/mapbox/draw/LaancDrawRe';
 import {
   drawTypeChangeAction,
   mapInitAction
@@ -48,10 +49,12 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) {
 
   const [detailLayer, setDetailLayer] = useState();
 
-  const detailGeo = {
+  const detailGeo = useMemo(() => {
+    return {
       type: 'FeatureCollection',
       features: []
     };
+  }, []);
 
   useEffect(() => {
     handlerMapInit();
@@ -302,7 +305,7 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) {
           ></div>
           {isMapLoad && mapObject ? (
             <>
-              <LaancDraw
+              {/* <LaancDraw
                 mapObject={mapObject}
                 mapboxgl={mapboxgl}
                 mode={mode}
@@ -314,6 +317,16 @@ export default function LaancAreaMap({ centeredModal, mapContainer }) {
                 centeredModal={centeredModal}
                 geojson={detailGeo}
                 detailLayer={detailLayer}
+              /> */}
+              <LaancDrawRe
+                mapObject={mapObject}
+                areaCoordList={mapAreaCoordList}
+                geojson={detailGeo}
+                detailLayer={detailLayer}
+                mapboxgl={mapboxgl}
+                mode={mode}
+                handlerCoordinates={handlerCoordinates}
+                handlerInitCoordinates={handlerInitCoordinates}
               />
               <FeatureAirZone map={mapObject} mapboxgl={mapboxgl} />
             </>