비행 시뮬레이션 페이징 작업중

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 => {

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
 >();
 

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) => {

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
 };

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;
     })
   );

src/modules/analysis/simulation/sagas/analysisSimulatorSaga.ts

@@ -5,14 +5,18 @@ import * as Apis from '../apis/annalysisSimulatorApi';
 
 function* listSaga(action: ActionType<typeof Actions.list.request>) {
   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) {