From 9286e7f442c80699bdc6a8821c69bab5a52c348c Mon Sep 17 00:00:00 2001 From: Kim Dong Hyun <107387817+doggopawer@users.noreply.github.com> Date: Wed, 29 Nov 2023 16:46:23 +0900 Subject: [PATCH] =?UTF-8?q?:bug:=20=EB=A6=AC=EC=95=A1=ED=8A=B8=20=EC=BF=BC?= =?UTF-8?q?=EB=A6=AC=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=9D=B4=EC=8A=88=20(#140)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :tada: 검색 필터 모달 UI 및 기능 변경(일괄적용, 일괄 초기화 버튼 생성) * :tada: 리스트 staleTime 시간 변경 * :tada: 개별 알림 처리 기능 구현 * :tada: 내 카드 이미지 누를시, 물건 상세 정보 페이지로 이동 기능 * :bug: 리액트 쿼리 업데이트 오류 이슈 --- .../card-list-content/CardListContent.tsx | 26 ++++++++++++------- .../MyCardListContent.tsx | 19 +++++++++----- .../ChatRoomListContent.tsx | 14 +++++++--- .../dibs/components/MyDibsTemplate.tsx | 15 ++++++++--- .../MyTradeHistoryListContent.tsx | 14 +++++++--- .../NotificationListContent.tsx | 14 +++++++--- .../MySuggestionListContent.tsx | 14 +++++++--- 7 files changed, 79 insertions(+), 37 deletions(-) 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 (