페이지네이션 - last

최저, 최고 페이지 한계 지정하기

최저 페이지 지정하기

최저페이지는 1까지만 출력되면 되므로

const onclickPrevPage = ():void => {
  if(startPage === 1) return;
  setStartPage(startPage - 10)
  void refetch({page: startPage - 10})
}

if문을 사용하여 현재 스타트페이지가 1이면 더 내려가지않고 그냥 return 시킴

최고 페이지 지정하기

최고 페이지를 지정하려면
1. 마지막 페이지를 계산해야함. = 페이지당 10개니까 전체 갯수 /10 나머지 올림
2. 마지막 페이지가 있는 세트에서는 다음페이지 작동 안되게 해야함.
3. 마지막 페이지가 6이면 7~10 페이지도 안보이도록 해보자.

먼저 총 게시글 수를 백엔드에서 받아와서

const COUNT_BOARDS = gql`
    query {
        getBoardsCount
    }
`
const { data, refetch } = useQuery<Pick<IQuery,"getBoards">,IQueryGetBoardsArgs>(FETCH_BOARDS) 

한 페이지에 10개의 게시물이 나오니 총 페이지수는

const lastPage = Math.ceil ((Number(dataBoardsCount?.getBoardsCount )?? 10) / 10 );

이렇게 설정
기존의 페이지목록 생성해주는 Array

{
  new Array(10).fill(1).map((_,index) => (
    <span key={index + startPage} id={String(index + startPage)} onClick={onClickPage}>{index + startPage}</span>
))
}

에서 비어있는 페이지는 만들지 않도록 하려면
index + startPage의 값이 lastPage보다 크면 동작하지 않도록 설정해주면 될것같다

{
  new Array(10).fill(1).map((_,index) => 
      index + startPage <= lastPage &&
      (<span 
        key={index + startPage} 
        id={String(index + startPage)} 
		onClick={onClickPage}>
  		  {index + startPage}
	   </span>)
)}

또한 다음페이지 버튼을 마지막페이지가 있는곳에서는 동작하지 않도록

const onclickNextPage = () :void => {
  if(startPage + 10 > lastPage) return;
  setStartPage(startPage + 10)
  void refetch({page: startPage + 10})
}

if문을 사용해서 lastPage보다 넘어가려하면 return 시켜서 동작하지 안도록 설정