From 01efbfac5269c8d83b53aca6de7f2c19184ce688 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Wed, 5 Jun 2024 13:08:48 +0900
Subject: [PATCH] =?UTF-8?q?fix=20:=20=EC=83=81=ED=92=88=20=EB=A1=9C?=
 =?UTF-8?q?=EB=93=9C=20=EA=B0=9C=EC=88=98=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0(=EC=B2=AB=ED=8E=98=EC=9D=B4=EC=A7=80=EB=8A=94=2020?=
 =?UTF-8?q?=EA=B0=9C=EC=9D=98=20=EC=83=81=ED=92=88=EC=9D=84,=20=EB=8B=A4?=
 =?UTF-8?q?=EC=9D=8C=ED=8E=98=EC=9D=B4=EC=A7=80=EB=B6=80=ED=84=B0=EB=8A=94?=
 =?UTF-8?q?=204=EA=B0=9C=EC=9D=98=20=EC=83=81=ED=92=88=EC=9D=84=20?=
 =?UTF-8?q?=EB=B6=88=EB=9F=AC=EC=98=A4=EB=8F=84=EB=A1=9D)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/constants/page.ts    |  4 +++-
 src/hooks/useProducts.ts | 18 +++++++++++-------
 src/mocks/handlers.ts    | 24 +++++++++++++++++-------
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/constants/page.ts b/src/constants/page.ts
index 530ce5806..0f5b27f88 100644
--- a/src/constants/page.ts
+++ b/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,
diff --git a/src/hooks/useProducts.ts b/src/hooks/useProducts.ts
index b91092198..93f1e530a 100644
--- a/src/hooks/useProducts.ts
+++ b/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);
   };
 
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 83e3cc58e..c98ea0097 100644
--- a/src/mocks/handlers.ts
+++ b/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,
+    });
   }),
 ];