[React] 페이징 (5페이지씩)

Pagination

• 이전 페이징 처리는 제한없이 데이터에따라 페이지매김 수가 계속 생김
  -> 처음으로 가는 버튼과 마지막으로 가는 버튼이 없어서 추가 수정
  -> 5페이지씩 보여지게 수정

import React from 'react';

// 총 항목수, 페이지당 데이터 수 , 현재 페이지번호, 현재 페이지번호 변경
function Pagination({ total, limit, page, setPage }) {
    // 총 페이지 수 계산
    const totalPages = Math.ceil(total / limit);
    
    // 이전 버튼 
    const handlePrevPage = () => {
      setPage((prevPage) => (prevPage === 1 ? prevPage : prevPage - 1));
    };
  
    // 다음 버튼
    const handleNextPage = () => {
      setPage((prevPage) => Math.min(prevPage + 1, totalPages));
    };
    
    // 페이지매김 이동 버튼
    const handlePageClick = (pageNumber) => {
      setPage(pageNumber);
    };

    // 처음으로 이동 버튼
    const handleFirstPage = () => {
      setPage(1);
    };
  
    // 마지막으로 이동 버튼
    const handleLastPage = () => {
      setPage(totalPages);
    };
  
    // 한 화면에 표시할 페이지 수
    const displayPageNum = 5;
    let startPage;
  
    if (page <= displayPageNum) {
      startPage = 1;
      
      // 페이지가 8번에 있을 경우 첫 페이지는 6이되도록 startPage 설정
    } else if (page >= totalPages - ((totalPages - 1) % displayPageNum)) {
    
      startPage = totalPages - ((totalPages - 1) % displayPageNum);
      
    } else {
      startPage = Math.floor((page - 1) / displayPageNum) * displayPageNum + 1;
    }

    return (
        <div className="pagination">
          <ul className="pagination">
            <li className="page-item">
              <button
                className="page-link"
                onClick={handleFirstPage}
                disabled={page === 1}
              >
                &laquo;
              </button>
          </li>

            <li className="page-item">
              <button
                className="page-link"
                onClick={handlePrevPage}
                disabled={page === 1}
              >
                &lsaquo;
              </button>
            </li>

            {Array.from({ length: Math.min(displayPageNum, totalPages - startPage + 1) }).map((_, i) => (
              <li
                key={startPage + i}
                className={`page-item ${page === startPage + i ? 'active' : ''}`}
              >
                <button
                  className="page-link"
                  onClick={() => handlePageClick(startPage + i)}
                  aria-current={page === startPage + i ? 'page' : null}
                >
                  {startPage + i}
                </button>
              </li>
            ))}

            <li className="page-item">
              <button
                className="page-link"
                onClick={handleNextPage}
                disabled={page === totalPages}
              >
                &rsaquo;
              </button>
            </li>

            <li className="page-item">
              <button
                className="page-link"
                onClick={handleLastPage}
                disabled={page === totalPages}
              >
                &raquo;
              </button>
            </li>

          </ul>
        </div>
      
    )
}

export default Pagination;