diff --git a/src/pages/detail/ui/ReviewList.tsx b/src/pages/detail/ui/ReviewList.tsx index b7bf9a0..dec9c7d 100644 --- a/src/pages/detail/ui/ReviewList.tsx +++ b/src/pages/detail/ui/ReviewList.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; import { useInfiniteQuery } from '@tanstack/react-query'; -import { startTransition, useCallback, useEffect, useState } from 'react'; +import { startTransition, useCallback, useEffect, useRef, useState } from 'react'; import { useParams } from 'react-router-dom'; import { ANCHOR_REVIEW } from 'pages/detail/config/anchor'; @@ -84,6 +84,24 @@ export const ReviewList = () => { return () => window.removeEventListener('scroll', handleScroll); }, [handleScroll]); + const loaderRef = useRef(null); + + useEffect(() => { + if (!hasNextPage || isFetchingNextPage) return; + const observer = new window.IntersectionObserver( + (entries) => { + if (entries[0].isIntersecting) { + void fetchNextPage(); + } + }, + { rootMargin: '200px' } // 미리 로드 + ); + if (loaderRef.current) observer.observe(loaderRef.current); + return () => { + if (loaderRef.current) observer.unobserve(loaderRef.current); + }; + }, [hasNextPage, isFetchingNextPage, fetchNextPage]); + if (isLoading) { return (
@@ -97,7 +115,7 @@ export const ReviewList = () => { return (
- 별점 및 리뷰({allReviews.length}) + 별점 및 리뷰({data?.pages[0].data.totalElements}) { +
{isFetchingNextPage && (