From 2454a345562bfc28a0a0d9a61631560d88441b93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kimjh=28=EA=B9=80=EC=9E=A5=ED=98=84=29?= Date: Tue, 11 Oct 2022 14:38:47 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B9=84=ED=96=89=20=EC=8B=9C=EB=AE=AC?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=85=98=20=ED=8E=98=EC=9D=B4=EC=A7=95=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../simulator/AnalysisSimulationContainer.js | 25 ++++++++++++++++++- .../actions/analysisSimulatorAction.ts | 2 +- .../simulation/apis/annalysisSimulatorApi.ts | 4 +-- .../models/analysisSimulatorModel.ts | 6 ++++- .../reducers/analysisSimulatorReducer.ts | 12 +++++---- .../simulation/sagas/analysisSimulatorSaga.ts | 14 +++++++---- 6 files changed, 48 insertions(+), 15 deletions(-) diff --git a/src/containers/analysis/simulator/AnalysisSimulationContainer.js b/src/containers/analysis/simulator/AnalysisSimulationContainer.js index ed6ae50..9a21004 100644 --- a/src/containers/analysis/simulator/AnalysisSimulationContainer.js +++ b/src/containers/analysis/simulator/AnalysisSimulationContainer.js @@ -50,6 +50,27 @@ 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) { @@ -126,7 +147,9 @@ export const AnalysisSimulationContainer = props => { const handlerSearch = search1 => { setSearchText(search1); - dispatch(Actions.list.request({ searchParams: { ...params, search1 } })); + dispatch( + Actions.list.request({ searchParams: { ...params, search1 }, page: 1 }) + ); }; const handlerDetailSearch = id => { diff --git a/src/modules/analysis/simulation/actions/analysisSimulatorAction.ts b/src/modules/analysis/simulation/actions/analysisSimulatorAction.ts index ce56c5f..26ff61f 100644 --- a/src/modules/analysis/simulation/actions/analysisSimulatorAction.ts +++ b/src/modules/analysis/simulation/actions/analysisSimulatorAction.ts @@ -30,7 +30,7 @@ export const dispatchSearch = export const list = createAsyncAction(LIST_REQUEST, LIST_SUCCESS, LIST_FAILURE)< AnalysisSimulatorState, - { data: AnalysisSimulatorData[]; count: number }, + { data: AnalysisSimulatorData[]; count: number; total: number }, AxiosError >(); diff --git a/src/modules/analysis/simulation/apis/annalysisSimulatorApi.ts b/src/modules/analysis/simulation/apis/annalysisSimulatorApi.ts index c07a5e4..ee9b2b3 100644 --- a/src/modules/analysis/simulation/apis/annalysisSimulatorApi.ts +++ b/src/modules/analysis/simulation/apis/annalysisSimulatorApi.ts @@ -5,13 +5,13 @@ import axios from '../../../utils/customAxiosUtil'; export const analysisSimulator = { //비행 현황 목록 - list: async (data: string) => { + list: async (data: string, page: number) => { const queryString = qs.stringify(data, { addQueryPrefix: true, arrayFormat: 'repeat' }); - return await axios.get(`/api/anls/smlt/list` + queryString); + return await axios.get(`/api/anls/smlt/list${queryString}&page=${page}`); }, // 비행 이력 데이터 조회 logList: async (id: string) => { diff --git a/src/modules/analysis/simulation/models/analysisSimulatorModel.ts b/src/modules/analysis/simulation/models/analysisSimulatorModel.ts index 51cfeba..e927c9f 100644 --- a/src/modules/analysis/simulation/models/analysisSimulatorModel.ts +++ b/src/modules/analysis/simulation/models/analysisSimulatorModel.ts @@ -6,6 +6,8 @@ export interface AnalysisSimulatorState { searchParams: string; stcsList: AnalysisSimulatorStcsData[] | undefined; stcsCount: number | 0; + page: number | 0; + total: number | 0; } export interface AnalysisSimulatorData { @@ -70,5 +72,7 @@ export const initResponseAnalysisSimulatorData = { log: undefined, searchParams: '', stcsList: undefined, - stcsCount: 0 + stcsCount: 0, + page: 0, + total: 0 }; diff --git a/src/modules/analysis/simulation/reducers/analysisSimulatorReducer.ts b/src/modules/analysis/simulation/reducers/analysisSimulatorReducer.ts index 95b4cd1..80ba99a 100644 --- a/src/modules/analysis/simulation/reducers/analysisSimulatorReducer.ts +++ b/src/modules/analysis/simulation/reducers/analysisSimulatorReducer.ts @@ -18,15 +18,17 @@ export const analysisSimulatorReducer = createReducer< ) .handleAction(Actions.list.request, (state, action) => produce(state, draft => { - const { searchParams } = action.payload; + const { searchParams, page } = action.payload; draft.searchParams = searchParams; + draft.page = page; }) ) .handleAction(Actions.list.success, (state, action) => produce(state, draft => { - const { data, count } = action.payload; + const { data, count, total } = action.payload; draft.list = data; draft.count = count; + draft.total = total; }) ) .handleAction(Actions.detail.success, (state, action) => @@ -46,11 +48,11 @@ export const analysisSimulatorReducer = createReducer< .handleAction(Actions.log.success, (state, action) => produce(state, draft => { const { log } = action.payload; - const data = log.sort((p:any, n:any): any => { + const data = log.sort((p: any, n: any): any => { const a = p.srvrRcvDt.replace(/[^0-9\.]+/g, ''); const b = n.srvrRcvDt.replace(/[^0-9\.]+/g, ''); - return a-b; - }) + return a - b; + }); draft.log = log; }) ); diff --git a/src/modules/analysis/simulation/sagas/analysisSimulatorSaga.ts b/src/modules/analysis/simulation/sagas/analysisSimulatorSaga.ts index b7ab7c1..4efa983 100644 --- a/src/modules/analysis/simulation/sagas/analysisSimulatorSaga.ts +++ b/src/modules/analysis/simulation/sagas/analysisSimulatorSaga.ts @@ -5,14 +5,18 @@ import * as Apis from '../apis/annalysisSimulatorApi'; function* listSaga(action: ActionType) { try { - const { searchParams } = action.payload; - const res = yield call(Apis.analysisSimulator.list, searchParams); - const { data, count } = res; + const { searchParams, page } = action.payload; + const res = yield call(Apis.analysisSimulator.list, searchParams, page); + const { + data: { items, total }, + count + } = res; yield put( Actions.list.success({ - data: data, - count: count + data: items, + count: count, + total }) ); } catch (error) {