feat: QueryErrorBoundary 컴포넌트 작성 (#163)

* chore: 전역 쿼리 기본 옵션 설정

* feat: QueryErrorBoundary 기능 작성

* feat: QueryErrorBoundary 화면 작성

* refactor: fallback UI 분리

* rename: 디렉토리 이름 ErrorBoundary 로 변경

* feat: UnknownFallback 작성

* style: QueryErrorBoundary JSDOC 주석 추가

* feat: 전역 ErrorBoundary 설정

* fix: 빌드 오류 해결

src/App.tsx

@@ -1,7 +1,9 @@
 import { Outlet } from 'react-router-dom';
+import { ErrorBoundary } from '@suspensive/react';
 import clsx from 'clsx';
 import { useRouteData, useTheme } from '@/core/hooks';
 import { Navbar } from './shared/Navbar';
+import { UnknownFallback } from './shared/ErrorBoundary';
 import 'swiper/css';
 import 'swiper/css/bundle';
 
@@ -16,11 +18,13 @@ const App = () => {
         'bg-light-main': theme !== 'dark'
       })}
     >
-      <div className="h-full overflow-hidden bg-light-main text-black dark:bg-dark-main dark:text-white">
-        <Outlet />
-      </div>
+      <ErrorBoundary fallback={<UnknownFallback />}>
+        <div className="h-full overflow-hidden bg-light-main text-black dark:bg-dark-main dark:text-white">
+          <Outlet />
+        </div>
 
-      {navBarRequired && <Navbar currentPath={`/${path}`} />}
+        {navBarRequired && <Navbar currentPath={`/${path}`} />}
+      </ErrorBoundary>
     </div>
   );
 };

src/main.tsx

@@ -17,7 +17,15 @@ const setupMSW = async () => {
   return worker.start();
 };
 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false
+    }
+  }
+});
 
 setupMSW().then(() => {
   ReactDOM.createRoot(document.getElementById('root')!).render(

src/pages/RoomSettingPage.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from 'react';
-import { ErrorBoundary } from '@suspensive/react';
 import { useRouteData } from '@/core/hooks';
+import { QueryErrorBoundary, NetworkFallback } from '@/shared/ErrorBoundary';
 import { Header } from '@/shared/Header';
 import { Tab, TabItem } from '@/shared/Tab';
 import { RoomTab, MemberTab, RemoveTab, LoadingFallback } from '@/RoomSetting';
@@ -13,7 +13,7 @@ const RoomSettingPage = () => {
     <>
       <Header prev="roomDetail" />
 
-      <ErrorBoundary fallback={<div>Error Occured in RoomSettingPage!</div>}>
+      <QueryErrorBoundary fallback={<NetworkFallback />}>
         <Tab
           align="center"
           itemStyle="mt-10 px-8"
@@ -34,7 +34,7 @@ const RoomSettingPage = () => {
             </Suspense>
           </TabItem>
         </Tab>
-      </ErrorBoundary>
+      </QueryErrorBoundary>
     </>
   );
 };

src/shared/ErrorBoundary/components/NetworkFallback.tsx

@@ -0,0 +1,26 @@
+import { useErrorBoundaryFallbackProps } from '@suspensive/react';
+
+const NetworkFallback = () => {
+  const { reset } = useErrorBoundaryFallbackProps();
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center">
+      <img
+        src="/assets/PageError.png"
+        alt="오류"
+      />
+      <h1 className="mt-5 text-3xl font-bold">오류 발생</h1>
+      <p className="text-lg leading-10 text-dark-gray">
+        정보를 불러올 수 없어요.
+      </p>
+      <button
+        className="btn btn-light-point dark:btn-dark-point mt-5 flex w-32 items-center justify-center rounded-lg"
+        onClick={reset}
+      >
+        다시 불러오기
+      </button>
+    </div>
+  );
+};
+
+export default NetworkFallback;

src/shared/ErrorBoundary/components/QueryErrorBoundary.tsx

@@ -0,0 +1,33 @@
+import { FunctionComponent, ReactNode, PropsWithChildren } from 'react';
+import { ErrorBoundary, ErrorBoundaryFallbackProps } from '@suspensive/react';
+import { useQueryErrorResetBoundary } from '@tanstack/react-query';
+
+interface QueryErrorBoundaryProps {
+  fallback:
+    | FunctionComponent<ErrorBoundaryFallbackProps<Error>>
+    | NonNullable<ReactNode>;
+}
+
+/**
+ * QueryErrorBoundary를 래핑한 ErrorBoundary 컴포넌트입니다.
+ * 쿼리 에러가 발생했을 때, 쿼리를 리셋하는 함수를 담고 fallback을 렌더링합니다.
+ * @param fallback - 오류 발생 시 렌더링할 컴포넌트.
+ * @param children - 성공 시 렌더링할 컴포넌트.
+ */
+const QueryErrorBoundary = ({
+  fallback,
+  children
+}: PropsWithChildren<QueryErrorBoundaryProps>) => {
+  const { reset } = useQueryErrorResetBoundary();
+
+  return (
+    <ErrorBoundary
+      onReset={reset}
+      fallback={fallback}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+};
+
+export default QueryErrorBoundary;

src/shared/ErrorBoundary/components/UnknownFallback.tsx

@@ -0,0 +1,24 @@
+import { Link } from 'react-router-dom';
+
+const UnknownFallback = () => {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center">
+      <img
+        src="/assets/UnknownError.png"
+        alt="오류"
+      />
+      <h1 className="mt-5 text-3xl font-bold">오류 발생</h1>
+      <p className="text-lg leading-10 text-dark-gray">
+        내부적인 문제로 오류가 발생했어요.
+      </p>
+      <Link
+        className="btn btn-light-point dark:btn-dark-point mt-5 flex w-32 items-center justify-center rounded-lg"
+        to={'/'}
+      >
+        홈으로
+      </Link>
+    </div>
+  );
+};
+
+export default UnknownFallback;

src/shared/ErrorBoundary/index.ts

@@ -0,0 +1,3 @@
+export { default as QueryErrorBoundary } from './components/QueryErrorBoundary';
+export { default as NetworkFallback } from './components/NetworkFallback';
+export { default as UnknownFallback } from './components/UnknownFallback';