console 제거

src/@core/layouts/components/menu/vertical-menu/VerticalNavMenuLink.js

@@ -34,8 +34,6 @@ const VerticalNavMenuLink = ({
 
   const naviData = [...basis, ...statics, ...system, ...analysis];
 
-  // console.log(naviData);
-
   // ** To match path
   const match = matchPath(currentURL, {
     path: `${item.navLink}/:param`,

src/@core/layouts/components/menu/vertical-menu/index.js

@@ -23,7 +23,6 @@ const Sidebar = props => {
   const { topMenuCd } = useSelector(state => state.menuState);
 
   useEffect(() => {
-    // console.log('>>>>>>>>>>>>>>', topMenuCd);
     navData();
   }, [topMenuCd]);
 

src/@core/layouts/components/navbar/UserDropdown.js

@@ -31,7 +31,6 @@ const UserDropdown = () => {
   };
 
   // useEffect(() => {
-  //   console.log('[ISLOGIN :::::: ] ', isLogin);
   //   if (isLogin === undefined) {
   //     return;
   //   }
@@ -54,11 +53,11 @@ const UserDropdown = () => {
 
   //** Vars
   const userAvatar = (userData && userData.avatar) || defaultAvatar;
-  
+
   const movePage = url => {
     history.push(url);
   };
-  
+
   const profileInfo = () => {
     history.push('/mypage/myinfo/');
   };
@@ -78,9 +77,12 @@ const UserDropdown = () => {
         <Avatar img={userAvatar} imgHeight='40' imgWidth='40' status='online' />
       </DropdownToggle>
       <DropdownMenu right>
-        <DropdownItem onClick={profileInfo} tag={Link}
+        <DropdownItem
+          onClick={profileInfo}
+          tag={Link}
           // to='/login'
-          to='#'>
+          to='#'
+        >
           <User size={14} className='mr-75' />
           <span className='align-middle'>Profile</span>
         </DropdownItem>

src/components/account/register/AccountRegister.js

@@ -11,7 +11,6 @@ export const AccountRegister = ({ props }) => {
   const [memberName, setMemberName] = useState();
   const ref = useRef(null);
 
-  // console.log(props);
   const movePage = url => {
     props.history.push(url);
   };

src/components/account/register/AccountRegisterForm.js

@@ -124,8 +124,6 @@ export const AccountRegisterForm = ({
       return;
     }
 
-    // console.log(res);
-
     if (isRunning) {
       clearInterval(timer);
     }
@@ -139,7 +137,6 @@ export const AccountRegisterForm = ({
   };
 
   useEffect(() => {
-    // console.log('isRunning>>>', isRunning);
     if (isRunning) {
       clearInterval(timer);
     } else {
@@ -233,8 +230,6 @@ export const AccountRegisterForm = ({
         agreeTerms: agreeTerms
       });
 
-      //  console.log(res);
-
       if (res.data?.errCode === -1) {
         setModal({
           isOpen: true,
@@ -243,7 +238,6 @@ export const AccountRegisterForm = ({
         });
         return;
       }
-      // console.log('res>>>', res.data?.err);
 
       if (res.data?.errCode === 1) {
         stepper.next();
@@ -296,7 +290,6 @@ export const AccountRegisterForm = ({
   let hpno = '';
   let brthdyDate = '';
   const onChangeHandler = e => {
-    // console.log(register);
     const { name, value } = e.target;
 
     if (name === 'memberName') {

src/components/account/register/AccountRegisterTerm.js

@@ -138,8 +138,6 @@ export const AccountRegisterTerm = ({ stepper, type, movePage }) => {
       }
     }
 
-    // console.log(termChecked);
-    // console.log(!termAll);
     // setTermPrivacy(!termAll);
     // setTermService(!termAll);
     // setTermAll(!termAll);

src/components/analysis/simulation/AnalysimuationInfo.js

@@ -8,12 +8,10 @@ export const AnalysimuationInfo = props => {
         <div className='no-dataTable'>표시할 데이터가 없습니다.</div>
       ) : (
         props.data?.map(item => {
-          // console.log(
           //   item.idntfNum,
           //   ':::',
           //   item.idntfNum.indexOf(props.filterId)
           // );
-          // console.log(item.idntfNum.indexOf(props.filterId));
 
           if (item.idntfNum) {
             return (

src/components/analysis/simulation/AnalysisSimulationMenu.js

@@ -18,12 +18,12 @@ export const AnalysisSimulationMenu = props => {
           </button>
         </li>
         {/* <li>
-          <button onClick={() => console.log(2222)}>
+          <button onClick={() => {}}>
             <Sun size={25} />
           </button>
         </li>
         <li>
-          <button onClick={() => console.log(333)}>
+          <button onClick={() => {}}>
             <Bell size={25} />
           </button>
         </li> */}

src/components/analysis/simulation/AnalysisSimulationReport.js

@@ -5,59 +5,58 @@ import Flatpickr from 'react-flatpickr';
 import { Button, Input, InputGroup } from 'reactstrap';
 
 export const AnalysisSimulationReport = props => {
-  // console.log(props.params);
   const [filterId, setFilterId] = useState('');
 
-
-
   return (
-    
+    <div className='layer-content'>
-      <div className='layer-content'>
+      <div className='layer-ti'>
-        <div className='layer-ti'>
+        <h4>비행 Simulation</h4>
-          <h4>비행 Simulation</h4>
+        <button
-          <button
+          className='btn-icon'
-            className='btn-icon'
+          color='primary'
-            color='primary'
+          onClick={() => props.setOpenReportList(false)}
-            onClick={() => props.setOpenReportList(false)}
+        >
-          >
+          <X size={20} />
-            <X size={20} />
+        </button>
-          </button>
+      </div>
+      <div className='layer-search layer-search-form'>
+        <div className='sm-txt'>
+          검색하실 날짜 정보 또는 드론 식별번호를 입력해 주세요.
         </div>
-        <div className='layer-search layer-search-form'>
+        <div>
-          <div className='sm-txt'>
+          <div className='d-flex align-items-center calendar-flat'>
-            검색하실 날짜 정보 또는 드론 식별번호를 입력해 주세요.
+            <Flatpickr
-          </div>
-          <div>
-            <div className='d-flex align-items-center calendar-flat'>
-              <Flatpickr
               placeholder='날짜를 선택해주세요'
-                options={{
+              options={{
-                  mode: 'range',
+                mode: 'range',
-                  defaultDate: [props.params.stDate, props.params.endDate]
+                defaultDate: [props.params.stDate, props.params.endDate]
-                }}
+              }}
-                onChange={val => props.handlerInput('searchDate', val)}
+              onChange={val => props.handlerInput('searchDate', val)}
-                className='form-control flat-picker bg-transparent border-0 shadow-none'
+              className='form-control flat-picker bg-transparent border-0 shadow-none'
-              />
+            />
-              <Calendar size={14} />
+            <Calendar size={14} />
-            </div>
-          </div>
-          <div>
-            <InputGroup>
-              <Input
-                type='text'
-                placeholder='식별번호를 입력하세요'
-                value={filterId}
-                onChange={e => setFilterId(`${e.target.value}`)}
-              />
-            </InputGroup>
-          </div>
-          <div>
-            <Button color='primary' onClick={()=>props.handlerSearch(filterId)} size='sm'>
-              검색
-            </Button>
           </div>
         </div>
+        <div>
+          <InputGroup>
+            <Input
+              type='text'
+              placeholder='식별번호를 입력하세요'
+              value={filterId}
+              onChange={e => setFilterId(`${e.target.value}`)}
+            />
+          </InputGroup>
+        </div>
+        <div>
+          <Button
+            color='primary'
+            onClick={() => props.handlerSearch(filterId)}
+            size='sm'
+          >
+            검색
+          </Button>
+        </div>
       </div>
-
+    </div>
   );
 };

src/components/basis/flight/plan/FlightPlanForm.js

@@ -45,12 +45,9 @@ const FlightPlanForm = ({
   // const schema = yup.object().shape({});
 
   useEffect(() => {
-    // console.log(detail);
     if (detail?.createUserId == user?.cstmrSno || !detail.createUserId) {
-      // console.log(true)
       setTest(false);
     } else {
-      // console.log(false)
       setTest(true);
     }
   }, [detail]);
@@ -696,10 +693,8 @@ const PilotForm = ({ data, handleChange, index, handleDeleteArray }) => {
 
   useEffect(() => {
     if (detail?.createUserId == user?.cstmrSno || !detail.createUserId) {
-      // console.log(true)
       setTest(false);
     } else {
-      // console.log(false)
       setTest(true);
     }
   }, [detail]);
@@ -834,10 +829,8 @@ const ArcrftForm = ({ data, handleChange, index, handleDeleteArray }) => {
 
   useEffect(() => {
     if (detail?.createUserId == user?.cstmrSno || !detail.createUserId) {
-      // console.log(true)
       setTest(false);
     } else {
-      // console.log(false)
       setTest(true);
     }
   }, [detail]);

src/components/crud/excel/ExcelExportButton.js

@@ -3,7 +3,6 @@ import { CSVLink, CSVDownload } from 'react-csv';
 import { Button } from 'reactstrap';
 import { File } from 'react-feather';
 export const ExcelExportButton = props => {
-  // console.log(props);
   return (
     <CSVLink
       headers={props.headers}

src/components/map/MapControl.js

@@ -3,7 +3,6 @@ import { GoogleCustomMap } from './google/GoogleMap';
 import { NaverCustomMap } from './naver/NaverMap';
 
 export const MapControl = props => {
-  // console.log('```````````````````````');
   return (
     <>{props.mapType === 'google' ? <GoogleCustomMap /> : <NaverCustomMap />}</>
   );

src/components/map/google/GoogleMap.js

@@ -17,8 +17,7 @@ const MapInit = () => {
   const { controlGpList } = useSelector(state => state.controlGpState);
   const [bounds, setBounds] = useState(null);
 
-  useEffect(() => {
+  useEffect(() => {}, [controlGpList]);
-  }, [controlGpList]);
   const onSearchBoxMounted = () => {};
 
   const onPlacesChanged = () => {};
@@ -49,7 +48,6 @@ export const GoogleCustomMap = () => {
     url: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing,geometryplaces'
   };
 
-  // console.log(`${mapProps.url}&key=${mapProps.key}`);
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
       <GoogleMapWrapped

src/components/map/naver/NaverMapControl.js

@@ -5,11 +5,9 @@ const NaverMapControl = props => {
   const mapControl = useSelector(state => state.controlMapReducer);
 
   // useEffect(() => {
-  //   console.log('>>>>', props.map);
+
   // }, []);
-  useEffect(() => {
+  useEffect(() => {}, [mapControl]);
-    // console.log('mapControl>>>>>>>>>>', mapControl);
-  }, [mapControl]);
 
   //맵타입 변경
   if (mapControl.mapType === 'NORMAL') {

src/components/map/naver/draw/FlightPlanDraw.js

@@ -17,7 +17,7 @@ export const FlightPlanDraw = props => {
 
   const [pastClickEve, setClickEve] = useState();
   const [pastMarker, setMarker] = useState([]);
-  
+
   const [figure, setFigure] = useState();
 
   const [areaDetail, setAreaDetail] = useState();
@@ -26,13 +26,13 @@ export const FlightPlanDraw = props => {
     isOpen: false,
     title: '',
     desc: ''
-  })
+  });
 
   const naver = props.naver;
   const map = props.map;
   let mode = props.mode;
   let dragCircleSize = props.dragCircleSize;
- 
+
   let areaInfo;
   let lastDistance;
 
@@ -49,7 +49,7 @@ export const FlightPlanDraw = props => {
     clickEve: '',
     mousedownEve: '',
     rightclickEve: ''
-  }
+  };
 
   let dragCircle = [];
   let dragCircleEve = [];
@@ -58,28 +58,28 @@ export const FlightPlanDraw = props => {
 
   const handleBufferList = () => {
     dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail));
-  }
+  };
 
   useEffect(() => {
     drawInit();
-  }, [mapControl.drawType])
+  }, [mapControl.drawType]);
-  
+
   useEffect(() => {
     handleDetailDraw();
-  }, [props.areaCoordList])
+  }, [props.areaCoordList]);
 
   useEffect(() => {
-    if(figure) {
+    if (figure) {
       props.handleConfirm(props.areaCoordList);
       setAreaDetail(props.areaCoordList);
     }
-  }, [figure])
+  }, [figure]);
-  
+
   useEffect(() => {
-    if(pastPolyline) {
+    if (pastPolyline) {
       handleBufferList();
     }
-  }, [areaDetail])
+  }, [areaDetail]);
 
   const drawInit = () => {
     if (mapControl.drawType === 'LINE') {
@@ -89,13 +89,11 @@ export const FlightPlanDraw = props => {
     } else if (mapControl.drawType === 'POLYGON') {
       onClickButton('POLYGON');
     } else if (mapControl.drawType === 'RESET') {
-      onClickReset('RESET')
+      onClickReset('RESET');
     }
-  }
+  };
-
-  const onClickButton = (newMode) => {
-    //console.log('onClickButton');
 
+  const onClickButton = newMode => {
     clearMode(mode);
 
     if (mode === newMode) {
@@ -103,18 +101,15 @@ export const FlightPlanDraw = props => {
       return;
     }
 
-    // mode = newMode; 
+    // mode = newMode;
 
     startMode(newMode);
-  }
+  };
-
-  const clearMode = (mode) => {
-    //console.log('clearMode')
 
+  const clearMode = mode => {
     // if(!mode) return;
 
     if (pastPolyline) {
-     // console.log('clear polyline ', pastPolyline)
       pastPolyline.setMap(null);
       pastDragCircle.forEach(c => c.setMap(null));
       pastBuffer.setMap(null);
@@ -123,14 +118,12 @@ export const FlightPlanDraw = props => {
       setBuffer();
     }
     if (pastCircle.length != 0) {
-      //console.log('clear circle ', pastCircle)
+      pastCircle.forEach(prev => prev.setMap(null));
-      pastCircle.forEach(prev => prev.setMap(null))
       naver.maps.Event.removeListener(pastClickEve);
 
       setCircle([]);
     }
     if (pastPolygon) {
-     // console.log('clear polygon ', pastPolygon)
       pastPolygon.setMap(null);
       pastDragCircle.forEach(c => c.setMap(null));
 
@@ -138,38 +131,39 @@ export const FlightPlanDraw = props => {
       setDragCircle([]);
     }
     if (pastMarker.length != 0) {
-     // console.log('clear marker ', pastMarker)
+      pastMarker.forEach(m => m.setMap(null));
-      pastMarker.forEach(m => m.setMap(null))
       setMarker([]);
     }
 
     finishDraw();
-    props.handleInitCoordinates(); 
+    props.handleInitCoordinates();
-  }
+  };
-
-  const startMode = (mode) => {
-   // console.log('startMode')
 
+  const startMode = mode => {
     if (!mode) return;
 
-    if(pastClickEve) {
+    if (pastClickEve) {
       naver.maps.Event.removeListener(pastClickEve);
     }
     if (mode === 'LINE') {
-      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) });
+      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) {
+        onClickPolyline(e);
+      });
       setClickEve(Eve.clickEve);
     } else if (mode === 'POLYGON') {
-      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) });
+      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) {
+        onClickPolygon(e);
+      });
       setClickEve(Eve.clickEve);
     } else if (mode === 'CIRCLE') {
-      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) });
+      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) {
+        onClickCircle(e);
+      });
       setClickEve(Eve.clickEve);
     }
-  }
+  };
 
   const removeListener = () => {
-  //  console.log('removeListener')
-
     naver.maps.Event.removeListener(Eve.clickEve);
     naver.maps.Event.removeListener(pastClickEve);
     setClickEve();
@@ -177,10 +171,9 @@ export const FlightPlanDraw = props => {
     naver.maps.Event.removeListener(Eve.mousedownEve);
     naver.maps.Event.removeListener(Eve.rightclickEve);
     if (!circle) $(document).off('mousemove.measure');
-  }
+  };
 
   const finishDraw = () => {
-    //console.log('finishDraw')
     removeListener();
 
     if (polyline) {
@@ -191,8 +184,8 @@ export const FlightPlanDraw = props => {
 
       let polypaths = polyline.getPath()._array;
 
-      setMarker(distanceMarker)
+      setMarker(distanceMarker);
-      distanceMarker.forEach(c => c.setMap(null))
+      distanceMarker.forEach(c => c.setMap(null));
 
       if (polypaths.length >= 2) {
         setPolyline(polyline);
@@ -202,14 +195,13 @@ export const FlightPlanDraw = props => {
           isOpen: true,
           title: '좌표 최소 개수',
           desc: '좌표를 두 개 점으로 이어주세요.'
-        })
+        });
 
         polyline.setMap(null);
         polyline = '';
       }
 
-      setFigure(polyline)
+      setFigure(polyline);
-
     } else if (polygon) {
       let path = polygon.getPath();
       path.pop();
@@ -223,9 +215,9 @@ export const FlightPlanDraw = props => {
       // addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance));
 
       setMarker(distanceMarker);
-      distanceMarker.forEach(c => c.setMap(null))
+      distanceMarker.forEach(c => c.setMap(null));
 
-      if(polygonpaths.length >= 3) {
+      if (polygonpaths.length >= 3) {
         setPolygon(polygon);
         setAreaInfo(polygonpaths);
       } else {
@@ -233,17 +225,16 @@ export const FlightPlanDraw = props => {
           isOpen: true,
           title: '좌표 최소 개수',
           desc: '좌표를 세 개 점으로 이어주세요.'
-        })
+        });
-        polygon.setMap(null)
+        polygon.setMap(null);
         polygon = '';
       }
 
-      setFigure(polygon)
+      setFigure(polygon);
     }
-  }
+  };
 
-  const onClickPolyline = (e) => {
+  const onClickPolyline = e => {
-    //console.log('onClickPolyline')
     var coord = e.coord;
 
     if (!polyline) {
@@ -269,24 +260,34 @@ export const FlightPlanDraw = props => {
         map: map
       });
 
-      Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
+      Eve.rightclickEve = naver.maps.Event.addListener(
-      $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); });
+        map,
+        'rightclick',
+        function () {
+          finishDraw();
+        }
+      );
+      $(document).on('mousemove.measure', function (e) {
+        onMouseMovePolyline(e);
+      });
 
       lastDistance = polyline.getDistance();
-      addMileStone(coord, 'Start')
+      addMileStone(coord, 'Start');
     } else {
       guideline.setPath([e.coord]);
       polyline.getPath().push(coord);
 
       var distance = polyline.getDistance();
       // addMileStone(coord, fromMetersToText(distance - lastDistance));
-      addMileStone(polyline.getPath()._array, fromMetersToText(distance - lastDistance));
+      addMileStone(
+        polyline.getPath()._array,
+        fromMetersToText(distance - lastDistance)
+      );
       lastDistance = distance;
     }
-  }
+  };
 
-  const onMouseMovePolyline = (e) => {
+  const onMouseMovePolyline = e => {
-  //  console.log('onMouseMovePolyline')
     var proj = map.getProjection(),
       coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
       path = guideline.getPath();
@@ -296,10 +297,9 @@ export const FlightPlanDraw = props => {
     }
 
     path.push(coord);
-  }
+  };
 
-  const onClickPolygon = (e) => {
+  const onClickPolygon = e => {
-  //  console.log('onClickPolygon')
     var coord = e.coord;
     // let guide;
 
@@ -320,28 +320,34 @@ export const FlightPlanDraw = props => {
       });
       guideline.setVisible(false);
 
-      Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
+      Eve.rightclickEve = naver.maps.Event.addListener(
-      $(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) });
+        map,
+        'rightclick',
+        function () {
+          finishDraw();
+        }
+      );
+      $(document).on('mousemove.measure', function (e) {
+        onMouseMovePolygon(e);
+      });
 
       lastDistance = guideline.getDistance();
-      addMileStone(coord, 'Start')
+      addMileStone(coord, 'Start');
     } else {
       polygon.getPath().push(coord);
       guideline.getPath().push(coord);
 
-      // console.log(polygon.getPath()._array, 'polygon')
-      // console.log(guideline.getPath()._array.length, 'guide')
-      // console.log(polygon.getPath()._array.length)
-
       var distance = guideline.getDistance();
       // addMileStone(coord, fromMetersToText(distance - lastDistance));
-      addMileStone(guideline.getPath()._array, fromMetersToText(distance - lastDistance));
+      addMileStone(
+        guideline.getPath()._array,
+        fromMetersToText(distance - lastDistance)
+      );
       lastDistance = distance;
     }
-  }
+  };
 
-  const onMouseMovePolygon = (e) => {
+  const onMouseMovePolygon = e => {
-    //console.log('onMouseMovePolygon')
     if (!polygon) return;
 
     var proj = map.getProjection(),
@@ -353,19 +359,18 @@ export const FlightPlanDraw = props => {
     }
 
     path.push(coord);
-  }
+  };
 
-  const onClickCircle = (e) => {
+  const onClickCircle = e => {
-   // console.log('onClickCircle')
     var coord = e.coord;
 
-    if(!circle) {
+    if (!circle) {
       radiusline = new naver.maps.Polyline({
         strokeStyle: [4, 4],
         strokeOpacity: 0.6,
-        path: [coord],
+        path: [coord]
         // map: map
-      })
+      });
       lastDistance = radiusline.getDistance();
 
       circle = new naver.maps.Circle({
@@ -377,25 +382,29 @@ export const FlightPlanDraw = props => {
         radius: 100,
         map: map,
         clickable: true
-      })
+      });
 
-      Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
+      Eve.mousedownEve = naver.maps.Event.addListener(
+        circle,
+        'mousedown',
+        function () {
+          onMouseDownDrag(0);
+        }
+      );
 
       addMileStone(coord, fromMetersToText(100));
     } else {
       circle.setCenter(coord);
       circle.setRadius(100);
-      distanceMarker.setPosition(coord)
+      distanceMarker.setPosition(coord);
     }
-    setCircle(prev => ([...prev, circle]))
+    setCircle(prev => [...prev, circle]);
     setAreaInfo('');
     setMarker(distanceMarker);
     setFigure(circle.center);
-  }
+  };
-
-  const onMouseDownDrag = (index) => {
- //   console.log('onMouseDownDrag')
 
+  const onMouseDownDrag = index => {
     map.setOptions({
       draggable: false,
       pinchZoom: false,
@@ -404,19 +413,21 @@ export const FlightPlanDraw = props => {
       disableDoubleTapZoom: true,
       disableDoubleClickZoom: true,
       disableTwoFingerTapZoom: true
-    })
+    });
 
-    if(circle) {
+    if (circle) {
       removeListener();
     }
 
-    $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) });
+    $(document).on('mousemove.measure', function (e) {
-    $(document).on('mouseup.measure', function () { onMouseUpDrag(index) });
+      onMouseMoveDrag(e, index);
-  }
+    });
+    $(document).on('mouseup.measure', function () {
+      onMouseUpDrag(index);
+    });
+  };
 
   const onMouseMoveDrag = (e, index) => {
-    //console.log('onMouseMoveDrag')
-
     var proj = map.getProjection(),
       coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY));
 
@@ -429,13 +440,12 @@ export const FlightPlanDraw = props => {
         if (i === index) {
           path = coord;
         } else {
-          path = polypaths[i]
+          path = polypaths[i];
         }
         movepath.push(path);
       }
 
       polyline.setPath(movepath);
-
     } else if (polygon) {
       var polygonpaths = polygon.getPath()._array;
 
@@ -445,12 +455,11 @@ export const FlightPlanDraw = props => {
         if (i === index) {
           path = coord;
         } else {
-          path = polygonpaths[i]
+          path = polygonpaths[i];
         }
         movepath.push(path);
       }
-      polygon.setPaths(movepath)
+      polygon.setPaths(movepath);
-
     } else if (circle) {
       var center = circle.getCenter(),
         r = proj.getDistance(coord, center);
@@ -461,11 +470,9 @@ export const FlightPlanDraw = props => {
     if (!circle) {
       dragCircle[index].setCenter(coord);
     }
-  }
+  };
-
-  const onMouseUpDrag = (index) => {
-   // console.log('onMouseUpDrag')
 
+  const onMouseUpDrag = index => {
     map.setOptions({
       draggable: true,
       pinchZoom: true,
@@ -474,7 +481,7 @@ export const FlightPlanDraw = props => {
       disableDoubleTapZoom: false,
       disableDoubleClickZoom: false,
       disableTwoFingerTapZoom: false
-    })
+    });
 
     if (polyline) {
       var path = polyline.getPath()._array;
@@ -494,34 +501,36 @@ export const FlightPlanDraw = props => {
     $(document).off('mouseup.measure');
 
     if (circle) {
-      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })
+      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) {
+        onClickCircle(e);
+      });
       setClickEve(Eve.clickEve);
 
-      setCircle(prev => ([...prev, circle]))
+      setCircle(prev => [...prev, circle]);
       setAreaInfo('');
-      setFigure(circle)
+      setFigure(circle);
     }
-  }
+  };
 
-  const setAreaInfo = (path) => {
+  const setAreaInfo = path => {
     let bufferZone = 100;
-    if(polygon) bufferZone = 0;
+    if (polygon) bufferZone = 0;
-    
+
     areaInfo = {
       coordinates: [],
-      bufferZone: bufferZone,
+      bufferZone: bufferZone
     };
 
     let prePath = [];
     if (path) {
-      path.forEach((item) => {
+      path.forEach(item => {
         const p = {
           lat: item.y,
           lon: item.x
-        }
+        };
 
         prePath.push(p);
-      })
+      });
       // path.forEach(prev=> prePath.push([prev.x, prev.y]))
     }
 
@@ -535,53 +544,58 @@ export const FlightPlanDraw = props => {
       const point = {
         lat: circle.getCenter().y,
         lon: circle.getCenter().x
-      }
+      };
 
       areaInfo.coordinates.push(point);
       areaInfo.bufferZone = circle.getRadius();
       areaInfo.areaType = 'CIRCLE';
     }
     props.handleCoordinates(areaInfo);
-  }
+  };
 
   const onClickReset = () => {
-   // console.log('onClickRest - ', mapControl.drawType);
     if (mapControl.drawType === 'RESET') {
       clearMode('RESET');
     }
-  }
+  };
 
