Merge branch 'develop' into feat/issue-366

frontend/.eslintrc.js

@@ -66,6 +66,10 @@ module.exports = {
             pattern: '@fun-eat/**',
             group: 'external',
           },
+          {
+            pattern: '@tanstack/**',
+            group: 'external',
+          },
           {
             pattern: '@*/**',
             group: 'unknown',

frontend/package.json

@@ -12,6 +12,9 @@
   },
   "dependencies": {
     "@fun-eat/design-system": "^0.3.11",
+    "@tanstack/react-query": "^4.32.6",
+    "@tanstack/react-query-devtools": "^4.32.6",
+    "browser-image-compression": "^2.0.2",
     "dayjs": "^1.11.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

frontend/src/components/Review/ReviewImageUploader/ReviewImageUploader.tsx

@@ -25,7 +25,7 @@ const ReviewImageUploader = ({
       </Heading>
       <Spacing size={2} />
       <Text color={theme.textColors.disabled} tabIndex={0}>
-        (사진은 1MB 이하, 1장까지 업로드 할 수 있어요.)
+        (사진은 5MB 이하, 1장까지 업로드 할 수 있어요.)
       </Text>
       <Spacing size={20} />
       {reviewPreviewImage ? (

frontend/src/components/Review/ReviewList/ReviewList.tsx

@@ -1,11 +1,13 @@
 import { Text, Link } from '@fun-eat/design-system';
+import { useRef } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
 import ReviewItem from '../ReviewItem/ReviewItem';
 
 import { PATH } from '@/constants/path';
-import { useInfiniteProductReviews } from '@/hooks/product';
+import { useInfiniteProductReviewsQuery } from '@/hooks/product';
+import useIntersectionObserver from '@/hooks/useIntersectionObserver';
 import type { SortOption } from '@/types/common';
 
 const LOGIN_ERROR_MESSAGE =
@@ -17,9 +19,12 @@ interface ReviewListProps {
 }
 
 const ReviewList = ({ productId, selectedOption }: ReviewListProps) => {
-  const { productReviews, scrollRef, error } = useInfiniteProductReviews(productId, selectedOption.value);
+  const scrollRef = useRef<HTMLDivElement>(null);
 
-  if (error) {
+  const { fetchNextPage, hasNextPage, data, isError } = useInfiniteProductReviewsQuery(productId, selectedOption.value);
+  useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
+
+  if (isError) {
     return (
       <ErrorContainer>
         <ErrorDescription align="center" weight="bold" size="lg">
@@ -35,11 +40,13 @@ const ReviewList = ({ productId, selectedOption }: ReviewListProps) => {
   return (
     <>
       <ReviewListContainer>
-        {productReviews.map((review) => (
-          <li key={review.id}>
-            <ReviewItem productId={productId} review={review} />
-          </li>
-        ))}
+        {data?.pages
+          .flatMap((page) => page.reviews)
+          .map((review) => (
+            <li key={review.id}>
+              <ReviewItem productId={productId} review={review} />
+            </li>
+          ))}
       </ReviewListContainer>
       <div ref={scrollRef} aria-hidden />
     </>

frontend/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx

@@ -7,17 +7,10 @@ import ReviewTagList from '../ReviewTagList/ReviewTagList';
 import ReviewTextarea from '../ReviewTextarea/ReviewTextarea';
 import StarRate from '../StarRate/StarRate';
 
-import { productApi } from '@/apis';
 import { SvgIcon } from '@/components/Common';
 import { ProductOverviewItem } from '@/components/Product';
-import { REVIEW_SORT_OPTIONS } from '@/constants';
-import {
-  useProductReviewContext,
-  useProductReviewPageContext,
-  useReviewFormActionContext,
-  useReviewFormValueContext,
-} from '@/hooks/context';
-import { useReviewRegisterForm, useReviewImageUploader, useFormData } from '@/hooks/review';
+import { useReviewFormActionContext, useReviewFormValueContext } from '@/hooks/context';
+import { useReviewRegisterFormMutation, useReviewImageUploader, useFormData } from '@/hooks/review';
 import type { ProductDetail } from '@/types/product';
 
 const MIN_RATING_SCORE = 0;
@@ -35,10 +28,7 @@ const ReviewRegisterForm = ({ product, closeReviewDialog }: ReviewRegisterFormPr
   const reviewFormValue = useReviewFormValueContext();
   const { resetReviewFormValue } = useReviewFormActionContext();
 
-  const { setProductReviews } = useProductReviewContext();
-  const { resetPage } = useProductReviewPageContext();
-
-  const { request } = useReviewRegisterForm(product.id);
+  const { mutate } = useReviewRegisterFormMutation(product.id);
 
   const isValid =
     reviewFormValue.rating > MIN_RATING_SCORE &&
@@ -55,17 +45,7 @@ const ReviewRegisterForm = ({ product, closeReviewDialog }: ReviewRegisterFormPr
   const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (event) => {
     event.preventDefault();
 
-    await request(formData);
-
-    const reviewResponse = await productApi.get({
-      params: `/${product.id}/reviews`,
-      queries: `?sort=${REVIEW_SORT_OPTIONS[0].value}&page=0`,
-      credentials: true,
-    });
-    const { reviews } = await reviewResponse.json();
-
-    setProductReviews(reviews);
-    resetPage();
+    await mutate(formData);
 
     setReviewPreviewImage('');
     resetReviewFormValue();

frontend/src/hooks/context/index.ts

@@ -1,7 +1,5 @@
 export { default as useCategoryContext } from './useCategoryContext';
 export { default as useMemberActionContext } from './useMemberActionContext';
 export { default as useMemberValueContext } from './useMemberValueContext';
-export { default as useProductReviewContext } from './useProductReviewContext';
-export { default as useProductReviewPageContext } from './useProductReviewPageContext';
 export { default as useReviewFormActionContext } from './useReviewFormActionContext';
 export { default as useReviewFormValueContext } from './useReviewFormValueContext';

frontend/src/hooks/product/index.ts

@@ -2,5 +2,5 @@ export { default as useCategory } from './useCategory';
 export { default as useCategoryProducts } from './useCategoryProducts';
 export { default as useProductReview } from './useProductReview';
 export { default as useProductDetail } from './useProductDetail';
-export { default as useInfiniteProducts } from './useInfiniteProducts';
-export { default as useInfiniteProductReviews } from './useInfiniteProductReviews';
+export { default as useInfiniteProductsQuery } from './useInfiniteProductsQuery';
+export { default as useInfiniteProductReviewsQuery } from './useInfiniteProductReviewsQuery';

frontend/src/hooks/product/useInfiniteProductReviewsQuery.ts

@@ -0,0 +1,29 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { productApi } from '@/apis';
+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}`,
+    credentials: true,
+  });
+
+  const data: ProductReviewResponse = await res.json();
+  return data;
+};
+
+const useInfiniteProductReviewsQuery = (productId: number, sort: string) => {
+  return useInfiniteQuery({
+    queryKey: ['productReviews', productId, sort],
+    queryFn: ({ pageParam = 0 }) => fetchProductReviews(pageParam, productId, sort),
+    getNextPageParam: (prevResponse: ProductReviewResponse) => {
+      const isLast = prevResponse.page.lastPage;
+      const nextPage = prevResponse.page.requestPage + 1;
+      return isLast ? undefined : nextPage;
+    },
+  });
+};
+
+export default useInfiniteProductReviewsQuery;

frontend/src/hooks/product/useInfiniteProductsQuery.ts

@@ -0,0 +1,28 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { categoryApi } from '@/apis';
+import type { CategoryProductResponse } from '@/types/response';
+
+const fetchProducts = async (pageParam: number, categoryId: number, sort: string) => {
+  const res = await categoryApi.get({
+    params: `/${categoryId}/products`,
+    queries: `?page=${pageParam}&sort=${sort}`,
+  });
+
+  const data: CategoryProductResponse = await res.json();
+  return data;
+};
+
+const useInfiniteProductsQuery = (categoryId: number, sort: string) => {
+  return useInfiniteQuery({
+    queryKey: ['products', categoryId, sort],
+    queryFn: ({ pageParam = 0 }) => fetchProducts(pageParam, categoryId, sort),
+    getNextPageParam: (prevResponse: CategoryProductResponse) => {
+      const isLast = prevResponse.page.lastPage;
+      const nextPage = prevResponse.page.requestPage + 1;
+      return isLast ? undefined : nextPage;
+    },
+  });
+};
+
+export default useInfiniteProductsQuery;

frontend/src/hooks/review/index.ts

@@ -2,6 +2,6 @@ export { default as useDisplayTag } from './useDisplayTag';
 export { default as useFormData } from './useFormData';
 export { default as useReviewFavorite } from './useReviewFavorite';
 export { default as useReviewImageUploader } from './useReviewImageUploader';
-export { default as useReviewRegisterForm } from './useReviewRegisterForm';
+export { default as useReviewRegisterFormMutation } from './useReviewRegisterFormMutation';
 export { default as useReviewTags } from './useReviewTags';
 export { default as useStarRatingHover } from './useStarRatingHover';