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 (
{/*
Default / Primary Color Slider
*/} diff --git a/src/containers/analysis/simulator/AnalysisSimulationContainer.js b/src/containers/analysis/simulator/AnalysisSimulationContainer.js index 5f37dae..ae42011 100644 --- a/src/containers/analysis/simulator/AnalysisSimulationContainer.js +++ b/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);