fix : 상품 로드 개수 문제 해결(첫페이지는 20개의 상품을, 다음페이지부터는 4개의 상품을 불러오도록)

src/constants/page.ts

@@ -1,6 +1,8 @@
 export const PAGE = {
-  FIRST_PAGE: 1,
+  FIRST_PAGE: 0,
   FIRST_PAGE_LIMIT: 20,
+  SECOND_PAGE_STD: 5,
+  NEXT_PAGE_STEP: 1,
   OTHER_PAGE_LIMIT: 4,
   FIRST_PAGE_START: 0,
   OTHER_PAGE_START: 2,

src/hooks/useProducts.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { PRODUCTS_ENDPOINT } from "../api/endpoints";
 import { PAGE } from "../constants";
 import { useError } from "../context/errorContext";
@@ -27,7 +27,7 @@ export default function useProducts(): UseProductsResult {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<Error | null>(null);
   const { setErrorStatus } = useError();
-  const [page, setPage] = useState<number>(1);
+  const [page, setPage] = useState<number>(PAGE.FIRST_PAGE);
   const [isLastPage, setIsLastPage] = useState<boolean>(false);
   const [sortOption, setSortOption] = useState<string>("price,asc");
   const [category, setCategory] = useState<string>("전체");
@@ -49,7 +49,7 @@ export default function useProducts(): UseProductsResult {
       const data = await response.json();
 
       setProducts((prevProducts) =>
-        page === 1 ? data.content : [...prevProducts, ...data.content]
+        page === PAGE.FIRST_PAGE ? data.content : [...prevProducts, ...data.content]
       );
 
       setIsLastPage(data.last);
@@ -64,13 +64,17 @@ export default function useProducts(): UseProductsResult {
     fetchProducts();
   }, [setErrorStatus, page, sortOption, category]);
 
-  const fetchNextPage = () => {
-    if (!isLastPage && !isLoading) setPage((prevPage) => prevPage + 1);
-  };
+  const fetchNextPage = useCallback(() => {
+    if (!isLastPage && !isLoading) {
+      page == PAGE.FIRST_PAGE
+        ? setPage(PAGE.SECOND_PAGE_STD)
+        : setPage((prevPage) => prevPage + PAGE.NEXT_PAGE_STEP);
+    }
+  }, [isLastPage, isLoading]);
 
   const resetPage = () => {
     setProducts([]);
-    setPage(1);
+    setPage(PAGE.FIRST_PAGE);
     setIsLastPage(false);
   };
 

src/mocks/handlers.ts

@@ -7,16 +7,26 @@ export const handlers = [
   http.get(PRODUCTS_ENDPOINT, ({ request }) => {
     const url = new URL(request.url);
 
-    const page = Number(url.searchParams.get("page") || "1");
-    const limit = page === PAGE.FIRST_PAGE ? PAGE.FIRST_PAGE_LIMIT : PAGE.OTHER_PAGE_LIMIT;
+    const page = Number(url.searchParams.get("page") || "0");
+    const size = page === PAGE.FIRST_PAGE ? PAGE.FIRST_PAGE_LIMIT : PAGE.OTHER_PAGE_LIMIT;
+    const category = url.searchParams.get("category");
+
+    let filteredProducts = products.content;
+
+    if (category && category !== "전체") {
+      filteredProducts = filteredProducts.filter((product) => product.category === category);
+    }
+
     const start =
       page === PAGE.FIRST_PAGE
         ? PAGE.FIRST_PAGE_START
-        : (page - PAGE.OTHER_PAGE_START) * PAGE.OTHER_PAGE_LIMIT + PAGE.FIRST_PAGE_LIMIT;
-    const end = start + limit;
-
-    const paginatedProducts = products.content.slice(start, end);
+        : PAGE.FIRST_PAGE_LIMIT + (page - 2) * PAGE.OTHER_PAGE_LIMIT;
+    const end = start + size;
+    const paginatedProducts = filteredProducts.slice(start, end);
 
-    return HttpResponse.json({ content: paginatedProducts });
+    return HttpResponse.json({
+      content: paginatedProducts,
+      last: end >= filteredProducts.length,
+    });
   }),
 ];