Nest.js + React.js (Next.js) 사이드 프로젝트 : 페이징 구현하기 (2)

 

왼쪽 / 오른쪽을 1페이지씩 이동시키는 페이징의 기본 버튼은 반드시 -1 , +1로 이동한다. 이전에 만들어놓은 handlePageChange 메서드를 동일하게 사용할 생각이다.

 

현재 페이지 이동번호가 필요하고, == 1 일때는 작동하지 않게 하기 위해서 currentPage 값이 1 이라면 비활성화 해야한다.

 

                {/* 이전 페이지 버튼 */}
                <button
                  onClick={() => handlePageChange(currentPage - 1)}
                  disabled={currentPage === 1}
                  className="!px-3 !py-1 text-gray-700 rounded-md disabled:opacity-50"
                >

 

다음페이도 동일하게 로직을 사용하면 된다. 단 이번엔 currentPage가 == totalPages 값과 같을때

 

다음 버튼의 동작을 disable처리한다.

 

{/* 페이지네이션 */}
              <div className="flex space-x-2 !mt-8 !mb-8">
                {/* 이전 페이지 버튼 */}
                <button
                  onClick={() => handlePageChange(currentPage - 1)}
                  disabled={currentPage === 1}
                  className="!px-3 !py-1 text-gray-700 rounded-md disabled:opacity-50"
                >
                  &lt;
                </button>

                {/* 페이지 번호 리스트 */}
                {Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i).map((page) => (
                  <button
                    key={page}
                    onClick={() => handlePageChange(page)}
                    className={`!px-3 !py-1 rounded-md ${page === currentPage ? 'bg-blue-500 text-white' : ' text-gray-700'}`}
                  >
                    {page}
                  </button>
                ))}

                {/* 다음 페이지 버튼 */}
                <button
                  onClick={() => handlePageChange(currentPage + 1)}
                  disabled={currentPage === totalPages}
                  className="!px-3 !py-1 text-gray-700 rounded-md disabled:opacity-50"
                >
                  &gt;
                </button>
              </div>

 

이전 기능들 중에서 추가된 부분은 

 

 

위처럼 전체 페이징 수의 반을 넘겼다면 페이징 전체 수가 이동하는 부분이다.

 

다시말해 이전 코드는 20페이지가 있다면 1 ~ 20이 전부 한번에 보여지는 반면에

 

수정된 코드는 1 ~ 10 까지만 보여지고 그 이후 5 페이지 정도가 넘어간다면 그 이후 페이징이 보이는 방식이다.

 

  {/* 페이지 번호 리스트 */}
                {Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i).map((page) => (

 

위에 코드대로 하면 상단 카테고리를 변경시킬때는 전체페이지수가 적용되지 않는다.

 

카테고리 변환시에도 페이지수를 수정하는 setTotalItems를 카테고리 변경시에도 동작시켜야한다.