|
| 1 | +'use client'; |
| 2 | + |
| 3 | +import { useEffect } from 'react'; |
| 4 | +import { useInView } from 'react-intersection-observer'; |
| 5 | +import { useInfiniteQuery } from '@tanstack/react-query'; |
| 6 | +import getMyBoardList from '@/service/myPage'; |
| 7 | + |
| 8 | +interface InfiniteScrollProps { |
| 9 | + infiniteQueryKey: string[]; |
| 10 | + pageParameter?: number; |
| 11 | + pageSize?: number; |
| 12 | + inViewThreshold?: number; |
| 13 | +} |
| 14 | + |
| 15 | +export default function useGetMyBoardListInfiniteData({ |
| 16 | + infiniteQueryKey, |
| 17 | + pageParameter = 1, |
| 18 | + pageSize = 5, |
| 19 | + inViewThreshold = 1, |
| 20 | +}: InfiniteScrollProps) { |
| 21 | + const { data, fetchNextPage, isLoading, hasNextPage, isFetchingNextPage } = |
| 22 | + useInfiniteQuery({ |
| 23 | + queryKey: infiniteQueryKey, |
| 24 | + queryFn: ({ pageParam = pageParameter }) => |
| 25 | + getMyBoardList({ pageParam, pageSize }), |
| 26 | + getNextPageParam: (lastPage, allPages) => |
| 27 | + allPages.length < 20 ? allPages.length + 1 : undefined, |
| 28 | + select: (d) => ({ |
| 29 | + pages: d.pages.flatMap((page) => page), |
| 30 | + pageParams: d.pageParams, |
| 31 | + }), |
| 32 | + }); |
| 33 | + |
| 34 | + // 무한 스크롤 화면 가장 아래 부분 탐지하는 observer |
| 35 | + function Observer({ children }: { children: React.ReactNode }) { |
| 36 | + const { ref, inView } = useInView({ threshold: inViewThreshold }); |
| 37 | + |
| 38 | + useEffect(() => { |
| 39 | + if (inView && hasNextPage) { |
| 40 | + fetchNextPage(); |
| 41 | + } |
| 42 | + }, [inView]); |
| 43 | + |
| 44 | + if (!hasNextPage || !data) return null; |
| 45 | + return ( |
| 46 | + <div ref={ref}>{isLoading || isFetchingNextPage ? children : null}</div> |
| 47 | + ); |
| 48 | + } |
| 49 | + |
| 50 | + return { |
| 51 | + Observer, |
| 52 | + data, |
| 53 | + }; |
| 54 | +} |
0 commit comments