[FE] refactor: 무한스크롤 페이징 관련 api 변경 적용

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;
       },
     }
   );

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

frontend/src/mocks/data/pbProducts.json

@@ -1,12 +1,5 @@
 {
-  "page": {
-    "totalDataCount": 99,
-    "totalPages": 10,
-    "firstPage": true,
-    "lastPage": false,
-    "requestPage": 1,
-    "requestSize": 10
-  },
+  "hasNext": false,
   "products": [
     {
       "id": 11,

frontend/src/mocks/data/products.json

@@ -1,12 +1,5 @@
 {
-  "page": {
-    "totalDataCount": 99,
-    "totalPages": 10,
-    "firstPage": true,
-    "lastPage": false,
-    "requestPage": 1,
-    "requestSize": 10
-  },
+  "hasNext": false,
   "products": [
     {
       "id": 1,

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,

frontend/src/mocks/handlers/productHandlers.ts

@@ -25,7 +25,6 @@ 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));
@@ -37,7 +36,7 @@ export const productHandlers = [
 
     let products = commonProducts;
 
-    if (Number(categoryId) >= 7 && Number(categoryId) <= 9) {
+    if (Number(categoryId) >= 6 && Number(categoryId) <= 9) {
       products = pbProducts;
     }
 
@@ -53,11 +52,7 @@ export const productHandlers = [
         sortOrder === 'asc' ? cur[key] - next[key] : next[key] - cur[key]
       ),
     };
-    return res(
-      ctx.status(200),
-      ctx.json({ page: sortedProducts.page, products: products.products.slice(page * 10, (page + 1) * 10) }),
-      ctx.delay(500)
-    );
+    return res(ctx.status(200), ctx.json(sortedProducts), ctx.delay(500));
   }),
 
   rest.get('/api/products/:productId', (req, res, ctx) => {

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)
     );
   }),

frontend/src/types/response.ts

@@ -14,11 +14,11 @@ export interface Page {
 }
 
 export interface CategoryProductResponse {
-  page: Page;
+  hasNext: boolean;
   products: Product[];
 }
 export interface ProductReviewResponse {
-  page: Page;
+  hasNext: boolean;
   reviews: Review[];
 }