알림 배지에 Suspense, ErrorBoundary 래핑 (#369)

* feat: axiosInstance 타임아웃 추가 * feat: 헤더 알림 배지에 Suspense, ErrorBoundary 래핑
Java-and-Script · Nov 27, 2023 · 2cc3289 · 2cc3289
1 parent cf66b67
commit 2cc3289
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/api/axiosInstance.ts b/src/api/axiosInstance.ts
@@ -9,6 +9,7 @@ export const axiosInstance = axios.create({
   headers: {
     'Content-type': 'application/json',
   },
+  timeout: 5000,
   withCredentials: true,
 });
 

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,3 +1,5 @@
+import { Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useNavigate } from 'react-router-dom';
 
 import { Avatar } from '@components/Avatar';
@@ -100,7 +102,11 @@ export const Header = ({
               <RightSideIconWrapper>
                 <BellIcon onClick={() => handleBellIconClick()}>
                   <img src={bellIcon} alt="" />
-                  <Badge />
+                  <ErrorBoundary fallback={<></>}>
+                    <Suspense fallback={null}>
+                      <Badge />
+                    </Suspense>
+                  </ErrorBoundary>
                 </BellIcon>
               </RightSideIconWrapper>
               <RightSideIconWrapper>