비행 시물레이션 주석

src/components/analysis/simulation/AnalysisSimuationInfo.js

@@ -6,8 +6,10 @@ import { Spinner } from 'reactstrap';
 export const AnalysisSimulationInfo = props => {
   const [target, setTarget] = useState(null);
 
+  // 로딩 상태
   const { loading } = useSelector(state => state.loadingReducer);
 
+  // 스크롤 끝 감지 데이터 추가
   const onIntersect = useCallback(
     ([entry], observer) => {
       if (entry.isIntersecting) {
@@ -19,6 +21,7 @@ export const AnalysisSimulationInfo = props => {
     [props.handlerPageList]
   );
 
+  // 무한 스크롤
   useEffect(() => {
     let observer;
     if (target) {

src/components/analysis/simulation/AnalysisSimulationDetail.js

@@ -11,6 +11,7 @@ import { ReactComponent as Simulation_icon } from '../../../assets/images/simula
 import { IMG_PATH } from '../../../configs/constants';
 import AnalysisSimulatorSlider from './AnalysisSimulatorSlider';
 export const AnalysisSimulationDetail = props => {
+  // 슬라이드 진행 방향
   const [isRtl, setIsRtl] = useRTL();
 
   return (

src/components/analysis/simulation/AnalysisSimulationMap.js

@@ -9,12 +9,15 @@ import { Threebox } from 'threebox-plugin';
 import gimPo from '../../map/geojson/gimpoAirportAirArea.json';
 
 export const AnalysisSimulationMap = props => {
+  // 지도
   const mapContainer = useRef(null);
 
+  // mabboxgl 지도 초기화
   useEffect(() => {
     mapBoxMapInit();
   }, []);
 
+  // mabboxgl 지도 초기화 함수
   const mapBoxMapInit = () => {
     mapboxgl.accessToken = MAPBOX_TOKEN;
 

src/components/analysis/simulation/AnalysisSimulationMarker.js

@@ -3,6 +3,7 @@ import DronIcon from '../../../assets/images/drone-marker-icon.png';
 import mapboxgl from 'mapbox-gl';
 
 export const AnalysisSimulationMarker = props => {
+  // 마커 css
   const el = document.createElement('div');
   el.className = 'marker';
   el.style.width = '30px';
@@ -10,6 +11,7 @@ export const AnalysisSimulationMarker = props => {
   el.style.textAlign = 'center';
   el.style.backgroundImage = `url(${DronIcon})`;
 
+  // 마커 경로 담기
   useEffect(() => {
     if (props.selMarker && props.selMarker.setMap) {
       props.selMarker.setMap(null);
@@ -30,6 +32,7 @@ export const AnalysisSimulationMarker = props => {
     }
   }, [props.data]);
 
+  // 매 초마다 경로 이동
   useEffect(() => {
     if (props.isPlay) {
       if (props.marker) {
@@ -47,6 +50,7 @@ export const AnalysisSimulationMarker = props => {
     }
   }, [props.info]);
 
+  // 지도 드론 표출
   const addMarkers = (position, id) => {
     // 이미 지정된 마커 제거
     if (props.marker) {

src/components/analysis/simulation/AnalysisSimulationPolyline.js

@@ -1,8 +1,10 @@
 import { useEffect } from 'react';
 
 export const AnalysisSimulationPolyline = props => {
+  // 폴리라인 경로 담는 변수
   const polylinePath = [];
 
+  // 기존 저장된 경로 삭제
   useEffect(() => {
     // 기존 폴리라인 삭제 처리
     if (props.selPolyline && props.selPolyline.setMap) {
@@ -19,6 +21,7 @@ export const AnalysisSimulationPolyline = props => {
     }
   }, [props.data]);
 
+  // 경로 그리기
   const addPolyline = () => {
     if (props.data && props.map) {
       props.data.forEach(item => {

src/components/analysis/simulation/AnalysisSimulationReport.js

@@ -5,6 +5,7 @@ import Flatpickr from 'react-flatpickr';
 import { Button, Input, InputGroup } from 'reactstrap';
 
 export const AnalysisSimulationReport = props => {
+  // 식별번호
   const [filterId, setFilterId] = useState('');
 
   return (

src/components/analysis/simulation/AnalysisSimulatorSlider.js

@@ -24,6 +24,7 @@ const AnalysisSimulatorSlider = ({
     return timeString;
   }
 
+  // 슬라이더 값이 바뀔 때마다 실행되는 함수
   const colorOptions = {
     start: [playCount ? playCount : 0],
     // connect: true,
@@ -64,7 +65,6 @@ const AnalysisSimulatorSlider = ({
     direction
   };
 
-  useEffect(() => {}, [playCount]);
   return (
     <div className='simulation-slider'>
       {/* <h5 className='my-2'>Default / Primary Color Slider</h5> */}

src/containers/analysis/simulator/AnalysisSimulationContainer.js

@@ -15,33 +15,47 @@ let playCount = 0;
 let playCounts = 0;
 
 export const AnalysisSimulationContainer = props => {
+  // 슬라이드 모든 데이터
   const { list, count, detail, searchParams, log, stcsList, stcsCount, page } =
     useSelector(state => state.analysisSimulatorState);
 
+  // 비행 시물레이션 데이터
   const [oepnReportList, setOpenReportList] = useState(false);
 
+  // 지도 객체
   const [mapObject, setMapObject] = useState(null);
 
+  // 비행 시물레이션 데이터 상세보기
   const [openDetail, setOpenDetail] = useState(false);
 
+  // 선택 마커
   const [selMarker, setSelMarker] = useState(null);
 
+  // 좌표 정보
   const [selPolyline, setSelPolyline] = useState(null);
 
+  // 슬라이드 재생 여부
   const [isPlay, setIsPlay] = useState(false);
 
+  // 드론 정보
   const [info, setInfo] = useState(null);
 
+  // 슬라이드 시간
   const [timeCd, setTimeCd] = useState(null);
 
+  // 슬라이드 카운터
   const [sliderCount, setSliderCount] = useState(0);
 
+  // 검색 텍스트
   const [searchText, setSearchText] = useState('');
 
+  // 비행 pk 값
   const [cntrlId, setCntrlId] = useState('');
 
+  // 드론 마커
   const [marker, setMarker] = useState(null);
 
+  // 카운터 초기값
   const [sliderVal, setSliderVal] = useState({
     maxVal: 0,
     minVal: 0
@@ -49,6 +63,7 @@ export const AnalysisSimulationContainer = props => {
 
   const dispatch = useDispatch();
 
+  // 드론 갯수
   const [dronLength, setDronLength] = useState(0);
 
   const [countArray, setCountArray] = useState([]);
@@ -58,7 +73,7 @@ export const AnalysisSimulationContainer = props => {
     search1: ''
   });
 
-  // 시뮬레이션 타이머
+  // 시뮬레이션 타이머 로직
   useEffect(() => {
     if (isPlay) {
       const countCheck = log.map(item =>
@@ -95,6 +110,7 @@ export const AnalysisSimulationContainer = props => {
     }
   }, [isPlay, log]);
 
+  //
   useEffect(() => {
     if (isPlay) {
       setInfo({ ...log[playCount], playCount, playCounts });
@@ -102,6 +118,7 @@ export const AnalysisSimulationContainer = props => {
     }
   }, [stcsList]);
 
+  // 검색 변경 헨들러
   useEffect(() => {
     if (oepnReportList) {
       if (searchParams) {
@@ -113,6 +130,8 @@ export const AnalysisSimulationContainer = props => {
       }
     }
   }, [oepnReportList]);
+
+  // 슬라이드 카운터 로직
   useEffect(() => {
     if (sliderCount && sliderCount > 0) {
       let benear = countArray[0];
@@ -138,6 +157,7 @@ export const AnalysisSimulationContainer = props => {
     }
   }, [sliderCount]);
 
+  // 슬라이드 카운터 초기화
   useEffect(() => {
     playCount = 0;
     playCounts = 0;
@@ -163,6 +183,7 @@ export const AnalysisSimulationContainer = props => {
     // let maxDate;
   }, [log]);
 
+  // 검색 헨들러
   const handlerSearch = search1 => {
     setParams({ ...params, search1 });
     dispatch(
@@ -178,10 +199,12 @@ export const AnalysisSimulationContainer = props => {
     dispatch(Actions.log.request(id));
   };
 
+  //
   const handlerStcsSearch = id => {
     dispatch(Actions.stcs.request(id));
   };
 
+  // 검색
   const handlerInput = (type, val) => {
     if (type === 'search1') {
       setParams({ ...params, search1: val });
@@ -197,6 +220,7 @@ export const AnalysisSimulationContainer = props => {
     }
   };
 
+  // 상세보기
   const handlerDetail = id => {
     // setOpenReportList(false);
     handlerDetailSearch(id);
@@ -206,19 +230,25 @@ export const AnalysisSimulationContainer = props => {
 
     setCntrlId(id);
   };
+
+  // 로그아웃
   const handlerLogout = () => {
     dispatch(Action.logout.request());
   };
+
+  // 비행 시물레이션 데이터 닫기
   const handlerDetailClose = () => {
     setOpenDetail(false);
   };
 
+  // 비행 시물레이션 데이터 호출
   const handlerPageList = useCallback(() => {
     dispatch(
       Actions.list.request({ searchParams: { ...params }, page: page + 1 })
     );
   }, [params, list, page]);
 
+  // 비행 시물레이션 데이터 모달 헨들러
   const handlerOpenReportList = useCallback(
     val => {
       setOpenReportList(val);