pagenation

pagenation

이번 프로젝트에서 마지막날 급하게 만들어낸 페이지인 액티비티 페이지...
여기서 기능은 페이지네이션/필터링된 데이터 각각받아오기였다.
우선 limit을 20을 줘서 각각의 페이지에서 20개의 상품 카드가 나오게 설정하였다

처음에는 const [userOrder, setUserOrder] = useState("created_at");
라는 코드를 통하여 최신순으로 페이지에 상품이 나오도록 디폴트 값을 주었고 각각의 필터창을 선택할때마다 서로다른 쿼리스트링을 보내주기위해 키값인 부분을 설정해주었다

useEffect(() => {
    fetch(
      `http://13.209.17.252:8000/product/list?order=${userOrder}&category=8&offset=0&limit=${LIMIT}`
    )
      .then(res => res.json())
      .then(res => {
        console.log(res);
        setProduct(res.product_list);
        setIsLoading(false);
      });
  }, [userOrder]);

>limit과 offset을 설정하여 페이지 네이션을 구현했고 아래의 코드에서는 각각의 페이지에서 20개씩의 상품카드가 나오게 구현하였다
```js
const fetchBackData = e => {
    const offset = e?.target.dataset.idx;

    fetch(
      `http://13.209.17.252:8000/product/list?order=created_at&category=8&offset=${
        LIMIT * offset
      }&limit=${LIMIT}`
    )
      .then(res => res.json())
      .then(res => {
        setProduct(res.product_list);
        setIsLoading(false);
      });
  };

이렇게 맵을 뿌려주었고 각각의 order에 백엔드에서 필터링된 데이터 키값또한 지정해주었다.

const BUTTON_CONTENT = {
  CONTENT_ARRAY: [
    { category: "인기순", order: "hit_count" },
    { category: "등록일순", order: "created_at" },
    { category: "평점순", order: "star_rating" },
    { category: "가격 높은순", order: "price" },
    { category: "가격 낮은순", order: "-price" },
    { category: "당일 사용 가능한", order: "-sales_rate" },
    { category: "슈퍼 호스트만", order: "five_star_count" },
  ],
};

>마지막으로 아래의 코드를 이용하여 페이지네이션 및 필터링 기능을 구현하였다.

```js
 {PAGENATTION_BTN.map((number, index) => {
              return (
                <button
                  key={index}
                  onClick={fetchBackData}
                  data-idx={number - 1}
                  className="pageNationBtnBox"
                >
                  {number}
                </button>
              );
            })}

          {BUTTON_CONTENT.CONTENT_ARRAY.map((element, index) => {
            return (
              <ModalMainContent>
                <span key={index}>{element.category}</span>
                <input
                  id={index}
                  onClick={filterUserOrder}
                  name={element.order}
                  type="checkbox"
                ></input>
              </ModalMainContent>
            );
          })}