목차

해야 하는 작업

<aside>

(80% 정도는 마이 갤러리와 같고, 추가된 부분만 적음)

• 필터 2개 추가 </aside>

api 소환

export async function getMyCardsOnSale(query) {
  const params = new URLSearchParams();

  // refactor: 객체 구조로 받게 함
  const cleaned = { ...query, withCounts: true }; // 쿼리를 그대로 넣되, mobile 크기일 때는 count를 넣음

  Object.entries(cleaned).forEach(([key, value]) => {
    if (value && value !== 0 && value !== "") {
      params.set(key, String(value));
    }
  });

  // 반환
  const queryString = params.toString();
  return await cookieFetch(
    `/api/users/cards-on-sale${queryString && `?${queryString}`}`
  );
}

useMySales

// my gallery 만들 때 썼던 것과 98% 같고, 필터 넣을 것만 두 개 추가됨

export default function useMySales() {
  // ✅ hook 가져옴
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();

  // ✅ 쿼리 부분 가져옴
  const { grade, genre, keyword, page, size, saleType, sale } =
    parseParams(searchParams); // 추가된 필터: saleType, sale

  // ☑️ 데이터 가져오기
  const { data, isPending, isError, error } = useQuery({
    queryKey: ["mysales_v2", { grade, genre, keyword, saleType, sale, page, size }],
    queryFn: () =>
      getMyCardsOnSale({ grade, genre, keyword, saleType, sale, page, size,}),
  });

  // ☑️ 카드 개수 가져오기 (전체 + 등급별)
  const { data: count } = useQuery({
    queryKey: ["countedCards"],
    queryFn: getCardsCount,
  });

  // ✅ 필터 변경 함수
  const onFilterChange = (type, value) => {
    const params = new URLSearchParams(searchParams.toString());

    // 전체 선택 시 필터 제거
    value === 0 ? params.delete(type) : params.set(type, value.toString());
    params.set("page", "1"); // 페이지 1로 초기화

    router.replace(`${pathname}?${params.toString()}`);
  };

  // ✅ 페이지 변경 함수
  const onPageChange = (newPage) => {
    const params = new URLSearchParams(searchParams.toString());
    params.set("page", String(newPage));
    router.push(`${pathname}?${params.toString()}`);
  };

  return { ... };
}