🎉 각 리스트 컴포넌트 에러바운더리 적용 (#142)

* 🎉 검색 필터 모달 UI 및 기능 변경(일괄적용, 일괄 초기화 버튼 생성) * 🎉 리스트 staleTime 시간 변경 * 🎉 개별 알림 처리 기능 구현 * 🎉 내 카드 이미지 누를시, 물건 상세 정보 페이지로 이동 기능 * 🐛 리액트 쿼리 업데이트 오류 이슈 * 🎉 각 리스트 컴포넌트 에러바운더리 적용
team-nabi · Nov 29, 2023 · c923a09 · c923a09
1 parent 9286e7f
commit c923a09
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 32 deletions.
diff --git 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
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
@@ -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}
       >
-        <CardList />
+        <ErrorBoundary fallback={<div>렌더링 중 문제가 발생했습니다.</div>}>
+          <CardList />
+        </ErrorBoundary>
       </ExceptionBoundary>
       <div ref={lastElementRef} />
     </>

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
@@ -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}
       >
-        <MyCardList data={data} />
+        <ErrorBoundary fallback={<div>렌더링 중 문제가 발생했습니다.</div>}>
+          <MyCardList data={data} />
+        </ErrorBoundary>
       </ExceptionBoundary>
 
       <div ref={lastElementRef} />

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
@@ -8,16 +8,20 @@ const MyCardList = ({
   data,
 }: {
   data: InfiniteData<GetMyCardListRes, unknown> | undefined
-}) => (
-  <>
-    {data?.pages.map(({ data: { cardList } }: GetMyCardListRes, pageIndex) => (
-      <Fragment key={pageIndex}>
-        {cardList.map((myCard: Card) => (
-          <MyCard key={myCard.cardId} card={myCard} />
-        ))}
-      </Fragment>
-    ))}
-  </>
-)
+}) => {
+  return (
+    <>
+      {data?.pages.map(
+        ({ data: { cardList } }: GetMyCardListRes, pageIndex) => (
+          <Fragment key={pageIndex}>
+            {cardList.map((myCard: Card) => (
+              <MyCard key={myCard.cardId} card={myCard} />
+            ))}
+          </Fragment>
+        ),
+      )}
+    </>
+  )
+}
 
 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
@@ -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}
       >
-        <ChatRoomList data={data} />
+        <ErrorBoundary fallback={<div>렌더링 중 문제가 발생했습니다.</div>}>
+          <ChatRoomList data={data} />
+        </ErrorBoundary>
       </ExceptionBoundary>
 
       <div ref={lastElementRef} />

diff --git 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}
       >
-        <MyDibsList data={data} />
+        <ErrorBoundary fallback={<div>렌더링 중 문제가 발생했습니다.</div>}>
+          <MyDibsList data={data} />
+        </ErrorBoundary>
       </ExceptionBoundary>
 
       <div ref={lastElementRef} />

diff --git a/...)/(routes)/history/components/my-trade-history-list-content/MyTradeHistoryListContent.tsx b/...)/(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}
       >
-        <MyTradeHistoryList data={data} />
+        <ErrorBoundary fallback={<div>렌더링 중 문제가 발생했습니다.</div>}>
+          <MyTradeHistoryList data={data} />
+        </ErrorBoundary>
       </ExceptionBoundary>
 
       <div ref={lastElementRef} />

diff --git a/...)/(routes)/notifications/components/notification-list-content/NotificationListContent.tsx b/...)/(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}
       >
-        <NotificationList data={data} />
+        <ErrorBoundary fallback={<div>렌더링 중 문제가 발생했습니다.</div>}>
+          <NotificationList data={data} />
+        </ErrorBoundary>
       </ExceptionBoundary>
       <div ref={lastElementRef} />
     </>

diff --git a/.../suggestions/[myCardId]/components/my-suggestion-list-content/MySuggestionListContent.tsx b/.../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}
       >
-        <MySuggestionList
-          data={data}
-          suggestionTypeState={suggestionTypeState}
-          directionTypeState={directionTypeState}
-        />
+        <ErrorBoundary fallback={<div>렌더링 중 문제가 발생했습니다.</div>}>
+          <MySuggestionList
+            data={data}
+            suggestionTypeState={suggestionTypeState}
+            directionTypeState={directionTypeState}
+          />
+        </ErrorBoundary>
       </ExceptionBoundary>
 
       <div ref={lastElementRef} />

diff --git a/src/components/domain/exception-boundary/ExceptionBoundary.tsx b/src/components/domain/exception-boundary/ExceptionBoundary.tsx
@@ -18,27 +18,20 @@ const ExceptionBoundary: React.FC<ExceptionBoundaryProps> = ({
   children,
 }: ExceptionBoundaryProps) => {
   if (isLoading) {
-    return <Loading />
+    return <div>데이터 없음</div>
   }
 
   if (isError) {
     return <div>에러 발생!</div>
   }
 
   if (isEmpty) {
-    return (
-      <NoData
-        title="해당 물건이 존재 하지 않습니다."
-        onClickButton={() => router.push('/cards/new')}
-        buttonContent="물건 등록하러 가기"
-      />
-    )
+    return <div>데이터가 존재하지 않습니다.</div>
   }
-
   return (
     <>
       {children}
-      {isFetchingNextPage && <div>다음 페이지 불러오는중...</div>}
+      {isFetchingNextPage && <Loading />}
     </>
   )
 }

diff --git 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
@@ -29,5 +29,6 @@ export const useCardsQuery = ({
       return lastPage.data.nextCursorId
     },
     staleTime: LIST_STALE_TIME,
+    gcTime: 0,
   })
 }