diff --git a/src/components/basis/flight/plan/FlightPlanAreaMapBox.js b/src/components/basis/flight/plan/FlightPlanAreaMapBox.js
index fca87dcd..2252a084 100644
--- a/src/components/basis/flight/plan/FlightPlanAreaMapBox.js
+++ b/src/components/basis/flight/plan/FlightPlanAreaMapBox.js
@@ -161,7 +161,8 @@ export const FlightPlanAreaMapBox = props => {
       center: [126.612647, 37.519893], // starting position [lng, lat]
       // zoom: !areaCoordList ? 14 : bufferZoom.bufferzoom, // starting zoom
       zoom: 15,
-      antialias: true
+      antialias: true,
+      attributionControl: false
     });
 
     const language = new MapboxLanguage();
diff --git a/src/components/map/mapbox/draw/MapBoxDraw.js b/src/components/map/mapbox/draw/MapBoxDraw.js
index 5233e4ea..c2e99988 100644
--- a/src/components/map/mapbox/draw/MapBoxDraw.js
+++ b/src/components/map/mapbox/draw/MapBoxDraw.js
@@ -53,6 +53,7 @@ export const CalculateDistance = (mouse, center) => {
 export const MapBoxDraw = props => {
   const mapControl = useSelector(state => state.controlMapReducer);
   const mapObject = props.mapObject;
+  const canvas = mapObject.getCanvasContainer();
 
   //비행계획서 작성 완료 후에는 수정 불가일거라서 이거는 임시 보류
   const isDone = props.isDone;
@@ -64,13 +65,6 @@ export const MapBoxDraw = props => {
     desc: ''
   });
 
-  const canvas = mapObject.getCanvasContainer();
-  // const [pastPoint, setPoint] = useState([]);
-  // const [pastPolyline, setPolyline] = useState();
-  // const [pastBuffer, setBuffer] = useState();
-  // const [pastPolygon, setPolygon] = useState();
-  // const [pastCircle, setCircle] = useState();
-
   //도형들이 온전히 그려진 후 변경 될 때 마다 감지
   const [isDrawDone, setIsDrawDone] = useState(false);
 
@@ -95,8 +89,6 @@ export const MapBoxDraw = props => {
 
   let point = [];
 
-  //꼭짓점(polyline, polygon 사용)
-  let vertex = InitFeature('MultiPoint', 'vertex');
   let dragCircleIdx;
 
   useEffect(() => {
@@ -135,9 +127,9 @@ export const MapBoxDraw = props => {
 
   const handlerClearMode = () => {
     console.log('clearMode');
-    removeGeoJson();
-
     finishDraw();
+
+    removeGeoJson();
     props.handlerInitCoordinates();
   };
 
@@ -167,12 +159,6 @@ export const MapBoxDraw = props => {
   const removeGeoJson = () => {
     console.log('removeGeoJson');
 
-    // setPolyline();
-    // setBuffer();
-    // setPolygon();
-    // setCircle();
-    // setPoint([]);
-
     handlerRemoveMarker();
 
     guideLine.geometry.coordinates = [];
@@ -184,13 +170,12 @@ export const MapBoxDraw = props => {
     circle.geometry.coordinates = [];
 
     point = [];
-    vertex.geometry.coordinates = [];
 
     geojson.features = [];
     mapObject.getSource('geojson').setData(geojson);
   };
 
-  const finishDraw = e => {
+  const finishDraw = () => {
     removeListener();
     console.log('finish');
 
@@ -200,7 +185,7 @@ export const MapBoxDraw = props => {
       if (drawType === 'LINE') {
         if (path.length > 1) {
           handlerReplaceDuplicate('guideline', '');
-          handlerSaveAreaInfo(lineString.geometry.coordinates, lineString);
+          handlerSaveAreaInfo(lineString.geometry.coordinates);
         } else {
           setAlertModal({
             isOpen: true,
@@ -209,7 +194,7 @@ export const MapBoxDraw = props => {
           });
           removeGeoJson();
           props.handlerDrawType('RESET');
-          mapObject.on('click', clickEve);
+          // mapObject.on('click', clickEve);
         }
         mapObject.getSource('geojson').setData(geojson);
       } else if (drawType === 'POLYGON') {
@@ -217,7 +202,7 @@ export const MapBoxDraw = props => {
           polygon.geometry.coordinates[0] = path;
 
           handlerReplaceDuplicate('polygon', polygon);
-          handlerSaveAreaInfo(polygon.geometry.coordinates[0], polygon);
+          handlerSaveAreaInfo(polygon.geometry.coordinates[0]);
         } else {
           setAlertModal({
             isOpen: true,
@@ -226,7 +211,7 @@ export const MapBoxDraw = props => {
           });
           removeGeoJson();
           props.handlerDrawType('RESET');
-          mapObject.on('click', clickEve);
+          // mapObject.on('click', clickEve);
         }
       }
       mapObject.getSource('geojson').setData(geojson);
@@ -240,9 +225,11 @@ export const MapBoxDraw = props => {
     if (drawType === 'CIRCLE') onClickCircle(e);
   };
 
-  //polyline, polygon 생성
+  // polyline, polygon 생성
   const onClickFeature = (e, obj) => {
     const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
+    //현재 내 좌표가 waypoint레이어의 geojson도형 안에 속해있는지 안해있는지?
+    //geojson을 반환해주는 듯?
     const features = mapObject.queryRenderedFeatures(e.point, {
       layers: ['waypoint']
     });
@@ -261,7 +248,11 @@ export const MapBoxDraw = props => {
         geo => geo.properties?.id === 'point'
       ).length;
 
-      const wayPoint = handlerCreatePoint(formatCoord, index);
+      const wayPoint = handlerCreatePoint(
+        formatCoord,
+        index,
+        mapControl.drawType
+      );
       handlerReplaceDuplicate('Point', wayPoint);
     }
 
@@ -288,7 +279,7 @@ export const MapBoxDraw = props => {
     mapObject.getSource('geojson').setData(geojson);
   };
 
-  //polyline 가이드 생성
+  // polyline 가이드 생성
   const onMouseMovePolyline = e => {
     const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
     if (guideLine.geometry.coordinates.length > 1) {
@@ -300,7 +291,7 @@ export const MapBoxDraw = props => {
     mapObject.getSource('geojson').setData(geojson);
   };
 
-  //polygon 가이드 생성
+  // polygon 가이드 생성
   const onMouseMovePolygon = e => {
     const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
 
@@ -320,7 +311,7 @@ export const MapBoxDraw = props => {
     mapObject.getSource('geojson').setData(geojson);
   };
 
-  //circle 생성
+  // circle 생성
   const onClickCircle = e => {
     console.log('circleClick');
     const formatCoord = FormattingCoord([e.lngLat.lng, e.lngLat.lat]);
@@ -334,7 +325,7 @@ export const MapBoxDraw = props => {
     circle.geometry.coordinates = circleCoords;
 
     handlerReplaceDuplicate('circle', circle);
-    handlerSaveAreaInfo('', circle);
+    handlerSaveAreaInfo('');
 
     addMileStone(formatCoord, 100);
     mapObject.getSource('geojson').setData(geojson);
@@ -344,6 +335,7 @@ export const MapBoxDraw = props => {
     e.preventDefault();
     console.log('down');
     //타입 교체만 하면 왜 처음엔 down이 두번 잡힐까...
+    // console.log(e.features[0].properties.type, '>>down e');
 
     canvas.style.cursor = 'grab';
 
@@ -398,7 +390,7 @@ export const MapBoxDraw = props => {
     mapObject.getSource('geojson').setData(geojson);
   };
 
-  const onMouseUp = e => {
+  const onMouseUp = () => {
     canvas.style.cursor = '';
     console.log('up');
 
@@ -408,7 +400,15 @@ export const MapBoxDraw = props => {
     mapObject.off('click', clickEve);
     setMouseDownEve(false);
 
-    const obj = handlerMatchObj(mapControl.drawType);
+    const type = mapControl.drawType;
+    const obj =
+      type === 'LINE'
+        ? lineString
+        : type === 'POLYGON'
+        ? polygon
+        : type === 'CIRCLE'
+        ? circle
+        : undefined;
 
     if (obj) {
       const id = obj.properties?.id;
@@ -419,9 +419,10 @@ export const MapBoxDraw = props => {
 
       if (id === 'circle') {
         mapObject.on('click', clickEve);
-        handlerSaveAreaInfo('', circle);
+        handlerSaveAreaInfo('');
       } else {
-        handlerSaveAreaInfo(coord, obj);
+        // mapObject.on('mousedown', 'waypoint', onMouseDown);
+        handlerSaveAreaInfo(coord);
       }
     } else {
       // 저장된 좌표 불러왔을 때
@@ -432,19 +433,19 @@ export const MapBoxDraw = props => {
       areas.coordList.forEach(coord => paths.push([coord.lon, coord.lat]));
 
       if (type === 'LINE') {
-        handlerSaveAreaInfo(lineString.geometry.coordinates, lineString);
+        handlerSaveAreaInfo(lineString.geometry.coordinates);
       } else if (type === 'POLYGON') {
-        handlerSaveAreaInfo(polygon.geometry.coordinates[0], polygon);
+        handlerSaveAreaInfo(polygon.geometry.coordinates[0]);
       } else if (type === 'CIRCLE') {
-        handlerSaveAreaInfo('', circle);
+        handlerSaveAreaInfo('');
       }
     }
   };
 
-  const handlerAreaInfo = path => {
+  // 도형 정보 변경되면 저장
+  const handlerSaveAreaInfo = coord => {
     console.log('areaInfo');
-    let bufferZone = 100;
-    if (polygon.geometry.coordinates.length > 0) bufferZone = 0;
+    const bufferZone = polygon.geometry.coordinates.length > 0 ? 0 : 100;
     const prePath = [];
 
     if (lineString.geometry.coordinates.length > 0) {
@@ -456,7 +457,7 @@ export const MapBoxDraw = props => {
     }
 
     if (areaInfo.areaType !== 'CIRCLE') {
-      path.forEach(item => {
+      coord.forEach(item => {
         const p = {
           lat: item[1],
           lon: item[0]
@@ -480,9 +481,10 @@ export const MapBoxDraw = props => {
     }
 
     props.handlerCoordinates(areaInfo);
+    setIsDrawDone(true);
   };
 
-  // let이라서 지워지는 도형 재 생성
+  // 확정된 도형 재 생성(let이라서 지워지기 때문에)
   const handlerPastDraw = () => {
     if (props.areaCoordList) {
       console.log('pastDraw');
@@ -498,13 +500,11 @@ export const MapBoxDraw = props => {
 
           circle.properties.center = paths[0];
           circle.geometry.coordinates = circleCoords;
-          // setCircle(circle);
 
           geojson.features.push(circle);
         } else {
           if (areas.areaType === 'LINE') {
             lineString.geometry.coordinates = paths;
-            // setPolyline(lineString);
             geojson.features.push(lineString);
 
             // 버퍼 생성
@@ -516,21 +516,22 @@ export const MapBoxDraw = props => {
               );
 
               bufferPolyline.geometry.coordinates = bufferPaths;
-              // setBuffer(bufferPolyline);
 
               handlerReplaceDuplicate('buffer', bufferPolyline);
             }
           } else if (areas.areaType === 'POLYGON') {
             polygon.geometry.coordinates = [paths];
-            // setPolygon(polygon);
             geojson.features.push(polygon);
           }
 
           // 포인트 생성
-          paths.forEach((p, i) => handlerCreatePoint(p, i));
+          paths.forEach((p, i) => handlerCreatePoint(p, i, areas.areaType));
           handlerReplaceDuplicate('point', '');
           point.forEach(p => geojson.features.push(p));
 
+          //once로 하면 꼬이는건 해결되는데 지도를 움직이면 이벤트가 사라짐 -> 왜? onMouseDown이 실행된게 아니잖아?
+          //on으로 하면 그 반대 현상 -> 이벤트 다 지워줬는데 왜 down이 두번 잡혀??????
+          //얘만 해결하면 끝인데...
           if (!mouseDownEve) {
             mapObject.on('mousedown', 'waypoint', onMouseDown);
             setMouseDownEve(true);
@@ -576,14 +577,13 @@ export const MapBoxDraw = props => {
       }
     }
 
-    const content = handlerGetReplaceContent(distance);
     const popup = new props.mapboxgl.Popup({
       offset: anchor,
       closeButton: false,
       closeOnClick: false
     })
       .setLngLat(lngLat)
-      .setHTML(content)
+      .setHTML(handlerGetHtmlContent(distance))
       .addTo(mapObject);
   };
 
@@ -622,7 +622,7 @@ export const MapBoxDraw = props => {
   };
 
   // html Content 반환
-  const handlerGetReplaceContent = distance => {
+  const handlerGetHtmlContent = distance => {
     const text =
       typeof distance === 'number' ? fromMetersToText(distance) : distance;
 
@@ -640,7 +640,7 @@ export const MapBoxDraw = props => {
     return text;
   };
 
-  //중복되는 obj 제거 or 제거 후 새로 생성
+  // geojson에서 중복되는 obj 제거 or 제거 후 새로 생성
   const handlerReplaceDuplicate = (id, obj) => {
     geojson.features = geojson.features.filter(
       geo => geo.properties?.id !== id
@@ -648,42 +648,13 @@ export const MapBoxDraw = props => {
     if (obj !== '') geojson.features.push(obj);
   };
 
-  //도형 완성된 좌표 생성 or 변경 될 때 동작
-  const handlerSaveAreaInfo = (coord, obj) => {
-    if (obj.properties?.id === 'polyline') {
-      // setPolyline(obj);
-    } else if (obj.properties?.id === 'polygon') {
-      // setPolygon(obj);
-    } else if (obj.properties?.id === 'circle') {
-      // setCircle(obj);
-    }
-
-    if (obj.properties?.id !== 'circle') {
-      // setPoint(point);
-    }
-
-    handlerAreaInfo(coord);
-    setIsDrawDone(true);
-  };
-
-  //geojson에서 원하는 Id의 coord만 추출
+  // geojson에서 원하는 Id의 coord만 추출
   const handlerGetGeoJsonCoord = id => {
     return geojson.features
       .filter(geo => geo.properties?.id === id)
       .map(geo => geo.geometry.coordinates);
   };
 
-  // drawType에 따른 obj 반환
-  const handlerMatchObj = drawType => {
-    if (drawType === 'LINE') {
-      return lineString;
-    } else if (drawType === 'POLYGON') {
-      return polygon;
-    } else if (drawType === 'CIRCLE') {
-      return circle;
-    }
-  };
-
   // circle 360도 좌표 반환
   const handlerGetCircleCoord = (center, distance) => {
     const options = {
@@ -694,14 +665,14 @@ export const MapBoxDraw = props => {
   };
 
   // 포인트 생성
-  const handlerCreatePoint = (coord, index) => {
+  const handlerCreatePoint = (coord, index, type) => {
     const wayPoint = {
       type: 'Feature',
       geometry: {
         type: 'Point',
         coordinates: coord
       },
-      properties: { id: 'point', index: index }
+      properties: { id: 'point', index: index, type: type }
     };
     point.push(wayPoint);
 
diff --git a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
index f7dc74e6..31b90f08 100644
--- a/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
+++ b/src/containers/basis/flight/plan/FlightPlanAreaContainer.js
@@ -39,14 +39,14 @@ const FlightPlanAreaContainer = ({ handleModal, isDone, isDisabled }) => {
     <Row>
       <Col md={6} lg={6}>
         {airArea != null ? (
-          <FlightPlanAreaMap
-            airArea={airArea}
-            handleConfirm={handleConfirm}
-            isDone={isDone}
-            isDisabled={isDisabled}
-          />
-        ) : // <FlightPlanAreaMapBox isDone={isDone} isDisabled={isDisabled} />
-        null}
+          // <FlightPlanAreaMap
+          //   airArea={airArea}
+          //   handleConfirm={handleConfirm}
+          //   isDone={isDone}
+          //   isDisabled={isDisabled}
+          // />
+          <FlightPlanAreaMapBox isDone={isDone} isDisabled={isDisabled} />
+        ) : null}
       </Col>
       <Col md={6} lg={6}>
         <FlightPlanAreaDetailContainer