-  const createMarker = (data) => {
+  const createMarker = data => {
     distanceMarker.push(
       new naver.maps.Marker({
         position: data.position,
         icon: {
-          content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:' + data.color + ';"><span>'+ data.content +'</span></div>',
+          content:
+            '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:' +
+            data.color +
+            ';"><span>' +
+            data.content +
+            '</span></div>',
           anchor: data.anchor
-        }, map: map
+        },
+        map: map
       })
-    )
+    );
-  }
+  };
 
   const handleDetailDraw = () => {
     if (props.areaCoordList) {
-     // console.log('handleDetailDraw')     
-
       const areas = props.areaCoordList[0];
 
       const paths = [];
-      areas.coordList.forEach((coord) => {
+      areas.coordList.forEach(coord => {
-        const path = new naver.maps.LatLng(coord.lat, coord.lon)
+        const path = new naver.maps.LatLng(coord.lat, coord.lon);
 
         paths.push(path);
       });
 
       let clickSet;
-      {isDisabled===true ? clickSet=false : clickSet=true}
+      {
+        isDisabled === true ? (clickSet = false) : (clickSet = true);
+      }
 
       if (areas.areaType && areas.areaType === 'LINE') {
         //polyline 생성
-        if(pastPolyline) {
+        if (pastPolyline) {
           pastPolyline.setMap(null);
           pastDragCircle.forEach(c => c.setMap(null));
         }
@@ -595,10 +609,10 @@ export const FlightPlanDraw = props => {
           map: map
         });
 
-        setPolyline(polyline)
+        setPolyline(polyline);
 
         //dragCircle 생성
-        for(let i = 0; i < paths.length; i++) {
+        for (let i = 0; i < paths.length; i++) {
           dragCircle.push(
             new naver.maps.Circle({
               strokestrokeOpacity: 1,
@@ -612,12 +626,20 @@ export const FlightPlanDraw = props => {
               // clickable: true
               clickable: clickSet
             })
-          )
+          );
           // dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
-          {isDisabled ?
+          {
-            {}
+            isDisabled
-            :
+              ? {}
-            dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
+              : dragCircleEve.push(
+                  naver.maps.Event.addListener(
+                    dragCircle[i],
+                    'mousedown',
+                    function () {
+                      onMouseDownDrag(i);
+                    }
+                  )
+                );
           }
         }
 
@@ -627,14 +649,13 @@ export const FlightPlanDraw = props => {
         if (areas.bufferCoordList) {
           const bufferPaths = [];
 
-          areas.bufferCoordList.forEach((bfCoord) => {
+          areas.bufferCoordList.forEach(bfCoord => {
             const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon);
 
             bufferPaths.push(path);
           });
-       //  console.log('buffer test : ',areas.bufferCoordList);
+
-          
+          if (pastBuffer) {
-          if(pastBuffer) {
             pastBuffer.setMap(null);
           }
 
@@ -649,28 +670,30 @@ export const FlightPlanDraw = props => {
         }
 
         //marker 생성
-        if(pastMarker) {
+        if (pastMarker) {
           pastMarker.forEach(c => c.setMap(null));
         }
 
-        for(let i = 0; i < paths.length; i++) {
+        for (let i = 0; i < paths.length; i++) {
-          if(i == 0) {
+          if (i == 0) {
             const data = {};
             data.position = paths[i];
             data.color = '#ff0000';
             data.content = 'Start';
             data.anchor = new naver.maps.Point(45, 35);
             createMarker(data);
-
           } else {
             var proj = map.getProjection(),
-                r = proj.getDistance(paths[i-1], paths[i]);
+              r = proj.getDistance(paths[i - 1], paths[i]);
-  
-            let text = fromMetersToText(r); 
 
-            let dis1 = paths[i-1]
+            let text = fromMetersToText(r);
-            let dis2 = paths[i]
+
-            let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
+            let dis1 = paths[i - 1];
+            let dis2 = paths[i];
+            let midPoint = new naver.maps.LatLng(
+              (dis1.y + dis2.y) / 2,
+              (dis1.x + dis2.x) / 2
+            );
 
             const data = {};
             data.position = midPoint;
@@ -685,7 +708,7 @@ export const FlightPlanDraw = props => {
 
       if (areas.areaType && areas.areaType === 'POLYGON') {
         //polygon 생성
-        if(pastPolygon) {
+        if (pastPolygon) {
           pastPolygon.setMap(null);
           pastDragCircle.forEach(c => c.setMap(null));
         }
@@ -701,7 +724,7 @@ export const FlightPlanDraw = props => {
         setPolygon(polygon);
 
         //dragCircle 생성
-        for(let i = 0; i < paths.length; i++) {
+        for (let i = 0; i < paths.length; i++) {
           dragCircle.push(
             new naver.maps.Circle({
               strokestrokeOpacity: 1,
@@ -715,26 +738,33 @@ export const FlightPlanDraw = props => {
               // clickable: true
               clickable: clickSet
             })
-          )
+          );
           // dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
-          {isDisabled ?
+          {
-            {}
+            isDisabled
-            :
+              ? {}
-            dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
+              : dragCircleEve.push(
+                  naver.maps.Event.addListener(
+                    dragCircle[i],
+                    'mousedown',
+                    function () {
+                      onMouseDownDrag(i);
+                    }
+                  )
+                );
           }
         }
 
         setDragCircle(dragCircle);
 
-
         //marker 생성
-        if(pastMarker) {
+        if (pastMarker) {
-          pastMarker.forEach(c => c.setMap(null))
+          pastMarker.forEach(c => c.setMap(null));
         }
 
-        for(let i = 0; i < paths.length+1; i++) {
+        for (let i = 0; i < paths.length + 1; i++) {
           //start
-          if(i == 0) {
+          if (i == 0) {
             const data = {};
             data.position = paths[0];
             data.color = '#ff0000';
@@ -742,16 +772,19 @@ export const FlightPlanDraw = props => {
             data.anchor = new naver.maps.Point(45, 35);
             createMarker(data);
 
-          //첫좌표이자 마지막 좌표
+            //첫좌표이자 마지막 좌표
-          } else if(i == paths.length) {
+          } else if (i == paths.length) {
             var proj = map.getProjection(),
-                r = proj.getDistance(paths[0], paths[i-1]);
+              r = proj.getDistance(paths[0], paths[i - 1]);
 
             let text = fromMetersToText(r);
 
-            let dis1 = paths[0]
+            let dis1 = paths[0];
-            let dis2 = paths[i-1]
+            let dis2 = paths[i - 1];
-            let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
+            let midPoint = new naver.maps.LatLng(
+              (dis1.y + dis2.y) / 2,
+              (dis1.x + dis2.x) / 2
+            );
 
             const data = {};
             data.position = midPoint;
@@ -759,33 +792,35 @@ export const FlightPlanDraw = props => {
             data.content = text;
             data.anchor = new naver.maps.Point(0, 35);
             createMarker(data);
-          //그 외 나머지
+            //그 외 나머지
           } else {
             var proj = map.getProjection(),
-                r = proj.getDistance(paths[i-1], paths[i]);
+              r = proj.getDistance(paths[i - 1], paths[i]);
 
-            let text = fromMetersToText(r); 
+            let text = fromMetersToText(r);
 
-            let dis1 = paths[i-1]
+            let dis1 = paths[i - 1];
-            let dis2 = paths[i]
+            let dis2 = paths[i];
-            let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
+            let midPoint = new naver.maps.LatLng(
+              (dis1.y + dis2.y) / 2,
+              (dis1.x + dis2.x) / 2
+            );
 
             const data = {};
             data.position = midPoint;
             data.color = '#737373';
             data.content = text;
-            anchor: new naver.maps.Point(20, 35)
+            anchor: new naver.maps.Point(20, 35);
             createMarker(data);
           }
         }
 
         setMarker(distanceMarker);
       }
-      
 
       if (areas.areaType && areas.areaType === 'CIRCLE') {
         //circle 생성
-        if(pastCircle) {
+        if (pastCircle) {
           pastCircle.forEach(prev => prev.setMap(null));
         }
 
@@ -802,16 +837,22 @@ export const FlightPlanDraw = props => {
           clickable: clickSet
         });
         // Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
-        {isDisabled ?
+        {
-          {}
+          isDisabled
-        :
+            ? {}
-          Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
+            : (Eve.mousedownEve = naver.maps.Event.addListener(
+                circle,
+                'mousedown',
+                function () {
+                  onMouseDownDrag(0);
+                }
+              ));
         }
 
         setCircle([circle]);
 
         //marker 생성
-        if(pastMarker) {
+        if (pastMarker) {
           pastMarker.forEach(c => c.setMap(null));
         }
 
@@ -819,64 +860,73 @@ export const FlightPlanDraw = props => {
         distanceMarker = new naver.maps.Marker({
           position: paths[0],
           icon: {
-            content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>',
+            content:
+              '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>' +
+              text +
+              '</span></div>',
             anchor: new naver.maps.Point(-5, -5)
           },
           map: map
-        })
+        });
         setMarker([distanceMarker]);
       }
     }
-  }
+  };
 
   //div로 보여주기
   const addMileStone = (coord, text) => {
     let content;
     let midPoint;
     let anchor;
-    if(text == 'Start') {
+    if (text == 'Start') {
-      content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ text +'</span></div>'
+      content =
-      midPoint = coord
+        '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>' +
-      anchor = new naver.maps.Point(45, 35)
+        text +
+        '</span></div>';
+      midPoint = coord;
+      anchor = new naver.maps.Point(45, 35);
     } else {
-      content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ text +'</span></div>'
+      content =
-      let dis1 = coord[coord.length-2];
+        '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>' +
-      let dis2 = coord[coord.length-1];
+        text +
-      if(circle) {
+        '</span></div>';
-        midPoint = coord
+      let dis1 = coord[coord.length - 2];
+      let dis2 = coord[coord.length - 1];
+      if (circle) {
+        midPoint = coord;
       } else {
-        midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
+        midPoint = new naver.maps.LatLng(
+          (dis1.y + dis2.y) / 2,
+          (dis1.x + dis2.x) / 2
+        );
       }
-      anchor = new naver.maps.Point(20, 35)
+      anchor = new naver.maps.Point(20, 35);
     }
-  
+
     var marker = new naver.maps.Marker({
       position: midPoint,
       icon: {
         content: content,
         anchor: anchor
-      },
+      }
       // map: map
     });
     // marker.setVisible(false)
-  
+
-    
+    if (circle) {
-    if(circle) {
       distanceMarker = marker;
     } else {
       marker.setMap(map);
       distanceMarker.push(marker);
     }
-  }
+  };
-  
+
   //거리 재기
-  const fromMetersToText = (meters) => {
+  const fromMetersToText = meters => {
     meters = meters || 0;
     let text = parseFloat(meters.toFixed(1)) + 'm';
     return text;
-  }
+  };
 
-  return(
+  return <InfoModal modal={alertModal} setModal={setAlertModal} />;
-    <InfoModal modal={alertModal} setModal={setAlertModal} />
+};
-  )
-};

src/components/map/naver/draw/FlightPlanDraw_JQuery.js

@@ -1,15 +1,14 @@
 import $ from 'jquery';
-import '../../../../assets/css/custom.css'; 
+import '../../../../assets/css/custom.css';
 import { CustomInput } from 'reactstrap';
 
-import buffer from '@turf/buffer'
+import buffer from '@turf/buffer';
 
 export const FlightPlanDraw = props => {
-  const {naver} = props;
+  const { naver } = props;
-  const {map} = props;
+  const { map } = props;
 
-
+  var Measure = function (buttons) {
-  var Measure = function(buttons) {
     this.$btnLine = buttons.line;
     this.$btnPolygon = buttons.polygon;
     this.$btnCircle = buttons.circle;
@@ -20,12 +19,10 @@ export const FlightPlanDraw = props => {
     this._bindDOMEvents();
   };
 
-  $.extend(
+  $.extend(Measure.prototype, {
-    Measure.prototype,{
     constructor: Measure,
 
-    setMap: function(map) {
+    setMap: function (map) {
-      // console.log('setMap')
       if (this.map) {
         this._unbindMap(this.map);
       }
@@ -37,62 +34,86 @@ export const FlightPlanDraw = props => {
       }
     },
 
-    startMode: function(mode) {
+    startMode: function (mode) {
-      // console.log('startMode')
       if (!mode) return;
 
       if (mode === 'line') {
         this._startDistance();
-      } if (mode === 'polygon') {
+      }
+      if (mode === 'polygon') {
         this._startArea();
-      } if (mode === 'circle') {
+      }
+      if (mode === 'circle') {
         this._startCircle();
-      } if (mode === 'rectangle') {
+      }
+      if (mode === 'rectangle') {
         this._startRectangle();
       }
     },
 
-    _startDistance: function() {
+    _startDistance: function () {
-      // console.log('startDistance')
       var map = this.map;
       this._distanceListeners = [
-        naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this))
+        naver.maps.Event.addListener(
+          map,
+          'click',
+          this._onClickDistance.bind(this)
+        )
       ];
     },
 
-    _startArea: function() {
+    _startArea: function () {
-      //console.log('startArea')
       var map = this.map;
 
       this._areaListeners = [
-        naver.maps.Event.addListener(map, 'click', this._onClickArea.bind(this)),
+        naver.maps.Event.addListener(
-        naver.maps.Event.addListener(map, 'rightclick', this._finishArea.bind(this))
+          map,
+          'click',
+          this._onClickArea.bind(this)
+        ),
+        naver.maps.Event.addListener(
+          map,
+          'rightclick',
+          this._finishArea.bind(this)
+        )
       ];
 
       $(document).on('mousemove.measure', this._onMouseMoveArea.bind(this));
     },
 
-    _startCircle: function() {
+    _startCircle: function () {
-      //console.log('startCircle')
       var map = this.map;
       this._circleListeners = [
-        naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)),
+        naver.maps.Event.addListener(
-        naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))
+          map,
+          'click',
+          this._onClickCircle.bind(this)
+        ),
+        naver.maps.Event.addListener(
+          map,
+          'rightclick',
+          this._finishCircle.bind(this)
+        )
       ];
     },
 
-    _startRectangle: function() {
+    _startRectangle: function () {
-      //console.log('startRectangle')
       var map = this.map;
       this._rectangleListeners = [
-        naver.maps.Event.addListener(map, 'click', this._onClickRectangle.bind(this)),
+        naver.maps.Event.addListener(
-        naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this))
+          map,
-      ]
+          'click',
+          this._onClickRectangle.bind(this)
+        ),
+        naver.maps.Event.addListener(
+          map,
+          'rightclick',
+          this._finishRectangle.bind(this)
+        )
+      ];
     },
 
-    _finishDistance: function() {
+    _finishDistance: function () {
-      //console.log('finishDistance')
-
       naver.maps.Event.removeListener(this._distanceListeners);
       delete this._distanceListeners;
 
@@ -104,13 +125,11 @@ export const FlightPlanDraw = props => {
       }
 
       if (this._polyline) {
-        // console.log(this._polyline.getPath()._array, 'path')
         let polypaths = this._polyline.getPath()._array;
 
         //파싱
         let polypathJSON = new Array();
-        for(let i = 0; i< polypaths.length; i++) {
+        for (let i = 0; i < polypaths.length; i++) {
-
           //파싱
           let obj = new Object();
 
@@ -118,54 +137,51 @@ export const FlightPlanDraw = props => {
           obj.y = '' + polypaths[i]._lat + '';
 
           obj = JSON.stringify(obj);
-          polypathJSON.push(JSON.parse(obj));  
+          polypathJSON.push(JSON.parse(obj));
         }
-       // console.log(polypathJSON, 'json polyline path')
-
 
         //버퍼 생성에 필요한 coordinates 배열 변환
         let lineStringPaths = [];
-        for(let i = 0; i < this._polyline.getPath().length; i++) {
+        for (let i = 0; i < this._polyline.getPath().length; i++) {
-          lineStringPaths.push([this._polyline.getPath()._array[i].x, this._polyline.getPath()._array[i].y]);
+          lineStringPaths.push([
+            this._polyline.getPath()._array[i].x,
+            this._polyline.getPath()._array[i].y
+          ]);
         }
-       // console.log(lineStringPaths, 'polyline path')
 
         //버퍼 생성을 위한 line 객체
         const originalGeojson = {
-          type: "FeatureCollection",
+          type: 'FeatureCollection',
           features: [
             {
-              type: "Feature",
+              type: 'Feature',
               properties: {},
               geometry: {
-                type: "LineString",
+                type: 'LineString',
                 coordinates: lineStringPaths
               }
             }
           ]
         };
-       // console.log(originalGeojson)
 
         //버퍼 객체
-        const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
+        const bufferObj = buffer(originalGeojson, 50, { units: 'meters' });
 
         //버퍼 라인 생성
         let bufferPath = bufferObj.features[0].geometry.coordinates[0];
-       // console.log(bufferPath, 'buffer path')
 
         this.bufferPolyline = new naver.maps.Polyline({
           strokeColor: '#ff0000',
           strokeWeight: 2,
           strokeStyle: [4, 4],
           strokeOpacity: 0.6,
-          path : bufferPath,
+          path: bufferPath,
           map: map
         });
 
         // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯
         // this._polyline.setMap(null)
         delete this._polyline;
-
       }
       //onfocus()의 반대기능 = blur()
       this.$btnLine.removeClass('control-on').blur();
@@ -173,8 +189,7 @@ export const FlightPlanDraw = props => {
       this._mode = null;
     },
 
-    _finishArea: function() {
+    _finishArea: function () {
-     // console.log('finishArea')
       naver.maps.Event.removeListener(this._areaListeners);
       delete this._areaListeners;
 
@@ -192,23 +207,20 @@ export const FlightPlanDraw = props => {
       this._mode = null;
     },
 
-    _finishCircle: function() {
+    _finishCircle: function () {
-     // console.log('finishCircle')
-
       naver.maps.Event.removeListener(this._circleListeners);
       delete this._circleListeners;
 
       $(document).off('mousemove.measure');
 
-      if(this._guidecircle) {
+      if (this._guidecircle) {
         this._guidecircle.setMap(null);
         this._radius.setMap(null);
         delete this._raidus;
         delete this._guidecircle;
       }
-    
+
       if (this._circle) {
-        // this._circle.setMap(null);
         delete this._circle;
       }
 
@@ -218,15 +230,13 @@ export const FlightPlanDraw = props => {
       this._mode = null;
     },
 
-    _finishRectangle: function() {
+    _finishRectangle: function () {
-     // console.log('finishRectangle')
-
       naver.maps.Event.removeListener(this._rectangleListeners);
       delete this._rectangleListeners;
 
       $(document).off('mousemove.measure');
 
-      if(this._rectangle) {
+      if (this._rectangle) {
         this._guiderectangle.setMap(null);
         delete this._guiderectangle;
       }
@@ -236,28 +246,30 @@ export const FlightPlanDraw = props => {
       this._mode = null;
     },
 
-    finishMode: function(mode) {
+    finishMode: function (mode) {
-     // console.log('finishMode')
       if (!mode) return;
 
       if (mode === 'line') {
         this._finishDistance();
-      } if (mode === 'polygon') {
+      }
+      if (mode === 'polygon') {
         this._finishArea();
-      } if (mode === 'circle') {
+      }
+      if (mode === 'circle') {
         this._finishCircle();
-      } if (mode === 'rectangle') {
+      }
+      if (mode === 'rectangle') {
         this._finishRectangle();
       }
     },
 
-    _fromMetersToText: function(meters) {
+    _fromMetersToText: function (meters) {
       meters = meters || 0;
 
       var km = 1000,
         text = meters;
 
-      if(meters >= km) {
+      if (meters >= km) {
         text = parseFloat((meters / km).toFixed(1)) + 'km';
       } else {
         text = parseFloat(meters.toFixed(1)) + 'm';
@@ -266,14 +278,20 @@ export const FlightPlanDraw = props => {
       return text;
     },
 
-    _addMileStone: function(coord, text, css) {
+    _addMileStone: function (coord, text, css) {
-      if(!this._ms) this._ms = [];
+      if (!this._ms) this._ms = [];
 
       let content;
-      if(text == 'Start') {
+      if (text == 'Start') {
-        content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:14px;color:#ff0000;"><span>'+ text +'</span></div>'
+        content =
+          '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:14px;color:#ff0000;"><span>' +
+          text +
+          '</span></div>';
       } else {
-        content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;color:#737373;"><span>'+ text +'</span></div>'
+        content =
+          '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;color:#737373;"><span>' +
+          text +
+          '</span></div>';
       }
 
       var ms = new naver.maps.Marker({
@@ -287,7 +305,7 @@ export const FlightPlanDraw = props => {
 
       var msElement = $(ms.getElement());
 
-      if(css) {
+      if (css) {
         msElement.css(css);
       } else {
         msElement.css('font-size', '13px');
@@ -296,8 +314,7 @@ export const FlightPlanDraw = props => {
       this._ms.push(ms);
     },
 
-    _onClickDistance: function(e) {
+    _onClickDistance: function (e) {
-     // console.log('onClickDistance')
       var map = this.map,
         coord = e.coord;
 
@@ -314,8 +331,17 @@ export const FlightPlanDraw = props => {
 
         // this._lastDistance = this._guideline.getDistance();
 
-        $(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this));
+        $(document).on(
-        this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this)));
+          'mousemove.measure',
+          this._onMouseMoveDistance.bind(this)
+        );
+        this._distanceListeners.push(
+          naver.maps.Event.addListener(
+            map,
+            'rightclick',
+            this._finishDistance.bind(this)
+          )
+        );
 
         // 실제 거리재기에 사용되는 폴리라인을 생성합니다.
         this._polyline = new naver.maps.Polyline({
@@ -330,23 +356,24 @@ export const FlightPlanDraw = props => {
 
         this._lastDistance = this._polyline.getDistance();
         this._addMileStone(coord, 'Start');
-
       } else {
         this._guideline.setPath([e.coord]);
         this._polyline.getPath().push(coord);
 
         var distance = this._polyline.getDistance();
-        this._addMileStone(coord, this._fromMetersToText(distance - this._lastDistance));
+        this._addMileStone(
+          coord,
+          this._fromMetersToText(distance - this._lastDistance)
+        );
         this._lastDistance = distance;
       }
     },
 
-    _onMouseMoveDistance: function(e) {
+    _onMouseMoveDistance: function (e) {
-     // console.log('onMouseMoveDistance')
       var map = this.map,
-          proj = this.map.getProjection(),
+        proj = this.map.getProjection(),
-          coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+        coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
-          path = this._guideline.getPath();
+        path = this._guideline.getPath();
 
       if (path.getLength() === 2) {
         //맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까
@@ -357,8 +384,7 @@ export const FlightPlanDraw = props => {
       path.push(coord);
     },
 
-    _onClickArea: function(e) {
+    _onClickArea: function (e) {
-     // console.log('onClickArea')
       var map = this.map,
         coord = e.coord;
 
@@ -375,14 +401,13 @@ export const FlightPlanDraw = props => {
       }
     },
 
-    _onMouseMoveArea: function(e) {
+    _onMouseMoveArea: function (e) {
-     // console.log('onMouseMoveArea')
       if (!this._polygon) return;
 
       var map = this.map,
-          proj = this.map.getProjection(),
+        proj = this.map.getProjection(),
-          coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+        coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
-          path = this._polygon.getPath();
+        path = this._polygon.getPath();
 
       if (path.getLength() >= 2) {
         path.pop();
@@ -391,13 +416,11 @@ export const FlightPlanDraw = props => {
       path.push(coord);
     },
 
-    _onClickCircle: function(e) {
+    _onClickCircle: function (e) {
-     // console.log('onClickCircle')
       var map = this.map,
         coord = e.coord;
 
-      if(!this._circle) {
+      if (!this._circle) {
-
         //가이드 라인
         this._radius = new naver.maps.Polyline({
           strokeStyle: [4, 4],
@@ -419,8 +442,14 @@ export const FlightPlanDraw = props => {
         });
 
         $(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this));
-        this._circleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this)));
+        this._circleListeners.push(
-        
+          naver.maps.Event.addListener(
+            map,
+            'rightclick',
+            this._finishCircle.bind(this)
+          )
+        );
+
         // 실제 사용되는 원형
         this._circle = new naver.maps.Circle({
           strokeOpacity: 0.8,
@@ -430,52 +459,46 @@ export const FlightPlanDraw = props => {
           radius: this._lastDistance,
           map: map
         });
-
       } else {
         // this._guidecircle.setCenter(e.coord);
         // this._circle.setCenter(coord);
         // if(this._radius.getPath().length() === 2) {
         //   this._radius.getPath().pop();
         // }
-        
+
         // this._radius.getPath().push(coord);
 
         var distance = this._radius.getDistance();
         this._lastDistance = distance;
         this._circle.setRadius(this._lastDistance);
-
-
       }
     },
 
-    _onMouseMoveCircle: function(e) {
+    _onMouseMoveCircle: function (e) {
-     // console.log('onMouseMoveCircle')
+      if (!this._circle) return;
-      if(!this._circle) return;
 
       var map = this.map,
-          proj = this.map.getProjection(),
+        proj = this.map.getProjection(),
-          coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+        coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
-          path = this._radius.getPath(),
+        path = this._radius.getPath(),
-          center = this._guidecircle.getCenter(), //LatLng으로 나옴
+        center = this._guidecircle.getCenter(), //LatLng으로 나옴
-          r = proj.getDistance(coord, center);
+        r = proj.getDistance(coord, center);
 
-      if(path.getLength() === 2) {
+      if (path.getLength() === 2) {
         path.pop();
       }
       path.push(coord);
       this._guidecircle.setRadius(r);
     },
 
-    _onClickRectangle: function(e) {
+    _onClickRectangle: function (e) {
-     // console.log('onClickRectangle')
       var map = this.map,
         coord = e.coord;
-      
+
       this.max_x = 0;
       this.max_y = 0;
 
-
+      if (!this._rectangle) {
-      if(!this._rectangle) {
         //min = 고정값
         this.fixed = coord;
         this.min = [this.fixed.x, this.fixed.y];
@@ -490,8 +513,17 @@ export const FlightPlanDraw = props => {
           map: map
         });
 
-        $(document).on('mousemove.measure', this._onMouseMoveRectangle.bind(this));
+        $(document).on(
-        this._rectangleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this)));
+          'mousemove.measure',
+          this._onMouseMoveRectangle.bind(this)
+        );
+        this._rectangleListeners.push(
+          naver.maps.Event.addListener(
+            map,
+            'rightclick',
+            this._finishRectangle.bind(this)
+          )
+        );
 
         //실제 사용되는 사각형
         this._rectangle = new naver.maps.Rectangle({
@@ -501,7 +533,6 @@ export const FlightPlanDraw = props => {
           bounds: this.boundscoord,
           map: map
         });
-
       } else {
         this.max = [coord.x, coord.y];
         this.boundscoord = [this.min[0], this.min[1], this.max[0], this.max[1]];
@@ -509,53 +540,54 @@ export const FlightPlanDraw = props => {
       }
     },
 
-    _onMouseMoveRectangle: function(e) {
+    _onMouseMoveRectangle: function (e) {
-     // console.log('onMouseMoveRectangle')
+      if (!this._rectangle) return;
-      if(!this._rectangle) return;
 
       var map = this.map,
-         proj = this.map.getProjection(),
+        proj = this.map.getProjection(),
         coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
-       bounds = this._guiderectangle.getBounds(),
+        bounds = this._guiderectangle.getBounds(),
-          max = [coord.x, coord.y];
+        max = [coord.x, coord.y];
 
-      this.boundscoord = [this.min[0], this.min[1],max[0], max[1]];
+      this.boundscoord = [this.min[0], this.min[1], max[0], max[1]];
       this._guiderectangle.setBounds(this.boundscoord);
     },
 
-    _bindMap: function(map) {
+    _bindMap: function (map) {},
-     // console.log('bindMap')
-    },
 
-    _unbindMap: function() {
+    _unbindMap: function () {
-     // console.log('unbindMap')
       this.unbindAll();
     },
 
-    _bindDOMEvents: function() {
+    _bindDOMEvents: function () {
-     // console.log('bindDOMEvents')
       this.$btnLine.on('click.measure', this._onClickButton.bind(this, 'line'));
-      this.$btnPolygon.on('click.measure', this._onClickButton.bind(this, 'polygon'));
+      this.$btnPolygon.on(
-      this.$btnCircle.on('click.measure', this._onClickButton.bind(this, 'circle'));
+        'click.measure',
-      this.$btnRectangle.on('click.measure', this._onClickButton.bind(this, 'rectangle'));
+        this._onClickButton.bind(this, 'polygon')
-
+      );
+      this.$btnCircle.on(
+        'click.measure',
+        this._onClickButton.bind(this, 'circle')
+      );
+      this.$btnRectangle.on(
+        'click.measure',
+        this._onClickButton.bind(this, 'rectangle')
+      );
     },
 
-    _onClickButton: function(newMode, e) {
+    _onClickButton: function (newMode, e) {
       //newMode는 방금 클릭한 값(line, polygon, circle...)
-     // console.log('onClickButton')
+
       e.preventDefault();
 
       var btn = $(e.target),
-          map = this.map,
+        map = this.map,
-          mode = this._mode;
+        mode = this._mode;
       //this._mode는 클릭하기 전 값(첫 클릭이면 null)
 
       if (btn.hasClass('control-on')) {
-       // console.log('remove')
         btn.removeClass('control-on');
       } else {
-       // console.log('add')
         btn.addClass('control-on');
       }
 
@@ -571,8 +603,7 @@ export const FlightPlanDraw = props => {
       this.startMode(newMode);
     },
 
-    _clearMode: function(mode) {
+    _clearMode: function (mode) {
-     // console.log('clearMode')
       if (!mode) return;
 
       if (mode === 'line') {
@@ -597,7 +628,7 @@ export const FlightPlanDraw = props => {
 
         this._finishCircle();
       } else if (mode === 'rectangle') {
-        if(this._rectangle) {
+        if (this._rectangle) {
           this._rectangle.setMap(null);
           delete this._rectangle;
         }
@@ -615,38 +646,38 @@ export const FlightPlanDraw = props => {
 
   measures.setMap(map);
 
-  return(
+  return (
     <>
       <div style={{ position: 'relative' }}>
-      <ul className="measure-control">
+        <ul className='measure-control'>
-        <li>
+          <li>
-          <CustomInput
+            <CustomInput
-            id='line'
+              id='line'
-            type='image'
+              type='image'
-            className='control-btn'
+              className='control-btn'
-            src='http://static.naver.net/maps/mantle/drawing/1x/polyline.png'
+              src='http://static.naver.net/maps/mantle/drawing/1x/polyline.png'
-          />
+            />
-          <CustomInput
+            <CustomInput
-            id='polygon'
+              id='polygon'
-            type='image'
+              type='image'
-            className='control-btn'
+              className='control-btn'
-            src='http://static.naver.net/maps/mantle/drawing/1x/polygon.png'
+              src='http://static.naver.net/maps/mantle/drawing/1x/polygon.png'
-          />
+            />
-          <CustomInput
+            <CustomInput
-            id='circle'
+              id='circle'
-            type='image'
+              type='image'
-            className='control-btn'
+              className='control-btn'
-            src='http://static.naver.net/maps/mantle/drawing/1x/ellipse.png'
+              src='http://static.naver.net/maps/mantle/drawing/1x/ellipse.png'
-          />
+            />
-          <CustomInput
+            <CustomInput
-            id='rectangle'
+              id='rectangle'
-            type='image'
+              type='image'
-            className='control-btn'
+              className='control-btn'
-            src='http://static.naver.net/maps/mantle/drawing/1x/rectangle.png'
+              src='http://static.naver.net/maps/mantle/drawing/1x/rectangle.png'
-          />
+            />
-        </li>
+          </li>
-      </ul>
+        </ul>
       </div>
     </>
-  )
+  );
-}
+};

src/components/map/naver/draw/FlightPlanDraw_Test.js

@@ -16,7 +16,7 @@ export const FlightPlanDraw = props => {
 
   const [pastClickEve, setClickEve] = useState();
   const [pastMarker, setMarker] = useState([]);
-  
+
   const [figure, setFigure] = useState();
 
   const [areaDetail, setAreaDetail] = useState();
@@ -25,13 +25,13 @@ export const FlightPlanDraw = props => {
     isOpen: false,
     title: '',
     desc: ''
-  })
+  });
 
   const naver = props.naver;
   const map = props.map;
   let mode = props.mode;
   let dragCircleSize = props.dragCircleSize;
- 
+
   let areaInfo;
   let lastDistance;
 
@@ -48,7 +48,7 @@ export const FlightPlanDraw = props => {
     clickEve: '',
     mousedownEve: '',
     rightclickEve: ''
-  }
+  };
 
   let dragCircle = [];
   let dragCircleEve = [];
@@ -57,28 +57,28 @@ export const FlightPlanDraw = props => {
 
   const handleBufferList = () => {
     dispatch(Actions.FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaDetail));
-  }
+  };
 
   useEffect(() => {
     drawInit();
-  }, [mapControl.drawType])
+  }, [mapControl.drawType]);
-  
+
   useEffect(() => {
     handleDetailDraw();
-  }, [props.areaCoordList])
+  }, [props.areaCoordList]);
 
   useEffect(() => {
-    if(figure) {
+    if (figure) {
       props.handleConfirm(props.areaCoordList);
       setAreaDetail(props.areaCoordList);
     }
-  }, [figure])
+  }, [figure]);
-  
+
   useEffect(() => {
-    if(pastPolyline) {
+    if (pastPolyline) {
       handleBufferList();
     }
-  }, [areaDetail])
+  }, [areaDetail]);
 
   const drawInit = () => {
     if (mapControl.drawType === 'LINE') {
@@ -88,13 +88,11 @@ export const FlightPlanDraw = props => {
     } else if (mapControl.drawType === 'POLYGON') {
       onClickButton('POLYGON');
     } else if (mapControl.drawType === 'RESET') {
-      onClickReset('RESET')
+      onClickReset('RESET');
     }
-  }
+  };
-
-  const onClickButton = (newMode) => {
-    //console.log('onClickButton');
 
+  const onClickButton = newMode => {
     clearMode(mode);
 
     if (mode === newMode) {
@@ -102,18 +100,15 @@ export const FlightPlanDraw = props => {
       return;
     }
 
-    // mode = newMode; 
+    // mode = newMode;
 
     startMode(newMode);
-  }
+  };
-
-  const clearMode = (mode) => {
-    //console.log('clearMode')
 
+  const clearMode = mode => {
     // if(!mode) return;
 
     if (pastPolyline) {
-     // console.log('clear polyline ', pastPolyline)
       pastPolyline.setMap(null);
       pastDragCircle.forEach(c => c.setMap(null));
       pastBuffer.setMap(null);
@@ -122,14 +117,12 @@ export const FlightPlanDraw = props => {
       setBuffer();
     }
     if (pastCircle.length != 0) {
-      //console.log('clear circle ', pastCircle)
+      pastCircle.forEach(prev => prev.setMap(null));
-      pastCircle.forEach(prev => prev.setMap(null))
       naver.maps.Event.removeListener(pastClickEve);
 
       setCircle([]);
     }
     if (pastPolygon) {
-     // console.log('clear polygon ', pastPolygon)
       pastPolygon.setMap(null);
       pastDragCircle.forEach(c => c.setMap(null));
 
@@ -137,38 +130,39 @@ export const FlightPlanDraw = props => {
       setDragCircle([]);
     }
     if (pastMarker.length != 0) {
-     // console.log('clear marker ', pastMarker)
+      pastMarker.forEach(m => m.setMap(null));
-      pastMarker.forEach(m => m.setMap(null))
       setMarker([]);
     }
 
     finishDraw();
-    props.handleInitCoordinates(); 
+    props.handleInitCoordinates();
-  }
+  };
-
-  const startMode = (mode) => {
-   // console.log('startMode')
 
+  const startMode = mode => {
     if (!mode) return;
 
-    if(pastClickEve) {
+    if (pastClickEve) {
       naver.maps.Event.removeListener(pastClickEve);
     }
     if (mode === 'LINE') {
-      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolyline(e) });
+      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) {
+        onClickPolyline(e);
+      });
       setClickEve(Eve.clickEve);
     } else if (mode === 'POLYGON') {
-      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickPolygon(e) });
+      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) {
+        onClickPolygon(e);
+      });
       setClickEve(Eve.clickEve);
     } else if (mode === 'CIRCLE') {
-      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) });
+      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) {
+        onClickCircle(e);
+      });
       setClickEve(Eve.clickEve);
     }
-  }
+  };
 
   const removeListener = () => {
-  //  console.log('removeListener')
-
     naver.maps.Event.removeListener(Eve.clickEve);
     naver.maps.Event.removeListener(pastClickEve);
     setClickEve();
@@ -176,10 +170,9 @@ export const FlightPlanDraw = props => {
     naver.maps.Event.removeListener(Eve.mousedownEve);
     naver.maps.Event.removeListener(Eve.rightclickEve);
     if (!circle) $(document).off('mousemove.measure');
-  }
+  };
 
   const finishDraw = () => {
-    //console.log('finishDraw')
     removeListener();
 
     if (polyline) {
@@ -190,8 +183,8 @@ export const FlightPlanDraw = props => {
 
       let polypaths = polyline.getPath()._array;
 
-      setMarker(distanceMarker)
+      setMarker(distanceMarker);
-      distanceMarker.forEach(c => c.setMap(null))
+      distanceMarker.forEach(c => c.setMap(null));
 
       if (polypaths.length >= 2) {
         setPolyline(polyline);
@@ -201,14 +194,13 @@ export const FlightPlanDraw = props => {
           isOpen: true,
           title: '좌표 최소 개수',
           desc: '좌표를 두 개 점으로 이어주세요.'
-        })
+        });
 
         polyline.setMap(null);
         polyline = '';
       }
 
-      setFigure(polyline)
+      setFigure(polyline);
-
     } else if (polygon) {
       let path = polygon.getPath();
       path.pop();
@@ -222,9 +214,9 @@ export const FlightPlanDraw = props => {
       // addMileStone(polygonpaths[0], fromMetersToText(distance - lastDistance));
 
       setMarker(distanceMarker);
-      distanceMarker.forEach(c => c.setMap(null))
+      distanceMarker.forEach(c => c.setMap(null));
 
-      if(polygonpaths.length >= 3) {
+      if (polygonpaths.length >= 3) {
         setPolygon(polygon);
         setAreaInfo(polygonpaths);
       } else {
@@ -232,17 +224,16 @@ export const FlightPlanDraw = props => {
           isOpen: true,
           title: '좌표 최소 개수',
           desc: '좌표를 세 개 점으로 이어주세요.'
-        })
+        });
-        polygon.setMap(null)
+        polygon.setMap(null);
         polygon = '';
       }
 
-      setFigure(polygon)
+      setFigure(polygon);
     }
-  }
+  };
 
-  const onClickPolyline = (e) => {
+  const onClickPolyline = e => {
-    //console.log('onClickPolyline')
     var coord = e.coord;
 
     if (!polyline) {
@@ -268,24 +259,34 @@ export const FlightPlanDraw = props => {
         map: map
       });
 
-      Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
+      Eve.rightclickEve = naver.maps.Event.addListener(
-      $(document).on('mousemove.measure', function (e) { onMouseMovePolyline(e); });
+        map,
+        'rightclick',
+        function () {
+          finishDraw();
+        }
+      );
+      $(document).on('mousemove.measure', function (e) {
+        onMouseMovePolyline(e);
+      });
 
       lastDistance = polyline.getDistance();
-      addMileStone(coord, 'Start')
+      addMileStone(coord, 'Start');
     } else {
       guideline.setPath([e.coord]);
       polyline.getPath().push(coord);
 
       var distance = polyline.getDistance();
       // addMileStone(coord, fromMetersToText(distance - lastDistance));
-      addMileStone(polyline.getPath()._array, fromMetersToText(distance - lastDistance));
+      addMileStone(
+        polyline.getPath()._array,
+        fromMetersToText(distance - lastDistance)
+      );
       lastDistance = distance;
     }
-  }
+  };
 
-  const onMouseMovePolyline = (e) => {
+  const onMouseMovePolyline = e => {
-  //  console.log('onMouseMovePolyline')
     var proj = map.getProjection(),
       coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
       path = guideline.getPath();
@@ -295,10 +296,9 @@ export const FlightPlanDraw = props => {
     }
 
     path.push(coord);
-  }
+  };
 
-  const onClickPolygon = (e) => {
+  const onClickPolygon = e => {
-  //  console.log('onClickPolygon')
     var coord = e.coord;
     // let guide;
 
@@ -319,28 +319,34 @@ export const FlightPlanDraw = props => {
       });
       guideline.setVisible(false);
 
-      Eve.rightclickEve = naver.maps.Event.addListener(map, 'rightclick', function () { finishDraw() })
+      Eve.rightclickEve = naver.maps.Event.addListener(
-      $(document).on('mousemove.measure', function (e) { onMouseMovePolygon(e) });
+        map,
+        'rightclick',
+        function () {
+          finishDraw();
+        }
+      );
+      $(document).on('mousemove.measure', function (e) {
+        onMouseMovePolygon(e);
+      });
 
       lastDistance = guideline.getDistance();
-      addMileStone(coord, 'Start')
+      addMileStone(coord, 'Start');
     } else {
       polygon.getPath().push(coord);
       guideline.getPath().push(coord);
 
-      // console.log(polygon.getPath()._array, 'polygon')
-      // console.log(guideline.getPath()._array.length, 'guide')
-      // console.log(polygon.getPath()._array.length)
-
       var distance = guideline.getDistance();
       // addMileStone(coord, fromMetersToText(distance - lastDistance));
-      addMileStone(guideline.getPath()._array, fromMetersToText(distance - lastDistance));
+      addMileStone(
+        guideline.getPath()._array,
+        fromMetersToText(distance - lastDistance)
+      );
       lastDistance = distance;
     }
-  }
+  };
 
-  const onMouseMovePolygon = (e) => {
+  const onMouseMovePolygon = e => {
-    //console.log('onMouseMovePolygon')
     if (!polygon) return;
 
     var proj = map.getProjection(),
@@ -352,19 +358,18 @@ export const FlightPlanDraw = props => {
     }
 
     path.push(coord);
-  }
+  };
 
-  const onClickCircle = (e) => {
+  const onClickCircle = e => {
-   // console.log('onClickCircle')
     var coord = e.coord;
 
-    if(!circle) {
+    if (!circle) {
       radiusline = new naver.maps.Polyline({
         strokeStyle: [4, 4],
         strokeOpacity: 0.6,
-        path: [coord],
+        path: [coord]
         // map: map
-      })
+      });
       lastDistance = radiusline.getDistance();
 
       circle = new naver.maps.Circle({
@@ -376,25 +381,29 @@ export const FlightPlanDraw = props => {
         radius: 100,
         map: map,
         clickable: true
-      })
+      });
 
-      Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
+      Eve.mousedownEve = naver.maps.Event.addListener(
+        circle,
+        'mousedown',
+        function () {
+          onMouseDownDrag(0);
+        }
+      );
 
       addMileStone(coord, fromMetersToText(100));
     } else {
       circle.setCenter(coord);
       circle.setRadius(100);
-      distanceMarker.setPosition(coord)
+      distanceMarker.setPosition(coord);
     }
-    setCircle(prev => ([...prev, circle]))
+    setCircle(prev => [...prev, circle]);
     setAreaInfo('');
     setMarker(distanceMarker);
     setFigure(circle.center);
-  }
+  };
-
-  const onMouseDownDrag = (index) => {
- //   console.log('onMouseDownDrag')
 
+  const onMouseDownDrag = index => {
     map.setOptions({
       draggable: false,
       pinchZoom: false,
@@ -403,19 +412,21 @@ export const FlightPlanDraw = props => {
       disableDoubleTapZoom: true,
       disableDoubleClickZoom: true,
       disableTwoFingerTapZoom: true
-    })
+    });
 
-    if(circle) {
+    if (circle) {
       removeListener();
     }
 
-    $(document).on('mousemove.measure', function (e) { onMouseMoveDrag(e, index) });
+    $(document).on('mousemove.measure', function (e) {
-    $(document).on('mouseup.measure', function () { onMouseUpDrag(index) });
+      onMouseMoveDrag(e, index);
-  }
+    });
+    $(document).on('mouseup.measure', function () {
+      onMouseUpDrag(index);
+    });
+  };
 
   const onMouseMoveDrag = (e, index) => {
-    //console.log('onMouseMoveDrag')
-
     var proj = map.getProjection(),
       coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY));
 
@@ -428,13 +439,12 @@ export const FlightPlanDraw = props => {
         if (i === index) {
           path = coord;
         } else {
-          path = polypaths[i]
+          path = polypaths[i];
         }
         movepath.push(path);
       }
 
       polyline.setPath(movepath);
-
     } else if (polygon) {
       var polygonpaths = polygon.getPath()._array;
 
@@ -444,12 +454,11 @@ export const FlightPlanDraw = props => {
         if (i === index) {
           path = coord;
         } else {
-          path = polygonpaths[i]
+          path = polygonpaths[i];
         }
         movepath.push(path);
       }
-      polygon.setPaths(movepath)
+      polygon.setPaths(movepath);
-
     } else if (circle) {
       var center = circle.getCenter(),
         r = proj.getDistance(coord, center);
@@ -460,11 +469,9 @@ export const FlightPlanDraw = props => {
     if (!circle) {
       dragCircle[index].setCenter(coord);
     }
-  }
+  };
-
-  const onMouseUpDrag = (index) => {
-   // console.log('onMouseUpDrag')
 
+  const onMouseUpDrag = index => {
     map.setOptions({
       draggable: true,
       pinchZoom: true,
@@ -473,7 +480,7 @@ export const FlightPlanDraw = props => {
       disableDoubleTapZoom: false,
       disableDoubleClickZoom: false,
       disableTwoFingerTapZoom: false
-    })
+    });
 
     if (polyline) {
       var path = polyline.getPath()._array;
@@ -491,7 +498,7 @@ export const FlightPlanDraw = props => {
       // if(pastMarker.length !=0) {
       //   //마커 위치 변경
       //   pastMarker[index].setPosition(path[index]);
-  
+
       //   //마커 content 변경
       //   if(index == 0) {
       //     //시작 지점 이동
@@ -508,11 +515,11 @@ export const FlightPlanDraw = props => {
       //       //사이 지점 이동(index+1 마커도 변경)
       //       isLastIndex = 2;
       //     }
-  
+
       //     for(let i = index; i < index+isLastIndex; i++) {
       //       var proj = map.getProjection(),
       //           r = proj.getDistance(pastMarker[i-1].position, pastMarker[i].position);
-  
+
       //       let text = fromMetersToText(r);
       //       pastMarker[i].setIcon({
       //         content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>',
@@ -527,34 +534,36 @@ export const FlightPlanDraw = props => {
     $(document).off('mouseup.measure');
 
     if (circle) {
-      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) { onClickCircle(e) })
+      Eve.clickEve = naver.maps.Event.addListener(map, 'click', function (e) {
+        onClickCircle(e);
+      });
       setClickEve(Eve.clickEve);
 
-      setCircle(prev => ([...prev, circle]))
+      setCircle(prev => [...prev, circle]);
       setAreaInfo('');
-      setFigure(circle)
+      setFigure(circle);
     }
-  }
+  };
 
-  const setAreaInfo = (path) => {
+  const setAreaInfo = path => {
     let bufferZone = 100;
-    if(polygon) bufferZone = 0;
+    if (polygon) bufferZone = 0;
-    
+
     areaInfo = {
       coordinates: [],
-      bufferZone: bufferZone,
+      bufferZone: bufferZone
     };
 
     let prePath = [];
     if (path) {
-      path.forEach((item) => {
+      path.forEach(item => {
         const p = {
           lat: item.y,
           lon: item.x
-        }
+        };
 
         prePath.push(p);
-      })
+      });
       // path.forEach(prev=> prePath.push([prev.x, prev.y]))
     }
 
@@ -568,38 +577,35 @@ export const FlightPlanDraw = props => {
       const point = {
         lat: circle.getCenter().y,
         lon: circle.getCenter().x
-      }
+      };
 
       areaInfo.coordinates.push(point);
       areaInfo.bufferZone = circle.getRadius();
       areaInfo.areaType = 'CIRCLE';
     }
     props.handleCoordinates(areaInfo);
-  }
+  };
 
   const onClickReset = () => {
-   // console.log('onClickRest - ', mapControl.drawType);
     if (mapControl.drawType === 'RESET') {
       clearMode('RESET');
     }
-  }
+  };
 
   const handleDetailDraw = () => {
     if (props.areaCoordList) {
-     // console.log('handleDetailDraw')     
-
       const areas = props.areaCoordList[0];
 
       const paths = [];
-      areas.coordList.forEach((coord) => {
+      areas.coordList.forEach(coord => {
-        const path = new naver.maps.LatLng(coord.lat, coord.lon)
+        const path = new naver.maps.LatLng(coord.lat, coord.lon);
 
         paths.push(path);
       });
 
       if (areas.areaType && areas.areaType === 'LINE') {
         //polyline 생성
-        if(pastPolyline) {
+        if (pastPolyline) {
           pastPolyline.setMap(null);
           pastDragCircle.forEach(c => c.setMap(null));
         }
@@ -613,10 +619,10 @@ export const FlightPlanDraw = props => {
           map: map
         });
 
-        setPolyline(polyline)
+        setPolyline(polyline);
 
         //dragCircle 생성
-        for(let i = 0; i < paths.length; i++) {
+        for (let i = 0; i < paths.length; i++) {
           dragCircle.push(
             new naver.maps.Circle({
               strokestrokeOpacity: 1,
@@ -629,9 +635,16 @@ export const FlightPlanDraw = props => {
               map: map,
               clickable: true
             })
-          )
+          );
-            dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
+          dragCircleEve.push(
-         
+            naver.maps.Event.addListener(
+              dragCircle[i],
+              'mousedown',
+              function () {
+                onMouseDownDrag(i);
+              }
+            )
+          );
         }
 
         setDragCircle(dragCircle);
@@ -640,14 +653,13 @@ export const FlightPlanDraw = props => {
         if (areas.bufferCoordList) {
           const bufferPaths = [];
 
-          areas.bufferCoordList.forEach((bfCoord) => {
+          areas.bufferCoordList.forEach(bfCoord => {
             const path = new naver.maps.LatLng(bfCoord.lat, bfCoord.lon);
 
             bufferPaths.push(path);
           });
-       //  console.log('buffer test : ',areas.bufferCoordList);
+
-          
+          if (pastBuffer) {
-          if(pastBuffer) {
             pastBuffer.setMap(null);
           }
 
@@ -662,41 +674,52 @@ export const FlightPlanDraw = props => {
         }
 
         //marker 생성
-        if(pastMarker) {
+        if (pastMarker) {
           pastMarker.forEach(c => c.setMap(null));
         }
 
-        for(let i = 0; i < paths.length; i++) {
+        for (let i = 0; i < paths.length; i++) {
-          if(i == 0) {
+          if (i == 0) {
             distanceMarker.push(
               new naver.maps.Marker({
                 position: paths[i],
                 icon: {
-                  content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ 'Start' +'</span></div>',
+                  content:
+                    '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>' +
+                    'Start' +
+                    '</span></div>',
                   anchor: new naver.maps.Point(45, 35)
-                }, map: map
+                },
+                map: map
               })
-            )
+            );
           } else {
             var proj = map.getProjection(),
-                r = proj.getDistance(paths[i-1], paths[i]);
+              r = proj.getDistance(paths[i - 1], paths[i]);
-  
+
-            let text = fromMetersToText(r); 
+            let text = fromMetersToText(r);
 
-            let dis1 = paths[i-1]
+            let dis1 = paths[i - 1];
-            let dis2 = paths[i]
+            let dis2 = paths[i];
-            let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
+            let midPoint = new naver.maps.LatLng(
+              (dis1.y + dis2.y) / 2,
+              (dis1.x + dis2.x) / 2
+            );
 
             distanceMarker.push(
               new naver.maps.Marker({
                 // position: paths[i],
                 position: midPoint,
                 icon: {
-                  content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>',
+                  content:
+                    '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>' +
+                    text +
+                    '</span></div>',
                   anchor: new naver.maps.Point(20, 35)
-                }, map: map
+                },
+                map: map
               })
-            )
+            );
           }
         }
         setMarker(distanceMarker);
@@ -704,7 +727,7 @@ export const FlightPlanDraw = props => {
 
       if (areas.areaType && areas.areaType === 'POLYGON') {
         //polygon 생성
-        if(pastPolygon) {
+        if (pastPolygon) {
           pastPolygon.setMap(null);
           pastDragCircle.forEach(c => c.setMap(null));
         }
@@ -720,7 +743,7 @@ export const FlightPlanDraw = props => {
         setPolygon(polygon);
 
         //dragCircle 생성
-        for(let i = 0; i < paths.length; i++) {
+        for (let i = 0; i < paths.length; i++) {
           dragCircle.push(
             new naver.maps.Circle({
               strokestrokeOpacity: 1,
@@ -733,85 +756,106 @@ export const FlightPlanDraw = props => {
               map: map,
               clickable: true
             })
-          )
+          );
-            dragCircleEve.push(naver.maps.Event.addListener(dragCircle[i], 'mousedown', function () { onMouseDownDrag(i) }))
+          dragCircleEve.push(
+            naver.maps.Event.addListener(
+              dragCircle[i],
+              'mousedown',
+              function () {
+                onMouseDownDrag(i);
+              }
+            )
+          );
         }
 
         setDragCircle(dragCircle);
 
-
         //marker 생성
-        if(pastMarker) {
+        if (pastMarker) {
-          pastMarker.forEach(c => c.setMap(null))
+          pastMarker.forEach(c => c.setMap(null));
         }
 
-        for(let i = 0; i < paths.length+1; i++) {
+        for (let i = 0; i < paths.length + 1; i++) {
           //start
-          if(i == 0) {
+          if (i == 0) {
             distanceMarker.push(
               new naver.maps.Marker({
                 position: paths[0],
                 icon: {
-                  content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ 'Start' +'</span></div>',
+                  content:
+                    '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>' +
+                    'Start' +
+                    '</span></div>',
                   anchor: new naver.maps.Point(45, 35)
                 },
                 map: map
               })
-            )
+            );
-          //첫좌표이자 마지막 좌표
+            //첫좌표이자 마지막 좌표
-          } else if(i == paths.length) {
+          } else if (i == paths.length) {
             var proj = map.getProjection(),
-                r = proj.getDistance(paths[0], paths[i-1]);
+              r = proj.getDistance(paths[0], paths[i - 1]);
 
             let text = fromMetersToText(r);
 
-            let dis1 = paths[0]
+            let dis1 = paths[0];
-            let dis2 = paths[i-1]
+            let dis2 = paths[i - 1];
-            let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
+            let midPoint = new naver.maps.LatLng(
+              (dis1.y + dis2.y) / 2,
+              (dis1.x + dis2.x) / 2
+            );
 
             distanceMarker.push(
               new naver.maps.Marker({
                 // position: paths[0],
                 position: midPoint,
                 icon: {
-                  content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>',
+                  content:
+                    '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>' +
+                    text +
+                    '</span></div>',
                   anchor: new naver.maps.Point(0, 35)
                 },
                 map: map
               })
-            )
+            );
-          //그 외 나머지
+            //그 외 나머지
           } else {
             var proj = map.getProjection(),
-                r = proj.getDistance(paths[i-1], paths[i]);
+              r = proj.getDistance(paths[i - 1], paths[i]);
 
-            let text = fromMetersToText(r); 
+            let text = fromMetersToText(r);
 
-            let dis1 = paths[i-1]
+            let dis1 = paths[i - 1];
-            let dis2 = paths[i]
+            let dis2 = paths[i];
-            let midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
+            let midPoint = new naver.maps.LatLng(
+              (dis1.y + dis2.y) / 2,
+              (dis1.x + dis2.x) / 2
+            );
 
             distanceMarker.push(
               new naver.maps.Marker({
                 // position: paths[i],
                 position: midPoint,
                 icon: {
-                  content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>',
+                  content:
+                    '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>' +
+                    text +
+                    '</span></div>',
                   anchor: new naver.maps.Point(20, 35)
                 },
                 map: map
               })
-            )
+            );
           }
         }
 
         setMarker(distanceMarker);
       }
-      
 
       if (areas.areaType && areas.areaType === 'CIRCLE') {
         //circle 생성
-        if(pastCircle) {
+        if (pastCircle) {
           pastCircle.forEach(prev => prev.setMap(null));
         }
 
@@ -826,12 +870,18 @@ export const FlightPlanDraw = props => {
           map: map,
           clickable: true
         });
-          Eve.mousedownEve = naver.maps.Event.addListener(circle, 'mousedown', function () { onMouseDownDrag(0); })
+        Eve.mousedownEve = naver.maps.Event.addListener(
+          circle,
+          'mousedown',
+          function () {
+            onMouseDownDrag(0);
+          }
+        );
 
         setCircle([circle]);
 
         //marker 생성
-        if(pastMarker) {
+        if (pastMarker) {
           pastMarker.forEach(c => c.setMap(null));
         }
 
@@ -839,75 +889,83 @@ export const FlightPlanDraw = props => {
         distanceMarker = new naver.maps.Marker({
           position: paths[0],
           icon: {
-            content: '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>'+ text +'</span></div>',
+            content:
+              '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#737373;"><span>' +
+              text +
+              '</span></div>',
             anchor: new naver.maps.Point(-5, -5)
           },
           map: map
-        })
+        });
         setMarker([distanceMarker]);
       }
     }
-  }
+  };
 
   //div로 보여주기
   const addMileStone = (coord, text) => {
     let content;
     let midPoint;
     let anchor;
-    if(text == 'Start') {
+    if (text == 'Start') {
-      content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ text +'</span></div>'
+      content =
-      midPoint = coord
+        '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>' +
-      anchor = new naver.maps.Point(45, 35)
+        text +
+        '</span></div>';
+      midPoint = coord;
+      anchor = new naver.maps.Point(45, 35);
     } else {
-      content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>'+ text +'</span></div>'
+      content =
-      let dis1 = coord[coord.length-2];
+        '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:13px;color:#ff0000;"><span>' +
-      let dis2 = coord[coord.length-1];
+        text +
-      if(circle) {
+        '</span></div>';
-        midPoint = coord
+      let dis1 = coord[coord.length - 2];
+      let dis2 = coord[coord.length - 1];
+      if (circle) {
+        midPoint = coord;
       } else {
-        midPoint = new naver.maps.LatLng((dis1.y + dis2.y)/2, (dis1.x + dis2.x)/2);
+        midPoint = new naver.maps.LatLng(
+          (dis1.y + dis2.y) / 2,
+          (dis1.x + dis2.x) / 2
+        );
       }
-      anchor = new naver.maps.Point(20, 35)
+      anchor = new naver.maps.Point(20, 35);
     }
-  
+
     var marker = new naver.maps.Marker({
       position: midPoint,
       icon: {
         content: content,
         anchor: anchor
-      },
+      }
       // map: map
     });
     // marker.setVisible(false)
-  
+
-    
+    if (circle) {
-    if(circle) {
       distanceMarker = marker;
     } else {
       marker.setMap(map);
       distanceMarker.push(marker);
     }
-  }
+  };
-  
+
   //거리 재기
-  const fromMetersToText = (meters) => {
+  const fromMetersToText = meters => {
     meters = meters || 0;
-  
+
     var km = 1000,
       text = meters;
 
     text = parseFloat(meters.toFixed(1)) + 'm';
-    
+
-  
     // if(meters >= km) {
     //   text = parseFloat((meters / km).toFixed(1)) + 'km';
     // } else {
     //   text = parseFloat(meters.toFixed(1)) + 'm';
     // }
     return text;
-  }
+  };
 
-  return(
+  return <InfoModal modal={alertModal} setModal={setAlertModal} />;
-    <InfoModal modal={alertModal} setModal={setAlertModal} />
+};
-  )
-};

src/components/map/naver/dron/DronMarker.js

@@ -4,28 +4,35 @@ import { useDispatch, useSelector } from 'react-redux';
 import '../../../../assets/css/custom.css';
 import DronIconPulple from '../../../../assets/images/drone-marker-icon-pulple.png';
 import DronIcon from '../../../../assets/images/drone-marker-icon.png';
-import { controlGpDtlAction, controlGpFlightPlanAction } from '../../../../modules/control/gp';
+import {
-import { objectClickAction, objectUnClickAction } from '../../../../modules/control/map/actions/controlMapActions';
+  controlGpDtlAction,
+  controlGpFlightPlanAction
+} from '../../../../modules/control/gp';
+import {
+  objectClickAction,
+  objectUnClickAction
+} from '../../../../modules/control/map/actions/controlMapActions';
 import { toast } from 'react-toastify';
 import DronToast from './DronToast';
 
 export const DronMarker = props => {
-    const dispatch = useDispatch();
+  const dispatch = useDispatch();
 
-    const { controlGpList } = useSelector(state => state.controlGpState);
+  const { controlGpList } = useSelector(state => state.controlGpState);
-    const { objectId, isClickObject } = useSelector(state => state.controlMapReducer);
+  const { objectId, isClickObject } = useSelector(
+    state => state.controlMapReducer
+  );
 
-    const [arrMarkers, setArrMarkers] = useState([]);
+  const [arrMarkers, setArrMarkers] = useState([]);
-    // const [arrInfos, setArrInfos] = useState([]);
+  // const [arrInfos, setArrInfos] = useState([]);
 
-    let naver = props.naver;
+  let naver = props.naver;
-    let map = props.map;
+  let map = props.map;
-    let CustomOverlay;
+  let CustomOverlay;
 
-    let infoWindow;
+  let infoWindow;
-    const infowindowOpen = (data) => {
+  const infowindowOpen = data => {
-
+    const content = `
-      const content = `
         <div class="dblock-box">
           <div class="dblock-ti">
             <span>${data?.id}</span>
@@ -33,344 +40,344 @@ export const DronMarker = props => {
           <div class="dblock-txt>
             <div class="dblock-txt-list">
               <div>
-                <span style="width: 250px; display: inline-block;">${data?.speed}${data?.speedType} | ${data?.elev}${data?.elevType} | ${data?.heading}</span>
+                <span style="width: 250px; display: inline-block;">${
-                <span style="width: 250px; display: inline-block;">${(data?.coord._lat).toFixed(6)} | ${(data?.coord._lng).toFixed(6)}</span>
+                  data?.speed
+                }${data?.speedType} | ${data?.elev}${data?.elevType} | ${
+      data?.heading
+    }</span>
+                <span style="width: 250px; display: inline-block;">${(data?.coord._lat).toFixed(
+                  6
+                )} | ${(data?.coord._lng).toFixed(6)}</span>
               </div>
             </div>
           </div>
         </div>
       `;
 
-      infoWindow = new naver.maps.InfoWindow({
+    infoWindow = new naver.maps.InfoWindow({
-        class: 'tooltip-dblock',
+      class: 'tooltip-dblock',
-        content: content,
+      content: content,
-        maxWidth: 160,
+      maxWidth: 160,
-        backgroundColor: '#283046', //박스안쪽영역 컬러
+      backgroundColor: '#283046', //박스안쪽영역 컬러
-        // borderColor: '#333', //테두리컬러
+      // borderColor: '#333', //테두리컬러
-        // borderWidth: 3, //테두리 굵기
+      // borderWidth: 3, //테두리 굵기
-        // anchorSize: new naver.maps.Size(30, -10),
+      // anchorSize: new naver.maps.Size(30, -10),
-        anchorSkew: false,
+      anchorSkew: false,
-        anchorColor: '#283046',
+      anchorColor: '#283046',
-  
+
-        pixelOffset: new naver.maps.Point(20, -20)
+      pixelOffset: new naver.maps.Point(20, -20)
-      });
+    });
-
+
-      infoWindow.open(props.map, data.coord);
+    infoWindow.open(props.map, data.coord);
-    };
+  };
-
+
-    useEffect(() => {
+  useEffect(() => {
-        markerInit();
+    markerInit();
-    }, [controlGpList]);
+  }, [controlGpList]);
-
+
-    useEffect(() => {
+  useEffect(() => {
-        arrMarkers.map(clickMarker => {
+    arrMarkers.map(clickMarker => {
-            if (objectId === clickMarker.controlId && isClickObject) {
+      if (objectId === clickMarker.controlId && isClickObject) {
-                // clickMarker.setIcon(DronIconPulple);
+        // clickMarker.setIcon(DronIconPulple);
-                clickMarker.setIcon({
+        clickMarker.setIcon({
-                    url: DronIconPulple,
+          url: DronIconPulple,
-                    origin: new naver.maps.Point(0, 0),
+          origin: new naver.maps.Point(0, 0),
-                    anchor: new naver.maps.Point(15, 15),
+          anchor: new naver.maps.Point(15, 15)
-                });
-            } else {
-                clickMarker.setIcon({
-                    url: DronIcon,
-                    origin: new naver.maps.Point(0, 0),
-                    anchor: new naver.maps.Point(15, 15),
-                });
-            }
-        });
-    }, [objectId, isClickObject]);
-
-    useEffect(() => {
-        arrMarkers.map(clickMarker => {
-            if (objectId === clickMarker.controlId) {
-                props.map.setCenter(clickMarker.getPosition());
-                props.map.setZoom(13, true);
-            }
-        });
-    }, [objectId]);
-
-    //마커를 그린다.
-    const addMarkers = (position, id, controlId, gps) => {
-      // console.log(gps, '>>>.')
-        const marker = new naver.maps.Marker({
-            position: position,
-            title: id,
-            id: id,
-            controlId: controlId,
-            icon: {
-                //   content: [
-                //     '<div>dddd</div>',
-
-                // ].join(''),
-                url: DronIcon,
-                // size: new naver.maps.Size(50, 50),
-                origin: new naver.maps.Point(0, 0),
-                anchor: new naver.maps.Point(15, 15),
-            },
-            gps: gps
         });
-        marker.setMap(props.map);
+      } else {
-
+        clickMarker.setIcon({
-        // drone 정보 창
+          url: DronIcon,
-        naver.maps.Event.addListener(marker, 'click', function (e) {
+          origin: new naver.maps.Point(0, 0),
-            handlerDronClick(marker.controlId, marker.id);
+          anchor: new naver.maps.Point(15, 15)
         });
+      }
+    });
+  }, [objectId, isClickObject]);
+
+  useEffect(() => {
+    arrMarkers.map(clickMarker => {
+      if (objectId === clickMarker.controlId) {
+        props.map.setCenter(clickMarker.getPosition());
+        props.map.setZoom(13, true);
+      }
+    });
+  }, [objectId]);
+
+  //마커를 그린다.
+  const addMarkers = (position, id, controlId, gps) => {
+    const marker = new naver.maps.Marker({
+      position: position,
+      title: id,
+      id: id,
+      controlId: controlId,
+      icon: {
+        //   content: [
+        //     '<div>dddd</div>',
+
+        // ].join(''),
+        url: DronIcon,
+        // size: new naver.maps.Size(50, 50),
+        origin: new naver.maps.Point(0, 0),
+        anchor: new naver.maps.Point(15, 15)
+      },
+      gps: gps
+    });
+    marker.setMap(props.map);
+
+    // drone 정보 창
+    naver.maps.Event.addListener(marker, 'click', function (e) {
+      handlerDronClick(marker.controlId, marker.id);
+    });
+
+    naver.maps.Event.addListener(marker, 'mouseover', function (e) {
+      //   // handlerDronMouseOver(marker);
+
+      const data = {};
+      data.id = marker.id;
+      data.speed = marker.gps?.speed;
+      data.speedType = marker.gps?.speedType;
+      data.elev = marker.gps?.elev;
+      data.elevType = marker.gps?.elevType;
+      data.heading = marker.gps?.heading;
+      data.coord = marker.position;
+
+      infowindowOpen(data);
+    });
+
+    naver.maps.Event.addListener(marker, 'mouseout', function (e) {
+      if (infoWindow) {
+        infoWindow.close();
+      }
+    });
 
-        naver.maps.Event.addListener(marker, 'mouseover', function(e) {
+    setArrMarkers(m => [...m, marker]);
-        //   // handlerDronMouseOver(marker);
+    // markerInfo(marker, position, id);
-
+  };
-          const data = {};
-          data.id = marker.id;
-          data.speed = marker.gps?.speed;
-          data.speedType = marker.gps?.speedType;
-          data.elev = marker.gps?.elev;
-          data.elevType = marker.gps?.elevType;
-          data.heading = marker.gps?.heading;
-          data.coord = marker.position;
 
-          infowindowOpen(data);
+  const handlerDronMouseOver = marker => {};
-        })
 
-        naver.maps.Event.addListener(marker, 'mouseout', function(e) {
+  const handlerDronClick = (controlId, idntfNum) => {
-          if (infoWindow) {
+    // const idntfNum = marker.id;
-            infoWindow.close();
+    // const contorlId = marker.controlId;
-          }
-        })
-        
-        setArrMarkers(m => [...m, marker]);
-        // markerInfo(marker, position, id);
-    };
 
-    const handlerDronMouseOver = (marker) => {
+    // 클릭한 식별번호 정보를 가진 그룹 추출
-    
+    // const group = controlGroupAuthInfo.find(group => group.idntfNum === idntfNum);
-    }
 
-    const handlerDronClick = (controlId, idntfNum) => {
+    //히스토리 불러오기
-        // const idntfNum = marker.id;
+    dispatch(objectClickAction(controlId));
-        // const contorlId = marker.controlId;
+    dispatch(controlGpDtlAction.request(controlId));
+    dispatch(controlGpFlightPlanAction.request(idntfNum));
+    // dispatch(controlGpLogAction.request({ id: controlId }));
+    // dispatch(controlGpLogAction.request(controlId));
 
-        // 클릭한 식별번호 정보를 가진 그룹 추출
+    // dispatch(controlGpHisAction.request({ id: objectId }));
-        // const group = controlGroupAuthInfo.find(group => group.idntfNum === idntfNum);
+  };
 
-        //히스토리 불러오기     
+  //마커를 삭제 한다.
-        dispatch(objectClickAction(controlId));
+  const removeMarkers = marker => {
-        dispatch(controlGpDtlAction.request(controlId));
+    marker.setMap(null);
-        dispatch(controlGpFlightPlanAction.request(idntfNum));
+  };
-        // dispatch(controlGpLogAction.request({ id: controlId }));
-        // dispatch(controlGpLogAction.request(controlId));
 
-        // dispatch(controlGpHisAction.request({ id: objectId }));
+  const removeInfos = info => {
-    };
+    info.setMap(null);
+  };
 
-    //마커를 삭제 한다.
+  //마커에 위치를 이동한다.
-    const removeMarkers = marker => {
+  const moveMarkers = (marker, position) => {
-        marker.setMap(null);
+    marker.setPosition(position);
-    };
+  };
 
-    const removeInfos = info => {
+  const moveInfos = (info, position) => {
-      info.setMap(null);
+    if (info) {
+      info.setPosition(position, info);
     }
-
+  };
-    //마커에 위치를 이동한다.
+
-    const moveMarkers = (marker, position) => {
+  //데이터가 없는 마커를 모두 삭제 한다.
-        marker.setPosition(position);
+  const allRemoveMarkers = () => {
-      };
+    if (arrMarkers && controlGpList) {
-      
+      arrMarkers.map(marker => {
-    const moveInfos = (info, position) => {
+        const isExists = controlGpList.find(
-      if(info) {
+          item => item.objectId === marker.id
-        info.setPosition(position, info);
+        );
-      }
+        if (!isExists) {
-    };
+          removeMarkers(marker);
-
+          const arrData = arrMarkers.filter(item => item.id != marker.id);
-    //데이터가 없는 마커를 모두 삭제 한다.
+          removeArrMarkers(arrData);
-    const allRemoveMarkers = () => {
+
-        if (arrMarkers && controlGpList) {
+          dispatch(objectUnClickAction());
-
-            arrMarkers.map(marker => {
-              const isExists = controlGpList.find(
-                item => item.objectId === marker.id
-              );
-              if (!isExists) {
-                removeMarkers(marker);
-                const arrData = arrMarkers.filter(
-                  item => item.id != marker.id
-                );
-                removeArrMarkers(arrData);
-
-                dispatch(objectUnClickAction());
-              }
-            });
-
-          //   arrInfos.map(info => {
-          //     const isExists = arrMarkers.find(
-          //       marker => marker.id === info._id
-          //     );
-          //     if (!isExists) {
-          //         removeInfos(info);
-          //         const arrData = arrInfos.filter(
-          //             item => item.id != info._id
-          //         );
-          //         removeArrInfos(arrData);
-
-          //         // dispatch(objectUnClickAction());
-          //     }
-          // });
-          
         }
-    };
+      });
 
-    //마커를 셋팅 한다.
+      //   arrInfos.map(info => {
-    const markerInit = () => {
+      //     const isExists = arrMarkers.find(
-        if (controlGpList) {
+      //       marker => marker.id === info._id
-            allRemoveMarkers();
+      //     );
-            controlGpList.map(item => {
+      //     if (!isExists) {
-                let position = new naver.maps.LatLng(item.lat, item.lng);
+      //         removeInfos(info);
-
+      //         const arrData = arrInfos.filter(
-                if (arrMarkers) {
+      //             item => item.id != info._id
-                    const isExists = arrMarkers.find( ele => ele.id === item.objectId );
+      //         );
-                    // const isInfos = arrInfos.find( info => info._id === item.objectId )
+      //         removeArrInfos(arrData);
-                    if (isExists) {
+
-                        moveMarkers(isExists, position);
+      //         // dispatch(objectUnClickAction());
-                        // moveInfos(isInfos, position);
+      //     }
-                    } else {
+      // });
-                        addMarkers(position, item.objectId, item.controlId, item);
+    }
-                    }
+  };
-                } else {
+
-                    addMarkers(position, item.objectId, item.controlId, item);
+  //마커를 셋팅 한다.
-                }
+  const markerInit = () => {
-            });
+    if (controlGpList) {
+      allRemoveMarkers();
+      controlGpList.map(item => {
+        let position = new naver.maps.LatLng(item.lat, item.lng);
+
+        if (arrMarkers) {
+          const isExists = arrMarkers.find(ele => ele.id === item.objectId);
+          // const isInfos = arrInfos.find( info => info._id === item.objectId )
+          if (isExists) {
+            moveMarkers(isExists, position);
+            // moveInfos(isInfos, position);
+          } else {
+            addMarkers(position, item.objectId, item.controlId, item);
+          }
+        } else {
+          addMarkers(position, item.objectId, item.controlId, item);
         }
-    };
+      });
+    }
+  };
 
-    //운항정보 창 셋팅
+  //운항정보 창 셋팅
-    const infoInit = (marker, gps, idx) => {
+  const infoInit = (marker, gps, idx) => {
-      CustomOverlay = function(options) {
+    CustomOverlay = function (options) {
-        this._element = $(`
+      this._element = $(`
             <div class="dblock-box" style="width: 140px;">
               <div class="dblock-ti">
                 <span>${marker?.id}</span>
                 <span>${gps?.speed}${gps?.speedType} | ${gps?.elev}${gps?.elevType} | ${gps?.heading}</span>
               </div>
           </div>
-        `)
+        `);
-
+
-        // this._element = $(`
+      // this._element = $(`
-        //     <div class="tooltip-box" style="width: 150px;">
+      //     <div class="tooltip-box" style="width: 150px;">
-        //     <div class="tooltip-ti">
+      //     <div class="tooltip-ti">
-        //     <span>${marker?.id}</span>
+      //     <span>${marker?.id}</span>
-        //     </div>
+      //     </div>
-        //     <div class="tooltip-txt>
+      //     <div class="tooltip-txt>
-        //       <div class="tooltip-txt-list">
+      //       <div class="tooltip-txt-list">
-        //         <div>
+      //         <div>
-        //           <span style="width: 120px; display: inline-block;">속도: ${gps?.speed}${gps?.speedType}</span>
+      //           <span style="width: 120px; display: inline-block;">속도: ${gps?.speed}${gps?.speedType}</span>
-        //         </div>
+      //         </div>
-        //         <div>
+      //         <div>
-        //           <span style="width: 120px; display: inline-block;">고도: ${gps?.elev}${gps?.elevType}</span>
+      //           <span style="width: 120px; display: inline-block;">고도: ${gps?.elev}${gps?.elevType}</span>
-        //         </div>
+      //         </div>
-        //         <div>
+      //         <div>
-        //           <span style="width: 120px; display: inline-block;">헤딩방향: ${gps?.heading}</span>
+      //           <span style="width: 120px; display: inline-block;">헤딩방향: ${gps?.heading}</span>
-        //         </div>
+      //         </div>
-        //       </div>
+      //       </div>
-        //     </div>
+      //     </div>
-        //   </div>
+      //   </div>
-        // `)
+      // `)
-    
+
-        this.setPosition(options.position, idx);
+      this.setPosition(options.position, idx);
-        this.setMap(options.map || null);
+      this.setMap(options.map || null);
-        this.setId(options.id);
+      this.setId(options.id);
-        this.setIdx(idx);
+      this.setIdx(idx);
-      };
+    };
-    
+
-      CustomOverlay.prototype = new naver.maps.OverlayView();
+    CustomOverlay.prototype = new naver.maps.OverlayView();
-      CustomOverlay.prototype.constructor = CustomOverlay;
+    CustomOverlay.prototype.constructor = CustomOverlay;
-    
+
-      //메소드 재정의
+    //메소드 재정의
-      //필수
+    //필수
-      CustomOverlay.prototype.onAdd = function() {
+    CustomOverlay.prototype.onAdd = function () {
-        let overlayLayer = this.getPanes().overlayLayer;
+      let overlayLayer = this.getPanes().overlayLayer;
-    
+
-        this._element.appendTo(overlayLayer);
+      this._element.appendTo(overlayLayer);
-      };
+    };
-    
+
-      CustomOverlay.prototype.draw = function(idx) {
+    CustomOverlay.prototype.draw = function (idx) {
-        if (!this.getMap()) {
+      if (!this.getMap()) {
-            return;
+        return;
-        }
+      }
-        
+
-        let projection = this.getProjection(),
+      let projection = this.getProjection(),
         position = this.getPosition(),
         pixelPosition = projection.fromCoordToOffset(position);
-        
-        // let cnt = 0;
-        // let index = idx?._idx;
-        // cnt = index * 98;
-        this._element.css('left', pixelPosition.x)
-        this._element.css('top', pixelPosition.y)
-        // this._element.css('top', pixelPosition.y + -cnt)
-  
-      };
-    
-      CustomOverlay.prototype.onRemove = function() {
-          let overlayLayer = this.getPanes().overlayLayer;
-    
-          this._element.remove();
-          this._element.off();
-      };
-    
-      //속성
-      CustomOverlay.prototype.setPosition = function(position, idx) {
-          this._position = position;
-          this.draw(idx);
-      };
-    
-      CustomOverlay.prototype.getPosition = function() {
-          return this._position;
-      };
-
-      CustomOverlay.prototype.setId = function(id) {
-        this._id = id;
-      };
-
-      CustomOverlay.prototype.getId = function() {
-        return this._id;
-      };
-
-      CustomOverlay.prototype.setIdx = function(idx) {
-        this._idx = idx;
-      };
-
-      CustomOverlay.prototype.getIdx = function() {
-        return this._idx;
-      };
-    }
 
-    const removeArrMarkers = arrData => {
+      // let cnt = 0;
-        setArrMarkers(arrData);
+      // let index = idx?._idx;
+      // cnt = index * 98;
+      this._element.css('left', pixelPosition.x);
+      this._element.css('top', pixelPosition.y);
+      // this._element.css('top', pixelPosition.y + -cnt)
     };
 
-    const removeArrInfos = arrData => {
+    CustomOverlay.prototype.onRemove = function () {
-      setArrInfos(arrData);
+      let overlayLayer = this.getPanes().overlayLayer;
+
+      this._element.remove();
+      this._element.off();
     };
 
-    const markerInfo = () => {
+    //속성
-      arrMarkers.forEach((marker, idx) => {
+    CustomOverlay.prototype.setPosition = function (position, idx) {
-        // infoInit(marker, controlGpList[idx], idx);
+      this._position = position;
-
+      this.draw(idx);
-        if(controlGpList.length != 0) {
+    };
-          const info = new CustomOverlay({
+
-            position: new naver.maps.LatLng(controlGpList[idx]?.lat, controlGpList[idx]?.lng),
+    CustomOverlay.prototype.getPosition = function () {
-            // map: map,
+      return this._position;
-            id: marker.id,
+    };
-            idx: idx
+
-          });
+    CustomOverlay.prototype.setId = function (id) {
-          info.setMap(map);
+      this._id = id;
-          // console.log(info)
+    };
-          setArrInfos(m => [...m, info]);
+
-        }
+    CustomOverlay.prototype.getId = function () {
-      });
+      return this._id;
-    }
+    };
+
+    CustomOverlay.prototype.setIdx = function (idx) {
+      this._idx = idx;
+    };
+
+    CustomOverlay.prototype.getIdx = function () {
+      return this._idx;
+    };
+  };
+
+  const removeArrMarkers = arrData => {
+    setArrMarkers(arrData);
+  };
+
+  const removeArrInfos = arrData => {
+    setArrInfos(arrData);
+  };
+
+  const markerInfo = () => {
+    arrMarkers.forEach((marker, idx) => {
+      // infoInit(marker, controlGpList[idx], idx);
+
+      if (controlGpList.length != 0) {
+        const info = new CustomOverlay({
+          position: new naver.maps.LatLng(
+            controlGpList[idx]?.lat,
+            controlGpList[idx]?.lng
+          ),
+          // map: map,
+          id: marker.id,
+          idx: idx
+        });
+        info.setMap(map);
+
+        setArrInfos(m => [...m, info]);
+      }
+    });
+  };
 
-  
+  return null;
-    return null;
 };

src/components/map/naver/dron/DronToast.js

@@ -3,87 +3,87 @@ import { useSelector, useDispatch } from 'react-redux';
 import { Fragment } from 'react';
 import { toast } from 'react-toastify';
 import Avatar from '../../../../@core/components/avatar';
-import { Bell, Check, X, AlertTriangle, Info } from 'react-feather'
+import { Bell, Check, X, AlertTriangle, Info } from 'react-feather';
-import { controlGpDtlAction, controlGpFlightPlanAction } from '../../../../modules/control/gp';
+import {
-import { objectClickAction, objectUnClickAction } from '../../../../modules/control/map/actions/controlMapActions';
+  controlGpDtlAction,
+  controlGpFlightPlanAction
+} from '../../../../modules/control/gp';
+import {
+  objectClickAction,
+  objectUnClickAction
+} from '../../../../modules/control/map/actions/controlMapActions';
 import 'react-toastify/dist/ReactToastify.css';
 
 const DronToast = () => {
-    const dispatch = useDispatch(); 
+  const dispatch = useDispatch();
-    
-    const { controlGpArcrftWarnList } = useSelector(state => state.controlGpLogState);    
-    const [toastId, setToastId] = useState();    
 
-    useEffect(() => {
+  const { controlGpArcrftWarnList } = useSelector(
-        if (controlGpArcrftWarnList) {            
+    state => state.controlGpLogState
-            if (!toastId) {
+  );
+  const [toastId, setToastId] = useState();
 
-                for (let i=0; i<controlGpArcrftWarnList.length; i++) {
+  useEffect(() => {
-                    
+    if (controlGpArcrftWarnList) {
-                    if (controlGpArcrftWarnList[i].controlWarnCd) {
+      if (!toastId) {
-                        const id = toast.info(
+        for (let i = 0; i < controlGpArcrftWarnList.length; i++) {
-                            toastRender(
+          if (controlGpArcrftWarnList[i].controlWarnCd) {
-                                `${controlGpArcrftWarnList[i].idntfNum} 비정상 상황 알림`,
+            const id = toast.info(
-                                `경로 상에 비행 구역을 이탈했습니다.`
+              toastRender(
-                            ),
+                `${controlGpArcrftWarnList[i].idntfNum} 비정상 상황 알림`,
-                            {
+                `경로 상에 비행 구역을 이탈했습니다.`
-                                autoClose: false, 
+              ),
-                                hideProgressBar: true,
+              {
-                                position: toast.POSITION.BOTTOM_RIGHT,
+                autoClose: false,
-                                onClick: () => {     
+                hideProgressBar: true,
-                                    handleNotiClick(controlGpArcrftWarnList[i].cntrlId, controlGpArcrftWarnList[i].idntfNum);
+                position: toast.POSITION.BOTTOM_RIGHT,
-                                    // setToastId(null);                                    
+                onClick: () => {
-                                },
+                  handleNotiClick(
-                                onClose: () => {
+                    controlGpArcrftWarnList[i].cntrlId,
-                                    setToastId(null);
+                    controlGpArcrftWarnList[i].idntfNum
-                                }
+                  );
-                            }
+                  // setToastId(null);
-                        );
+                },
-                
+                onClose: () => {
-                        setToastId(id);
+                  setToastId(null);
-
-                        break;
-                    }
                 }
-            }
+              }
-        }
+            );
-    }, [controlGpArcrftWarnList]);
 
-    const handleNotiClick = (controlId, idntfNum) => {
+            setToastId(id);
-        console.log(controlId + ', ' + idntfNum);
 
-        dispatch(objectClickAction(controlId));
+            break;
-        dispatch(controlGpDtlAction.request(controlId));
+          }
-        dispatch(controlGpFlightPlanAction.request(idntfNum));
+        }
+      }
     }
+  }, [controlGpArcrftWarnList]);
 
-    const toastRender = (title, message) => {
+  const handleNotiClick = (controlId, idntfNum) => {
+    dispatch(objectClickAction(controlId));
+    dispatch(controlGpDtlAction.request(controlId));
+    dispatch(controlGpFlightPlanAction.request(idntfNum));
+  };
 
-        return (
+  const toastRender = (title, message) => {
-            <Fragment>
+    return (
-                <div className='toastify-header'>
+      <Fragment>
-                    <div className='title-wrapper'>
+        <div className='toastify-header'>
-                        <Avatar size='sm' color='info' icon={<Info size={10} />} />
+          <div className='title-wrapper'>
-                        <h6 className='text-info ml-50 mb-0' style={{'fontSize': 'small'}}>
+            <Avatar size='sm' color='info' icon={<Info size={10} />} />
-                            {title}
+            <h6 className='text-info ml-50 mb-0' style={{ fontSize: 'small' }}>
-                        </h6>                                        
+              {title}
-                    </div>                
+            </h6>
-                </div>
+          </div>
-
+        </div>
-                <div className='toastify-body'>
-                    <span>
-                        {message}
-                    </span>
-                </div>                            
-            </Fragment>
-        )
-    }
 
-    return (        
+        <div className='toastify-body'>
-        null
+          <span>{message}</span>
-    )
+        </div>
-    
+      </Fragment>
-}
+    );
+  };
 
+  return null;
+};
 
-export default DronToast;
+export default DronToast;

src/components/map/naver/feature/FeatureAirZone.js

@@ -7,14 +7,11 @@ export const FeatureAirZone = props => {
   let infoWindow;
 
   useEffect(() => {
-    // console.log('>>>>>', mapControl);
     featureAirZoneInit();
     featureAirEvent();
   }, [mapControl]);
 
-  useEffect(() => {
+  useEffect(() => {}, []);
-    // console.log(">>>>>>>>" , props.features)
-  }, []);
 
   const infowindowOpen = data => {
     const content =
@@ -122,7 +119,6 @@ export const FeatureAirZone = props => {
   const featureAirEvent = () => {
     props.map.data.addListener('click', function (e) {
       //   e.feature.setProperty('isColorful', true);
-    //  console.log(e.feature.property_name);
     });
 
     props.map.data.addListener('mouseover', function (e) {

src/components/map/naver/search/NaverMapSearch.js

@@ -2,7 +2,6 @@ import { useEffect } from 'react';
 
 export const NaverMapSearch = props => {
   useEffect(() => {
-    console.log('>>>>', props.naver.maps.Service);
     props.naver.maps.Service.geocode(
       {
         address: '산곡동'
@@ -14,7 +13,6 @@ export const NaverMapSearch = props => {
 
         var result = response.result, // 검색 결과의 컨테이너
           items = result.items; // 검색 결과의 배열
-        // console.log(result);
 
         // do Something
       }

src/components/map/naver/sensor/SensorZone.js

@@ -1,23 +1,21 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
-import {useSelector} from "react-redux";
+import { useSelector } from 'react-redux';
 
 const SENSOR_RADIUS = '100';
 const SENSOR_RADIUS_DIVISION = '3';
 let lenderCnt = 0;
-const SensorZone = (props) => {
+const SensorZone = props => {
-  const {naver} = props;
+  const { naver } = props;
   // 드론 실시간 정보
-  const {controlGpList} = useSelector(state => state.controlGpState);
+  const { controlGpList } = useSelector(state => state.controlGpState);
   // 환경지표 타입(dust, co, o3, no2, so2)
-  const {sensor} = useSelector(state => state.controlMapReducer);
+  const { sensor } = useSelector(state => state.controlMapReducer);
   // 센서레이어(환경지표) 관리
   const [circleLayers, setCircleLayers] = useState([]);
   const [polilineGroupLayers, setPolilineGroupLayers] = useState({});
 
-  // console.log('########## SensorZone ###########', lenderCnt, {controlGpList, circleLayer: circleLayers, polilineLayer: polilineGroupLayers});
-
   useEffect(() => {
-    lenderCnt++
+    lenderCnt++;
     if (!sensor) {
       removeSensorLayers();
     } else {
@@ -27,7 +25,6 @@ const SensorZone = (props) => {
   let infoWindow;
   // 센서 레이어 Info
   const infowindowOpen = data => {
-    // console.log('data', data)
     const content = `
       <div class="tooltip-box" style="max-width: 300px;">
         <div class="tooltip-ti">
@@ -81,7 +78,7 @@ const SensorZone = (props) => {
     emtpyLayerRemove();
     if (controlGpList) {
       controlGpList.forEach(controlGp => {
-        const {controlId, lat, lng, objectId} = controlGp;
+        const { controlId, lat, lng, objectId } = controlGp;
         let color = undefined;
         const sensorData = convtSensorData(controlGp);
         if (sensorData) {
@@ -104,21 +101,23 @@ const SensorZone = (props) => {
           addPolilineLayers(controlId, objectId, position, color);
         }
 
-        const circleLayer = circleLayers.find(layer => layer.controlId === controlId);
+        const circleLayer = circleLayers.find(
-        if (circleLayer) moveCircleLayer(circleLayer, position, color, sensorData);
+          layer => layer.controlId === controlId
+        );
+        if (circleLayer)
+          moveCircleLayer(circleLayer, position, color, sensorData);
         else addCircleLayer(controlId, objectId, position, color, sensorData);
       });
     }
-  }
+  };
 
   // 센서레이어 생성
   const addSensorLayer = (position, id, controlId, color, sensorData) => {
     addPolilineLayers(controlId, id, position, color);
     addCircleLayer(controlId, id, position, color, sensorData);
-  }
+  };
   // Circle 레이어 생성
   const addCircleLayer = (controlId, id, position, color, sensorData) => {
-    // console.log({controlId, id, position, color, sensorData})
     const circleLayer = new naver.maps.Circle({
       title: id,
       id: id,
@@ -133,7 +132,7 @@ const SensorZone = (props) => {
       fillColor: color,
       fillOpacity: 0.2,
       sensorData: sensorData
-    })
+    });
     // Circle 이벤트 주입
     naver.maps.Event.addListener(circleLayer, 'mouseover', function (e) {
       const data = {};
@@ -144,131 +143,147 @@ const SensorZone = (props) => {
       e.overlay.setOptions({
         strokeWeight: 5,
         fillOpacity: 0.5
-      })
+      });
       infowindowOpen(data);
     });
     naver.maps.Event.addListener(circleLayer, 'mouseout', function (e) {
       e.overlay.setOptions({
         strokeWeight: 2,
         fillOpacity: 0.2
-      })
+      });
       // props.map.Event.revertStyle();
       if (infoWindow) {
         infoWindow.close();
       }
     });
-    circleLayer.setMap(props.map)
+    circleLayer.setMap(props.map);
-    setCircleLayers(prev => ([...prev, circleLayer]));
+    setCircleLayers(prev => [...prev, circleLayer]);
-
+  };
-  }
   const addPolilineLayers = (controlId, id, position, color) => {
     // 지도에 적용 및 레이어 관리 추가
-    // console.log('addPolilineLayers', controlId)
+
     const polilineLayers = createCircleInGrid(position, id, controlId, color);
     polilineLayers.forEach(layer => layer.setMap(props.map));
     setPolilineGroupLayers(prev => ({
       ...prev,
       [controlId]: polilineLayers
     }));
-  }
+  };
 
   // 센서레이어 이동
   const moveSensorLayer = (controlId, position, color) => {
-    const circleLayer = circleLayers.find(layer => layer.controlId === controlId);
+    const circleLayer = circleLayers.find(
+      layer => layer.controlId === controlId
+    );
     moveCircleLayer(circleLayer, position, color);
 
     const polilineLayers = polilineGroupLayers[controlId];
     movePolilineLayers(polilineLayers, position, color);
-  }
+  };
   const moveCircleLayer = (circleLayer, position, color, sensorData) => {
     // const circleLayer = circleLayers.find(layer => layer.controlId === controlId);
     if (circleLayer) {
       circleLayer.sensorData = sensorData;
-      circleLayer.setOptions({center: position, strokeColor: color, fillColor: color})
+      circleLayer.setOptions({
+        center: position,
+        strokeColor: color,
+        fillColor: color
+      });
     }
-  }
+  };
   const movePolilineLayers = (polilineLayers, position, color) => {
-    const {controlId, id, position: prevPosition} = polilineLayers[0];
+    const { controlId, id, position: prevPosition } = polilineLayers[0];
     if (prevPosition.equals(position)) {
       if (polilineLayers) {
-        polilineLayers.forEach(layer => layer.setOptions({strokeColor: color}));
+        polilineLayers.forEach(layer =>
+          layer.setOptions({ strokeColor: color })
+        );
       }
     } else {
       if (polilineLayers) {
         polilineLayers.forEach(layer => layer.setMap(null));
       }
-      const newPolilineLayers = createCircleInGrid(position, id, controlId, color);
+      const newPolilineLayers = createCircleInGrid(
+        position,
+        id,
+        controlId,
+        color
+      );
       newPolilineLayers.forEach(layer => layer.setMap(props.map));
       setPolilineGroupLayers(prev => ({
         ...prev,
         [controlId]: newPolilineLayers
       }));
     }
-  }
+  };
 
   // 센서레이어 제거
-  const removeSensorLayer = (controlId) => {
+  const removeSensorLayer = controlId => {
     removeCircleLayer(controlId);
     removePolilineLayer(controlId);
-  }
+  };
-  const removeCircleLayer = (controlId) => {
+  const removeCircleLayer = controlId => {
     const idx = circleLayers.findIndex(layer => layer.controlId === controlId);
     circleLayers[idx].setMap(null);
     setCircleLayers(prev => {
       prev.splice(idx, 1);
       return prev;
-    })
+    });
-  }
+  };
-  const removePolilineLayer = (controlId) => {
+  const removePolilineLayer = controlId => {
     const polilineLayers = polilineGroupLayers[controlId];
     if (polilineLayers) polilineLayers.forEach(layer => layer.setMap(null));
     setPolilineGroupLayers(prev => {
       delete prev[controlId];
       return prev;
-    })
+    });
-  }
+  };
   // 센서레이어 모두 제거
   const removeSensorLayers = () => {
     circleLayers.forEach(layer => layer.setMap(null));
     setCircleLayers([]);
     const keys = Object.keys(polilineGroupLayers);
-    keys.forEach((key) => {
+    keys.forEach(key => {
       polilineGroupLayers[key].forEach(layer => layer.setMap(null));
-    })
+    });
     setPolilineGroupLayers({});
-  }
+  };
 
   // 레이어관리시 새로운 데이터에 없는 좌표 제거
   const emtpyLayerRemove = () => {
     setCircleLayers(prev => {
       const remainCircleLayers = prev.filter((circleLayer, i) => {
         const controlId = circleLayer.controlId;
-        const findObj = controlGpList.find(controlGp => controlGp.controlId === controlId);
+        const findObj = controlGpList.find(
+          controlGp => controlGp.controlId === controlId
+        );
         if (findObj) {
           return circleLayer;
         } else {
           circleLayer.setMap(null);
         }
-      })
+      });
       return remainCircleLayers;
-    })
+    });
     setPolilineGroupLayers(prev => {
       const keys = Object.keys(prev);
       const remainPolilineGroupLayer = {};
       keys.forEach((controlId, i) => {
-        const findObj = controlGpList.find(controlGp => controlGp.controlId === controlId);
+        const findObj = controlGpList.find(
+          controlGp => controlGp.controlId === controlId
+        );
         if (findObj) {
           remainPolilineGroupLayer[controlId] = prev[controlId];
         } else {
           const polilineLayers = prev[controlId];
           polilineLayers.forEach(layer => {
             layer.setMap(null);
-          })
+          });
         }
-      })
+      });
       return remainPolilineGroupLayer;
-    })
+    });
-  }
+  };
 
   // Circle안에 격자 무늬 생성
   const createCircleInGrid = (position, id, controlId, color) => {
@@ -278,14 +293,30 @@ const SensorZone = (props) => {
       // 각 사분면 각도
       const diff = 90 / SENSOR_RADIUS_DIVISION;
       const angleQuadrant1 = diff * i;
-      const angleQuadrant2 = 180 - (diff * i);
+      const angleQuadrant2 = 180 - diff * i;
-      const angleQuadrant3 = 180 + (diff * i);
+      const angleQuadrant3 = 180 + diff * i;
       const angleQuadrant4 = diff * -i;
       // 각 사분면 좌표
-      const coord1 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant1, SENSOR_RADIUS);
+      const coord1 = new naver.maps.EPSG3857.getDestinationCoord(
-      const coord2 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant2, SENSOR_RADIUS);
+        position,
-      const coord3 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant3, SENSOR_RADIUS);
+        angleQuadrant1,
-      const coord4 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant4, SENSOR_RADIUS);
+        SENSOR_RADIUS
+      );
+      const coord2 = new naver.maps.EPSG3857.getDestinationCoord(
+        position,
+        angleQuadrant2,
+        SENSOR_RADIUS
+      );
+      const coord3 = new naver.maps.EPSG3857.getDestinationCoord(
+        position,
+        angleQuadrant3,
+        SENSOR_RADIUS
+      );
+      const coord4 = new naver.maps.EPSG3857.getDestinationCoord(
+        position,
+        angleQuadrant4,
+        SENSOR_RADIUS
+      );
       const polyline12 = new naver.maps.Polyline({
         id,
         position,
@@ -296,7 +327,7 @@ const SensorZone = (props) => {
         strokeOpacity: 1,
         strokeColor: color,
         strokeStyle: 'shortdash'
-      })
+      });
       polilineLayers.push(polyline12);
       const polyline23 = new naver.maps.Polyline({
         id,
@@ -308,7 +339,7 @@ const SensorZone = (props) => {
         strokeOpacity: 1,
         strokeColor: color,
         strokeStyle: 'shortdash'
-      })
+      });
       polilineLayers.push(polyline23);
       const polyline34 = new naver.maps.Polyline({
         id,
@@ -320,7 +351,7 @@ const SensorZone = (props) => {
         strokeOpacity: 1,
         strokeColor: color,
         strokeStyle: 'shortdash'
-      })
+      });
       polilineLayers.push(polyline34);
       const polyline41 = new naver.maps.Polyline({
         id,
@@ -332,14 +363,14 @@ const SensorZone = (props) => {
         strokeOpacity: 1,
         strokeColor: color,
         strokeStyle: 'shortdash'
-      })
+      });
       polilineLayers.push(polyline41);
     }
     return polilineLayers;
-  }
+  };
 
   // 환경지표 필요한 데이터로 변환
-  const convtSensorData = (sensorData) => {
+  const convtSensorData = sensorData => {
     const r = {
       sensorDust: {
         title: '미세먼지',
@@ -371,13 +402,13 @@ const SensorZone = (props) => {
         text: '-',
         color: undefined
       }
-    }
+    };
 
     // 정수: 미세먼지 || 소수점 1자리 : 일산화탄소 || 소수점 3자리 : 오존, 이산화질소, 아황산가스
     // 좋음 : 파랑, 보통 : 노랑, 나쁨 : 주황, 매우나쁨 : 빨강
     // 미세먼지 : 좋음(0~30) 보통(31~80) 나쁨(81~150) 매우나쁨(151~)
     if (sensorData.sensorDust != undefined && sensorData.sensorDust != null) {
-      const val = r.sensorDust.value = Math.round(sensorData.sensorDust);
+      const val = (r.sensorDust.value = Math.round(sensorData.sensorDust));
       if (val <= 30) {
         r.sensorDust.text = '좋음';
         r.sensorDust.color = '#37c9ff';
@@ -397,7 +428,8 @@ const SensorZone = (props) => {
     }
     // 일산화탄소 : 좋음(0~2) 보통(2.1~9) 나쁨(9.1~15) 매우나쁨(15.1~)
     if (sensorData.sensorCo != undefined && sensorData.sensorCo != null) {
-      const val = r.sensorCo.value = Math.round(sensorData.sensorCo * 10) / 10;
+      const val = (r.sensorCo.value =
+        Math.round(sensorData.sensorCo * 10) / 10);
       if (val <= 0.2) {
         r.sensorCo.text = '좋음';
         r.sensorCo.color = '#37c9ff';
@@ -417,7 +449,8 @@ const SensorZone = (props) => {
     }
     // 아황산가스 : 좋음(0~0.02) 보통(0.021~0.05) 나쁨(0.051~0.15) 매우나쁨 (0.151 ~)
     if (sensorData.sensorSo2 != undefined && sensorData.sensorSo2 != null) {
-      const val = r.sensorSo2.value = Math.round(sensorData.sensorSo2 * 1000) / 1000;
+      const val = (r.sensorSo2.value =
+        Math.round(sensorData.sensorSo2 * 1000) / 1000);
       if (val <= 0.02) {
         r.sensorSo2.text = '좋음';
         r.sensorSo2.color = '#37c9ff';
@@ -437,7 +470,8 @@ const SensorZone = (props) => {
     }
     // 이산화질소 : 좋음(0~0.03) 보통(0.031~0.06) 나쁨(0.061~0.2) 매우나쁨(0.201~)
     if (sensorData.sensorNo2 != undefined && sensorData.sensorNo2 != null) {
-      const val = r.sensorNo2.value = Math.round(sensorData.sensorNo2 * 1000) / 1000;
+      const val = (r.sensorNo2.value =
+        Math.round(sensorData.sensorNo2 * 1000) / 1000);
       if (val <= 0.03) {
         r.sensorNo2.text = '좋음';
         r.sensorNo2.color = '#37c9ff';
@@ -454,11 +488,11 @@ const SensorZone = (props) => {
         r.sensorNo2.text = '-';
         r.sensorNo2.color = '#a1a1a1';
       }
-
     }
     // 오존 : 좋음(0~0.03) 보통(0.031~0.09) 나쁨(0.091~0.15) 매우나쁨(0.151~)
     if (sensorData.sensorO3 != undefined && sensorData.sensorO3 != null) {
-      const val = r.sensorO3.value = Math.round(sensorData.sensorO3 * 1000) / 1000;
+      const val = (r.sensorO3.value =
+        Math.round(sensorData.sensorO3 * 1000) / 1000);
       if (val <= 0.03) {
         r.sensorO3.text = '좋음';
         r.sensorO3.color = '#37c9ff';
@@ -477,7 +511,7 @@ const SensorZone = (props) => {
       }
     }
     return r;
-  }
+  };
 
   return null;
 };

src/components/map/nhn/NMap.js

@@ -7,9 +7,6 @@ export const NMap = props => {
 
   useEffect(() => {
     mapInit();
-    // console.log(map);
-
-    // console.log(features);
 
     // setIsMapLoad(true);
   }, []);
@@ -30,11 +27,11 @@ export const NMap = props => {
     // map = ;
     props.setMapObject(new naver.maps.Map('map', mapOptions));
     // naver.maps.Event.addListener(map, 'click', function (e) {
-    //   console.log(e);
+
     // });
 
     // naver.maps.Event.addListener(map, 'idle', function (e) {
-    //   console.log(e);
+
     // });
   };
   return <div id='map' style={{ width: '100%', height: '100vh' }}></div>;

src/components/map/nhn/NMapMarker.js

@@ -25,9 +25,6 @@ export const NMapMarker = props => {
   }, [props.data]);
 
   useEffect(() => {
-    // console.log('info>>>:' + props.info.lat);
-    // console.log(props.selMarker);
-
     if (props.selMarker && props.selMarker) {
       const position = new naver.maps.LatLng(props.info?.lat, props.info?.lon);
       props.selMarker?.setPosition(position);
@@ -45,8 +42,8 @@ export const NMapMarker = props => {
       id: id,
       icon: {
         url: DronIcon,
-        origin: new naver.maps.Point(0,0),
+        origin: new naver.maps.Point(0, 0),
-        anchor: new naver.maps.Point(15, 15),
+        anchor: new naver.maps.Point(15, 15)
       }
     });
     props.map.setCenter(position);
@@ -56,7 +53,6 @@ export const NMapMarker = props => {
   };
 
   const moveMarkers = (marker, position) => {
-    // console.log('dddddddddddddddddddd', marker, position);
     // marker.setPositon(position);
   };
 

src/components/map/nhn/NMapPolyline.js

@@ -3,8 +3,6 @@ import { useEffect } from 'react';
 export const NMapPolyline = props => {
   const naver = window.naver;
 
-  //   console.log(props);
-
   let polyline;
   let polylinePath = [];
 
@@ -32,7 +30,6 @@ export const NMapPolyline = props => {
           const position = new naver.maps.LatLng(item.lat, item.lon);
           polylinePath.push(position);
         }
-        // console.log('>>>>>>>>>>>', item);
       });
 
       polyline.setPath(polylinePath);

src/components/mapDraw/MapControlDraw.js

@@ -3,7 +3,6 @@ import { GoogleCustomMap } from './google/GoogleMap';
 import { NaverCustomMap } from './naver/NaverMap';
 
 export const MapControlDraw = props => {
-  // console.log('```````````````````````');
   return (
     <>{props.mapType === 'google' ? <GoogleCustomMap /> : <NaverCustomMap />}</>
   );

src/components/mapDraw/google/GoogleMap.js

@@ -17,9 +17,7 @@ const MapInit = () => {
   const { controlGpList } = useSelector(state => state.controlGpState);
   const [bounds, setBounds] = useState(null);
 
-  useEffect(() => {
+  useEffect(() => {}, [controlGpList]);
-   // console.log('GoogleMap >>>>>', controlGpList);
-  }, [controlGpList]);
   const onSearchBoxMounted = () => {};
 
   const onPlacesChanged = () => {};
@@ -50,7 +48,6 @@ export const GoogleCustomMap = () => {
     url: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing,geometryplaces'
   };
 
- // console.log(`${mapProps.url}&key=${mapProps.key}`);
   return (
     <div style={{ width: '100vw', height: '100vh' }}>
       <GoogleMapWrapped

src/components/mapDraw/naver/NaverMapControl.js

@@ -4,8 +4,7 @@ import { useSelector } from 'react-redux';
 const NaverMapControl = props => {
   const mapControl = useSelector(state => state.controlMapReducer);
 
-  useEffect(() => {
+  useEffect(() => {}, [mapControl]);
-  }, [mapControl]);
 
   //맵타입 변경
   if (mapControl.mapType === 'NORMAL') {
@@ -18,11 +17,11 @@ const NaverMapControl = props => {
 
   //그리기타입 변경
   // if(mapControl.drawType === 'CIRCLE') {
-  //   console.log("circle")
+
   // } else if(mapControl.drawType === 'LINE') {
-  //   console.log("line")
+
   // } else if(mapControl.drawType === 'POLYGON') {
-  //   console.log("polygon")
+
   // }
 
   return null;

src/components/mapDraw/naver/draw/DrawMap.js

@@ -1,13 +1,13 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
-import { useSelector } from "react-redux";
+import { useSelector } from 'react-redux';
 
 export const DrawMap = props => {
-  const {naver} = props;
+  const { naver } = props;
-  const {map} = props;
+  const { map } = props;
   const [drawing, setDrawing] = useState();
   const [overlay, setOverlay] = useState([]);
 
-  const {drawCheck} = useSelector(state => state.controlMapReducer);
+  const { drawCheck } = useSelector(state => state.controlMapReducer);
 
   useEffect(() => {
     removeOverlay();
@@ -17,35 +17,34 @@ export const DrawMap = props => {
     init();
   }, [drawCheck]);
 
-
   const removeOverlay = () => {
-    if(overlay.length >= 2) {
+    if (overlay.length >= 2) {
       drawing.removeDrawing(overlay[0]);
-      setOverlay(prev => ([prev[overlay.length-1]]));
+      setOverlay(prev => [prev[overlay.length - 1]]);
     }
-  }
+  };
 
   const init = () => {
     initRemove();
     removeDrawManager();
-  }
+  };
 
   const initRemove = () => {
-    if(overlay) {
+    if (overlay) {
       overlay.forEach(prev => drawing.removeDrawing(prev));
       setOverlay([]);
     }
-  }
+  };
 
   const removeDrawManager = () => {
-    if(drawing) {
+    if (drawing) {
       drawing.setMap(null);
     }
     drawSetting();
-  }
+  };
 
   const drawSetting = () => {
-    if(drawCheck) {
+    if (drawCheck) {
       // debugger;
       let drawingManager = new naver.maps.drawing.DrawingManager({
         drawingControl: [
@@ -59,58 +58,53 @@ export const DrawMap = props => {
           style: naver.maps.drawing.DrawingStyle.VERTICAL
         },
         controlPointOptions: {
-            anchorPointOptions: {
+          anchorPointOptions: {
-                radius: 5,
+            radius: 5,
-                fillColor: '#ff0000',
+            fillColor: '#ff0000',
-                strokeColor: '#ffffff',
+            strokeColor: '#ffffff',
-                strokeWeight: 2
+            strokeWeight: 2
-            },
+          },
-            midPointOptions: {
+          midPointOptions: {
-                radius: 4,
+            radius: 4,
-                fillColor: '#0067a3',
+            fillColor: '#0067a3',
-                strokeColor: '#ffffff',
+            strokeColor: '#ffffff',
-                strokeWeight: 2,
+            strokeWeight: 2
-            }
+          }
         },
         ellipseOptions: {
-            fillColor: '#ff25dc',
+          fillColor: '#ff25dc',
-            fillOpacity: 0.3,
+          fillOpacity: 0.3,
-            strokeWeight: 2,
+          strokeWeight: 2,
-            strokeColor: '#ff25dc'
+          strokeColor: '#ff25dc'
         },
         polylineOptions: {
-            strokeColor: '#222',
+          strokeColor: '#222',
-            strokeWeight: 10
+          strokeWeight: 10
         },
         polygonOptions: {
-            fillColor: '#ffc300',
+          fillColor: '#ffc300',
-            fillOpacity: 0.3,
+          fillOpacity: 0.3,
-            strokeWeight: 2,
+          strokeWeight: 2,
-            strokeColor:'#ffc300'
+          strokeColor: '#ffc300'
         }
       });
 
-      // console.log(drawingManager.)
-
       addEvent(drawingManager);
       drawingManager.setMap(map);
       setDrawing(drawingManager);
     }
-    
+  };
-  }
 
-  const addEvent = (drawingManager) => { 
+  const addEvent = drawingManager => {
-    drawingManager.addListener('drawing_added', function(overlay) {
+    drawingManager.addListener('drawing_added', function (overlay) {
-     // console.log(overlay)
       // if(overlay.OVERLAY_TYPE === 'Polygon') {
-      //   console.log(overlay.paths._array[0]._array)
+
       // } else if(overlay.OVERLAY_TYPE === 'Ellipse') {
-      //   console.log(overlay.bounds)
+
       // }
-      setOverlay(prev=> ([...prev, overlay]));
+      setOverlay(prev => [...prev, overlay]);
     });
-  }
+  };
 
   return null;
 };
-

src/components/mapDraw/naver/draw/JQueryDraw.js

@@ -1,13 +1,12 @@
 import $ from 'jquery';
-import '../../../../assets/css/custom.css'; 
+import '../../../../assets/css/custom.css';
 import { CustomInput } from 'reactstrap';
 
 export const JQueryDraw = props => {
-  const {naver} = props;
+  const { naver } = props;
-  const {map} = props;
+  const { map } = props;
 
-
+  var Measure = function (buttons) {
-  var Measure = function(buttons) {
     this.$btnLine = buttons.line;
     this.$btnPolygon = buttons.polygon;
     this.$btnCircle = buttons.circle;
@@ -18,12 +17,10 @@ export const JQueryDraw = props => {
     this._bindDOMEvents();
   };
 
-  $.extend(
+  $.extend(Measure.prototype, {
-    Measure.prototype,{
     constructor: Measure,
 
-    setMap: function(map) {
+    setMap: function (map) {
-     // console.log('setMap')
       if (this.map) {
         this._unbindMap(this.map);
       }
@@ -35,62 +32,86 @@ export const JQueryDraw = props => {
       }
     },
 
-    startMode: function(mode) {
+    startMode: function (mode) {
-     // console.log('startMode')
       if (!mode) return;
 
       if (mode === 'line') {
         this._startDistance();
-      } if (mode === 'polygon') {
+      }
+      if (mode === 'polygon') {
         this._startArea();
-      } if (mode === 'circle') {
+      }
+      if (mode === 'circle') {
         this._startCircle();
-      } if (mode === 'rectangle') {
+      }
+      if (mode === 'rectangle') {
         this._startRectangle();
       }
     },
 
-    _startDistance: function() {
+    _startDistance: function () {
-     // console.log('startDistance')
       var map = this.map;
       this._distanceListeners = [
-        naver.maps.Event.addListener(map, 'click', this._onClickDistance.bind(this))
+        naver.maps.Event.addListener(
+          map,
+          'click',
+          this._onClickDistance.bind(this)
+        )
       ];
     },
 
-    _startArea: function() {
+    _startArea: function () {
-     // console.log('startArea')
       var map = this.map;
 
       this._areaListeners = [
-        naver.maps.Event.addListener(map, 'click', this._onClickArea.bind(this)),
+        naver.maps.Event.addListener(
-        naver.maps.Event.addListener(map, 'rightclick', this._finishArea.bind(this))
+          map,
+          'click',
+          this._onClickArea.bind(this)
+        ),
+        naver.maps.Event.addListener(
+          map,
+          'rightclick',
+          this._finishArea.bind(this)
+        )
       ];
 
       $(document).on('mousemove.measure', this._onMouseMoveArea.bind(this));
     },
 
-    _startCircle: function() {
+    _startCircle: function () {
-     // console.log('startCircle')
       var map = this.map;
       this._circleListeners = [
-        naver.maps.Event.addListener(map, 'click', this._onClickCircle.bind(this)),
+        naver.maps.Event.addListener(
-        naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this))
+          map,
+          'click',
+          this._onClickCircle.bind(this)
+        ),
+        naver.maps.Event.addListener(
+          map,
+          'rightclick',
+          this._finishCircle.bind(this)
+        )
       ];
     },
 
-    _startRectangle: function() {
+    _startRectangle: function () {
-     // console.log('startRectangle')
       var map = this.map;
       this._rectangleListeners = [
-        naver.maps.Event.addListener(map, 'click', this._onClickRectangle.bind(this)),
+        naver.maps.Event.addListener(
-        naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this))
+          map,
-      ]
+          'click',
+          this._onClickRectangle.bind(this)
+        ),
+        naver.maps.Event.addListener(
+          map,
+          'rightclick',
+          this._finishRectangle.bind(this)
+        )
+      ];
     },
 
-    _finishDistance: function() {
+    _finishDistance: function () {
-     // console.log('finishDistance')
-
       naver.maps.Event.removeListener(this._distanceListeners);
       delete this._distanceListeners;
 
@@ -102,13 +123,11 @@ export const JQueryDraw = props => {
       }
 
       if (this._polyline) {
-        // console.log(this._polyline.getPath()._array, 'path')
         let polypaths = this._polyline.getPath()._array;
 
         //파싱
         let polypathJSON = new Array();
-        for(let i = 0; i< polypaths.length; i++) {
+        for (let i = 0; i < polypaths.length; i++) {
-
           //파싱
           let obj = new Object();
 
@@ -116,54 +135,51 @@ export const JQueryDraw = props => {
           obj.y = '' + polypaths[i]._lat + '';
 
           obj = JSON.stringify(obj);
-          polypathJSON.push(JSON.parse(obj));  
+          polypathJSON.push(JSON.parse(obj));
         }
-       // console.log(polypathJSON, 'json polyline path')
-
 
         //버퍼 생성에 필요한 coordinates 배열 변환
         let lineStringPaths = [];
-        for(let i = 0; i < this._polyline.getPath().length; i++) {
+        for (let i = 0; i < this._polyline.getPath().length; i++) {
-          lineStringPaths.push([this._polyline.getPath()._array[i].x, this._polyline.getPath()._array[i].y]);
+          lineStringPaths.push([
+            this._polyline.getPath()._array[i].x,
+            this._polyline.getPath()._array[i].y
+          ]);
         }
-       // console.log(lineStringPaths, 'polyline path')
 
         //버퍼 생성을 위한 line 객체
         const originalGeojson = {
-          type: "FeatureCollection",
+          type: 'FeatureCollection',
           features: [
             {
-              type: "Feature",
+              type: 'Feature',
               properties: {},
               geometry: {
-                type: "LineString",
+                type: 'LineString',
                 coordinates: lineStringPaths
               }
             }
           ]
         };
-       // console.log(originalGeojson)
 
         //버퍼 객체
-        const bufferObj = buffer(originalGeojson, 50, {units:'meters'});
+        const bufferObj = buffer(originalGeojson, 50, { units: 'meters' });
 
         //버퍼 라인 생성
         let bufferPath = bufferObj.features[0].geometry.coordinates[0];
-       // console.log(bufferPath, 'buffer path')
 
         this.bufferPolyline = new naver.maps.Polyline({
           strokeColor: '#ff0000',
           strokeWeight: 2,
           strokeStyle: [4, 4],
           strokeOpacity: 0.6,
-          path : bufferPath,
+          path: bufferPath,
           map: map
         });
 
         // 이거 하면 그동안 한거 싹 사라짐 -> 얘를 통해서 drawType이 바뀌면 다 날라가는 걸로 해보면 될듯
         // this._polyline.setMap(null)
         delete this._polyline;
-
       }
       //onfocus()의 반대기능 = blur()
       this.$btnLine.removeClass('control-on').blur();
@@ -171,8 +187,7 @@ export const JQueryDraw = props => {
       this._mode = null;
     },
 
-    _finishArea: function() {
+    _finishArea: function () {
-     // console.log('finishArea')
       naver.maps.Event.removeListener(this._areaListeners);
       delete this._areaListeners;
 
@@ -190,21 +205,19 @@ export const JQueryDraw = props => {
       this._mode = null;
     },
 
-    _finishCircle: function() {
+    _finishCircle: function () {
-     // console.log('finishCircle')
-
       naver.maps.Event.removeListener(this._circleListeners);
       delete this._circleListeners;
 
       $(document).off('mousemove.measure');
 
-      if(this._guidecircle) {
+      if (this._guidecircle) {
         this._guidecircle.setMap(null);
         this._radius.setMap(null);
         delete this._raidus;
         delete this._guidecircle;
       }
-    
+
       if (this._circle) {
         // this._circle.setMap(null);
         delete this._circle;
@@ -216,15 +229,13 @@ export const JQueryDraw = props => {
       this._mode = null;
     },
 
-    _finishRectangle: function() {
+    _finishRectangle: function () {
-     // console.log('finishRectangle')
-
       naver.maps.Event.removeListener(this._rectangleListeners);
       delete this._rectangleListeners;
 
       $(document).off('mousemove.measure');
 
-      if(this._rectangle) {
+      if (this._rectangle) {
         this._guiderectangle.setMap(null);
         delete this._guiderectangle;
       }
@@ -234,28 +245,30 @@ export const JQueryDraw = props => {
       this._mode = null;
     },
 
-    finishMode: function(mode) {
+    finishMode: function (mode) {
-     // console.log('finishMode')
       if (!mode) return;
 
       if (mode === 'line') {
         this._finishDistance();
-      } if (mode === 'polygon') {
+      }
+      if (mode === 'polygon') {
         this._finishArea();
-      } if (mode === 'circle') {
+      }
+      if (mode === 'circle') {
         this._finishCircle();
-      } if (mode === 'rectangle') {
+      }
+      if (mode === 'rectangle') {
         this._finishRectangle();
       }
     },
 
-    _fromMetersToText: function(meters) {
+    _fromMetersToText: function (meters) {
       meters = meters || 0;
 
       var km = 1000,
         text = meters;
 
-      if(meters >= km) {
+      if (meters >= km) {
         text = parseFloat((meters / km).toFixed(1)) + 'km';
       } else {
         text = parseFloat(meters.toFixed(1)) + 'm';
@@ -264,14 +277,20 @@ export const JQueryDraw = props => {
       return text;
     },
 
-    _addMileStone: function(coord, text, css) {
+    _addMileStone: function (coord, text, css) {
-      if(!this._ms) this._ms = [];
+      if (!this._ms) this._ms = [];
 
       let content;
-      if(text == 'Start') {
+      if (text == 'Start') {
-        content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:14px;color:#ff0000;"><span>'+ text +'</span></div>'
+        content =
+          '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;font-size:14px;color:#ff0000;"><span>' +
+          text +
+          '</span></div>';
       } else {
-        content = '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;color:#737373;"><span>'+ text +'</span></div>'
+        content =
+          '<div style="display:inline-block;padding:5px;text-align:center;background-color:#fff;border:1px solid #000;color:#737373;"><span>' +
+          text +
+          '</span></div>';
       }
 
       var ms = new naver.maps.Marker({
@@ -285,7 +304,7 @@ export const JQueryDraw = props => {
 
       var msElement = $(ms.getElement());
 
-      if(css) {
+      if (css) {
         msElement.css(css);
       } else {
         msElement.css('font-size', '13px');
@@ -294,8 +313,7 @@ export const JQueryDraw = props => {
       this._ms.push(ms);
     },
 
-    _onClickDistance: function(e) {
+    _onClickDistance: function (e) {
-     // console.log('onClickDistance')
       var map = this.map,
         coord = e.coord;
 
@@ -312,8 +330,17 @@ export const JQueryDraw = props => {
 
         // this._lastDistance = this._guideline.getDistance();
 
-        $(document).on('mousemove.measure', this._onMouseMoveDistance.bind(this));
+        $(document).on(
-        this._distanceListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishDistance.bind(this)));
+          'mousemove.measure',
+          this._onMouseMoveDistance.bind(this)
+        );
+        this._distanceListeners.push(
+          naver.maps.Event.addListener(
+            map,
+            'rightclick',
+            this._finishDistance.bind(this)
+          )
+        );
 
         // 실제 거리재기에 사용되는 폴리라인을 생성합니다.
         this._polyline = new naver.maps.Polyline({
@@ -328,23 +355,24 @@ export const JQueryDraw = props => {
 
         this._lastDistance = this._polyline.getDistance();
         this._addMileStone(coord, 'Start');
-
       } else {
         this._guideline.setPath([e.coord]);
         this._polyline.getPath().push(coord);
 
         var distance = this._polyline.getDistance();
-        this._addMileStone(coord, this._fromMetersToText(distance - this._lastDistance));
+        this._addMileStone(
+          coord,
+          this._fromMetersToText(distance - this._lastDistance)
+        );
         this._lastDistance = distance;
       }
     },
 
-    _onMouseMoveDistance: function(e) {
+    _onMouseMoveDistance: function (e) {
-     // console.log('onMouseMoveDistance')
       var map = this.map,
-          proj = this.map.getProjection(),
+        proj = this.map.getProjection(),
-          coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+        coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
-          path = this._guideline.getPath();
+        path = this._guideline.getPath();
 
       if (path.getLength() === 2) {
         //맨 뒷 값 삭제 = 기존클릭좌표만 남겨둬라 = 실시간으로 좌표들어가야 하니까
@@ -355,8 +383,7 @@ export const JQueryDraw = props => {
       path.push(coord);
     },
 
-    _onClickArea: function(e) {
+    _onClickArea: function (e) {
-     // console.log('onClickArea')
       var map = this.map,
         coord = e.coord;
 
@@ -373,14 +400,13 @@ export const JQueryDraw = props => {
       }
     },
 
-    _onMouseMoveArea: function(e) {
+    _onMouseMoveArea: function (e) {
-     // console.log('onMouseMoveArea')
       if (!this._polygon) return;
 
       var map = this.map,
-          proj = this.map.getProjection(),
+        proj = this.map.getProjection(),
-          coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+        coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
-          path = this._polygon.getPath();
+        path = this._polygon.getPath();
 
       if (path.getLength() >= 2) {
         path.pop();
@@ -389,13 +415,11 @@ export const JQueryDraw = props => {
       path.push(coord);
     },
 
-    _onClickCircle: function(e) {
+    _onClickCircle: function (e) {
-     // console.log('onClickCircle')
       var map = this.map,
         coord = e.coord;
 
-      if(!this._circle) {
+      if (!this._circle) {
-
         //가이드 라인
         this._radius = new naver.maps.Polyline({
           strokeStyle: [4, 4],
@@ -417,8 +441,14 @@ export const JQueryDraw = props => {
         });
 
         $(document).on('mousemove.measure', this._onMouseMoveCircle.bind(this));
-        this._circleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishCircle.bind(this)));
+        this._circleListeners.push(
-        
+          naver.maps.Event.addListener(
+            map,
+            'rightclick',
+            this._finishCircle.bind(this)
+          )
+        );
+
         // 실제 사용되는 원형
         this._circle = new naver.maps.Circle({
           strokeOpacity: 0.8,
@@ -428,52 +458,46 @@ export const JQueryDraw = props => {
           radius: this._lastDistance,
           map: map
         });
-
       } else {
         // this._guidecircle.setCenter(e.coord);
         // this._circle.setCenter(coord);
         // if(this._radius.getPath().length() === 2) {
         //   this._radius.getPath().pop();
         // }
-        
+
         // this._radius.getPath().push(coord);
 
         var distance = this._radius.getDistance();
         this._lastDistance = distance;
         this._circle.setRadius(this._lastDistance);
-
-
       }
     },
 
-    _onMouseMoveCircle: function(e) {
+    _onMouseMoveCircle: function (e) {
-     // console.log('onMouseMoveCircle')
+      if (!this._circle) return;
-      if(!this._circle) return;
 
       var map = this.map,
-          proj = this.map.getProjection(),
+        proj = this.map.getProjection(),
-          coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
+        coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
-          path = this._radius.getPath(),
+        path = this._radius.getPath(),
-          center = this._guidecircle.getCenter(), //LatLng으로 나옴
+        center = this._guidecircle.getCenter(), //LatLng으로 나옴
-          r = proj.getDistance(coord, center);
+        r = proj.getDistance(coord, center);
 
-      if(path.getLength() === 2) {
+      if (path.getLength() === 2) {
         path.pop();
       }
       path.push(coord);
       this._guidecircle.setRadius(r);
     },
 
-    _onClickRectangle: function(e) {
+    _onClickRectangle: function (e) {
-     // console.log('onClickRectangle')
       var map = this.map,
         coord = e.coord;
-      
+
       this.max_x = 0;
       this.max_y = 0;
 
-
+      if (!this._rectangle) {
-      if(!this._rectangle) {
         //min = 고정값
         this.fixed = coord;
         this.min = [this.fixed.x, this.fixed.y];
@@ -488,8 +512,17 @@ export const JQueryDraw = props => {
           map: map
         });
 
-        $(document).on('mousemove.measure', this._onMouseMoveRectangle.bind(this));
+        $(document).on(
-        this._rectangleListeners.push(naver.maps.Event.addListener(map, 'rightclick', this._finishRectangle.bind(this)));
+          'mousemove.measure',
+          this._onMouseMoveRectangle.bind(this)
+        );
+        this._rectangleListeners.push(
+          naver.maps.Event.addListener(
+            map,
+            'rightclick',
+            this._finishRectangle.bind(this)
+          )
+        );
 
         //실제 사용되는 사각형
         this._rectangle = new naver.maps.Rectangle({
@@ -499,7 +532,6 @@ export const JQueryDraw = props => {
           bounds: this.boundscoord,
           map: map
         });
-
       } else {
         this.max = [coord.x, coord.y];
         this.boundscoord = [this.min[0], this.min[1], this.max[0], this.max[1]];
@@ -507,53 +539,54 @@ export const JQueryDraw = props => {
       }
     },
 
-    _onMouseMoveRectangle: function(e) {
+    _onMouseMoveRectangle: function (e) {
-     // console.log('onMouseMoveRectangle')
+      if (!this._rectangle) return;
-      if(!this._rectangle) return;
 
       var map = this.map,
-         proj = this.map.getProjection(),
+        proj = this.map.getProjection(),
         coord = proj.fromPageXYToCoord(new naver.maps.Point(e.pageX, e.pageY)),
-       bounds = this._guiderectangle.getBounds(),
+        bounds = this._guiderectangle.getBounds(),
-          max = [coord.x, coord.y];
+        max = [coord.x, coord.y];
 
-      this.boundscoord = [this.min[0], this.min[1],max[0], max[1]];
+      this.boundscoord = [this.min[0], this.min[1], max[0], max[1]];
       this._guiderectangle.setBounds(this.boundscoord);
     },
 
-    _bindMap: function(map) {
+    _bindMap: function (map) {},
-     // console.log('bindMap')
-    },
 
-    _unbindMap: function() {
+    _unbindMap: function () {
-     // console.log('unbindMap')
       this.unbindAll();
     },
 
-    _bindDOMEvents: function() {
+    _bindDOMEvents: function () {
-     // console.log('bindDOMEvents')
       this.$btnLine.on('click.measure', this._onClickButton.bind(this, 'line'));
-      this.$btnPolygon.on('click.measure', this._onClickButton.bind(this, 'polygon'));
+      this.$btnPolygon.on(
-      this.$btnCircle.on('click.measure', this._onClickButton.bind(this, 'circle'));
+        'click.measure',
-      this.$btnRectangle.on('click.measure', this._onClickButton.bind(this, 'rectangle'));
+        this._onClickButton.bind(this, 'polygon')
-
+      );
+      this.$btnCircle.on(
+        'click.measure',
+        this._onClickButton.bind(this, 'circle')
+      );
+      this.$btnRectangle.on(
+        'click.measure',
+        this._onClickButton.bind(this, 'rectangle')
+      );
     },
 
-    _onClickButton: function(newMode, e) {
+    _onClickButton: function (newMode, e) {
       //newMode는 방금 클릭한 값(line, polygon, circle...)
-     // console.log('onClickButton')
+
       e.preventDefault();
 
       var btn = $(e.target),
-          map = this.map,
+        map = this.map,
-          mode = this._mode;
+        mode = this._mode;
       //this._mode는 클릭하기 전 값(첫 클릭이면 null)
 
       if (btn.hasClass('control-on')) {
-       // console.log('remove')
         btn.removeClass('control-on');
       } else {
-       // console.log('add')
         btn.addClass('control-on');
       }
 
@@ -569,8 +602,7 @@ export const JQueryDraw = props => {
       this.startMode(newMode);
     },
 
-    _clearMode: function(mode) {
+    _clearMode: function (mode) {
-     // console.log('clearMode')
       if (!mode) return;
 
       if (mode === 'line') {
@@ -601,7 +633,7 @@ export const JQueryDraw = props => {
 
         this._finishCircle();
       } else if (mode === 'rectangle') {
-        if(this._rectangle) {
+        if (this._rectangle) {
           this._rectangle.setMap(null);
           delete this._rectangle;
         }
@@ -619,40 +651,38 @@ export const JQueryDraw = props => {
 
   measures.setMap(map);
 
-  return(
+  return (
     <>
       <div style={{ position: 'relative' }}>
-      <ul className="measure-control">
+        <ul className='measure-control'>
-        <li>
+          <li>
-          <CustomInput
+            <CustomInput
-            id='line'
+              id='line'
-            type='image'
+              type='image'
-            className='control-btn'
+              className='control-btn'
-            src='http://static.naver.net/maps/mantle/drawing/1x/polyline.png'
+              src='http://static.naver.net/maps/mantle/drawing/1x/polyline.png'
-          />
+            />
-          <CustomInput
+            <CustomInput
-            id='polygon'
+              id='polygon'
-            type='image'
+              type='image'
-            className='control-btn'
+              className='control-btn'
-            src='http://static.naver.net/maps/mantle/drawing/1x/polygon.png'
+              src='http://static.naver.net/maps/mantle/drawing/1x/polygon.png'
-          />
+            />
-          <CustomInput
+            <CustomInput
-            id='circle'
+              id='circle'
-            type='image'
+              type='image'
-            className='control-btn'
+              className='control-btn'
-            src='http://static.naver.net/maps/mantle/drawing/1x/ellipse.png'
+              src='http://static.naver.net/maps/mantle/drawing/1x/ellipse.png'
-          />
+            />
-          <CustomInput
+            <CustomInput
-            id='rectangle'
+              id='rectangle'
-            type='image'
+              type='image'
-            className='control-btn'
+              className='control-btn'
-            src='http://static.naver.net/maps/mantle/drawing/1x/rectangle.png'
+              src='http://static.naver.net/maps/mantle/drawing/1x/rectangle.png'
-          />
+            />
-        </li>
+          </li>
-      </ul>
+        </ul>
       </div>
     </>
-  )
+  );
-  
 };
-

src/components/mapDraw/naver/dron/DronHistory.js

@@ -15,7 +15,6 @@ export const DronHistory = props => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    // console.log('>>>', controlGpHistory);
     polylineRemove();
     polylineInit();
   }, [controlGpHistory]);
@@ -50,7 +49,6 @@ export const DronHistory = props => {
           const position = new naver.maps.LatLng(item.lat, item.lng);
           polylinePath.push(position);
         }
-        // console.log('>>>>>>>>>>>', item);
       });
 
       polyline.setPath(polylinePath);

src/components/mapDraw/naver/dron/DronMarker.js

@@ -26,8 +26,6 @@ export const DronMarker = props => {
   }, [controlGpList]);
 
   useEffect(() => {
-   // console.log('>>>>>>>>>>>>>>>>', objectId, isClickObject);
-
     props.arrMarkers.map(clickMarker => {
       if (objectId === clickMarker.id && isClickObject) {
         clickMarker.setIcon(DronIconPulple);
@@ -43,7 +41,6 @@ export const DronMarker = props => {
   useEffect(() => {
     props.arrMarkers.map(clickMarker => {
       if (objectId === clickMarker.id) {
-       // console.log(clickMarker);
         props.map.setCenter(clickMarker.getPosition());
         // $('#btn_modal').click();
         props.map.setZoom(13, true);
@@ -63,7 +60,7 @@ export const DronMarker = props => {
         //     '<div>dddd</div>',
 
         // ].join(''),
-        url: DronIcon,
+        url: DronIcon
         // scaledSize: new naver.maps.scaledSize(50, 50)
         // size: new naver.maps.Size(1000, 1000),
         // origin: new naver.maps.Point(0, 0)
@@ -91,10 +88,10 @@ export const DronMarker = props => {
     }
 
     // marker.setIcon(DronIconPulple);
-    // console.log(marker.id);
+
     const markerId = marker.id;
     const contorlId = marker.controlId;
-   // console.log('contorlId ::::::::::< ', marker.controlId);
+
     //히스토리 불러오기
 
     dispatch(objectClickAction(markerId));
@@ -108,7 +105,6 @@ export const DronMarker = props => {
 
   //마커에 위치를 이동한다.
   const moveMarkers = (marker, position) => {
-    // console.log(marker);
     marker.setPosition(position);
   };
 
@@ -144,7 +140,6 @@ export const DronMarker = props => {
           if (isExists) {
             moveMarkers(isExists, position);
           } else {
-            // console.log(' ADD >>>', props.arrMarkers);
             addMarkers(position, item.objectId, item.controlId);
           }
         } else {

src/components/mapDraw/naver/feature/FeatureAirZone.js

@@ -7,14 +7,11 @@ export const FeatureAirZone = props => {
   let infoWindow;
 
   useEffect(() => {
-    // console.log('>>>>>', mapControl);
     featureAirZoneInit();
     featureAirEvent();
   }, [mapControl]);
 
-  useEffect(() => {
+  useEffect(() => {}, []);
-    // console.log(">>>>>>>>" , props.features)
-  }, []);
 
   const infowindowOpen = data => {
     const content =
@@ -122,7 +119,6 @@ export const FeatureAirZone = props => {
   const featureAirEvent = () => {
     props.map.data.addListener('click', function (e) {
       //   e.feature.setProperty('isColorful', true);
-     // console.log(e.feature.property_name);
     });
 
     props.map.data.addListener('mouseover', function (e) {

src/components/mapDraw/naver/search/NaverMapSearch.js

@@ -2,7 +2,6 @@ import { useEffect } from 'react';
 
 export const NaverMapSearch = props => {
   useEffect(() => {
-   // console.log('>>>>', props.naver.maps.Service);
     props.naver.maps.Service.geocode(
       {
         address: '산곡동'
@@ -14,7 +13,6 @@ export const NaverMapSearch = props => {
 
         var result = response.result, // 검색 결과의 컨테이너
           items = result.items; // 검색 결과의 배열
-       // console.log(result);
 
         // do Something
       }

src/components/mapDraw/naver/sensor/SensorZone.js

@@ -1,23 +1,21 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
-import {useSelector} from "react-redux";
+import { useSelector } from 'react-redux';
 
 const SENSOR_RADIUS = '100';
 const SENSOR_RADIUS_DIVISION = '3';
 let lenderCnt = 0;
-const SensorZone = (props) => {
+const SensorZone = props => {
-  const {naver} = props;
+  const { naver } = props;
   // 드론 실시간 정보
-  const {controlGpList} = useSelector(state => state.controlGpState);
+  const { controlGpList } = useSelector(state => state.controlGpState);
   // 환경지표 타입(dust, co, o3, no2, so2)
-  const {sensor} = useSelector(state => state.controlMapReducer);
+  const { sensor } = useSelector(state => state.controlMapReducer);
   // 센서레이어(환경지표) 관리
   const [circleLayers, setCircleLayers] = useState([]);
   const [polilineGroupLayers, setPolilineGroupLayers] = useState({});
 
-  // console.log('########## SensorZone ###########', lenderCnt, {controlGpList, circleLayer: circleLayers, polilineLayer: polilineGroupLayers});
-
   useEffect(() => {
-    lenderCnt++
+    lenderCnt++;
     if (!sensor) {
       removeSensorLayers();
     } else {
@@ -28,7 +26,6 @@ const SensorZone = (props) => {
   let infoWindow;
   // 센서 레이어 Info
   const infowindowOpen = data => {
-    // console.log('data', data)
     const content = `
       <div class="tooltip-box" style="max-width: 300px;">
         <div class="tooltip-ti">
@@ -82,7 +79,7 @@ const SensorZone = (props) => {
     emtpyLayerRemove();
     if (controlGpList) {
       controlGpList.forEach(controlGp => {
-        const {controlId, lat, lng, objectId} = controlGp;
+        const { controlId, lat, lng, objectId } = controlGp;
         let color = undefined;
         const sensorData = convtSensorData(controlGp);
         if (sensorData) {
@@ -105,21 +102,23 @@ const SensorZone = (props) => {
           addPolilineLayers(controlId, objectId, position, color);
         }
 
-        const circleLayer = circleLayers.find(layer => layer.controlId === controlId);
+        const circleLayer = circleLayers.find(
-        if (circleLayer) moveCircleLayer(circleLayer, position, color, sensorData);
+          layer => layer.controlId === controlId
+        );
+        if (circleLayer)
+          moveCircleLayer(circleLayer, position, color, sensorData);
         else addCircleLayer(controlId, objectId, position, color, sensorData);
       });
     }
-  }
+  };
 
   // 센서레이어 생성
   const addSensorLayer = (position, id, controlId, color, sensorData) => {
     addPolilineLayers(controlId, id, position, color);
     addCircleLayer(controlId, id, position, color, sensorData);
-  }
+  };
   // Circle 레이어 생성
   const addCircleLayer = (controlId, id, position, color, sensorData) => {
-    // console.log({controlId, id, position, color, sensorData})
     const circleLayer = new naver.maps.Circle({
       title: id,
       id: id,
@@ -134,7 +133,7 @@ const SensorZone = (props) => {
       fillColor: color,
       fillOpacity: 0.2,
       sensorData: sensorData
-    })
+    });
     // Circle 이벤트 주입
     naver.maps.Event.addListener(circleLayer, 'mouseover', function (e) {
       const data = {};
@@ -145,133 +144,149 @@ const SensorZone = (props) => {
       e.overlay.setOptions({
         strokeWeight: 5,
         fillOpacity: 0.5
-      })
+      });
       infowindowOpen(data);
     });
     naver.maps.Event.addListener(circleLayer, 'mouseout', function (e) {
       e.overlay.setOptions({
         strokeWeight: 2,
         fillOpacity: 0.2
-      })
+      });
       // props.map.Event.revertStyle();
       if (infoWindow) {
         infoWindow.close();
       }
     });
-    circleLayer.setMap(props.map)
+    circleLayer.setMap(props.map);
-    setCircleLayers(prev => ([...prev, circleLayer]));
+    setCircleLayers(prev => [...prev, circleLayer]);
+  };
 
-  }
-  
   const addPolilineLayers = (controlId, id, position, color) => {
     // 지도에 적용 및 레이어 관리 추가
-    // console.log('addPolilineLayers', controlId)
+
     const polilineLayers = createCircleInGrid(position, id, controlId, color);
     polilineLayers.forEach(layer => layer.setMap(props.map));
     setPolilineGroupLayers(prev => ({
       ...prev,
       [controlId]: polilineLayers
     }));
-  }
+  };
 
   // 센서레이어 이동
   const moveSensorLayer = (controlId, position, color) => {
-    const circleLayer = circleLayers.find(layer => layer.controlId === controlId);
+    const circleLayer = circleLayers.find(
+      layer => layer.controlId === controlId
+    );
     moveCircleLayer(circleLayer, position, color);
 
     const polilineLayers = polilineGroupLayers[controlId];
     movePolilineLayers(polilineLayers, position, color);
-  }
+  };
   const moveCircleLayer = (circleLayer, position, color, sensorData) => {
     // const circleLayer = circleLayers.find(layer => layer.controlId === controlId);
     if (circleLayer) {
       circleLayer.sensorData = sensorData;
-      circleLayer.setOptions({center: position, strokeColor: color, fillColor: color})
+      circleLayer.setOptions({
+        center: position,
+        strokeColor: color,
+        fillColor: color
+      });
     }
-  }
+  };
-  
+
   const movePolilineLayers = (polilineLayers, position, color) => {
-    const {controlId, id, position: prevPosition} = polilineLayers[0];
+    const { controlId, id, position: prevPosition } = polilineLayers[0];
     if (prevPosition.equals(position)) {
       if (polilineLayers) {
-        polilineLayers.forEach(layer => layer.setOptions({strokeColor: color}));
+        polilineLayers.forEach(layer =>
+          layer.setOptions({ strokeColor: color })
+        );
       }
     } else {
       if (polilineLayers) {
         polilineLayers.forEach(layer => layer.setMap(null));
       }
-      const newPolilineLayers = createCircleInGrid(position, id, controlId, color);
+      const newPolilineLayers = createCircleInGrid(
+        position,
+        id,
+        controlId,
+        color
+      );
       newPolilineLayers.forEach(layer => layer.setMap(props.map));
       setPolilineGroupLayers(prev => ({
         ...prev,
         [controlId]: newPolilineLayers
       }));
     }
-  }
+  };
 
   // 센서레이어 제거
-  const removeSensorLayer = (controlId) => {
+  const removeSensorLayer = controlId => {
     removeCircleLayer(controlId);
     removePolilineLayer(controlId);
-  }
+  };
-  const removeCircleLayer = (controlId) => {
+  const removeCircleLayer = controlId => {
     const idx = circleLayers.findIndex(layer => layer.controlId === controlId);
     circleLayers[idx].setMap(null);
     setCircleLayers(prev => {
       prev.splice(idx, 1);
       return prev;
-    })
+    });
-  }
+  };
-  const removePolilineLayer = (controlId) => {
+  const removePolilineLayer = controlId => {
     const polilineLayers = polilineGroupLayers[controlId];
     if (polilineLayers) polilineLayers.forEach(layer => layer.setMap(null));
     setPolilineGroupLayers(prev => {
       delete prev[controlId];
       return prev;
-    })
+    });
-  }
+  };
   // 센서레이어 모두 제거
   const removeSensorLayers = () => {
     circleLayers.forEach(layer => layer.setMap(null));
     setCircleLayers([]);
     const keys = Object.keys(polilineGroupLayers);
-    keys.forEach((key) => {
+    keys.forEach(key => {
       polilineGroupLayers[key].forEach(layer => layer.setMap(null));
-    })
+    });
     setPolilineGroupLayers({});
-  }
+  };
 
   // 레이어관리시 새로운 데이터에 없는 좌표 제거
   const emtpyLayerRemove = () => {
     setCircleLayers(prev => {
       const remainCircleLayers = prev.filter((circleLayer, i) => {
         const controlId = circleLayer.controlId;
-        const findObj = controlGpList.find(controlGp => controlGp.controlId === controlId);
+        const findObj = controlGpList.find(
+          controlGp => controlGp.controlId === controlId
+        );
         if (findObj) {
           return circleLayer;
         } else {
           circleLayer.setMap(null);
         }
-      })
+      });
       return remainCircleLayers;
-    })
+    });
     setPolilineGroupLayers(prev => {
       const keys = Object.keys(prev);
       const remainPolilineGroupLayer = {};
       keys.forEach((controlId, i) => {
-        const findObj = controlGpList.find(controlGp => controlGp.controlId === controlId);
+        const findObj = controlGpList.find(
+          controlGp => controlGp.controlId === controlId
+        );
         if (findObj) {
           remainPolilineGroupLayer[controlId] = prev[controlId];
         } else {
           const polilineLayers = prev[controlId];
           polilineLayers.forEach(layer => {
             layer.setMap(null);
-          })
+          });
         }
-      })
+      });
       return remainPolilineGroupLayer;
-    })
+    });
-  }
+  };
 
   // Circle안에 격자 무늬 생성
   const createCircleInGrid = (position, id, controlId, color) => {
@@ -281,14 +296,30 @@ const SensorZone = (props) => {
       // 각 사분면 각도
       const diff = 90 / SENSOR_RADIUS_DIVISION;
       const angleQuadrant1 = diff * i;
-      const angleQuadrant2 = 180 - (diff * i);
+      const angleQuadrant2 = 180 - diff * i;
-      const angleQuadrant3 = 180 + (diff * i);
+      const angleQuadrant3 = 180 + diff * i;
       const angleQuadrant4 = diff * -i;
       // 각 사분면 좌표
-      const coord1 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant1, SENSOR_RADIUS);
+      const coord1 = new naver.maps.EPSG3857.getDestinationCoord(
-      const coord2 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant2, SENSOR_RADIUS);
+        position,
-      const coord3 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant3, SENSOR_RADIUS);
+        angleQuadrant1,
-      const coord4 = new naver.maps.EPSG3857.getDestinationCoord(position, angleQuadrant4, SENSOR_RADIUS);
+        SENSOR_RADIUS
+      );
+      const coord2 = new naver.maps.EPSG3857.getDestinationCoord(
+        position,
+        angleQuadrant2,
+        SENSOR_RADIUS
+      );
+      const coord3 = new naver.maps.EPSG3857.getDestinationCoord(
+        position,
+        angleQuadrant3,
+        SENSOR_RADIUS
+      );
+      const coord4 = new naver.maps.EPSG3857.getDestinationCoord(
+        position,
+        angleQuadrant4,
+        SENSOR_RADIUS
+      );
       const polyline12 = new naver.maps.Polyline({
         id,
         position,
@@ -299,7 +330,7 @@ const SensorZone = (props) => {
         strokeOpacity: 1,
         strokeColor: color,
         strokeStyle: 'shortdash'
-      })
+      });
       polilineLayers.push(polyline12);
       const polyline23 = new naver.maps.Polyline({
         id,
@@ -311,7 +342,7 @@ const SensorZone = (props) => {
         strokeOpacity: 1,
         strokeColor: color,
         strokeStyle: 'shortdash'
-      })
+      });
       polilineLayers.push(polyline23);
       const polyline34 = new naver.maps.Polyline({
         id,
@@ -323,7 +354,7 @@ const SensorZone = (props) => {
         strokeOpacity: 1,
         strokeColor: color,
         strokeStyle: 'shortdash'
-      })
+      });
       polilineLayers.push(polyline34);
       const polyline41 = new naver.maps.Polyline({
         id,
@@ -335,14 +366,14 @@ const SensorZone = (props) => {
         strokeOpacity: 1,
         strokeColor: color,
         strokeStyle: 'shortdash'
-      })
+      });
       polilineLayers.push(polyline41);
     }
     return polilineLayers;
-  }
+  };
 
   // 환경지표 필요한 데이터로 변환
-  const convtSensorData = (sensorData) => {
+  const convtSensorData = sensorData => {
     const r = {
       sensorDust: {
         title: '미세먼지',
@@ -374,13 +405,13 @@ const SensorZone = (props) => {
         text: '-',
         color: undefined
       }
-    }
+    };
 
     // 정수: 미세먼지 || 소수점 1자리 : 일산화탄소 || 소수점 3자리 : 오존, 이산화질소, 아황산가스
     // 좋음 : 파랑, 보통 : 노랑, 나쁨 : 주황, 매우나쁨 : 빨강
     // 미세먼지 : 좋음(0~30) 보통(31~80) 나쁨(81~150) 매우나쁨(151~)
     if (sensorData.sensorDust != undefined && sensorData.sensorDust != null) {
-      const val = r.sensorDust.value = Math.round(sensorData.sensorDust);
+      const val = (r.sensorDust.value = Math.round(sensorData.sensorDust));
       if (val <= 30) {
         r.sensorDust.text = '좋음';
         r.sensorDust.color = '#37c9ff';
@@ -400,7 +431,8 @@ const SensorZone = (props) => {
     }
     // 일산화탄소 : 좋음(0~2) 보통(2.1~9) 나쁨(9.1~15) 매우나쁨(15.1~)
     if (sensorData.sensorCo != undefined && sensorData.sensorCo != null) {
-      const val = r.sensorCo.value = Math.round(sensorData.sensorCo * 10) / 10;
+      const val = (r.sensorCo.value =
+        Math.round(sensorData.sensorCo * 10) / 10);
       if (val <= 0.2) {
         r.sensorCo.text = '좋음';
         r.sensorCo.color = '#37c9ff';
@@ -420,7 +452,8 @@ const SensorZone = (props) => {
     }
     // 아황산가스 : 좋음(0~0.02) 보통(0.021~0.05) 나쁨(0.051~0.15) 매우나쁨 (0.151 ~)
     if (sensorData.sensorSo2 != undefined && sensorData.sensorSo2 != null) {
-      const val = r.sensorSo2.value = Math.round(sensorData.sensorSo2 * 1000) / 1000;
+      const val = (r.sensorSo2.value =
+        Math.round(sensorData.sensorSo2 * 1000) / 1000);
       if (val <= 0.02) {
         r.sensorSo2.text = '좋음';
         r.sensorSo2.color = '#37c9ff';
@@ -440,7 +473,8 @@ const SensorZone = (props) => {
     }
     // 이산화질소 : 좋음(0~0.03) 보통(0.031~0.06) 나쁨(0.061~0.2) 매우나쁨(0.201~)
     if (sensorData.sensorNo2 != undefined && sensorData.sensorNo2 != null) {
-      const val = r.sensorNo2.value = Math.round(sensorData.sensorNo2 * 1000) / 1000;
+      const val = (r.sensorNo2.value =
+        Math.round(sensorData.sensorNo2 * 1000) / 1000);
       if (val <= 0.03) {
         r.sensorNo2.text = '좋음';
         r.sensorNo2.color = '#37c9ff';
@@ -457,11 +491,11 @@ const SensorZone = (props) => {
         r.sensorNo2.text = '-';
         r.sensorNo2.color = '#a1a1a1';
       }
-
     }
     // 오존 : 좋음(0~0.03) 보통(0.031~0.09) 나쁨(0.091~0.15) 매우나쁨(0.151~)
     if (sensorData.sensorO3 != undefined && sensorData.sensorO3 != null) {
-      const val = r.sensorO3.value = Math.round(sensorData.sensorO3 * 1000) / 1000;
+      const val = (r.sensorO3.value =
+        Math.round(sensorData.sensorO3 * 1000) / 1000);
       if (val <= 0.03) {
         r.sensorO3.text = '좋음';
         r.sensorO3.color = '#37c9ff';
@@ -480,7 +514,7 @@ const SensorZone = (props) => {
       }
     }
     return r;
-  }
+  };
 
   return null;
 };

src/components/mapDraw/nhn/NMap.js

@@ -7,9 +7,6 @@ export const NMap = props => {
 
   useEffect(() => {
     mapInit();
-    // console.log(map);
-
-    // console.log(features);
 
     // setIsMapLoad(true);
   }, []);
@@ -31,11 +28,11 @@ export const NMap = props => {
     // map = ;
     props.setMapObject(new naver.maps.Map('map', mapOptions));
     // naver.maps.Event.addListener(map, 'click', function (e) {
-    //   console.log(e);
+
     // });
 
     // naver.maps.Event.addListener(map, 'idle', function (e) {
-    //   console.log(e);
+
     // });
   };
   return <div id='map' style={{ width: '100%', height: '100vh' }}></div>;

src/components/mapDraw/nhn/NMapMarker.js

@@ -25,9 +25,6 @@ export const NMapMarker = props => {
   }, [props.data]);
 
   useEffect(() => {
-    // console.log('info>>>:' + props.info.lat);
-    // console.log(props.selMarker);
-
     if (props.selMarker && props.selMarker) {
       const position = new naver.maps.LatLng(props.info?.lat, props.info?.lon);
       props.selMarker?.setPosition(position);
@@ -54,7 +51,6 @@ export const NMapMarker = props => {
   };
 
   const moveMarkers = (marker, position) => {
-    // console.log('dddddddddddddddddddd', marker, position);
     // marker.setPositon(position);
   };
 

src/components/mapDraw/nhn/NMapPolyline.js

@@ -3,8 +3,6 @@ import { useEffect } from 'react';
 export const NMapPolyline = props => {
   const naver = window.naver;
 
-  //   console.log(props);
-
   let polyline;
   let polylinePath = [];
 
@@ -32,7 +30,6 @@ export const NMapPolyline = props => {
           const position = new naver.maps.LatLng(item.lat, item.lon);
           polylinePath.push(position);
         }
-        // console.log('>>>>>>>>>>>', item);
       });
 
       polyline.setPath(polylinePath);

src/components/message/MessageErrorModal.js

@@ -11,7 +11,7 @@ export const MessageErrorModal = props => {
   );
 
   // useEffect(() => {
-  //   console.log('isError>>>>>>>>>>>>>', isError);
+
   // }, [isError]);
 
   return (

src/components/message/MessageInfoModal.js

@@ -11,7 +11,7 @@ export const MessageInfoModal = props => {
     useSelector(state => state.messageState);
 
   // useEffect(() => {
-  //   console.log('isError>>>>>>>>>>>>>', isError);
+
   // }, [isError]);
   const handlerClose = () => {
     dispatch(Actions.ISNO_MESSAGE());

src/components/websocket/WebsocketClient.js

@@ -8,14 +8,14 @@ const WebsocketClient = () => {
   const dispatch = useDispatch();
   const reConnectionTime = 5000; //5초
 
-  const [isConnection, setIsConnection] = useState(false);  
+  const [isConnection, setIsConnection] = useState(false);
 
   useEffect(() => {
     connect();
   }, []);
 
-  const connect = () => {    
+  const connect = () => {
-    let websocket = new WebSocket(WS_HOST);    
+    let websocket = new WebSocket(WS_HOST);
 
     websocket.onopen = () => {
       setIsConnection(true);
@@ -23,13 +23,11 @@ const WebsocketClient = () => {
     };
 
     websocket.onmessage = e => {
-      const data = e.data;      
+      const data = e.data;
-      const controlGpList = JSON.parse(data);            
+      const controlGpList = JSON.parse(data);
 
-      // console.log('gps  ', controlGpList)
-      
       dispatch(Actions.controlGpAction.request(controlGpList));
-    };    
+    };
 
     websocket.onclose = event => {
       setIsConnection(false);

src/containers/account/mypage/AccountMypageContainer.js

@@ -182,7 +182,7 @@ const AccountMypageContainer = () => {
         });
       }
     }
-    // console.log(res);
+
     if (isRunning) {
       clearInterval(timer);
     }
@@ -300,7 +300,8 @@ const AccountMypageContainer = () => {
   };
   //업데이트
   const handlerUpdate = () => {
-    const reg_email = /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
+    const reg_email =
+      /^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/;
     const param = {
       cstmrSno: user.cstmrSno,
       email: userInfo.email,
@@ -325,12 +326,10 @@ const AccountMypageContainer = () => {
       title: '탈퇴 확인',
       desc: '정말로 탈퇴 하시겠습니까?'
     });
-
   };
 
   const waitwait = () => {
     dispatch(userDeleteAction.request(user.cstmrSno));
-
   };
 
   return (

src/containers/analysis/simulator/AnalysisSimulationContainer.js

@@ -53,9 +53,6 @@ export const AnalysisSimulationContainer = props => {
   useEffect(() => {
     if (isPlay) {
       const timer = setInterval(() => {
-        // console.log('count>>>>', count);
-        // console.log(log[count]);
-
         setInfo({ ...log[playCount], playCount: playCount });
         if (log[playCount]?.srvrRcvDt) {
           setTimeCd(moment(log[playCount]?.srvrRcvDt).format('HH:mm'));
@@ -93,13 +90,10 @@ export const AnalysisSimulationContainer = props => {
       if (log[playCount]?.srvrRcvDt) {
         setTimeCd(moment(log[playCount]?.srvrRcvDt).format('HH:mm'));
       }
-
-      // console.log('sliderCount>>>>', sliderCount);
     }
   }, [sliderCount]);
 
   useEffect(() => {
-    // console.log(log);
     // let arrDate = log?.map(date => {
     //   const dateval = date.srvrRcvDt;
     //   if (dateval) {
@@ -108,17 +102,14 @@ export const AnalysisSimulationContainer = props => {
     //     return 0;
     //   }
     // });
-    // console.log('arrDate>', arrDate);
     // setSliderVal({
     //   minVal: Math.min.apply(null, arrDate),
     //   maxVal: Math.max.apply(null, arrDate)
     // });
-    // console.log(Math.max.apply(null, moment(formatar rDate)));
     // let maxDate = log.map(date => {
     //   return Math.max(date.srvrRcvDt);
     // });
     // let maxDate;
-    // console.log('minDate :::', minDate, 'maxDate :: ', maxDate);
   }, [log]);
 
   const handlerSearch = search1 => {

src/containers/basis/dron/BasisDronContainer.js

@@ -126,7 +126,6 @@ export const BasisDronContainer = props => {
       // minWidth: '102px',
       sortable: true,
       cell: row => {
-        // console.log(row);
         return (
           <Button.Ripple
             color='primary'

src/containers/basis/dron/BasisDronDetailContainer.js

@@ -90,7 +90,6 @@ export const BasisDronDetailContainer = props => {
       handlerSearch();
       setPageType('update');
     }
-    // console.log(selectData);
   }, []);
 
   useEffect(() => {

src/containers/basis/flight/aprv/FlightPlanAprvContainer.js

@@ -181,7 +181,7 @@ const FlightPlanAprvContainer = () => {
   };
   const handleClickAprv = type => e => {
     // notAprov, aprv
-    //  console.log(type, selPlanSnoList, e)
+
     if (!selPlanSnoList || selPlanSnoList.length < 1) {
       // alert('비행계획서를 선택해 주세요.');
       // return;

src/containers/basis/group/BasisGroupDetailContainer.js

@@ -110,7 +110,7 @@ export const BasisGroupDetailContainer = () => {
   //   if (name == 'groupNm') {
   //     // const regex = /^[ㄱ-힣A-Za-z0-9]{0,11}$/;
   //     // if (regex.test(innerRef)) {
-  //     console.log(innerRef);
+
   //     setGroupData({
   //       ...groupData,
   //       [name]: innerRef

src/containers/basis/group/BasisGroupUsersContainer.js

@@ -104,8 +104,6 @@ export const BasisGroupUsersContainer = props => {
             return prev;
           }
         });
-        // console.log('내 권한 : ', my?.groupAuthCd);
-        // console.log('이 사람의 권한 : ', row?.groupAuthCd);
 
         if (row?.groupAuthCd === 'MASTER') {
           return <div>수정불가</div>;
@@ -148,8 +146,6 @@ export const BasisGroupUsersContainer = props => {
             return prev;
           }
         });
-        // console.log('내 권한 : ', my?.groupAuthCd);
-        // console.log('이 사람의 권한 : ', row?.groupAuthCd);
 
         if (row?.groupAuthCd === 'LEADER') {
           if (my?.groupAuthCd === 'MASTER') {
@@ -187,7 +183,7 @@ export const BasisGroupUsersContainer = props => {
   }, [user]);
 
   // useEffect(() => {
-  // console.log('changeParam >>>', params);
+
   // }, [params]);
 
   useEffect(() => {

src/containers/system/auth/SystemAuthContainer.js

@@ -89,9 +89,7 @@ export const SystemAuthContainer = props => {
     return;
   };
 
-  const handlerWidthrowConfirm = () => {
+  const handlerWidthrowConfirm = () => {};
-    // console.log('탈퇴!!!');
-  };
 
   const handlerGroupJoin = () => {
     history.push('/basis/group/join');

src/containers/system/code/SystemCodeContainer.js

@@ -83,7 +83,6 @@ export const SystemCodeContainer = props => {
 
   const handlerCodeList = () => {
     alert('코드 조회');
-    // console.log('코드 조회!!!');
   };
 
   const handlerCodeDetail = () => {

src/containers/system/menu/SystemMenuContainer.js

@@ -83,7 +83,6 @@ export const SystemMenuContainer = props => {
 
   const handlerCodeList = () => {
     alert('코드 조회');
-    // console.log('코드 조회!!!');
   };
 
   const handlerCodeDetail = () => {

src/containers/system/user/SystemUserContainer.js

@@ -91,9 +91,7 @@ export const SystemUserContainer = props => {
     return;
   };
 
-  const handlerWidthrowConfirm = () => {
+  const handlerWidthrowConfirm = () => {};
-    // console.log('탈퇴!!!');
-  };
 
   const handlerGroupJoin = () => {
     history.push('/basis/group/join');

src/modules/account/login/apis/authApi.ts

@@ -1,11 +1,17 @@
 import axios from '../../../utils/customAxiosUtil';
-import { ResponseUser, UserAccount, TokenAccount, UserPageData,UserPw,UpdateData } from '../models/authModel';
+import {
+  ResponseUser,
+  UserAccount,
+  TokenAccount,
+  UserPageData,
+  UserPw,
+  UpdateData
+} from '../models/authModel';
 
 import qs from 'qs';
 
 export const authAPI = {
   usersLogin: async (data: UserAccount) => {
-    // console.log('>>>>>>>>>>>>>>>>>>>>>', data);
     return await axios.post('api/acnt/jwt/login', data);
   },
   getUserProfile: async (id: number) => {
@@ -19,7 +25,7 @@ export const authAPI = {
     return axios.post('api/acnt/jwt/refresh', data);
   },
 
-  getUserPage: async(id: string) => {
+  getUserPage: async (id: string) => {
     return await axios.get(`api/acnt/cstmr/profile/${id}`);
   },
   updateUser: async (data: UpdateData) => {
@@ -27,9 +33,9 @@ export const authAPI = {
     return res;
   },
   pwupdate: async (data: UserPw) => {
-     return await axios.post('api/acnt/cstmr/profile/pswdupdate', data);
+    return await axios.post('api/acnt/cstmr/profile/pswdupdate', data);
   },
-  deletedata: async(id: string) => {
+  deletedata: async (id: string) => {
     return await axios.post(`api/acnt/cstmr/profile/delete/${id}`);
-  },
+  }
-}
+};

src/modules/account/login/sagas/authSaga.ts

@@ -25,10 +25,7 @@ import { Console } from 'console';
 function* userLoginSaga(action: ActionType<typeof Actions.login.request>) {
   const param = action.payload;
   try {
-    // console.log('=-===================');
-
     const { data, errorCode } = yield call(authAPI.usersLogin, param);
-    //console.log('>>>>>11>>>>>>>', data);
 
     if (errorCode == '-101') {
       throw '계정 정보를 찾을 수 없습니다. 다시 확인해 주세요.';
@@ -48,7 +45,7 @@ function* userLoginSaga(action: ActionType<typeof Actions.login.request>) {
     // } else {
     //   cookieStorage.removeCookie('SAVE_USR_ID');
     // }
-    // console.log('user>>>', user);
+
     yield put(Actions.login.success({ ...user.data }));
   } catch (error) {
     yield put(Actions.login.failure(error));
@@ -61,8 +58,6 @@ function* refreshTokenSaga(action: ActionType<typeof Actions.refresh.request>) {
   const param = action.payload;
   try {
     const { data, errorCode } = yield call(authAPI.refreshToken, param);
-    //console.log('data>>>', data);
-    //console.log('error>>>', errorCode);
 
     // access_token 세팅
     cookieStorage.setCookie(COOKIE_ACCESS_TOKEN, data.accessToken);
@@ -79,7 +74,7 @@ function* refreshTokenSaga(action: ActionType<typeof Actions.refresh.request>) {
 function* checkAuthencationSaga() {
   try {
     const accessToken = cookieStorage.getCookie(COOKIE_ACCESS_TOKEN);
-    // console.log('accessToken>>>>>>>>>>>>>', accessToken);
+
     if (!accessToken) {
       yield put(
         Actions.check.success({
@@ -96,7 +91,6 @@ function* checkAuthencationSaga() {
 
     //token 셋팅
     cookieStorage.setCookie(COOKIE_ACCESS_TOKEN, accessToken);
-    // console.log('>>>>>>>>>>>>>>>>>>>>>', data);
 
     // storageService.session.setItem(STORAGE_SESSION_ICT, user.icToken);
 
@@ -115,14 +109,12 @@ function* checkAuthencationSaga() {
 
 function* userLogoutSaga() {
   const accessToken = cookieStorage.getCookie(COOKIE_ACCESS_TOKEN);
-  //console.log('accessToken', accessToken);
 
   try {
     if (accessToken) {
-      //  console.log('dddddddddddddddddddddddddddddddddddd');
       const decodedToken = decode<LoginData>(accessToken);
       const res = yield call(authAPI.usersLogout, decodedToken.cstmrSno);
-      // console.log('res>>>>>>>>', res);
+
       if (res.data == 'SUCCESS') {
         location.href = '/account/login';
       }
@@ -144,7 +136,7 @@ function* userPageSaga(
     const controlId = action.payload;
 
     const { data } = yield call(authAPI.getUserPage, controlId);
-    // console.log('userPageData : ', data)
+
     yield put(Actions.userPageAction.success(data));
   } catch (error) {
     yield put(Actions.userPageAction.failure(error));
@@ -155,7 +147,7 @@ function* userDeletePageSaga(
 ) {
   try {
     const controlId = action.payload;
-    //  console.log('dddddddddddddddddddddddddddddddddddd');
+
     const { data } = yield call(authAPI.deletedata, controlId);
     if (data.result === true) {
       yield put(
@@ -223,7 +215,7 @@ function* userPwSaga(
   try {
     const { data, errorCode } = yield call(authAPI.pwupdate, param);
     //yield put(Actions.pwUpdateAction.success(data));
-    // console.log("saaa",data);
+
     if (data.errorCode === '-1') {
       yield put(
         MessageActions.IS_ERROR({

src/modules/account/login/service/jwtTokenUtil.ts

@@ -13,7 +13,6 @@ const JWT_FLEFIX = 'palnet ';
 export const checkTokenExpired = (token?: string) => {
   const decodedToken = decode<LoginData>(token as string);
 
-  // console.log('decodedToken>>>>>>>>>>>>>>>>>>>>>>>', decodedToken);
   if (parseInt(decodedToken.exp) < moment().unix()) {
     return true;
   }
@@ -27,15 +26,14 @@ export const getAccessToken = async () => {
   if (!token || token == undefined || token == 'undefined') {
     return '';
   }
-  // console.log('checkTokenExpired>>>>', checkTokenExpired(token));
+
   if (checkTokenExpired(token)) {
     //freshtoken 으로 재발급 진행.
     const refreshToken = getRefreshToken();
-    // console.log('refreshToken>>', refreshToken);
+
     const isRefresh = store.getState()?.authState?.isRefresh;
-    // console.log('>>>>>>>>>>>>isRefresh', isRefresh);
+
     if (refreshToken) {
-      // console.log('33333333333333333333333');
       //   if (!store.getState()?.authState?.isRefresh) {
       const decodeToken = decode<LoginData>(token as string);
       const cstmrSno: number = decodeToken.cstmrSno;
@@ -67,16 +65,14 @@ const refreshTokenAPI = async (cstmrSno: number, refreshToken: string) => {
     }
   })
     .then(response => response.json())
-    .catch(error => {
+    .catch(error => {});
-     // console.log('>>>>error ', error);
-    });
 
   return result;
 };
 
 export const getRefreshToken = () => {
   const token = cookieStorage.getCookie(COOKIE_REFRESH_TOKEN);
- // console.log('token::::::::::', token);
+
   if (
     !token ||
     token == undefined ||

src/modules/account/register/apis/accountApi.ts

@@ -33,7 +33,6 @@ export const accountApi = {
       `api/acnt/crtfyhp/register/confirm?hpno=${hpno}&crtfyNo=${crtfyNo}`
     );
   }
-  
 
   // list: async (data: string) => {
   //   const queryString = qs.stringify(data, {
@@ -52,7 +51,7 @@ export const accountApi = {
   // }
   // getHistory: async (id: string) => {
   //   if (!id) {
-  //     console.log(' ID is Empty');
+
   //     return null;
   //   }
   //   const { data }: ReponseControlGpHistory = await axios.get(

src/modules/account/register/reducers/accountReducer.ts

@@ -15,7 +15,7 @@ export const accountReducer = createReducer<
   // .handleAction(Actions.register.success, (state, action) =>
   //   produce(state, draft => {
   //     const res = action.payload;
-  //     console.log(res);
+
   //   })
   // )
 
@@ -30,7 +30,7 @@ export const accountReducer = createReducer<
     produce(state, draft => {
       const res = action.payload;
       draft.termsList = res;
-      //console.log(res);
+
       // draft.terms = res;
     })
   );

src/modules/account/register/sagas/accountSaga.ts

@@ -13,14 +13,11 @@ import * as Models from '../models/accountModel';
 
 function* register(action: ActionType<typeof Actions.register.request>) {
   try {
-   // console.log('-------------------------------');
-
     const { data, agreeTerms } = action.payload;
 
     const res = yield call(Apis.accountApi.register, { data, agreeTerms });
 
     const resData = res.data;
-    //console.log('res>>>>', res);
 
     if (resData.errrCode > 0) {
       yield put(Actions.register.success(resData));
@@ -35,16 +32,12 @@ function* register(action: ActionType<typeof Actions.register.request>) {
 
 function* temrsList(action: ActionType<typeof Actions.termsList.request>) {
   try {
-    // console.log("-------------------------------")
-
     const { langDivCd, siteCd } = action.payload;
 
     const res = yield call(Apis.accountApi.temrsList, { langDivCd, siteCd });
 
     const resData: Models.AccountTermsData[] = res.data;
 
-    //console.log('>>>>>>>>>>>', resData);
-
     yield put(Actions.termsList.success(resData));
   } catch (error) {
     yield put(Actions.termsList.failure(error));

src/modules/analysis/history/apis/annalysisHistoryApi.ts

@@ -22,7 +22,7 @@ export const analysisHistory = {
   }
   // getHistory: async (id: string) => {
   //   if (!id) {
-  //     console.log(' ID is Empty');
+
   //     return null;
   //   }
   //   const { data }: ReponseControlGpHistory = await axios.get(

src/modules/control/gp/sagas/controlGpSaga.ts

@@ -1,7 +1,10 @@
 import { call, put, select, takeEvery } from '@redux-saga/core/effects';
 import { ActionType } from 'typesafe-actions';
 import { LoginData } from '../../../account/login/models/authModel';
-import { cookieStorage, COOKIE_ACCESS_TOKEN } from '../../../account/login/service/cookie';
+import {
+  cookieStorage,
+  COOKIE_ACCESS_TOKEN
+} from '../../../account/login/service/cookie';
 import * as Actions from '../actions/controlGpAction';
 import { controlGpApi } from '../apis/controlGpApi';
 import decode from 'jwt-decode';
@@ -9,216 +12,216 @@ import { ControlGpData } from '../models/controlGpModel';
 import { detail } from '../../../analysis/history/actions/analysisHistoryAction';
 
 function* getControlGpSaga(
-    action: ActionType<typeof Actions.controlGpAction.request>
+  action: ActionType<typeof Actions.controlGpAction.request>
 ) {
-    try {
+  try {
-        const data = action.payload;
+    const data = action.payload;
-        const state = yield select();
+    const state = yield select();
-        const { objectId, isClickObject } = state.controlMapReducer;
+    const { objectId, isClickObject } = state.controlMapReducer;
-
+
-
+    //  그룹 별 기체 필터링
-        //  그룹 별 기체 필터링
+    const { controlGroupAuthInfo } = state.controlGroupAuthState;
-            const { controlGroupAuthInfo } = state.controlGroupAuthState;        
+    const { controlGpHistory } = state.controlGpHisState;
-            const { controlGpHistory } = state.controlGpHisState;
+
-
+    let gpsData: ControlGpData[] = [];
-            let gpsData: ControlGpData[] = [];
+
-
+    //사용자가 등록한 기체(식별장치 포함)만 관제에서 볼 수 있게 필터처리
-            //사용자가 등록한 기체(식별장치 포함)만 관제에서 볼 수 있게 필터처리
+    if (controlGroupAuthInfo.length > 0) {
-            if (controlGroupAuthInfo.length > 0) {
+      controlGroupAuthInfo.forEach(auth => {
-                controlGroupAuthInfo.forEach((auth) => {
+        // if (auth.groupAuthCd === 'CREATER' || auth.groupAuthCd === 'ADMIN') {
-                    // if (auth.groupAuthCd === 'CREATER' || auth.groupAuthCd === 'ADMIN') {
+
-                        
+        if (gpsData.length > 0) return false;
-                        if (gpsData.length > 0) return false;
+
-
+        gpsData = data.filter(gps => auth.idntfNum === gps.objectId);
-                        gpsData = data.filter(gps => auth.idntfNum === gps.objectId);
+        // }
-                    // }
+
-
+        // 식별장치 마다 user를 판단할 수 없기 때문에 일단 주석 처리
-                    // 식별장치 마다 user를 판단할 수 없기 때문에 일단 주석 처리
+        // if (auth.groupAuthCd === 'USER') {
-                    // if (auth.groupAuthCd === 'USER') {
+        //     if (gpsData.length > 0) return false;
-                    //     if (gpsData.length > 0) return false;
+
-
+        //     gpsData.filter(gps => auth.createUserId && auth.idntfNum === gps.objectId);
-                    //     gpsData.filter(gps => auth.createUserId && auth.idntfNum === gps.objectId);
+        // }
-                    // }
+      });
-                });
+    }
-            }
+
-            
+    yield put(
-          //  console.log('websocket data :: ', data);
+      Actions.controlGpAction.success({
-        
+        controlGpList: data
-
+      })
-        yield put(
+    );
-            Actions.controlGpAction.success({              
+
-                controlGpList: data
+    if (data.length > 0) {
-            })
+      const controlIds: any = [];
-        );
-
-        if (data.length > 0) {
-            const controlIds: any = [];                        
-    
-            data.forEach((gps) => {
-                if(gps.controlId) controlIds.push(gps.controlId);
-            });
-
-            const param = controlIds.join(',');
-            
-            const rs = yield call(controlGpApi.getArcrftWarnList, param);        
-
-            yield put(Actions.controlGpArcrftWarnAction.success(rs));
-        }
 
-        if (objectId && isClickObject) {                   
+      data.forEach(gps => {
-            let detailData;            
+        if (gps.controlId) controlIds.push(gps.controlId);
+      });
 
-            //상세 정보에서 실시간 데이터 호출
+      const param = controlIds.join(',');
-            //*
-            data.map(item => {
-                if (item.controlId === objectId) {
-                    detailData = item;
-                }
-              });            
 
-            yield put(Actions.controlGpRtDtlAction.request(detailData));            
+      const rs = yield call(controlGpApi.getArcrftWarnList, param);
+
+      yield put(Actions.controlGpArcrftWarnAction.success(rs));
+    }
+
+    if (objectId && isClickObject) {
+      let detailData;
+
+      //상세 정보에서 실시간 데이터 호출
+      //*
+      data.map(item => {
+        if (item.controlId === objectId) {
+          detailData = item;
         }
-    } catch (error) {           
+      });
-        yield put(Actions.controlGpAction.failure(error));
+
+      yield put(Actions.controlGpRtDtlAction.request(detailData));
     }
+  } catch (error) {
+    yield put(Actions.controlGpAction.failure(error));
+  }
 }
 
 function* getControlGpHistorySaga(
-    action: ActionType<typeof Actions.controlGpHisAction.request>
+  action: ActionType<typeof Actions.controlGpHisAction.request>
 ) {
-    try {
+  try {
-        const { id } = action.payload;
+    const { id } = action.payload;
-
+
-        const data = yield call(controlGpApi.getHistory, id);
+    const data = yield call(controlGpApi.getHistory, id);
-
+
-        yield put(
+    yield put(
-            Actions.controlGpHisAction.success({
+      Actions.controlGpHisAction.success({
-                controlGpHistory: data
+        controlGpHistory: data
-            })
+      })
-        );
+    );
-    } catch (error) {
+  } catch (error) {
-        yield put(Actions.controlGpHisAction.failure(error));
+    yield put(Actions.controlGpHisAction.failure(error));
-    }
+  }
 }
 
 function* controlGpRtDtlSaga(
-    action: ActionType<typeof Actions.controlGpRtDtlAction.request>
+  action: ActionType<typeof Actions.controlGpRtDtlAction.request>
 ) {
-    try {
+  try {
-        const controlGpDetail = action.payload;
+    const controlGpDetail = action.payload;
-
+
-        yield put(
+    yield put(
-            Actions.controlGpRtDtlAction.success({
+      Actions.controlGpRtDtlAction.success({
-                controlDetail: undefined,
+        controlDetail: undefined,
-                controlGpDetail: controlGpDetail
+        controlGpDetail: controlGpDetail
-            })
+      })
-        );
+    );
-    } catch (error) {
+  } catch (error) {
-        yield put(Actions.controlGpRtDtlAction.failure(error));
+    yield put(Actions.controlGpRtDtlAction.failure(error));
-    }
+  }
 }
 
 function* controlDtlSaga(
-    action: ActionType<typeof Actions.controlGpDtlAction.request>
+  action: ActionType<typeof Actions.controlGpDtlAction.request>
 ) {
-    try {
+  try {
-        const controlId = action.payload;
+    const controlId = action.payload;
 
-        const { data } = yield call(controlGpApi.getDetail, controlId);
+    const { data } = yield call(controlGpApi.getDetail, controlId);
-        yield put(Actions.controlGpDtlAction.success(data));
+    yield put(Actions.controlGpDtlAction.success(data));
-    } catch (error) {
+  } catch (error) {
-        yield put(Actions.controlGpDtlAction.failure(error));
+    yield put(Actions.controlGpDtlAction.failure(error));
-    }
+  }
 }
 
 function* controlGroupAuthSaga(
-    action: ActionType<typeof Actions.controlGroupAuthAction.request>
+  action: ActionType<typeof Actions.controlGroupAuthAction.request>
 ) {
-    const token = cookieStorage.getCookie(COOKIE_ACCESS_TOKEN);
+  const token = cookieStorage.getCookie(COOKIE_ACCESS_TOKEN);
-
+
-    try {
+  try {
-        if (token) {
+    if (token) {
-            const user = decode<LoginData>(token);
+      const user = decode<LoginData>(token);
-            const data = yield call(controlGpApi.getGroupAuth, user.cstmrSno);
+      const data = yield call(controlGpApi.getGroupAuth, user.cstmrSno);
-
+
-
+      yield put(
-            yield put(Actions.controlGroupAuthAction.success({
+        Actions.controlGroupAuthAction.success({
-                controlGroupAuthInfo: data
+          controlGroupAuthInfo: data
-            }));
+        })
-        }
+      );
-    } catch (error) {
-        yield put(Actions.controlGroupAuthAction.failure(error));
     }
+  } catch (error) {
+    yield put(Actions.controlGroupAuthAction.failure(error));
+  }
 }
 
 function* controlGpFlightPlanSaga(
-    action: ActionType<typeof Actions.controlGpFlightPlanAction.request>
+  action: ActionType<typeof Actions.controlGpFlightPlanAction.request>
 ) {
-    try {
+  try {
-        const idntfNum = action.payload;
+    const idntfNum = action.payload;
-        const list = yield call(controlGpApi.getFlightPlan, idntfNum);        
+    const list = yield call(controlGpApi.getFlightPlan, idntfNum);
 
-        yield put(Actions.controlGpFlightPlanAction.success(list));
+    yield put(Actions.controlGpFlightPlanAction.success(list));
-
+  } catch (error) {
-    } catch (error) {
+    yield put(Actions.controlGpFlightPlanAction.failure(error));
-        yield put(Actions.controlGpFlightPlanAction.failure(error));
+  }
-    }
 }
 
 function* getControlGpWarnLogSaga(
   action: ActionType<typeof Actions.controlGpLogAction.request>
 ) {
-  try{
+  try {
-    const {id} = action.payload;
+    const { id } = action.payload;
-    const data = yield call(controlGpApi.getWarnLog, id)
+    const data = yield call(controlGpApi.getWarnLog, id);
 
-    yield put(
+    yield put(Actions.controlGpLogAction.success(data));
-      Actions.controlGpLogAction.success(data)
+  } catch (error) {
-    );
-  } catch(error) {
     yield put(Actions.controlGpLogAction.failure(error));
   }
 }
 
 function* controlGpFlightPlanWarnSaga(
-    action: ActionType<typeof Actions.controlGpFlightPlanWarnAction.request>
+  action: ActionType<typeof Actions.controlGpFlightPlanWarnAction.request>
 ) {
-    try {
+  try {
-        const idntfNum = action.payload;
+    const idntfNum = action.payload;
-
-        const rs = yield call(controlGpApi.checkPlanContains, idntfNum);        
 
-        yield put(Actions.controlGpFlightPlanWarnAction.success(rs));
+    const rs = yield call(controlGpApi.checkPlanContains, idntfNum);
 
-    } catch (error) {
+    yield put(Actions.controlGpFlightPlanWarnAction.success(rs));
-        yield put(Actions.controlGpFlightPlanWarnAction.failure(error));
+  } catch (error) {
-    }
+    yield put(Actions.controlGpFlightPlanWarnAction.failure(error));
+  }
 }
 
 function* controlGpArcrftWarnSaga(
-    action: ActionType<typeof Actions.controlGpArcrftWarnAction.request>
+  action: ActionType<typeof Actions.controlGpArcrftWarnAction.request>
 ) {
-    try {
+  try {
-        const id = action.payload;
+    const id = action.payload;
-
-        const rs = yield call(controlGpApi.getArcrftWarnList, id);        
 
-        yield put(Actions.controlGpArcrftWarnAction.success(rs));
+    const rs = yield call(controlGpApi.getArcrftWarnList, id);
 
-    } catch (error) {
+    yield put(Actions.controlGpArcrftWarnAction.success(rs));
-        yield put(Actions.controlGpArcrftWarnAction.failure(error));
+  } catch (error) {
-    }
+    yield put(Actions.controlGpArcrftWarnAction.failure(error));
+  }
 }
 
-
 export function* controlGpSaga() {
-    yield takeEvery(Actions.controlGpAction.request, getControlGpSaga);
+  yield takeEvery(Actions.controlGpAction.request, getControlGpSaga);
-    yield takeEvery(Actions.controlGpHisAction.request, getControlGpHistorySaga);
+  yield takeEvery(Actions.controlGpHisAction.request, getControlGpHistorySaga);
-    yield takeEvery(Actions.controlGpLogAction.request, getControlGpWarnLogSaga);
+  yield takeEvery(Actions.controlGpLogAction.request, getControlGpWarnLogSaga);
-    yield takeEvery(Actions.controlGpRtDtlAction.request, controlGpRtDtlSaga);
+  yield takeEvery(Actions.controlGpRtDtlAction.request, controlGpRtDtlSaga);
-    yield takeEvery(Actions.controlGpDtlAction.request, controlDtlSaga);
+  yield takeEvery(Actions.controlGpDtlAction.request, controlDtlSaga);
-    yield takeEvery(Actions.controlGroupAuthAction.request, controlGroupAuthSaga);
+  yield takeEvery(Actions.controlGroupAuthAction.request, controlGroupAuthSaga);
-    yield takeEvery(Actions.controlGpFlightPlanAction.request, controlGpFlightPlanSaga);
+  yield takeEvery(
-    yield takeEvery(Actions.controlGpFlightPlanWarnAction.request, controlGpFlightPlanWarnSaga);
+    Actions.controlGpFlightPlanAction.request,
-    yield takeEvery(Actions.controlGpArcrftWarnAction.request, controlGpArcrftWarnSaga);
+    controlGpFlightPlanSaga
+  );
+  yield takeEvery(
+    Actions.controlGpFlightPlanWarnAction.request,
+    controlGpFlightPlanWarnSaga
+  );
+  yield takeEvery(
+    Actions.controlGpArcrftWarnAction.request,
+    controlGpArcrftWarnSaga
+  );
 }

src/modules/menu/reducers/menuReducer.ts

@@ -16,7 +16,7 @@ export const menuReducer = createReducer<MenuModelState, Actions.MenuAction>(
 //   produce(state, draft => {
 //     const res = action.payload;
 //     draft.termsList = res;
-//     console.log(res);
+
 //     // draft.terms = res;
 //   })
 // );

src/modules/utils/customAxiosUtil.ts

@@ -25,14 +25,12 @@ clientInstance.interceptors.request.use(
     return config;
   },
   error => {
-    // console.log(error);
     return Promise.reject(error);
   }
 );
 
 clientInstance.interceptors.response.use(
   response => {
-    // console.log('res>>', response);
     // if (response.data.errCode < 0) {
     //   alert('서버 처리중 오류가 발생하였습니다.');
     // }
@@ -42,20 +40,15 @@ clientInstance.interceptors.response.use(
     return response.data;
   },
   error => {
-    // console.log('Error >> ', error);
     const message = error?.message || '';
 
     const name = error?.name || '';
 
-    // console.log('res>>>>>>>>', error?.response);
-    // console.log('status>>>>>>>>', error?.response?.status);
-
     if (error?.response?.status == 401) {
       // alert('인증정보가 없습니다. 다시 로그인해 주세요.');
       // window.location.href = '/account/login';
       store.dispatch(Actions.logout.request());
     } else {
-      // console.log('서버 응답에 실패하였습니다.');
     }
 
     return Promise.reject(error);

src/redux/reducers/navbar/index.js

@@ -27,7 +27,6 @@ const navbarReducer = (state = initialState, action) => {
         }
       });
     case 'CLICK_HEADER_MENU':
-     // console.log('action>>>>', action);
       // ** Get index to add or remove bookmark from array
       const bookmarkIndex = state.bookmarks.findIndex(x => x.id === action.id);
 

src/router/Router.js

@@ -24,7 +24,6 @@ const Router = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    // console.log('isLogin>>>>>>>>', isLogin);
     if (!isLogin) {
       dispatch(Actions.check.request());
     }

src/utility/hooks/useFooterType.js

@@ -1,34 +1,34 @@
 // ** React Imports
-import { useState } from 'react'
+import { useState } from 'react';
 
 // ** Configs
-import themeConfig from '@configs/themeConfig'
+import themeConfig from '@configs/themeConfig';
 
 export const useFooterType = () => {
   // ** State
   const [footerType, setFooterType] = useState(() => {
     try {
-      return themeConfig.layout.footer.type
+      return themeConfig.layout.footer.type;
     } catch (error) {
       // ** If error also initialValue
-     // console.log(error)
+
-      return themeConfig.layout.footer.type
+      return themeConfig.layout.footer.type;
     }
-  })
+  });
 
   // ** Return a wrapped version of useState's setter function
   const setValue = value => {
     try {
       // ** Allow value to be a function so we have same API as useState
-      const valueToStore = value instanceof Function ? value(footerType) : value
+      const valueToStore =
+        value instanceof Function ? value(footerType) : value;
 
       // ** Set state
-      setFooterType(valueToStore)
+      setFooterType(valueToStore);
     } catch (error) {
       // ** A more advanced implementation would handle the error case
-     // console.log(error)
     }
-  }
+  };
 
-  return [footerType, setValue]
+  return [footerType, setValue];
-}
+};

src/utility/hooks/useLayout.js

@@ -1,57 +1,56 @@
 //** React Imports
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react';
 
 // ** Configs
-import themeConfig from '@configs/themeConfig'
+import themeConfig from '@configs/themeConfig';
 
 export const useLayout = () => {
   // ** States
-  const [lastLayout, setLastLayout] = useState(null)
+  const [lastLayout, setLastLayout] = useState(null);
   const [layout, setLayout] = useState(() => {
     try {
-      return themeConfig.layout.type
+      return themeConfig.layout.type;
     } catch (error) {
       // ** If error return initialValue
-     // console.log(error)
+
-      return themeConfig.layout.type
+      return themeConfig.layout.type;
     }
-  })
+  });
 
   // ** Return a wrapped version of useState's setter function
   const setValue = value => {
     try {
       // ** Allow value to be a function so we have same API as useState
-      const valueToStore = value instanceof Function ? value(layout) : value
+      const valueToStore = value instanceof Function ? value(layout) : value;
 
       // ** Set state
-      setLayout(valueToStore)
+      setLayout(valueToStore);
     } catch (error) {
       // ** A more advanced implementation would handle the error case
-     // console.log(error)
     }
-  }
+  };
 
   const handleLayout = () => {
     // ** If layout is horizontal & screen size is equals to or below 1200
     if (layout === 'horizontal' && window.innerWidth <= 1200) {
-      setLayout('vertical')
+      setLayout('vertical');
-      setLastLayout('horizontal')
+      setLastLayout('horizontal');
     }
     // ** If lastLayout is horizontal & screen size is equals to or above 1200
     if (lastLayout === 'horizontal' && window.innerWidth >= 1200) {
-      setLayout('horizontal')
+      setLayout('horizontal');
     }
-  }
+  };
 
   // ** ComponentDidMount
   useEffect(() => {
-    handleLayout()
+    handleLayout();
-  }, [])
+  }, []);
 
   useEffect(() => {
     // ** Window Resize Event
-    window.addEventListener('resize', handleLayout)
+    window.addEventListener('resize', handleLayout);
-  }, [layout, lastLayout])
+  }, [layout, lastLayout]);
 
-  return [layout, setValue]
+  return [layout, setValue];
-}
+};

src/utility/hooks/useNavbarColor.js

@@ -1,34 +1,34 @@
 //** React Imports
-import { useState } from 'react'
+import { useState } from 'react';
 
 // ** Configs
-import themeConfig from '@configs/themeConfig'
+import themeConfig from '@configs/themeConfig';
 
 export const useNavbarColor = () => {
   // ** State
   const [navbarColor, setNavbarColor] = useState(() => {
     try {
-      return themeConfig.layout.navbar.backgroundColor
+      return themeConfig.layout.navbar.backgroundColor;
     } catch (error) {
       // ** If error return initialValue
-     // console.log(error)
+
-      return themeConfig.layout.navbar.backgroundColor
+      return themeConfig.layout.navbar.backgroundColor;
     }
-  })
+  });
 
   // ** Return a wrapped version of useState's setter function
   const setValue = value => {
     try {
       // ** Allow value to be a function so we have same API as useState
-      const valueToStore = value instanceof Function ? value(navbarColor) : value
+      const valueToStore =
+        value instanceof Function ? value(navbarColor) : value;
 
       // ** Set state
-      setNavbarColor(valueToStore)
+      setNavbarColor(valueToStore);
     } catch (error) {
       // ** A more advanced implementation would handle the error case
-     // console.log(error)
     }
-  }
+  };
 
-  return [navbarColor, setValue]
+  return [navbarColor, setValue];
-}
+};

src/utility/hooks/useNavbarType.js

@@ -1,34 +1,34 @@
 //** React Imports
-import { useState } from 'react'
+import { useState } from 'react';
 
 // ** Configs
-import themeConfig from '@configs/themeConfig'
+import themeConfig from '@configs/themeConfig';
 
 export const useNavbarType = () => {
   // ** State
   const [navbarType, setNavbarType] = useState(() => {
     try {
-      return themeConfig.layout.navbar.type
+      return themeConfig.layout.navbar.type;
     } catch (error) {
       // ** If error return initialValue
-     // console.log(error)
+
-      return themeConfig.layout.navbar.type
+      return themeConfig.layout.navbar.type;
     }
-  })
+  });
 
   // ** Return a wrapped version of useState's setter function
   const setValue = value => {
     try {
       // ** Allow value to be a function so we have same API as useState
-      const valueToStore = value instanceof Function ? value(navbarType) : value
+      const valueToStore =
+        value instanceof Function ? value(navbarType) : value;
 
       // ** Set state
-      setNavbarType(valueToStore)
+      setNavbarType(valueToStore);
     } catch (error) {
       // ** A more advanced implementation would handle the error case
-     // console.log(error)
     }
-  }
+  };
 
-  return [navbarType, setValue]
+  return [navbarType, setValue];
-}
+};

src/utility/hooks/useRTL.js

@@ -1,38 +1,37 @@
 //** React Imports
-import { useEffect } from 'react'
+import { useEffect } from 'react';
 
 // ** Store & Actions
-import { handleRTL } from '@store/actions/layout'
+import { handleRTL } from '@store/actions/layout';
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux';
 
 export const useRTL = () => {
   // ** Store Vars
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
-  const isRtl = useSelector(state => state.layout.isRTL)
+  const isRtl = useSelector(state => state.layout.isRTL);
 
   // ** Return a wrapped version of useState's setter function
   const setValue = value => {
     try {
       // ** Allow value to be a function so we have same API as useState
-      const valueToStore = value instanceof Function ? value(isRtl) : value
+      const valueToStore = value instanceof Function ? value(isRtl) : value;
-      dispatch(handleRTL(valueToStore))
+      dispatch(handleRTL(valueToStore));
     } catch (error) {
       // ** A more advanced implementation would handle the error case
-     // console.log(error)
     }
-  }
+  };
 
   useEffect(() => {
     // ** Get HTML Tag
-    const element = document.getElementsByTagName('html')[0]
+    const element = document.getElementsByTagName('html')[0];
 
     // ** If isRTL then add attr dir='rtl' with HTML else attr dir='ltr'
     if (isRtl) {
-      element.setAttribute('dir', 'rtl')
+      element.setAttribute('dir', 'rtl');
     } else {
-      element.setAttribute('dir', 'ltr')
+      element.setAttribute('dir', 'ltr');
     }
-  }, [isRtl])
+  }, [isRtl]);
 
-  return [isRtl, setValue]
+  return [isRtl, setValue];
-}
+};

src/utility/hooks/useRouterTransition.js

@@ -1,34 +1,34 @@
 //** React Imports
-import { useState } from 'react'
+import { useState } from 'react';
 
 // ** Configs
-import themeConfig from '@configs/themeConfig'
+import themeConfig from '@configs/themeConfig';
 
 export const useRouterTransition = () => {
   // ** State
   const [transition, setTransition] = useState(() => {
     try {
-      return themeConfig.layout.routerTransition
+      return themeConfig.layout.routerTransition;
     } catch (error) {
       // ** If error return initialValue
-     // console.log(error)
+
-      return themeConfig.layout.routerTransition
+      return themeConfig.layout.routerTransition;
     }
-  })
+  });
 
   // ** Return a wrapped version of useState's setter function
   const setValue = value => {
     try {
       // ** Allow value to be a function so we have same API as useState
-      const valueToStore = value instanceof Function ? value(transition) : value
+      const valueToStore =
+        value instanceof Function ? value(transition) : value;
 
       // ** Set state
-      setTransition(valueToStore)
+      setTransition(valueToStore);
     } catch (error) {
       // ** A more advanced implementation would handle the error case
-     // console.log(error)
     }
-  }
+  };
 
-  return [transition, setValue]
+  return [transition, setValue];
-}
+};

src/utility/hooks/useSkin.js

@@ -1,58 +1,57 @@
 //** React Imports
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react';
 
 // ** Configs
-import themeConfig from '@configs/themeConfig'
+import themeConfig from '@configs/themeConfig';
 
 export const useSkin = () => {
   // ** State
   const [skin, setSkin] = useState(() => {
     try {
       // ** Get from local storage by key
-      const item = window.localStorage.getItem('skin')
+      const item = window.localStorage.getItem('skin');
       // ** Parse stored json or if none return initialValue
-      return item ? JSON.parse(item) : themeConfig.layout.skin
+      return item ? JSON.parse(item) : themeConfig.layout.skin;
     } catch (error) {
       // ** If error also return initialValue
-     // console.log(error)
+
-      return themeConfig.layout.skin
+      return themeConfig.layout.skin;
     }
-  })
+  });
 
   // ** Return a wrapped version of useState's setter function
   const setValue = value => {
     try {
       // ** Allow value to be a function so we have same API as useState
-      const valueToStore = value instanceof Function ? value(skin) : value
+      const valueToStore = value instanceof Function ? value(skin) : value;
       // ** Set state
-      setSkin(valueToStore)
+      setSkin(valueToStore);
       // ** Save to local storage
-      window.localStorage.setItem('skin', JSON.stringify(valueToStore))
+      window.localStorage.setItem('skin', JSON.stringify(valueToStore));
     } catch (error) {
       // ** A more advanced implementation would handle the error case
-     // console.log(error)
     }
-  }
+  };
 
   useEffect(() => {
     // ** Get Body Tag
-    const element = window.document.body
+    const element = window.document.body;
 
     // ** Define classnames for skins
     const classNames = {
       dark: 'dark-layout',
       bordered: 'bordered-layout',
       'semi-dark': 'semi-dark-layout'
-    }
+    };
 
     // ** Remove all classes from Body on mount
-    element.classList.remove(...element.classList)
+    element.classList.remove(...element.classList);
 
     // ** If skin is not light add skin class
     if (skin !== 'light') {
-      element.classList.add(classNames[skin])
+      element.classList.add(classNames[skin]);
     }
-  }, [skin])
+  }, [skin]);
 
-  return [skin, setValue]
+  return [skin, setValue];
-}
+};

src/views/account/AccountRegisterView.js

@@ -1,7 +1,6 @@
 import { AccountRegister } from '../../components/account/register/AccountRegister';
 
 const AccountResisterView = props => {
-  // console.log(props);
   return <AccountRegister props={props} />;
 };
 

src/views/control/main/ControlMain.js

@@ -62,7 +62,6 @@ const ControlMain = () => {
   };
 
   const openReportDetailParam = val => {
-   // console.log(val);
     setOpenReportDetail(true);
   };
 
@@ -71,17 +70,15 @@ const ControlMain = () => {
   };
 
   useEffect(() => {
-
+    if (controlGpList) {
-    if(controlGpList) {
       const warnGps = controlGpList.find(gps => {
-        return gps.controlWarnNotyCd === true
+        return gps.controlWarnNotyCd === true;
-      })
+      });
 
-      if(warnGps) {
+      if (warnGps) {
         setAlarm(true);
       }
     }
-
   }, [controlGpList]);
 
   return (
@@ -111,7 +108,11 @@ const ControlMain = () => {
           </li> */}
           <li>
             <button onClick={() => openMenu('alarmList')}>
-              {alarm ? <IoAlertOutline size={25} /> : <Bell width='20' height='20' />}
+              {alarm ? (
+                <IoAlertOutline size={25} />
+              ) : (
+                <Bell width='20' height='20' />
+              )}
             </button>
           </li>
         </ul>

src/views/control/report/ControlReportDetail.js

@@ -19,20 +19,20 @@ const ControlReportDetail = props => {
   const dispatch = useDispatch();
   const [historyModal, setHistoryModal] = useState(false);
 
-  const { controlGpDetail, controlDetail } = useSelector(state => state.controlGpDtlState);
+  const { controlGpDetail, controlDetail } = useSelector(
+    state => state.controlGpDtlState
+  );
   const { controlGpWarnLog } = useSelector(state => state.controlGpLogState);
 
   useEffect(() => {
-    if(historyModal) {
+    if (historyModal) {
-      if(controlGpDetail) {
+      if (controlGpDetail) {
-        dispatch(controlGpLogAction.request({id : controlGpDetail.controlId}));
+        dispatch(controlGpLogAction.request({ id: controlGpDetail.controlId }));
       }
     }
-  }, [historyModal])
+  }, [historyModal]);
-
 
   const handlerClose = () => {
-    // console.log('================');
     dispatch(objectUnClickAction());
   };
 
@@ -58,9 +58,15 @@ const ControlReportDetail = props => {
             <X size={20} />
           </button>
         </div>
-        
+
         <div className='layer-content-box mb-1'>
-            <button type="button" className='history-btn'onClick={() => setHistoryModal(!historyModal)}>비정상상황 알림내역</button> 
+          <button
+            type='button'
+            className='history-btn'
+            onClick={() => setHistoryModal(!historyModal)}
+          >
+            비정상상황 알림내역
+          </button>
         </div>
 
         <div className='layer-content-box'>
@@ -227,7 +233,7 @@ const ControlReportDetail = props => {
         </div>
       </div>
 
-      <ControlAlarmDetail 
+      <ControlAlarmDetail
         historyModal={historyModal}
         setHistoryModal={setHistoryModal}
         controlGpWarnLog={controlGpWarnLog}

src/views/control/report/ControlReportList.js

@@ -3,7 +3,10 @@ import React, { useEffect, useState } from 'react';
 import { Search, X } from 'react-feather';
 import { useDispatch, useSelector } from 'react-redux';
 import { Badge, Button, Input, InputGroup } from 'reactstrap';
-import { controlGpDtlAction, controlGpLogAction } from '../../../modules/control/gp';
+import {
+  controlGpDtlAction,
+  controlGpLogAction
+} from '../../../modules/control/gp';
 import { objectClickAction } from '../../../modules/control/map/actions/controlMapActions';
 
 const ControlReportList = props => {
@@ -55,10 +58,7 @@ const ControlReportList = props => {
         </div>
 
         {controlGpList?.map(item => {
-          // console.log(item);
-
           if (item.objectId && item.objectId.indexOf(filterId) != -1) {
-            // console.log(item);
             return (
               <div
                 className='layer-content-list'

src/views/testDraw/main/ControlMainDraw.js

@@ -21,11 +21,14 @@ import {
   Button,
   Badge,
   CustomInput,
-  Input, Label, InputGroup
+  Input,
-} from 'reactstrap'
+  Label,
+  InputGroup
+} from 'reactstrap';
 
 import {
-  drawTypeChangeAction, drawCheckAction
+  drawTypeChangeAction,
+  drawCheckAction
 } from '../../../modules/control/map/actions/controlMapActions';
 
 const ControlMainDraw = () => {
@@ -63,7 +66,6 @@ const ControlMainDraw = () => {
   };
 
   const openReportDetailParam = val => {
-   // console.log(val);
     setOpenReportDetail(true);
   };
 
@@ -77,7 +79,7 @@ const ControlMainDraw = () => {
 
   const handlerDrawCheck = val => {
     dispatch(drawCheckAction(val));
-  }
+  };
 
   return (
     <>
@@ -95,7 +97,6 @@ const ControlMainDraw = () => {
             </button>
           </li>
         </ul>
-      
 
         {/* 네이버 그리기 도구모음 */}
         <ul className='left-menu-nav'>

src/views/testDraw/report/ControlReportDetail.js

@@ -19,11 +19,10 @@ const ControlReportDetail = props => {
   );
 
   // useEffect(() => {
-  //   // console.log(controlGpDetail);
+
   // }, [controlGpDetail]);
 
   const handlerClose = () => {
-    // console.log('================');
     dispatch(objectUnClickAction());
   };
 

src/views/testDraw/report/ControlReportList.js

@@ -13,7 +13,6 @@ const ControlReportList = props => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    // console.log('>>>>', filterId);
     controlGpList;
   }, [controlGpList]);
 
@@ -22,8 +21,6 @@ const ControlReportList = props => {
     dispatch(controlGpDtlAction.request(cntrlId));
   };
 
-  // useEffect(() => {}, [filterId]);
-
   return (
     <div className='left-layer'>
       <div className='layer-content'>
@@ -60,10 +57,7 @@ const ControlReportList = props => {
         </div>
 
         {controlGpList?.map(item => {
-          // console.log(item);
-
           if (item.objectId && item.objectId.indexOf(filterId) != -1) {
-           // console.log(item);
             return (
               <div
                 className='layer-content-list'

src/views/testDraw/setting/ControlSetting.js

@@ -4,13 +4,10 @@ import { BiBuildings, BiGridAlt } from 'react-icons/bi';
 import { CgTrees } from 'react-icons/cg';
 import { VscRadioTower } from 'react-icons/vsc';
 import { useDispatch, useSelector } from 'react-redux';
+import { Button, ButtonGroup, CustomInput } from 'reactstrap';
 import {
-  Button,
+  areaClickAction,
-  ButtonGroup,
+  mapTypeChangeAction
-  CustomInput
-} from 'reactstrap';
-import {
-  areaClickAction, mapTypeChangeAction
 } from '../../../modules/control/map/actions/controlMapActions';
 
 const ControlSetting = props => {
@@ -18,9 +15,7 @@ const ControlSetting = props => {
 
   const mapControl = useSelector(state => state.controlMapReducer);
 
-  useEffect(() => {
+  useEffect(() => {}, [mapControl]);
-   // console.log('>>>>', mapControl);
-  }, [mapControl]);
 
   const handlerMapType = val => {
     dispatch(mapTypeChangeAction(val));
@@ -30,11 +25,8 @@ const ControlSetting = props => {
     dispatch(areaClickAction(val));
   };
 
-
-
   return (
     <div className=''>
-
       <div className='layer-content'>
         <div className='layer-ti'>
           <h4>지도유형</h4>
@@ -190,7 +182,6 @@ const ControlSetting = props => {
           />
         </div>
       </dt> */}
-      
     </div>
   );
 };

test/pav-100-dron.js

@@ -1,93 +1,98 @@
-const {getConnection, writeData} = require("./pav-client")
+const { getConnection, writeData } = require('./pav-client');
-const {dumyData} = require("./pav-utils")
+const { dumyData } = require('./pav-utils');
 
 // const host = "192.168.0.24"
 // const host = "localhost"
-const host = "211.253.38.218"
+const host = '211.253.38.218';
-const port = 8082
+const port = 8082;
 
-const prefix = 'TEST-DRON-'
+const prefix = 'TEST-DRON-';
-const severalDrones = (cnt) => {
+const severalDrones = cnt => {
-    // 클라이언트 정보 저장공간
+  // 클라이언트 정보 저장공간
-    const clients = [];
+  const clients = [];
 
+  // 최초 좌표
+  // y - y' : 37.57 -> 35.36
+  // x - x' : 126.60 -> 128.94
+  const firstCoord = [37.57, 126.6];
+  const lastCoord = [35.36, 128.94];
+  // 좌표 차이 계산
+  const diffX = firstCoord[0] - lastCoord[0];
+  const diffY = lastCoord[1] - firstCoord[1];
+  // 구분점
+  const divCnt = Math.round(Math.sqrt(cnt));
+  const divDiifX = diffX / divCnt;
+  const divDiifY = diffY / divCnt;
 
-    // 최초 좌표
+  // 초기값 저장
-    // y - y' : 37.57 -> 35.36
+  for (let i = 0; i < cnt; i++) {
-    // x - x' : 126.60 -> 128.94
+    const client = {};
-    const firstCoord = [37.57, 126.6];
+    const suffix = i.toString().padStart(3, '0');
-    const lastCoord = [35.36, 128.94];
+    const dronName = prefix + suffix;
-    // 좌표 차이 계산
+    // client
-    const diffX = firstCoord[0] - lastCoord[0];
+    client.dronName = dronName;
-    const diffY = lastCoord[1] - firstCoord[1];
+    client.socket = getConnection(dronName, host, port);
-    // 구분점
-    const divCnt = Math.round(Math.sqrt(cnt));
-    const divDiifX = diffX / divCnt;
-    const divDiifY = diffY / divCnt;
 
-    // 초기값 저장
+    const divX = i % divCnt;
-    for (let i = 0; i < cnt; i++) {
+    const divY = Math.floor(i / divCnt);
-        const client = {};
+    const x = Number((firstCoord[0] - divX * divDiifX).toFixed(5)) || 0;
-        const suffix = i.toString().padStart(3, '0')
+    const y = Number((firstCoord[1] + divY * divDiifY).toFixed(5)) || 0;
-        const dronName = prefix + suffix;
-        // client
-        client.dronName = dronName;
-        client.socket = getConnection(dronName, host, port);
 
-        const divX = i % divCnt;
+    const initialData = {
-        const divY = Math.floor(i / divCnt);
+      ...dumyData,
-        const x = Number((firstCoord[0] - (divX * divDiifX)).toFixed(5)) || 0;
+      terminalId: dronName,
-        const y = Number((firstCoord[1] + (divY * divDiifY)).toFixed(5)) || 0;
+      body: [
-
+        {
-        const initialData = {
+          ...dumyData.body[0],
-            ...dumyData,
+          objectId: dronName,
-            terminalId: dronName,
+          lat: x,
-            body: [
+          lon: y
-                {
-                    ...dumyData.body[0],
-                    objectId: dronName,
-                    lat: x,
-                    lon: y
-                }
-            ]
         }
-        client.data = initialData;
+      ]
+    };
+    client.data = initialData;
 
-        console.log(dronName, x, y, JSON.stringify(initialData))
+    clients.push(client);
-        clients.push(client);
+  }
-    }
+  return clients;
-    return clients;
+};
-}
 //
 const clients = severalDrones(100);
 const dist = 0.01;
-const sendData = (cnt) => {
+const sendData = cnt => {
-    const direction = Math.floor(cnt/10) % 4;
+  const direction = Math.floor(cnt / 10) % 4;
-    clients.forEach((item) => {
+  clients.forEach(item => {
-        // console.log(cnt, item.data.body[0].lat, item.data.body[0].lon)
+    switch (direction) {
-        switch (direction) {
+      case 1:
-            case 1:
+        item.data.body[0].lat = Number(
-                item.data.body[0].lat = Number((item.data.body[0].lat - dist).toFixed(5))
+          (item.data.body[0].lat - dist).toFixed(5)
-                break;
+        );
-            case 2:
+        break;
-                item.data.body[0].lon = Number((item.data.body[0].lon - dist).toFixed(5))
+      case 2:
-                break;
+        item.data.body[0].lon = Number(
-            case 3:
+          (item.data.body[0].lon - dist).toFixed(5)
-                item.data.body[0].lat = Number((item.data.body[0].lat + dist).toFixed(5))
+        );
-                break;
+        break;
-            default:
+      case 3:
-                item.data.body[0].lon = Number((item.data.body[0].lon + dist).toFixed(5))
+        item.data.body[0].lat = Number(
-                break;
+          (item.data.body[0].lat + dist).toFixed(5)
-        }
+        );
+        break;
+      default:
+        item.data.body[0].lon = Number(
+          (item.data.body[0].lon + dist).toFixed(5)
+        );
+        break;
+    }
 
-        writeData(item.socket, JSON.stringify(item.data));
+    writeData(item.socket, JSON.stringify(item.data));
-    })
+  });
-    if(cnt >= 39) cnt = null;
+  if (cnt >= 39) cnt = null;
-    iteratorSendData(++cnt);
+  iteratorSendData(++cnt);
-}
+};
 
 const iteratorSendData = (cnt = 0) => {
-    setTimeout(() => sendData(cnt), 1000);
+  setTimeout(() => sendData(cnt), 1000);
-}
+};
 
 iteratorSendData();