기체 목록 (페이징작업)

src/components/basis/dron/BasisDronGrid.js

@@ -27,11 +27,12 @@ export const BasisDronGrid = props => {
             <GridDatabase
               title={'비행이력'}
               data={props.data}
-              count={props.count}
+              total={props.total}
               columns={props.columns}
               pagination={props.pagination}
               paginationPerPage={props.paginationPerPage}
               paginationRowsPerPageOptions={props.paginationRowsPerPageOptions}
+              handlerPageChange={props.handlerPageChange}
             />
           </div>
         </Card>

src/containers/basis/dron/BasisDronContainer.js

@@ -25,7 +25,7 @@ export const BasisDronContainer = props => {
     state => state.groupState
   );
   const { selectData } = useSelector(state => state.dronState);
-  const { list, count } = useSelector(state => state.dronState);
+  const { list, count, total } = useSelector(state => state.dronState);
   const { user } = useSelector(state => state.authState, shallowEqual);
   const [params, setParams] = useState({});
   const titleName = '기체 관리';
@@ -234,16 +234,18 @@ export const BasisDronContainer = props => {
     }
   }, [user]);
 
-  const handlerSearch = () => {
-    GroupActions.JOIN_LIST.request({
-      searchParams: { cstmrSno: user?.cstmrSno }
-    });
-  };
+  // const handlerSearch = () => {
+  //   GroupActions.JOIN_LIST.request({
+  //     searchParams: { cstmrSno: user?.cstmrSno }
+  //   });
+  // };
 
-  const handlerDronSearch = () => {
-    dispatch(Actions.LIST.request(selectData));
+  // const handlerDronSearch = () => {
+  //   dispatch(Actions.LIST.request(selectData));
+  // };
+  const handlerPageChange = page => {
+    dispatch(Actions.LIST.request({ groupId: groupId, page }));
   };
-
   const handlerDetail = (groupId, groupNm, groupAuthCd, aprvlYn) => {
     dispatch(Actions.SELECT({ groupId: groupId, groupNm: groupNm }));
     setParams({
@@ -251,7 +253,7 @@ export const BasisDronContainer = props => {
       groupId: groupId,
       groupNm: groupNm
     });
-    dispatch(Actions.LIST.request({ groupId: groupId }));
+    dispatch(Actions.LIST.request({ searchParams: { groupId: groupId, page: 1 } }));
 
     let my = false;
     if (user.authId === 'SUPER') {
@@ -323,12 +325,13 @@ export const BasisDronContainer = props => {
                 title={titleName}
                 subTitle={params.groupNm}
                 columns={dronColumns}
-                count={count}
+                total={total}
                 handlerGroupCreate={handlerGroupCreate}
                 pagination={true}
                 paginationPerPage={10}
                 paginationRowsPerPageOptions={[10, 20, 30, 40]}
                 isMyGroup={isMyGroup}
+                handlerPageChange={handlerPageChange}
               />
             )}
           </Col>

src/modules/basis/dron/actions/basisDronAction.ts

@@ -56,8 +56,8 @@ const IDNTF_DELETE_FAILURE = 'basis/idntf/IDNTF_DELETE_FAILURE';
 const SELECT_GROUP = 'basis/dron/SELECT_GROUP';
 
 export const LIST = createAsyncAction(LIST_REQUEST, LIST_SUCCESS, LIST_FAILURE)<
-  string,
-  { data: DronData[]; count: number },
+DronState,
+  { data: DronData[]; count: number,total: number },
   AxiosError
 >();
 

src/modules/basis/dron/apis/basisDronApi.ts

@@ -29,13 +29,11 @@ export const dronAPI = {
     return res;
   },
   idntfCreate: async (data: IdntfData[]) => {
-
     const res = await axios.post('api/bas/dron/idntf/create', data);
 
     return res;
   },
   update: async (data: DronData) => {
-
     const res = await axios.put('api/bas/dron/update', data);
 
     return res;

src/modules/basis/dron/models/basisDronModel.ts

@@ -9,6 +9,8 @@ export interface DronState {
   listIdntf: IdntfData[] | undefined;
   idntfCount: number | 0;
   isRefreshIdntf: boolean | false;
+  page: number | 1;
+  total: number | 0;
 }
 
 export interface SelectData {
@@ -64,5 +66,7 @@ export const initDron = {
   selectData: undefined,
   listIdntf: undefined,
   idntfCount: 0,
-  isRefreshIdntf: false
+  isRefreshIdntf: false,
+  page: 1,
+  total: 0
 };

src/modules/basis/dron/reducers/basisDronReducer.ts

@@ -9,9 +9,10 @@ export const dronReducer = createReducer<DronState, Actions.DronAction>(
 )
   .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.IDNTF_LIST.success, (state, action) =>

src/modules/basis/dron/sagas/basisDronSaga.ts

@@ -12,9 +12,13 @@ import * as Apis from '../apis/basisDronApi';
 
 function* listSaga(action: ActionType<typeof Actions.LIST.request>) {
   try {
-    const params = action.payload;
-    const res = yield call(Apis.dronAPI.list, params);
-    const { data, count, errorCode, errorMessage } = res;
+    const { searchParams } = action.payload;
+    const res = yield call(Apis.dronAPI.list, searchParams);
+    const {
+      data: { items, total },
+      count,
+      errorCode
+    } = res;
     if (errorCode) {
       // 오류메시지 호출
       yield put(
@@ -30,8 +34,9 @@ function* listSaga(action: ActionType<typeof Actions.LIST.request>) {
     }
     yield put(
       Actions.LIST.success({
-        data: data,
-        count: count
+        data: items,
+        count,
+        total
       })
     );
   } catch (error) {
@@ -65,7 +70,6 @@ function* listIdntfSaga(action: ActionType<typeof Actions.IDNTF_LIST.request>) {
       dataArr.push({ ...item, isSave: true, id: item?.idntfNum });
     });
 
-
     yield put(
       Actions.IDNTF_LIST.success({
         data: dataArr,