13주차 WIL

설날로 인해 다소 몰입하지 못한 한주였다. 하지만 나머지 3일은 물론 열심히 프로젝트에 대한 생각과 작업을 진행했다. 그리고 

import { useEffect, useState } from 'react';
import styled from 'styled-components';

function Pagination(props: any) {
  const { total, page, setPage } = props;
  const [currPage, setCurrPage] = useState(page);

  // 페이지 리스트의 첫번째
  let firstNum = currPage - (currPage % 5) + 1;
  // 페이지 리스트의 마지막
  let lastNum = currPage - (currPage % 5) + 5;

  // 전체 페이지
  const numPages = Math.ceil(total / 18);
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  return (
    <>
      <Nav>
        <Button
          onClick={() => {
            setPage(page - 1);
            setCurrPage(page - 2);
          }}
          disabled={page === 1}
        >
          &lt;
        </Button>

        <Button onClick={() => setPage(firstNum)} aria-current={'page'}>
          {firstNum}
        </Button>

        {/* 첫번째, 마지막 페이지 사이의 페이지 */}
        {Array.from({ length: 4 }, (_, i) => i + 1).map((_, i) => {
          if (i <= 2) {
            return (
              <Button
                key={i + 1}
                onClick={() => {
                  setPage(firstNum + 1 + i);
                }}
                aria-current={'page'}
              >
                {firstNum + 1 + i}
              </Button>
            );
          } else if (i >= 3) {
            return (
              <Button
                key={i + 1}
                onClick={() => setPage(lastNum)}
                aria-current={'page'}
              >
                {lastNum}
              </Button>
            );
          }
        })}

        <Button
          onClick={() => {
            setPage(page + 1);
            setCurrPage(page);
          }}
          disabled={page === numPages}
        >
          &gt;
        </Button>
      </Nav>
    </>
  );
}

const Nav = styled.nav`
  display: flex;
  justify-content: center;
  align-items: center;
  & > button {
    margin: 0 4px;
  }
  margin: 16px;
`;

const Button = styled.button`
  border: none;
  border-radius: 8px;
  padding: 8px;
  margin: 0;
  background: black;
  color: white;
  font-size: 1rem;

  &:hover {
    background: tomato;
    cursor: pointer;
    transform: translateY(-2px);
  }

  &[disabled] {
    background: grey;
    cursor: revert;
    transform: revert;
  }

  &[aria-current] {
    font-weight: bold;
    cursor: pointer;
    transform: revert;
  }
`;

export default Pagination;

 

위와 같은 페이지네이션 컴포넌트를 만들어서, 페이지를 이동하는 작업을 진행했다. 하지만 다소 아쉬운부분은 typescript라서 그런지 aria-current 속성과 border속성이 제대로 먹히지 않았다. 이부분이 제일 아쉬웠고 언젠가는 제대로 구현해보고 싶다. 또한 다음 프로젝트가 최종 마지막 프로젝트인 만큼 지금이 가장 느슨해 있을 때이다. 정신 바짝 차리고 열심히 하지 않으면 안될것이다 ㅎㅎ