diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index 794920a3..db76c47a 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/src/components/map/mapbox/MapBoxMap.js
@@ -26,6 +26,7 @@ import flatGimpo from '../../map/geojson/flatGimpoAirportAirArea.json';
 // import SensorZone from './sensor/SensorZone';
 
 import { mapInitAction } from '../../../modules/control/map/actions/controlMapActions';
+import DronPlan from './dron/DronPlan';
 
 const uamPosition = {
   type: 'FeatureCollection',
@@ -752,6 +753,7 @@ export default function MapBoxMap() {
       {isMapLoaded && mapObject ? (
         <>
           <DronMarker map={mapObject} mapboxgl={mapboxgl} />
+          <DronPlan map={mapObject} mapboxgl={mapboxgl} />
 
           {/* <DronPlan map={mapObject} naver={naver} />
           <NewDronPlan map={mapObject} naver={naver} /> */}
diff --git a/src/components/map/mapbox/dron/DronPlan.js b/src/components/map/mapbox/dron/DronPlan.js
new file mode 100644
index 00000000..c2b692fd
--- /dev/null
+++ b/src/components/map/mapbox/dron/DronPlan.js
@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+export default function DronPlan({ map, mapboxgl }) {
+  const dispatch = useDispatch();
+
+  const { controlGpList } = useSelector(state => state.controlGpState);
+  const { controlGpFltPlanList } = useSelector(
+    state => state.controlGpFltPlanState
+  );
+
+  const [areaArr, setAreaArr] = useState([]);
+  const [bufferArr, setBufferArr] = useState([]);
+  const [controlIdArr, setControlIdArr] = useState([]);
+
+  useEffect(() => {
+    if (controlGpFltPlanList) {
+      //   console.log(controlGpFltPlanList, 'planList');
+      //   planInit();
+    }
+  }, [controlGpFltPlanList]);
+
+  useEffect(() => {
+    if (controlGpList) {
+      //   console.log(controlGpList, 'gplist');
+      //   const listArr = controlGpList.map(gpList => {
+      //     return gpList.objectId;
+      //   });
+      //   if (controlIdArr != listArr) {
+      //     setControlIdArr(listArr);
+      //     const diff = controlIdArr.filter(list => !listArr.includes(list));
+      //     if (diff) clear(diff);
+      //   }
+    }
+  }, [controlGpList]);
+
+  //   const planInit = () => {
+  //     const planList = controlGpFltPlanList;
+  //     planList.forEach(plan => {
+  //       const areaList = plan.areaList;
+
+  //       areaList.forEach(area => {
+  //         const coordList = area.coordList; // 기초 좌표
+  //         const bufferList = area.bufferCoordList; // 기초 좌표의 버퍼 좌표
+  //         const bufferZone = area.bufferZone; // 반경 값
+  //         const areaType = area.areaType; // 도형 타입
+
+  //         const paths = [];
+  //         coordList.forEach(coord => {
+  //           const path = new naver.maps.LatLng(coord.lat, coord.lon);
+
+  //           paths.push(path);
+  //         });
+
+  //         const idntfNum = plan.arcrftList[0].idntfNum;
+  //         if (areaType === 'LINE') {
+  //           polyline(paths, bufferList, idntfNum);
+  //         }
+  //         if (areaType === 'POLYGON') {
+  //           //
+  //         }
+  //         if (areaType === 'CIRCLE') {
+  //           //
+  //         }
+  //       });
+  //     });
+  //   };
+
+  //   const polyline = (paths, bufferList, idntfNum) => {
+  //     if (paths && paths.length > 1) {
+  //       const line = new naver.maps.Polyline({
+  //         strokeLineCap: 'round',
+  //         strokeLineJoin: 'round',
+  //         strokeColor: '#283046',
+  //         strokeWeight: 1,
+  //         strokeOpacity: 0.5,
+  //         path: paths,
+  //         map: map
+  //       });
+  //       setAreaArr(prev => [...prev, { idntfNum: idntfNum, line: line }]);
+  //     }
+  //     if (bufferList && bufferList.length > 1) {
+  //       const paths = [];
+  //       bufferList.forEach(buffer => {
+  //         const path = new naver.maps.LatLng(buffer.lat, buffer.lon);
+
+  //         paths.push(path);
+  //       });
+
+  //       const lineBuffer = new naver.maps.Polygon({
+  //         strokeColor: '#283046',
+  //         strokeOpacity: 1,
+  //         fillColor: '#8a1c05',
+  //         fillOpacity: 0.1,
+  //         paths: paths,
+  //         map: map
+  //       });
+
+  //       setBufferArr(prev => [
+  //         ...prev,
+  //         { idntfNum: idntfNum, lineBuffer: lineBuffer }
+  //       ]);
+  //     }
+  //   };
+
+  //   const clear = diffArr => {
+  //     if (areaArr) {
+  //       const clearArea = areaArr
+  //         .filter(area => diffArr.includes(area.idntfNum))
+  //         .map(obj => obj.line);
+
+  //       const clearBuffer = bufferArr
+  //         .filter(buffer => diffArr.includes(buffer.idntfNum))
+  //         .map(obj => obj.lineBuffer);
+
+  //       clearArea.map(area => area.setMap(null));
+  //       clearBuffer.map(buffer => buffer.setMap(null));
+
+  //       const saveArea = areaArr.filter(area => !diffArr.includes(area.idntfNum));
+  //       const saveBuffer = bufferArr.filter(
+  //         buffer => !diffArr.includes(buffer.idntfNum)
+  //       );
+  //       setAreaArr(saveArea);
+  //       setBufferArr(saveBuffer);
+  //       //   dispatch(controlGpFlightPlanInitAction());
+  //     }
+  //   };
+
+  return null;
+}