코드캠프 14일차

페이지네이션

원래는 1페이지 밖에 보지못했던 게시판을

페이지네이션을 통해 전체 게시물 페이지를 확인하고 현재 페이지의 페이지 넘버 색이 바뀌도록 설정해주었다.
그리고 페이지 목록 양 옆의 화살표를 클릭하면 10페이지씩 넘길수 있도록 했다.

끝까지 넘겼을 때는 마지막 페이지까지만 나오도록 했다.

Container

최초페이지와 현재페이지 마지막 페이지 값을 받기위해 useState를 사용해준다.
마지막 페이지는 한페이지에 10개의 게시물이 들어가기 때문에 게시물 총 개수를 fetchBoardsCount 를 통해 받아 온 후 10으로 나눈 뒤 올림을 해주면 마지막 페이지넘버를 알 수 있다.

  const [current, setCurrent] = useState(1);
  const [startPage, setStartPage] = useState(1);
  const { data: third } = useQuery(FETCH_PAGES, {
    variables: { search: confirmSearch },
  });
  const lastPage = Math.ceil(third?.fetchBoardsCount / 10);

페이지 넘버를 누를 때, 이전 10페이지, 다음 10페이지 클릭함수를 만들어준다.

 const onClickPrevPage = () => {
    if (startPage === 1) return;
    setStartPage((prev) => prev - 10);
    setCurrent(current - 10);
  };

  const onClickNextPage = () => {
    if (startPage + 10 > lastPage) return;
    setStartPage((prev) => prev + 10);
    setCurrent(current + 10);
  };

  const onClickPage = (event: MouseEvent<HTMLElement>) => {
    const target = event.target as HTMLElement;
    refetch({
      page: Number(target.id),
    });
    setCurrent(Number(target.id));
  };

Presenter

페이지 넘버는 일일히 숫자를 써주는 게 아닌 Array, map, index을 통해 10개의 숫자를 만들어 낸다.
id는 현재 페이지를 문자열로 지정한다.
각각 맞는 클릭함수를 넣어준다.

<S.ListFooter>
          <S.PrevArrow onClick={props.onClickPrevPage} />
          {new Array(10).fill(1).map(
            (_, index) =>
              props.startPage + index <= props.lastPage && (
                <S.Pages
                  key={props.startPage + index}
                  onClick={props.onClickPage}
                  id={String(props.startPage + index)}
                  current={props.startPage + index === props.current}
                >
                  {props.startPage + index}
                </S.Pages>
              )
          )}
          <S.NextArrow onClick={props.onClickNextPage} />
        </S.ListFooter>

현재 페이지에 해당하는 페이지 넘버의 색이 변하도록 조건부 렌더링을 통해 지정해준다.

Styles

export const Pages = styled.button`
  width: 40px;
  height: 40px;
  color: ${(props) => (props.current === true ? "white" : "black")};
  border: ${(props) =>
    props.current === true ? "1px solid #8eb695" : "1px solid #fbdea2"};
  border-radius: 5px;
  background-color: ${(props) =>
    props.current === true ? "#8eb695" : "white"};
  :hover {
    color: white;
    background-color: #8eb695;
    border: 1px solid #8eb695;
  }
  cursor: pointer;
`;