diff --git a/frontend/src/hooks/review/useGetReviewList/index.ts b/frontend/src/hooks/review/useGetReviewList/index.ts index c314120e3..b9123080b 100644 --- a/frontend/src/hooks/review/useGetReviewList/index.ts +++ b/frontend/src/hooks/review/useGetReviewList/index.ts @@ -19,7 +19,7 @@ const useGetReviewList = () => { staleTime: 1 * 60 * 1000, }); - return result; + return { ...result }; }; export default useGetReviewList; diff --git a/frontend/src/mocks/handlers/review.ts b/frontend/src/mocks/handlers/review.ts index 4b370fa66..2eb0e3002 100644 --- a/frontend/src/mocks/handlers/review.ts +++ b/frontend/src/mocks/handlers/review.ts @@ -78,7 +78,7 @@ const getReviewList = (lastReviewId: number | null, size: number) => { return HttpResponse.json({ revieweeName: REVIEW_LIST.revieweeName, projectName: REVIEW_LIST.projectName, - lastReviewId: !isLastPage && lastReviewId !== null ? lastReviewId + size : null, + lastReviewId: paginatedReviews.length > 0 ? paginatedReviews[paginatedReviews.length - 1].reviewId : 0, isLastPage: isLastPage, reviews: paginatedReviews, }); diff --git a/frontend/src/mocks/mockData/reviewListMockData.ts b/frontend/src/mocks/mockData/reviewListMockData.ts index 19196e617..05f5a1d0a 100644 --- a/frontend/src/mocks/mockData/reviewListMockData.ts +++ b/frontend/src/mocks/mockData/reviewListMockData.ts @@ -2,7 +2,7 @@ import { ReviewList } from '@/types'; export const REVIEW_LIST: ReviewList = { revieweeName: '쑤쑤', projectName: 'review-me', - lastReviewId: 12, + lastReviewId: 24, isLastPage: false, reviews: [ { diff --git a/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx b/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx index 62b0e5532..c63b68b83 100644 --- a/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx +++ b/frontend/src/pages/ReviewListPage/components/PageContents/index.tsx @@ -14,26 +14,26 @@ import * as S from './styles'; const PageContents = () => { const navigate = useNavigate(); - const { data, fetchNextPage, hasNextPage, isLoading, isSuccess } = useGetReviewList(); + const { data, fetchNextPage, isLoading, isSuccess } = useGetReviewList(); const { param: reviewRequestCode } = useSearchParamAndQuery({ paramKey: 'reviewRequestCode', }); - const lastReviewElementRef = useInfiniteScroll({ - fetchNextPage, - hasNextPage, - isLoading, - isLastPage: data.pages[0].isLastPage, - }); - const handleReviewClick = (id: number) => { navigate(`/${ROUTE.detailedReview}/${reviewRequestCode}/${id}`); }; const { projectName, revieweeName } = data.pages[0]; + const isLastPage = data.pages[data.pages.length - 1].isLastPage; const reviews = data.pages.flatMap((page) => page.reviews); + const lastReviewElementRef = useInfiniteScroll({ + fetchNextPage, + isLoading, + isLastPage, + }); + return ( isSuccess && ( diff --git a/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts b/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts index 554993ed7..c32f41730 100644 --- a/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts +++ b/frontend/src/pages/ReviewListPage/hooks/useInfiniteScroll.ts @@ -2,28 +2,27 @@ import { useCallback, useRef } from 'react'; export interface InfiniteScrollProps { fetchNextPage: () => void; - hasNextPage: boolean; isLoading: boolean; isLastPage: boolean; } -const useInfiniteScroll = ({ fetchNextPage, hasNextPage, isLoading, isLastPage }: InfiniteScrollProps) => { +const useInfiniteScroll = ({ fetchNextPage, isLoading, isLastPage }: InfiniteScrollProps) => { const observer = useRef(null); const lastElementRef = useCallback( (node: HTMLElement | null) => { - if (isLoading || isLastPage) return; + if (isLoading) return; if (observer.current) observer.current.disconnect(); observer.current = new IntersectionObserver((entries) => { - if (entries[0].isIntersecting && hasNextPage) { + if (entries[0].isIntersecting && !isLastPage) { fetchNextPage(); } }); if (node) observer.current.observe(node); }, - [isLoading, fetchNextPage, hasNextPage, isLastPage], + [isLoading, fetchNextPage, isLastPage], ); return lastElementRef;