diff --git a/src/components/analysis/simulation/AnalysimuationInfo.js b/src/components/analysis/simulation/AnalysimuationInfo.js
index a7d29fc..7d6976f 100644
--- a/src/components/analysis/simulation/AnalysimuationInfo.js
+++ b/src/components/analysis/simulation/AnalysimuationInfo.js
@@ -1,57 +1,87 @@
import moment from 'moment';
-import { useEffect } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { useSelector } from 'react-redux';
export const AnalysimuationInfo = props => {
+ const [target, setTarget] = useState(null);
+ const [isLoading, setIsLoding] = useState(false);
+ const bottomObserver = useRef(null);
+
+ const onIntersect = useCallback(
+ ([entry], observer) => {
+ if (entry.isIntersecting) {
+ props.handlerPageList();
+ // 데이터를 가져오는 부분
+ }
+ },
+ [props.handlerPageList]
+ );
+
+ useEffect(() => {
+ let observer;
+ if (target) {
+ // callback 함수, option
+ observer = new IntersectionObserver(onIntersect, {
+ threshold: 0.4
+ });
+ observer.observe(target); // 타겟 엘리먼트 지정
+ }
+ return () => observer && observer.disconnect();
+ }, [target, props.handlerPageList]);
+
return (
{props.count === 0 ? (
표시할 데이터가 없습니다.
) : (
- props.data?.map(item => {
- // item.idntfNum,
- // ':::',
- // item.idntfNum.indexOf(props.filterId)
- // );
+ <>
+ {props.data?.map(item => {
+ // item.idntfNum,
+ // ':::',
+ // item.idntfNum.indexOf(props.filterId)
+ // );
- if (item.idntfNum) {
- return (
-
props.handlerDetail(item.cntrlId)}
- key={Math.random()}
- >
-
- -
-
식별번호
- {item.idntfNum}
-
- -
-
일자
-
- {moment(item.cntrlStDt).format('YYYY년MM월DD일')}
-
-
- -
-
시작 위치
- {item.stArea}
-
- -
-
시작/종료 시간
-
- {moment(item.cntrlStDt).format('HH:mm')}
- {' '}/{' '}
- {moment(item.cntrlEndDt).format('HH:mm')}
-
-
- {/* -
+ if (item.idntfNum) {
+ return (
+
props.handlerDetail(item.cntrlId)}
+ key={Math.random()}
+ >
+
+ -
+
식별번호
+ {item.idntfNum}
+
+ -
+
일자
+
+ {moment(item.cntrlStDt).format('YYYY년MM월DD일')}
+
+
+ -
+
시작 위치
+ {item.stArea}
+
+ -
+
시작/종료 시간
+
+ {moment(item.cntrlStDt).format('HH:mm')}
+ {' '}/{' '}
+ {moment(item.cntrlEndDt).format('HH:mm')}
+
+
+ {/* -
총 비행거리/시간
ddd
*/}
-
-
- );
- }
- })
+
+
+ );
+ }
+ })}
+
+ >
)}
);
diff --git a/src/components/analysis/simulation/AnalysisSimulationReport.js b/src/components/analysis/simulation/AnalysisSimulationReport.js
index dcae0b0..4be4be6 100644
--- a/src/components/analysis/simulation/AnalysisSimulationReport.js
+++ b/src/components/analysis/simulation/AnalysisSimulationReport.js
@@ -14,7 +14,7 @@ export const AnalysisSimulationReport = props => {
diff --git a/src/containers/analysis/simulator/AnalysisSimulationContainer.js b/src/containers/analysis/simulator/AnalysisSimulationContainer.js
index 9a21004..b4fe10c 100644
--- a/src/containers/analysis/simulator/AnalysisSimulationContainer.js
+++ b/src/containers/analysis/simulator/AnalysisSimulationContainer.js
@@ -1,5 +1,5 @@
import moment from 'moment';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { AnalysisSimulationDetail } from '../../../components/analysis/simulation/AnalysisSimulationDetail';
import { AnalysisSimulationMenu } from '../../../components/analysis/simulation/AnalysisSimulationMenu';
@@ -14,7 +14,7 @@ import * as Action from '../../../modules/account/login/actions/authAction';
let playCount = 0;
export const AnalysisSimulationContainer = props => {
- const { list, count, detail, searchParams, log, stcsList, stcsCount } =
+ const { list, count, detail, searchParams, log, stcsList, stcsCount, page } =
useSelector(state => state.analysisSimulatorState);
const [oepnReportList, setOpenReportList] = useState(false);
@@ -37,6 +37,9 @@ export const AnalysisSimulationContainer = props => {
const [searchText, setSearchText] = useState('');
+ const [bottom, setBottom] = useState(null);
+ const bottomObserver = useRef(null);
+
const [sliderVal, setSliderVal] = useState({
maxVal: 0,
minVal: 0
@@ -50,27 +53,6 @@ export const AnalysisSimulationContainer = props => {
search1: ''
});
- // 스크롤 이벤트 핸들러
- const handleScroll = () => {
- const scrollHeight = document.documentElement.scrollHeight;
- const scrollTop = document.documentElement.scrollTop;
- const clientHeight = document.documentElement.clientHeight;
- console.log('@@');
- // if (scrollTop + clientHeight >= scrollHeight && fetching === false) {
- // // 페이지 끝에 도달하면 추가 데이터를 받아온다
- // console.log('@@');
- // }
- };
-
- useEffect(() => {
- // scroll event listener 등록
- window.addEventListener('scroll', handleScroll);
- return () => {
- // scroll event listener 해제
- window.removeEventListener('scroll', handleScroll);
- };
- }, []);
-
// 시뮬레이션 타이머
useEffect(() => {
if (isPlay) {
@@ -145,7 +127,7 @@ export const AnalysisSimulationContainer = props => {
}, [log]);
const handlerSearch = search1 => {
- setSearchText(search1);
+ setParams({ ...params, search1 });
dispatch(
Actions.list.request({ searchParams: { ...params, search1 }, page: 1 })
@@ -193,6 +175,17 @@ export const AnalysisSimulationContainer = props => {
setOpenDetail(false);
};
+ const handlerPageList = () => {
+ // console.log(params);
+ // dispatch(Actions.list.request({ searchParams, page }));
+ };
+
+ const handlerOpenReportList = useCallback(
+ val => {
+ setOpenReportList(val);
+ },
+ [oepnReportList]
+ );
return (
//
@@ -201,7 +194,7 @@ export const AnalysisSimulationContainer = props => {
@@ -211,14 +204,15 @@ export const AnalysisSimulationContainer = props => {
params={params}
handlerInput={handlerInput}
handlerSearch={handlerSearch}
- setOpenReportList={setOpenReportList}
+ handlerOpenReportList={handlerOpenReportList}
/>
+
) : (
@@ -238,7 +232,7 @@ export const AnalysisSimulationContainer = props => {
timeCd={timeCd}
setSliderCount={setSliderCount}
handlerDetailClose={handlerDetailClose}
- setOpenReportList={setOpenReportList}
+ setOpenReportList={handlerOpenReportList}
/>
produce(state, draft => {
const { searchParams, page } = action.payload;
+
draft.searchParams = searchParams;
draft.page = page;
})
@@ -26,6 +27,7 @@ export const analysisSimulatorReducer = createReducer<
.handleAction(Actions.list.success, (state, action) =>
produce(state, draft => {
const { data, count, total } = action.payload;
+ draft.searchParams = state.searchParams;
draft.list = data;
draft.count = count;
draft.total = total;