🐛 Fix: Pagenation 패치 코드 추가

- new file: src/Components/PatchedPagination.js
- 참고 링크 : mbrn/material-table#2937 (comment)

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
     "antd": "^4.16.13",
     "axios": "^0.24.0",
     "immer": "^9.0.6",

src/Assets/tableIcons.js

@@ -0,0 +1,45 @@
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/display-name */
+import React, { forwardRef } from 'react';
+
+import AddBox from '@material-ui/icons/AddBox';
+import ArrowDownward from '@material-ui/icons/ArrowDownward';
+import Check from '@material-ui/icons/Check';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import Clear from '@material-ui/icons/Clear';
+import DeleteOutline from '@material-ui/icons/DeleteOutline';
+import Edit from '@material-ui/icons/Edit';
+import FilterList from '@material-ui/icons/FilterList';
+import FirstPage from '@material-ui/icons/FirstPage';
+import LastPage from '@material-ui/icons/LastPage';
+import Remove from '@material-ui/icons/Remove';
+import SaveAlt from '@material-ui/icons/SaveAlt';
+import Search from '@material-ui/icons/Search';
+import ViewColumn from '@material-ui/icons/ViewColumn';
+
+const tableIcons = {
+  Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
+  Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
+  Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
+  Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
+  DetailPanel: forwardRef((props, ref) => (
+    <ChevronRight {...props} ref={ref} />
+  )),
+  Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
+  Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
+  Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
+  FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
+  LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
+  NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
+  PreviousPage: forwardRef((props, ref) => (
+    <ChevronLeft {...props} ref={ref} />
+  )),
+  ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
+  Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
+  SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
+  ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
+  ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />),
+};
+
+export default tableIcons;

src/Components/Nav.js

@@ -4,19 +4,20 @@ import { withRouter } from 'react-router-dom';
 import { Layout, Menu } from 'antd';
 
 const { Header } = Layout;
-const menuList = {
+const sitemap = {
   HOME: '/home',
   BEERs: '/beerlist',
   CART: '/cart',
 };
 
+// withRouter를 이용해 라우터 호출이 아닌 컴포넌트도 history 객체에 접근하도록 설정
 const Nav = ({ history }) => {
   const { pathname } = history.location;
 
   return (
     <Header>
       <Menu theme="dark" mode="horizontal" selectedKeys={pathname}>
-        {Object.entries(menuList).map(([menuName, path]) => (
+        {Object.entries(sitemap).map(([menuName, path]) => (
           <Menu.Item
             key={path}
             onClick={() => {

src/Components/PatchedPagination.js

@@ -0,0 +1,34 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { TablePagination } from '@material-ui/core';
+
+function PatchedPagination(props) {
+  const {
+    ActionsComponent,
+    onChangePage,
+    onChangeRowsPerPage,
+    ...tablePaginationProps
+  } = props;
+
+  return (
+    <TablePagination
+      {...tablePaginationProps}
+      // @ts-expect-error onChangePage was renamed to onPageChange
+      onPageChange={onChangePage}
+      onRowsPerPageChange={onChangeRowsPerPage}
+      ActionsComponent={subprops => {
+        const { onPageChange, ...actionsComponentProps } = subprops;
+        return (
+          // @ts-expect-error ActionsComponent is provided by material-table
+          <ActionsComponent
+            {...actionsComponentProps}
+            onChangePage={onPageChange}
+          />
+        );
+      }}
+    />
+  );
+}
+
+export default PatchedPagination;

src/Pages/BeerList.js

@@ -1,8 +1,43 @@
 import React from 'react';
+import MaterialTable from 'material-table';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
+import tableIcons from '../Assets/tableIcons';
+import PatchedPagination from '../Components/PatchedPagination';
 
 const BeerList = () => {
-  return <h1>Beer List</h1>;
+  const beerList = useSelector(state => state.beerListReducer);
+  console.log(beerList);
+
+  return (
+    <div style={{ maxWidth: '100%' }}>
+      <MaterialTable
+        components={{
+          Pagination: PatchedPagination,
+        }}
+        columns={[
+          { title: 'Adı', field: 'name' },
+          { title: 'Soyadı', field: 'surname' },
+          { title: 'Doğum Yılı', field: 'birthYear', type: 'numeric' },
+          {
+            title: 'Doğum Yeri',
+            field: 'birthCity',
+            lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
+          },
+        ]}
+        data={[
+          {
+            name: 'Mehmet',
+            surname: 'Baran',
+            birthYear: 1987,
+            birthCity: 63,
+          },
+        ]}
+        title="Demo Title"
+        icons={tableIcons}
+      />
+    </div>
+  );
 };
 
 export default BeerList;

src/Pages/Home.js

@@ -2,15 +2,15 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import styled, { css } from 'styled-components/macro';
-import bearIcon from '../Assets/icons8-beer-glass-96.png';
+import bearIcon from '../Assets/beerIcon.png';
 
 const Home = ({ history }) => {
-  const beerList = useSelector(s => s.beerListReducer);
+  const beerList = useSelector(state => state.beerListReducer);
 
   return (
     <S.Container>
       <h1>
-        저장된 맥주 정보 <span>{`${beerList.data?.length ?? 0}개`}</span>
+        저장된 맥주 정보 <span>{`${beerList.data?.length ?? 88}개`}</span>
       </h1>
       <button type="button" onClick={() => history.push('/beerlist')}>
         <h2>맥주 리스트 보러가기</h2>