From b95eafca9f9b92cc66d253c500408f9e85d616c8 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Wed, 29 Nov 2023 15:45:22 +0900 Subject: [PATCH] =?UTF-8?q?:tada:=20=EA=B0=81=20=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=97=90?= =?UTF-8?q?=EB=9F=AC=EB=B0=94=EC=9A=B4=EB=8D=94=EB=A6=AC=20=EC=A0=81?= =?UTF-8?q?=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 12 +++++++++ .../card-list-content/CardListContent.tsx | 5 +++- .../MyCardListContent.tsx | 5 +++- .../my/components/my-card-list/MyCardList.tsx | 26 +++++++++++-------- .../ChatRoomListContent.tsx | 5 +++- .../dibs/components/MyDibsTemplate.tsx | 5 +++- .../MyTradeHistoryListContent.tsx | 5 +++- .../NotificationListContent.tsx | 5 +++- .../MySuggestionListContent.tsx | 13 ++++++---- .../exception-boundary/ExceptionBoundary.tsx | 13 +++------- src/contexts/TanstackQueryContext.tsx | 1 + src/hooks/api/queries/useCardsQuery.ts | 1 + 13 files changed, 65 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index d1f223bb..24d44713 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "next-themes": "^0.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-error-boundary": "^4.0.11", "react-hook-form": "^7.47.0", "react-lottie-player": "^1.5.5", "sharp": "^0.32.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8f02f745..5ed303dc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -77,6 +77,9 @@ dependencies: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) + react-error-boundary: + specifier: ^4.0.11 + version: 4.0.11(react@18.2.0) react-hook-form: specifier: ^7.47.0 version: 7.47.0(react@18.2.0) @@ -11428,6 +11431,15 @@ packages: react-is: 18.1.0 dev: true + /react-error-boundary@4.0.11(react@18.2.0): + resolution: {integrity: sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==} + peerDependencies: + react: '>=16.13.1' + dependencies: + '@babel/runtime': 7.23.2 + react: 18.2.0 + dev: false + /react-hook-form@7.47.0(react@18.2.0): resolution: {integrity: sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg==} engines: {node: '>=12.22.0'} 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 cc140464..9411a23e 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 @@ -1,6 +1,7 @@ 'use client' import { useEffect, useRef } from 'react' +import { ErrorBoundary } from 'react-error-boundary' import { useSearchParams } from 'next/navigation' import ExceptionBoundary from '@/components/domain/exception-boundary' import { useCardsQuery } from '@/hooks/api/queries/useCardsQuery' @@ -54,7 +55,9 @@ const CardListContent = () => { isEmpty={isEmpty} isFetchingNextPage={isFetchingNextPage} > - + 렌더링 중 문제가 발생했습니다.}> + +
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 b2e9578b..39f7393c 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 @@ -1,6 +1,7 @@ 'use client' import { useEffect, useRef, useState } from 'react' +import { ErrorBoundary } from 'react-error-boundary' import ExceptionBoundary from '@/components/domain/exception-boundary' import { useMyCardsQuery } from '@/hooks/api/queries/useMyCardsQuery' import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' @@ -48,7 +49,9 @@ const MyCardListContent = () => { isEmpty={isEmpty} isFetchingNextPage={isFetchingNextPage} > - + 렌더링 중 문제가 발생했습니다.
}> + +
diff --git a/src/app/(root)/(routes)/cards/my/components/my-card-list/MyCardList.tsx b/src/app/(root)/(routes)/cards/my/components/my-card-list/MyCardList.tsx index c82e950d..b0cb4cc4 100644 --- a/src/app/(root)/(routes)/cards/my/components/my-card-list/MyCardList.tsx +++ b/src/app/(root)/(routes)/cards/my/components/my-card-list/MyCardList.tsx @@ -8,16 +8,20 @@ const MyCardList = ({ data, }: { data: InfiniteData | undefined -}) => ( - <> - {data?.pages.map(({ data: { cardList } }: GetMyCardListRes, pageIndex) => ( - - {cardList.map((myCard: Card) => ( - - ))} - - ))} - -) +}) => { + return ( + <> + {data?.pages.map( + ({ data: { cardList } }: GetMyCardListRes, pageIndex) => ( + + {cardList.map((myCard: Card) => ( + + ))} + + ), + )} + + ) +} export default MyCardList 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 eb63ca28..fd9c6277 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 @@ -1,6 +1,7 @@ 'use client' import { useEffect, useRef, Fragment } from 'react' +import { ErrorBoundary } from 'react-error-boundary' import ExceptionBoundary from '@/components/domain/exception-boundary' import { useChatRoomsQuery } from '@/hooks/api/queries/useChatRoomsQuery' import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' @@ -39,7 +40,9 @@ const ChatRoomListContent = () => { isEmpty={isEmpty} isFetchingNextPage={isFetchingNextPage} > - + 렌더링 중 문제가 발생했습니다.
}> + +
diff --git a/src/app/(root)/(routes)/dibs/components/MyDibsTemplate.tsx b/src/app/(root)/(routes)/dibs/components/MyDibsTemplate.tsx index 18997628..758f5196 100644 --- a/src/app/(root)/(routes)/dibs/components/MyDibsTemplate.tsx +++ b/src/app/(root)/(routes)/dibs/components/MyDibsTemplate.tsx @@ -1,6 +1,7 @@ 'use client' import { useEffect, useRef } from 'react' +import { ErrorBoundary } from 'react-error-boundary' import ExceptionBoundary from '@/components/domain/exception-boundary' import { useMyDibsQuery } from '@/hooks/api/queries/useMyDibsQuery' import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' @@ -40,7 +41,9 @@ const MyDibsTemplate = () => { isEmpty={isEmpty} isFetchingNextPage={isFetchingNextPage} > - + 렌더링 중 문제가 발생했습니다.
}> + +
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 86c770da..96bd21bf 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 @@ -1,6 +1,7 @@ 'use client' import { useEffect, useRef, Fragment } from 'react' +import { ErrorBoundary } from 'react-error-boundary' import ExceptionBoundary from '@/components/domain/exception-boundary' import { useMyTradeHistoryQuery } from '@/hooks/api/queries/useMyTradeHistoriesQuery' import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' @@ -39,7 +40,9 @@ const MyTradeHistoryListContent = () => { isEmpty={isEmpty} isFetchingNextPage={isFetchingNextPage} > - + 렌더링 중 문제가 발생했습니다.
}> + +
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 1f0b7822..02e81654 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 @@ -1,6 +1,7 @@ 'use client' import { useEffect, useRef, useState } from 'react' +import { ErrorBoundary } from 'react-error-boundary' import ExceptionBoundary from '@/components/domain/exception-boundary' import { useNotificationsQuery } from '@/hooks/api/queries/useNotificationsQuery' import { useIntersectionObserver } from '@/hooks/useIntersectionObserver' @@ -45,7 +46,9 @@ const NotificationListContent = () => { isEmpty={isEmpty} isFetchingNextPage={isFetchingNextPage} > - + 렌더링 중 문제가 발생했습니다.
}> + +
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 333be6e6..56d47a55 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 @@ -1,6 +1,7 @@ 'use client' import { useEffect, useRef, useState } from 'react' +import { ErrorBoundary } from 'react-error-boundary' import { useParams } from 'next/navigation' import ExceptionBoundary from '@/components/domain/exception-boundary' import { useMySuggestionsQuery } from '@/hooks/api/queries/useMySuggestionsQuery' @@ -51,11 +52,13 @@ const MySuggestionListContent = () => { isEmpty={isEmpty} isFetchingNextPage={isFetchingNextPage} > - + 렌더링 중 문제가 발생했습니다.
}> + +
diff --git a/src/components/domain/exception-boundary/ExceptionBoundary.tsx b/src/components/domain/exception-boundary/ExceptionBoundary.tsx index f2bec3b2..48ee3273 100644 --- a/src/components/domain/exception-boundary/ExceptionBoundary.tsx +++ b/src/components/domain/exception-boundary/ExceptionBoundary.tsx @@ -18,7 +18,7 @@ const ExceptionBoundary: React.FC = ({ children, }: ExceptionBoundaryProps) => { if (isLoading) { - return + return
데이터 없음
} if (isError) { @@ -26,19 +26,12 @@ const ExceptionBoundary: React.FC = ({ } if (isEmpty) { - return ( - router.push('/cards/new')} - buttonContent="물건 등록하러 가기" - /> - ) + return
데이터가 존재하지 않습니다.
} - return ( <> {children} - {isFetchingNextPage &&
다음 페이지 불러오는중...
} + {isFetchingNextPage && } ) } diff --git a/src/contexts/TanstackQueryContext.tsx b/src/contexts/TanstackQueryContext.tsx index 64af7e12..328aa752 100644 --- a/src/contexts/TanstackQueryContext.tsx +++ b/src/contexts/TanstackQueryContext.tsx @@ -14,6 +14,7 @@ const TanstackQueryGlobalConfig = { retry: 3, retryDelay: 1000, suspense: true, + useErrorBoundary: true, }, }, } diff --git a/src/hooks/api/queries/useCardsQuery.ts b/src/hooks/api/queries/useCardsQuery.ts index 0abf3968..eb8dde15 100644 --- a/src/hooks/api/queries/useCardsQuery.ts +++ b/src/hooks/api/queries/useCardsQuery.ts @@ -29,5 +29,6 @@ export const useCardsQuery = ({ return lastPage.data.nextCursorId }, staleTime: LIST_STALE_TIME, + gcTime: 0, }) }