diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index 794920a..db76c47 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 ? (
<>
+
{/*
*/}
diff --git a/src/components/map/mapbox/dron/DronPlan.js b/src/components/map/mapbox/dron/DronPlan.js
new file mode 100644
index 0000000..c2b692f
--- /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;
+}