From d73714a229aeaba1e6ff67813921c114b72c2ff5 Mon Sep 17 00:00:00 2001 From: Taeeun Kim Date: Wed, 18 Oct 2023 13:25:18 +0900 Subject: [PATCH] =?UTF-8?q?Revert=20"[FE]=20refactor:=20=EB=AC=B4=ED=95=9C?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=ED=8E=98=EC=9D=B4=EC=A7=95=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20api=20=EB=B3=80=EA=B2=BD=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9=20(#781)"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 9342c2243887ad53de754fd171c82ef64439d5ba. --- .../queries/product/useInfiniteProductReviewsQuery.ts | 7 ++++--- .../hooks/queries/product/useInfiniteProductsQuery.ts | 9 ++++----- frontend/src/mocks/data/pbProducts.json | 9 ++++++++- frontend/src/mocks/data/products.json | 9 ++++++++- frontend/src/mocks/data/reviews.json | 9 ++++++++- frontend/src/mocks/handlers/productHandlers.ts | 9 +++++++-- frontend/src/mocks/handlers/reviewHandlers.ts | 2 +- frontend/src/types/response.ts | 4 ++-- 8 files changed, 42 insertions(+), 16 deletions(-) diff --git a/frontend/src/hooks/queries/product/useInfiniteProductReviewsQuery.ts b/frontend/src/hooks/queries/product/useInfiniteProductReviewsQuery.ts index 8142c77e0..0fb4d604b 100644 --- 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 index 1b9fdd57f..d8b008126 100644 --- 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 index e25f1dc48..12bad382c 100644 --- 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 index e68a13fbf..8d78d4a97 100644 --- 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 index 5f9d129ee..54b9719ce 100644 --- 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 index 32f3feadc..bc230c1fa 100644 --- 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 index 656891e55..5c007c605 100644 --- 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 index bac466ebf..42c21a24d 100644 --- 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[]; }