diff --git a/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx b/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx index 8c6d0feb..cc140464 100644 --- a/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx +++ b/src/app/(root)/(routes)/cards/components/card-list-content/CardListContent.tsx @@ -13,27 +13,33 @@ const CardListContent = () => { const searchParams = useSearchParams() // TODO: 현재 API 명세에 status에 어떤 값을 줘야하는지에 대한 정의가 되어 있지 않기 때문에 임시로 상수 값을 전달함 => 추후에 실제 동작 값으로 고치기 - const { data, fetchNextPage, isError, isFetchingNextPage, isLoading } = - useCardsQuery({ - category: - (searchParams.get('category') as CategoryObjs['key']) || undefined, - priceRange: - (searchParams.get('priceRange') as PriceRangeObjs['key']) || undefined, - cardTitle: searchParams.get('cardTitle' as string) || '', - }) + const { + data, + fetchNextPage, + isError, + isFetchingNextPage, + isLoading, + hasNextPage, + } = useCardsQuery({ + category: + (searchParams.get('category') as CategoryObjs['key']) || undefined, + priceRange: + (searchParams.get('priceRange') as PriceRangeObjs['key']) || undefined, + cardTitle: searchParams.get('cardTitle' as string) || '', + }) const lastElementRef = useRef(null) const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) useEffect(() => { - if (isFetchingNextPage) { + if (isFetchingNextPage || !hasNextPage) { return } if (entry?.isIntersecting) { fetchNextPage() } - }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) + }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage]) // TODO: 아이템이 없을시 어떤 UI를 보여줄지 차후에 결정 diff --git a/src/app/(root)/(routes)/cards/my/components/my-card-list-content/MyCardListContent.tsx b/src/app/(root)/(routes)/cards/my/components/my-card-list-content/MyCardListContent.tsx index f79b47fa..b2e9578b 100644 --- a/src/app/(root)/(routes)/cards/my/components/my-card-list-content/MyCardListContent.tsx +++ b/src/app/(root)/(routes)/cards/my/components/my-card-list-content/MyCardListContent.tsx @@ -11,23 +11,29 @@ import TradeStatusTabs from '../trade-status-tabs' const MyCardListContent = () => { const [tradeStatus, setTradeStatus] = useState('TRADE_AVAILABLE') - const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = - useMyCardsQuery({ - tradeStatus, - }) + const { + data, + fetchNextPage, + isLoading, + isError, + isFetchingNextPage, + hasNextPage, + } = useMyCardsQuery({ + tradeStatus, + }) const lastElementRef = useRef(null) const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) useEffect(() => { - if (isFetchingNextPage) { + if (isFetchingNextPage || !hasNextPage) { return } if (entry?.isIntersecting) { fetchNextPage() } - }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) + }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage]) const isEmpty = data?.pages[0].data.cardList.length === 0 return ( @@ -45,7 +51,6 @@ const MyCardListContent = () => { -
) diff --git a/src/app/(root)/(routes)/chatrooms/components/chat-room-list-content/ChatRoomListContent.tsx b/src/app/(root)/(routes)/chatrooms/components/chat-room-list-content/ChatRoomListContent.tsx index cf57feb9..eb63ca28 100644 --- a/src/app/(root)/(routes)/chatrooms/components/chat-room-list-content/ChatRoomListContent.tsx +++ b/src/app/(root)/(routes)/chatrooms/components/chat-room-list-content/ChatRoomListContent.tsx @@ -7,21 +7,27 @@ import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' import ChatRoomList from '../chat-room-list' const ChatRoomListContent = () => { - const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = - useChatRoomsQuery() + const { + data, + fetchNextPage, + isLoading, + isError, + isFetchingNextPage, + hasNextPage, + } = useChatRoomsQuery() const lastElementRef = useRef(null) const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) useEffect(() => { - if (isFetchingNextPage) { + if (isFetchingNextPage || !hasNextPage) { return } if (entry?.isIntersecting) { fetchNextPage() } - }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) + }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage]) const isEmpty = data?.pages[0].data.chatRoomList.length === 0 diff --git a/src/app/(root)/(routes)/dibs/components/MyDibsTemplate.tsx b/src/app/(root)/(routes)/dibs/components/MyDibsTemplate.tsx index 1d2dc21e..18997628 100644 --- a/src/app/(root)/(routes)/dibs/components/MyDibsTemplate.tsx +++ b/src/app/(root)/(routes)/dibs/components/MyDibsTemplate.tsx @@ -7,21 +7,28 @@ import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' import MyDibsList from './MyDibsList' const MyDibsTemplate = () => { - const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = - useMyDibsQuery() + const { + data, + fetchNextPage, + isLoading, + isError, + isFetchingNextPage, + hasNextPage, + } = useMyDibsQuery() const lastElementRef = useRef(null) const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) useEffect(() => { - if (isFetchingNextPage) { + console.log(hasNextPage) + if (isFetchingNextPage || !hasNextPage) { return } if (entry?.isIntersecting) { fetchNextPage() } - }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) + }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage]) const isEmpty = data?.pages[0].data.dibList.length === 0 diff --git a/src/app/(root)/(routes)/history/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx b/src/app/(root)/(routes)/history/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx index c202da8c..86c770da 100644 --- a/src/app/(root)/(routes)/history/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx +++ b/src/app/(root)/(routes)/history/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx @@ -7,21 +7,27 @@ import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' import MyTradeHistoryList from '../my-trade-history-list/MyTradeHistoryList' const MyTradeHistoryListContent = () => { - const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = - useMyTradeHistoryQuery() + const { + data, + fetchNextPage, + isLoading, + isError, + isFetchingNextPage, + hasNextPage, + } = useMyTradeHistoryQuery() const lastElementRef = useRef(null) const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) useEffect(() => { - if (isFetchingNextPage) { + if (isFetchingNextPage || !hasNextPage) { return } if (entry?.isIntersecting) { fetchNextPage() } - }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) + }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage]) const isEmpty = data?.pages[0].data.historyList.length === 0 diff --git a/src/app/(root)/(routes)/notifications/components/notification-list-content/NotificationListContent.tsx b/src/app/(root)/(routes)/notifications/components/notification-list-content/NotificationListContent.tsx index 09128447..1f0b7822 100644 --- a/src/app/(root)/(routes)/notifications/components/notification-list-content/NotificationListContent.tsx +++ b/src/app/(root)/(routes)/notifications/components/notification-list-content/NotificationListContent.tsx @@ -11,21 +11,27 @@ import NotificationStatusTabs from '../notification-status-tabs' const NotificationListContent = () => { const [isRead, setIsRead] = useState(false) - const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = - useNotificationsQuery(isRead) + const { + data, + fetchNextPage, + isLoading, + isError, + isFetchingNextPage, + hasNextPage, + } = useNotificationsQuery(isRead) const lastElementRef = useRef(null) const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) useEffect(() => { - if (isFetchingNextPage) { + if (isFetchingNextPage || !hasNextPage) { return } if (entry?.isIntersecting) { fetchNextPage() } - }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) + }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage]) const isEmpty = data?.pages[0].data.notificationList.length === 0 diff --git a/src/app/(root)/(routes)/suggestions/[myCardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx b/src/app/(root)/(routes)/suggestions/[myCardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx index 2d0ba47d..333be6e6 100644 --- a/src/app/(root)/(routes)/suggestions/[myCardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx +++ b/src/app/(root)/(routes)/suggestions/[myCardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx @@ -16,21 +16,27 @@ const MySuggestionListContent = () => { useState('RECEIVE') const { myCardId } = useParams() - const { data, fetchNextPage, isLoading, isError, isFetchingNextPage } = - useMySuggestionsQuery(suggestionTypeState, directionTypeState, myCardId) + const { + data, + fetchNextPage, + isLoading, + isError, + isFetchingNextPage, + hasNextPage, + } = useMySuggestionsQuery(suggestionTypeState, directionTypeState, myCardId) const lastElementRef = useRef(null) const entry = useIntersectionObserver(lastElementRef, { threshold: 1.0 }) useEffect(() => { - if (isFetchingNextPage) { + if (isFetchingNextPage || !hasNextPage) { return } if (entry?.isIntersecting) { fetchNextPage() } - }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage]) + }, [entry?.isIntersecting, fetchNextPage, isFetchingNextPage, hasNextPage]) const isEmpty = data?.pages[0].data.suggestionList.length === 0 return (