material ui - Pagination

인턴때 했던 페이지네이션 코드.

react + material ui + typescript 사용

 

import * as React from "react";
import { useNavigate } from "react-router-dom";
import Pagination from "@mui/material/Pagination";
import Stack from "@mui/material/Stack";
import styled from "styled-components";

export interface PageType {
  page: number;
  setPage: React.Dispatch<React.SetStateAction<number>>;
  totalPage: number;
}

export default function PaginationRounded(props: PageType) {
  const navigate = useNavigate();
  const { page, setPage, totalPage } = props;

  const onPageHandler = (
    event: React.ChangeEvent<unknown>,
    page: number,
  ): void => {
    let input = event.target as HTMLElement;
    setPage(Number(input.innerText));
    console.log(page); // 현재 페이지 출력

    const limit = 10; // 화면에 보여줄 데이터 갯수
    const offset = (page - 1) * limit; // 데이터 시작점

    const queryString = `limit=${limit}&offset=${offset}`;

    navigate(`?${queryString}`);
  };

  return (
    <PagenationCotainer>
      <Stack spacing={2}>
        <Pagination
          onChange={onPageHandler}
          page={page}
          count={totalPage}
          shape="rounded"
          color="primary"
        />
      </Stack>
    </PagenationCotainer>
  );
}

const PagenationCotainer = styled.div`
  display: flex;
  justify-content: center;
  margin: 10px;
`;