React 페이지네이션

항상 mui 사용해서 페이지네이션을 쉽게 구현했지만 연습삼하 페이지네이션을 제작하였다.

이런 형식으로 작은 화살표는 한번 누르면 5개씩 이동 되고 큰 화살표는 맨 끝과 맻 처음으로 이동 시킨다.
기존 1 2, 3, ... 30 이런식의 페이지네이션을 구현했었는데 ... 을 누르면 4 가 보이고 5가 보이는것이 사용성이 불편하다고 느껴 5개씩 이동할 수 있게 구현을 하였다.

<PageNationWrap>
      <button onClick={handleFirst} disabled={pageGroup === 1}>
        <svg
          xmlns='http://www.w3.org/2000/svg'
          width='17'
          height='16'
          viewBox='0 0 17 16'
          fill='none'
        >
          <path
            d='M12.5 11.3332L9.16667 7.99984L12.5 4.6665M7.83333 11.3332L4.5 7.99984L7.83333 4.6665'
            stroke='#F5F5F6'
            stroke-width='1.67'
            stroke-linecap='round'
            stroke-linejoin='round'
          />
        </svg>
      </button>
      <button onClick={handlePrevious} disabled={pageGroup === 1}>
        <svg
          xmlns='http://www.w3.org/2000/svg'
          width='15'
          height='14'
          viewBox='0 0 15 14'
          fill='none'
        >
          <path
            d='M9.25 10.5L5.75 7L9.25 3.5'
            stroke='#F5F5F6'
            stroke-width='1.67'
            stroke-linecap='round'
            stroke-linejoin='round'
          />
        </svg>
      </button>
      <div className='list_wrap'>
        {[...Array(endPage - startPage + 1)].map((_, idx) => {
          const page = startPage + idx;
          return (
            <button
              key={page}
              onClick={() => handleClick(page)}
              className={currentPage === page ? "bold" : "normal"}
              //   style={{ fontWeight: currentPage === page ? "bold" : "normal" }}
            >
              {page}
            </button>
          );
        })}
      </div>

      <button onClick={handleNext} disabled={endPage === totalPages}>
        <svg
          xmlns='http://www.w3.org/2000/svg'
          width='15'
          height='14'
          viewBox='0 0 15 14'
          fill='none'
        >
          <path
            d='M5.75 10.5L9.25 7L5.75 3.5'
            stroke='#F5F5F6'
            stroke-width='1.67'
            stroke-linecap='round'
            stroke-linejoin='round'
          />
        </svg>
      </button>

      <button onClick={handleLast} disabled={endPage === totalPages}>
        <svg
          xmlns='http://www.w3.org/2000/svg'
          width='17'
          height='16'
          viewBox='0 0 17 16'
          fill='none'
        >
          <path
            d='M4.5 11.3332L7.83333 7.99984L4.5 4.6665M9.16667 11.3332L12.5 7.99984L9.16667 4.6665'
            stroke='#F5F5F6'
            stroke-width='1.67'
            stroke-linecap='round'
            stroke-linejoin='round'
          />
        </svg>
      </button>
    </PageNationWrap>

이런식으로 구현 하였다.