Revert "[FE] refactor: 무한스크롤 페이징 관련 api 변경 적용 (#781)"

This reverts commit 9342c22.
woowacourse-teams · Oct 18, 2023 · d73714a · d73714a
1 parent 9342c22
commit d73714a
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 16 deletions.
diff --git a/frontend/src/hooks/queries/product/useInfiniteProductReviewsQuery.ts b/frontend/src/hooks/queries/product/useInfiniteProductReviewsQuery.ts
@@ -6,7 +6,7 @@ import type { ProductReviewResponse } from '@/types/response';
 const fetchProductReviews = async (pageParam: number, productId: number, sort: string) => {
   const res = await productApi.get({
     params: `/${productId}/reviews`,
-    queries: `?sort=${sort}&lastReviewId=${pageParam}`,
+    queries: `?sort=${sort}&page=${pageParam}`,
     credentials: true,
   });
 
@@ -20,8 +20,9 @@ const useInfiniteProductReviewsQuery = (productId: number, sort: string) => {
     ({ pageParam = 0 }) => fetchProductReviews(pageParam, productId, sort),
     {
       getNextPageParam: (prevResponse: ProductReviewResponse) => {
-        const lastCursor = prevResponse.reviews.length ? prevResponse.reviews[prevResponse.reviews.length - 1].id : 0;
-        return prevResponse.hasNext ? lastCursor : undefined;
+        const isLast = prevResponse.page.lastPage;
+        const nextPage = prevResponse.page.requestPage + 1;
+        return isLast ? undefined : nextPage;
       },
     }
   );

diff --git a/frontend/src/hooks/queries/product/useInfiniteProductsQuery.ts b/frontend/src/hooks/queries/product/useInfiniteProductsQuery.ts
@@ -6,7 +6,7 @@ import type { CategoryProductResponse } from '@/types/response';
 const fetchProducts = async (pageParam: number, categoryId: number, sort = 'reviewCount,desc') => {
   const res = await categoryApi.get({
     params: `/${categoryId}/products`,
-    queries: `?lastProductId=${pageParam}&sort=${sort}`,
+    queries: `?page=${pageParam}&sort=${sort}`,
   });
 
   const data: CategoryProductResponse = await res.json();
@@ -19,10 +19,9 @@ const useInfiniteProductsQuery = (categoryId: number, sort = 'reviewCount,desc')
     ({ pageParam = 0 }) => fetchProducts(pageParam, categoryId, sort),
     {
       getNextPageParam: (prevResponse: CategoryProductResponse) => {
-        const lastCursor = prevResponse.products.length
-          ? prevResponse.products[prevResponse.products.length - 1].id
-          : 0;
-        return prevResponse.hasNext ? lastCursor : undefined;
+        const isLast = prevResponse.page.lastPage;
+        const nextPage = prevResponse.page.requestPage + 1;
+        return isLast ? undefined : nextPage;
       },
     }
   );

diff --git a/frontend/src/mocks/data/pbProducts.json b/frontend/src/mocks/data/pbProducts.json
@@ -1,5 +1,12 @@
 {
-  "hasNext": false,
+  "page": {
+    "totalDataCount": 99,
+    "totalPages": 10,
+    "firstPage": true,
+    "lastPage": false,
+    "requestPage": 1,
+    "requestSize": 10
+  },
   "products": [
     {
       "id": 11,

diff --git a/frontend/src/mocks/data/products.json b/frontend/src/mocks/data/products.json
@@ -1,5 +1,12 @@
 {
-  "hasNext": false,
+  "page": {
+    "totalDataCount": 99,
+    "totalPages": 10,
+    "firstPage": true,
+    "lastPage": false,
+    "requestPage": 1,
+    "requestSize": 10
+  },
   "products": [
     {
       "id": 1,

diff --git a/frontend/src/mocks/data/reviews.json b/frontend/src/mocks/data/reviews.json
@@ -1,5 +1,12 @@
 {
-  "hasNext": false,
+  "page": {
+    "totalDataCount": 99,
+    "totalPages": 10,
+    "firstPage": true,
+    "lastPage": false,
+    "requestPage": 1,
+    "requestSize": 10
+  },
   "reviews": [
     {
       "id": 1,

diff --git a/frontend/src/mocks/handlers/productHandlers.ts b/frontend/src/mocks/handlers/productHandlers.ts
@@ -25,6 +25,7 @@ export const productHandlers = [
   rest.get('/api/categories/:categoryId/products', (req, res, ctx) => {
     const sortOptions = req.url.searchParams.get('sort');
     const categoryId = req.params.categoryId;
+    const page = Number(req.url.searchParams.get('page'));
 
     if (sortOptions === null) {
       return res(ctx.status(400));
@@ -36,7 +37,7 @@ export const productHandlers = [
 
     let products = commonProducts;
 
-    if (Number(categoryId) >= 6 && Number(categoryId) <= 9) {
+    if (Number(categoryId) >= 7 && Number(categoryId) <= 9) {
       products = pbProducts;
     }
 
@@ -52,7 +53,11 @@ export const productHandlers = [
         sortOrder === 'asc' ? cur[key] - next[key] : next[key] - cur[key]
       ),
     };
-    return res(ctx.status(200), ctx.json(sortedProducts), ctx.delay(500));
+    return res(
+      ctx.status(200),
+      ctx.json({ page: sortedProducts.page, products: products.products.slice(page * 10, (page + 1) * 10) }),
+      ctx.delay(500)
+    );
   }),
 
   rest.get('/api/products/:productId', (req, res, ctx) => {

diff --git a/frontend/src/mocks/handlers/reviewHandlers.ts b/frontend/src/mocks/handlers/reviewHandlers.ts
@@ -42,7 +42,7 @@ export const reviewHandlers = [
 
     return res(
       ctx.status(200),
-      ctx.json({ hasNext: sortedReviews.hasNext, reviews: sortedReviews.reviews }),
+      ctx.json({ page: sortedReviews.page, reviews: sortedReviews.reviews }),
       ctx.delay(1000)
     );
   }),

diff --git a/frontend/src/types/response.ts b/frontend/src/types/response.ts
@@ -14,11 +14,11 @@ export interface Page {
 }
 
 export interface CategoryProductResponse {
-  hasNext: boolean;
+  page: Page;
   products: Product[];
 }
 export interface ProductReviewResponse {
-  hasNext: boolean;
+  page: Page;
   reviews: Review[];
 }