Pagination 구현 - cargo4u

Cargo4u-web / src / components / paginationNumberic

import React, { useEffect, useState } from 'react';

function PaginationNumeric({countItems, currentPage, childNumber}) {
console.log('countItems', countItems) // 총 아이템 갯수
const totalPage = Math.ceil(countItems / 30) // 30개로 나눔-서버랑 숫자가 같아야함
console.log('totalPages--->', totalPage)
const totalPagePack = Math.ceil(totalPage / 10) // 10개씩 페이지 묶음
const [pages, setPages] = useState([[1]]) // 기본값
console.log("pages--->", pages)
const [currentPages, setCurrentPages] = useState(1) // 기본값
const [currentPagesPack, setCurrentPagesPack] = useState(1) // 기본값

useEffect(()=>{
const init = () => {
const arr = []
const array = Array.from({length: totalPage}, (_, index) => index + 1);
for (let i = 0; i < array.length; i += 10) {
arr.push(array.slice(i, i + 10));
}
console.log('array;, array', array)
setPages([array])
}
init();
},[totalPage]) // totalPage가 렌더링을 제일 늦게되어 반응이 안되었음. 추가하여 문제해결.

const pageNumberClick = (data)=> { // 부모로 currentPage 넘버를 넘겨주는 함수
childNumber(data)
setCurrentPages(data)
}

const onNextPageClick =() => { setCurrentPages(currentPages + 1); pageNumberClick(currentPages + 1) }
const onPrevPageClick =()=> { setCurrentPages(currentPages - 1); pageNumberClick(currentPages - 1) }

return (

<div className="flex justify-center">

    <div className='w-1/3  text-right'>
        {(currentPages >= 2) &&
          <div className="mr-2">
            <div onClick={onPrevPageClick} href="#0" className="inline-flex items-center justify-center rounded leading-5 px-2.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white shadow-sm">
              <span className="sr-only">Next</span><wbr />
              <svg className="h-4 w-4 fill-current" viewBox="0 0 16 16">
                <path d="M9.4 13.4l1.4-1.4-4-4 4-4-1.4-1.4L4 8z" />
              </svg>
            </div>
          </div>
        }
    </div>  

    <div>

      <ul className="inline-flex text-sm font-medium -space-x-px shadow-sm">
      {currentPagesPack >= 2 && 
            <li  className=''>
            <button onClick={()=>setCurrentPagesPack(prev=>prev-1)}>
            <span className={`inline-flex items-center justify-center rounded-l leading-5 px-3.5 py-2 bg-white border border-slate-200 ${currentPages == 11 ? "text-indigo-500 font-bold text-sm" : "text-indigo-300" }  `}>...</span>
            </button>
          </li>    
        }


        { pages[currentPagesPack-1]?.map((x, i)=>{
          return(
            <li key={i} className=''>
              <button onClick={()=>pageNumberClick(x)}>
              <span className={`inline-flex items-center justify-center rounded-l leading-5 px-3.5 py-2 bg-white border border-slate-200 ${currentPages == x ? "text-indigo-500 font-bold text-sm" : "text-indigo-300" }  `}>{x}</span>
              </button>
            </li>    
          )
        })}     

        { currentPagesPack < totalPagePack && 
            <li  >
            <button onClick={()=>setCurrentPagesPack(prev=>prev+1)}>
              <span className={`inline-flex items-center justify-center rounded-l leading-5 px-3.5 py-2 bg-white border border-slate-200 ${currentPages == 11 ? "text-indigo-500 font-bold text-sm" : "text-indigo-300" }  `}>...</span>
            </button>
          </li>    
        }
      </ul>
    </div> 
  


  <div className='w-1/3 '>
        {(currentPages < totalPage) && 
        <div className="ml-2">
        <div onClick={onNextPageClick} href="#0" className="inline-flex items-center justify-center rounded leading-5 px-2.5 py-2 bg-white hover:bg-indigo-500 border border-slate-200 text-slate-600 hover:text-white shadow-sm">
          <span className="sr-only">Next</span><wbr />
          <svg className="h-4 w-4 fill-current" viewBox="0 0 16 16">
            <path d="M6.6 13.4L5.2 12l4-4-4-4 1.4-1.4L12 8z" />
          </svg>
        </div>
      </div>
        }
    </div>
</div>

);
}

export default PaginationNumeric;