🚀 feat(유저 페이지) : 유저 정보 가져오기, 페이지네이션 구현

src/components/Tables/UsersPage/Table.js

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react';
+
+import { useSelector, useDispatch } from 'react-redux';
+import { Table } from 'antd';
+import { usersPage } from '../../../state/actions-creators/usersPage';
+const { Column } = Table;
+
+function UsersPageTable() {
+  const dispatch = useDispatch();
+  const { data, pending } = useSelector(state => state.usersPage);
+  const [page, setPage] = useState(1);
+
+  const onPageChange = e => {
+    // 페이지네이션 번호 바뀔때 뜸.
+    console.log(e);
+    setPage(e);
+    dispatch(
+      usersPage({
+        requestPage: e
+      })
+    );
+  };
+
+  useEffect(() => {
+    setPage(page + 1);
+    dispatch(
+      usersPage({
+        requestPage: page
+      })
+    );
+  }, [dispatch]);
+
+  // 받을 수 있는 정보 목록
+  //   {
+  //   "id": 3,
+  //   "name": "강나연",
+  //   "phoneNumber": "01075546670",
+  //   "role": "Admin",
+  //   "ticketNum": 0
+  // },
+
+  return (
+    <>
+      <Table
+        loading={pending}
+        pagination={{
+          current: page,
+          pageSize: 10,
+          total: data ? data.total : 0,
+          showSizeChanger: false,
+          onChange: onPageChange
+        }}
+        key="id"
+        rowKey="id"
+        // onRow={(record, rowIndex) => {
+        //   return {
+        //     onClick: event => {
+        //       console.log(event, record);
+        //       onStopClickHandler(record);
+        //     } // click row
+        //   };
+        // }}
+        pageSize={10}
+        dataSource={data ? data.userList : []}
+      >
+        <Column title="유저" dataIndex="id" key="id" />
+        <Column title="입금자명" dataIndex="name" key="id" />
+        <Column title="전화번호" dataIndex="phoneNumber" key="id" />
+        <Column title="구입한 티켓 매수" dataIndex="ticketNum" key="id" />
+        <Column title="가입일" dataIndex="title" key="id" />
+        <Column title="어드민 여부" dataIndex="role" key="id" />
+      </Table>
+    </>
+  );
+}
+
+export default UsersPageTable;

src/components/Tables/UsersPage/UsersPage.js

@@ -1,7 +1,12 @@
 import React from 'react';
+import UsersPageTable from './Table';
 
 function UsersPage() {
-  return <div>Users Page 파이팅 🙀</div>;
+  return (
+    <div>
+      <UsersPageTable />
+    </div>
+  );
 }
 
 export default UsersPage;

src/state/action-types/index.js

@@ -2,3 +2,4 @@ export * from './slackMessage';
 export * from './slackValidation';
 export * from './logout';
 export * from './examplePagination';
+export * from './usersPage';

src/state/action-types/usersPage.js

@@ -0,0 +1,3 @@
+export const USER_PAGE_PENDING = 'USER_PAGE_PENDING';
+export const USER_PAGE_SUCCESS = 'USER_PAGE_SUCCESS';
+export const USER_PAGE_ERROR = 'USER_PAGE_ERROR';

src/state/actions-creators/usersPage.js

@@ -0,0 +1,34 @@
+import axios from 'axios';
+import {
+  USER_PAGE_PENDING,
+  USER_PAGE_SUCCESS,
+  USER_PAGE_ERROR
+} from '../action-types';
+
+export const usersPage =
+  ({ requestPage }, callback) =>
+  async dispatch => {
+    try {
+      dispatch({ type: USER_PAGE_PENDING });
+
+      const response = await axios.get(
+        `https://api.gosrock.band/v1/users/all?order=ASC&page=${requestPage}&take=10`
+      );
+
+      console.log('포토 조회액션1', response);
+
+      const data = {
+        total: response.data.data.meta.itemCount,
+        currentPage: requestPage,
+        userList: response.data.data.data
+      };
+
+      dispatch({ type: USER_PAGE_SUCCESS, payload: data });
+
+      // 자동으로 피쳐로 넘어가게끔
+      // callback();
+    } catch (e) {
+      //400 ~
+      dispatch({ type: USER_PAGE_ERROR, payload: '조회 실패' });
+    }
+  };

src/state/reducers/index.js

@@ -2,9 +2,11 @@ import { combineReducers } from 'redux';
 import { auth } from './auth';
 import examplePagination from './examplePagination';
 import slackMessage from './slackMessage';
+import usersPage from './usersPage';
 
 export default combineReducers({
   slackMessage: slackMessage,
   auth: auth,
-  examplePagination: examplePagination
+  examplePagination: examplePagination,
+  usersPage: usersPage
 });

src/state/reducers/usersPage.js

@@ -0,0 +1,30 @@
+import {
+  USER_PAGE_PENDING,
+  USER_PAGE_SUCCESS,
+  USER_PAGE_ERROR
+} from '../action-types';
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default function (
+  state = {
+    data: {
+      totalPage: 0,
+      currentPage: 1,
+      userList: []
+    },
+    error: null,
+    pending: false
+  },
+  action
+) {
+  switch (action.type) {
+    case USER_PAGE_PENDING:
+      return { ...state, data: action.payload, error: null, pending: true };
+    case USER_PAGE_SUCCESS:
+      return { ...state, data: action.payload, error: null, pending: false };
+    case USER_PAGE_ERROR:
+      return { ...state, data: [], error: action.payload, pending: false };
+    default:
+      return state;
+  }
+}