승인관리-페이징작업

src/components/basis/group/BasisGroupApprovalGrid.js

@@ -44,6 +44,8 @@ export const BasisGroupApprovalGrid = props => {
               pagination={props.pagination}
               paginationPerPage={props.paginationPerPage}
               paginationRowsPerPageOptions={props.paginationRowsPerPageOptions}
+              handlerPageChange={props.handlerPageChange}
+              total={props.total}
             />
           </div>
         </Card>

src/containers/basis/group/BasisGroupApprovalContainer.js

@@ -17,7 +17,8 @@ export const BasisGroupApprovalContainer = props => {
     joinListCount,
     groupList,
     groupListCount,
-    selectData
+    selectData,
+    total
   } = useSelector(state => state.groupState);
 
   const { user } = useSelector(state => state.authState);
@@ -121,7 +122,8 @@ export const BasisGroupApprovalContainer = props => {
             searchParams: {
               ...params,
               cstmrSno: user?.cstmrSno,
-              groupId: groupId
+              groupId: groupId,
+              page: 1
             }
           })
         );
@@ -313,9 +315,11 @@ export const BasisGroupApprovalContainer = props => {
   };
 
   const handlerSearch = () => {
-    dispatch(Actions.APPROVAL_LIST.request({ searchParams: params }));
+    dispatch(Actions.APPROVAL_LIST.request({ searchParams: params, page: 1 }));
+  };
+  const handlerPageChange = page => {
+    dispatch(Actions.APPROVAL_LIST.request({ searchParams: params, page }));
   };
-
   const handlerAprvConfirm = cstmrGroupSno => {
     setModal({
       isOpen: true,
@@ -407,6 +411,8 @@ export const BasisGroupApprovalContainer = props => {
                   pagination={true}
                   paginationPerPage={10}
                   paginationRowsPerPageOptions={[10, 20, 30, 40]}
+                  handlerPageChange={handlerPageChange}
+                  total={total}
                 />
               </>
             )}

src/modules/basis/group/actions/basisGroupAction.ts

@@ -186,7 +186,7 @@ export const APPROVAL_LIST = createAsyncAction(
   APPROVAL_LIST_REQUEST,
   APPROVAL_LIST_SUCCESS,
   APPROVAL_LIST_FAILURE
-)<GroupState, { data: AprvGroupData[]; count: number }, AxiosError>();
+)<GroupState, { data: AprvGroupData[]; count: number, total: number }, AxiosError>();
 
 export const APPROVAL_UPDATE = createAsyncAction(
   APPROVAL_UPDATE_REQUEST,

src/modules/basis/group/apis/basisGroupApi.ts

@@ -75,7 +75,7 @@ export const groupAPI = {
 
     return res;
   },
-  listGroupAprv: async (data: string) => {
+  listGroupAprv: async (data: string, page: number) => {
     const queryString = qs.stringify(data, {
       addQueryPrefix: true,
       arrayFormat: 'repeat'

src/modules/basis/group/models/basisGroupModel.ts

@@ -19,6 +19,9 @@ export interface GroupState {
   searchParams: string | '';
   error: ErrorModel | undefined;
   selectData: SelectData | undefined;
+  page: number | 1;
+  total: number | 0;
+  count: number | 0;
 }
 
 export interface GroupSearchData {
@@ -117,5 +120,8 @@ export const initGroup = {
   newGroupId: '',
   searchParams: '',
   error: undefined,
-  selectData: undefined
+  selectData: undefined,
+  page: 1,
+  total: 0,
+  count:0
 };

src/modules/basis/group/reducers/basisGroupReducer.ts

@@ -86,9 +86,10 @@ export const groupReducer = createReducer<GroupState, Actions.GroupAction>(
   )
   .handleAction(Actions.APPROVAL_LIST.success, (state, action) =>
     produce(state, draft => {
-      const { data, count } = action.payload;
+      const { data, count, total } = action.payload;
       draft.aprvList = data;
-      draft.aprvCount = count;
+      draft.count = count;
+      draft.aprvCount = total;
     })
   )
   .handleAction(Actions.USER_LIST.success, (state, action) =>

src/modules/basis/group/sagas/basisGroupSaga.ts

@@ -405,14 +405,18 @@ function* aprvListSaga(
   action: ActionType<typeof Actions.APPROVAL_LIST.request>
 ) {
   try {
-    const { searchParams } = action.payload;
-    const res = yield call(Apis.groupAPI.listGroupAprv, searchParams);
-    const { data, count } = res;
+    const { searchParams, page } = action.payload;
+    const res = yield call(Apis.groupAPI.listGroupAprv, searchParams, page);
+    const {
+      data: { items, total },
+      count
+    } = res;
 
     yield put(
       Actions.APPROVAL_LIST.success({
-        data: data,
-        count: count
+        data: items,
+        count,
+        total
       })
     );
   } catch (error) {