diff --git a/src/components/analysis/simulation/AnalysisSimuationInfo.js b/src/components/analysis/simulation/AnalysisSimuationInfo.js index f7a3d72..9d73cf3 100644 --- a/src/components/analysis/simulation/AnalysisSimuationInfo.js +++ b/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) { diff --git a/src/components/analysis/simulation/AnalysisSimulationDetail.js b/src/components/analysis/simulation/AnalysisSimulationDetail.js index 35aa6e8..97f46a3 100644 --- a/src/components/analysis/simulation/AnalysisSimulationDetail.js +++ b/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 ( diff --git a/src/components/analysis/simulation/AnalysisSimulationMap.js b/src/components/analysis/simulation/AnalysisSimulationMap.js index c3db44f..d6fbd52 100644 --- a/src/components/analysis/simulation/AnalysisSimulationMap.js +++ b/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; diff --git a/src/components/analysis/simulation/AnalysisSimulationMarker.js b/src/components/analysis/simulation/AnalysisSimulationMarker.js index 0a0e201..715e7ab 100644 --- a/src/components/analysis/simulation/AnalysisSimulationMarker.js +++ b/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) { diff --git a/src/components/analysis/simulation/AnalysisSimulationPolyline.js b/src/components/analysis/simulation/AnalysisSimulationPolyline.js index 305b4c1..7030c74 100644 --- a/src/components/analysis/simulation/AnalysisSimulationPolyline.js +++ b/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 => { diff --git a/src/components/analysis/simulation/AnalysisSimulationReport.js b/src/components/analysis/simulation/AnalysisSimulationReport.js index 4be4be6..6d118eb 100644 --- a/src/components/analysis/simulation/AnalysisSimulationReport.js +++ b/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 ( diff --git a/src/components/analysis/simulation/AnalysisSimulatorSlider.js b/src/components/analysis/simulation/AnalysisSimulatorSlider.js index 87b643a..b26f796 100644 --- a/src/components/analysis/simulation/AnalysisSimulatorSlider.js +++ b/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 (