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

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 (
     <div className='layer-content drone-list'>
       {props.count === 0 ? (
         <div className='no-dataTable'>표시할 데이터가 없습니다.</div>
       ) : (
-        props.data?.map(item => {
+        <>
-          //   item.idntfNum,
+          {props.data?.map(item => {
-          //   ':::',
+            //   item.idntfNum,
-          //   item.idntfNum.indexOf(props.filterId)
+            //   ':::',
-          // );
+            //   item.idntfNum.indexOf(props.filterId)
+            // );
 
-          if (item.idntfNum) {
+            if (item.idntfNum) {
-            return (
+              return (
-              <div
+                <div
-                className='layer-content-list'
+                  className='layer-content-list'
-                onClick={() => props.handlerDetail(item.cntrlId)}
+                  onClick={() => props.handlerDetail(item.cntrlId)}
-                key={Math.random()}
+                  key={Math.random()}
-              >
+                >
-                <dl>
+                  <dl>
-                  <dt>
+                    <dt>
-                    <div className='list-left-txt'>식별번호</div>
+                      <div className='list-left-txt'>식별번호</div>
-                    <div className='list-right-txt'>{item.idntfNum}</div>
+                      <div className='list-right-txt'>{item.idntfNum}</div>
-                  </dt>
+                    </dt>
-                  <dt>
+                    <dt>
-                    <div className='list-left-txt'>일자</div>
+                      <div className='list-left-txt'>일자</div>
-                    <div className='list-right-txt'>
+                      <div className='list-right-txt'>
-                      {moment(item.cntrlStDt).format('YYYY년MM월DD일')}
+                        {moment(item.cntrlStDt).format('YYYY년MM월DD일')}
-                    </div>
+                      </div>
-                  </dt>
+                    </dt>
-                  <dt>
+                    <dt>
-                    <div className='list-left-txt'>시작 위치</div>
+                      <div className='list-left-txt'>시작 위치</div>
-                    <div className='list-right-txt'>{item.stArea}</div>
+                      <div className='list-right-txt'>{item.stArea}</div>
-                  </dt>
+                    </dt>
-                  <dt>
+                    <dt>
-                    <div className='list-left-txt'>시작/종료 시간</div>
+                      <div className='list-left-txt'>시작/종료 시간</div>
-                    <div className='list-right-txt'>
+                      <div className='list-right-txt'>
-                      {moment(item.cntrlStDt).format('HH:mm')}
+                        {moment(item.cntrlStDt).format('HH:mm')}
-                      {'  '}/{'  '}
+                        {'  '}/{'  '}
-                      {moment(item.cntrlEndDt).format('HH:mm')}
+                        {moment(item.cntrlEndDt).format('HH:mm')}
-                    </div>
+                      </div>
-                  </dt>
+                    </dt>
-                  {/* <dt>
+                    {/* <dt>
                     <div className='list-left-txt'>총 비행거리/시간</div>
                     <div className='list-right-txt'>ddd</div>
                   </dt> */}
-                </dl>
+                  </dl>
-              </div>
+                </div>
-            );
+              );
-          }
+            }
-        })
+          })}
+          <div ref={setTarget} />
+        </>
       )}
     </div>
   );

src/components/analysis/simulation/AnalysisSimulationReport.js

@@ -14,7 +14,7 @@ export const AnalysisSimulationReport = props => {
         <button
           className='btn-icon'
           color='primary'
-          onClick={() => props.setOpenReportList(false)}
+          onClick={() => props.handlerOpenReportList(false)}
         >
           <X size={20} />
         </button>

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 (
     // <CustomMainLayout title={titleName}>
     <div className='pal-container'>
@@ -201,7 +194,7 @@ export const AnalysisSimulationContainer = props => {
       </div>
 
       <AnalysisSimulationMenu
-        setOpenReportList={setOpenReportList}
+        setOpenReportList={handlerOpenReportList}
         handlerLogout={handlerLogout}
       />
 
@@ -211,14 +204,15 @@ export const AnalysisSimulationContainer = props => {
             params={params}
             handlerInput={handlerInput}
             handlerSearch={handlerSearch}
-            setOpenReportList={setOpenReportList}
+            handlerOpenReportList={handlerOpenReportList}
           />
           <AnalysimuationInfo
             data={list}
             count={count}
             handlerDetail={handlerDetail}
-            searchText={searchText}
+            handlerPageList={handlerPageList}
           />
+          <div ref={setBottom} />
         </div>
       ) : (
         <div />
@@ -238,7 +232,7 @@ export const AnalysisSimulationContainer = props => {
             timeCd={timeCd}
             setSliderCount={setSliderCount}
             handlerDetailClose={handlerDetailClose}
-            setOpenReportList={setOpenReportList}
+            setOpenReportList={handlerOpenReportList}
           />
           <NMapPolyline
             data={log}

src/modules/analysis/simulation/models/analysisSimulatorModel.ts

@@ -6,7 +6,7 @@ export interface AnalysisSimulatorState {
   searchParams: string;
   stcsList: AnalysisSimulatorStcsData[] | undefined;
   stcsCount: number | 0;
-  page: number | 0;
+  page: number | 1;
   total: number | 0;
 }
 
@@ -73,6 +73,6 @@ export const initResponseAnalysisSimulatorData = {
   searchParams: '',
   stcsList: undefined,
   stcsCount: 0,
-  page: 0,
+  page: 1,
   total: 0
 };

src/modules/analysis/simulation/reducers/analysisSimulatorReducer.ts

@@ -19,6 +19,7 @@ export const analysisSimulatorReducer = createReducer<
   .handleAction(Actions.list.request, (state, action) =>
     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;