refactor: 리뷰, 상품 페이징 변경 적용

woowacourse-teams · Oct 17, 2023 · 547284e · 547284e
1 parent 737d07a
commit 547284e
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 17 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}&page=${pageParam}`,
+    queries: `?sort=${sort}&lastReviewId=${pageParam}`,
     credentials: true,
   });
 
@@ -20,9 +20,8 @@ const useInfiniteProductReviewsQuery = (productId: number, sort: string) => {
     ({ pageParam = 0 }) => fetchProductReviews(pageParam, productId, sort),
     {
       getNextPageParam: (prevResponse: ProductReviewResponse) => {
-        const isLast = prevResponse.page.lastPage;
-        const nextPage = prevResponse.page.requestPage + 1;
-        return isLast ? undefined : nextPage;
+        const lastCursor = prevResponse.reviews.length ? prevResponse.reviews[prevResponse.reviews.length - 1].id : 0;
+        return prevResponse.hasNext ? lastCursor : undefined;
       },
     }
   );

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: `?id=${pageParam}&sort=${sort}`,
+    queries: `?lastProductId=${pageParam}&sort=${sort}`,
   });
 
   const data: CategoryProductResponse = await res.json();
@@ -19,7 +19,9 @@ const useInfiniteProductsQuery = (categoryId: number, sort = 'reviewCount,desc')
     ({ pageParam = 0 }) => fetchProducts(pageParam, categoryId, sort),
     {
       getNextPageParam: (prevResponse: CategoryProductResponse) => {
-        const lastCursor = prevResponse.products[prevResponse.products.length - 1].id;
+        const lastCursor = prevResponse.products.length
+          ? prevResponse.products[prevResponse.products.length - 1].id
+          : 0;
         return prevResponse.hasNext ? lastCursor : undefined;
       },
     }

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

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({ page: sortedReviews.page, reviews: sortedReviews.reviews }),
+      ctx.json({ hasNext: sortedReviews.hasNext, 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: true;
+  hasNext: boolean;
   products: Product[];
 }
 export interface ProductReviewResponse {
-  page: Page;
+  hasNext: boolean;
   reviews: Review[];
 }