[myCart] 페이지네이션

ProductsList.jsx

 

파라미터에서 page가져와서 useData에 파라미터로 추가한다., 

const ProductsList = () => {

  //sidebar에서 카테고리 쿼리스트링을 받아온다.

  const [search, setSearch] = useSearchParams();

  const category = search.get("category"); //모든 쿼리스트링 중 카테고리

  const page = search.get("page");

  //useDate(url)이 들어가야함

  //결과(res)는 categories와, error에 담는다.

  const { data, error, isLoading } = useData(

    "/products",

    {

      params: {

        category, //카테고리 파라미터 전달

        page, //페이지 추가(페이지네이션 사용)

      },

    },

    [category, page]

  );

 

 

 

  //페이지 변경(페이지 값이 들어오면 )

  const handlePageChange = (page) => {

    const currentParams = Object.fromEntries([...search]);

    setSearch({ ...currentParams, page: page });

  };

 

제일 아래에 버튼을 추가해서 2페이지로 가는지 테스트한다. 

       <button onClick={() => handlePageChange(2)}>페이지 2</button>

      </div>

    </section>

 

 

 

 

 

위에 페이지 버튼은 테스트를 해본거고 

 

페이지네이션은 재사용할 수 있도록 컴포넌트로 만들어서 관리한다. 

 

 

Pagination.jsx

import "./Pagination.css";

// 전체아이템개수 ,한페이지표시아이템수, 클릭함수, 현재페이지

const Pagination = ({ total, perPage, onClick, currentPage }) => {

  let pages = [];

  for (let i = 1; i <= Math.ceil(total / perPage); i++) {

    pages.push(i); //페이지수만큼 배열에 숫자를 입력한다.

  }

  //현재 페이지가 없을 경우 첫페이지 1이다.

  currentPage = currentPage ? currentPage : 1;

  return (

    <>

      {pages.length > 1 && (

        <ul className="pagination">

          {pages.map((page) => (

            <li key={page}>

              <button

                className={

                  parseInt(currentPage) === page

                    ? "pagination_button active"

                    : "pagination_button"

                }

                onClick={() => onClick(page)}

              >

                {page}

              </button>

            </li>

          ))}

        </ul>

      )}

    </>

  );

};

export default Pagination;

 

Pagination.css

.pagination {

  list-style: none;

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  margin: 16px;

}

.pagination_button {

  width: 40px;

  height: 40px;

  margin: 0 10px;

  font-size: 16px;

  font-weight: 600;

  border: 1px solid #e5e5e5;

  border-radius: 6px;

  background-color: #fff;

  color: #000;

  cursor: pointer;

  transition: all 0.2s ease-in-out;

}

.pagination_button.active {

  background-color: #000;

  color: #fff;

}

 

 

ProductsList.jsx에 아까 테스트로 2페이지 넣었던 버튼을 지우고 아래의 코드를 추가한다.

      </div>

        {data && (

          <Pagination

            total={data.totalProducts}

            perPage={8}

            onClick={handlePageChange}

            currentPage={page}

          />

        )}

    </section>