feat(member): add QueryErrorBoundary component

apps/member/src/components/common/QueryErrorBoundary.tsx

@@ -0,0 +1,20 @@
+import { type ComponentProps, type ReactNode } from 'react';
+
+import { useQueryErrorResetBoundary } from '@tanstack/react-query';
+
+import { ErrorBoundary } from '@suspensive/react';
+
+interface Props {
+  fallback: ComponentProps<typeof ErrorBoundary>['fallback'];
+  children: ReactNode;
+}
+
+export default function QueryErrorBoundary({ fallback, children }: Props) {
+  const { reset } = useQueryErrorResetBoundary();
+
+  return (
+    <ErrorBoundary onReset={reset} fallback={fallback}>
+      {children}
+    </ErrorBoundary>
+  );
+}

apps/member/src/pages/ApplicationPage/index.tsx

@@ -1,14 +1,12 @@
 import { Suspense } from 'react';
 
-import { QueryErrorResetBoundary } from '@tanstack/react-query';
-
 import Content from '@components/common/Content/Content';
 import ErrorSection from '@components/common/ErrorSection/ErrorSection';
 import Header from '@components/common/Header/Header';
+import QueryErrorBoundary from '@components/common/QueryErrorBoundary';
 
 import { ROLE_LEVEL } from '@constants/state';
 import { useMyProfile } from '@hooks/queries';
-import { ErrorBoundary } from '@suspensive/react';
 
 import { ApplicationListSection } from './components/ApplicationListSection';
 
@@ -20,21 +18,16 @@ export default function ApplicationPage() {
   }
 
   return (
-    <QueryErrorResetBoundary>
-      {({ reset }) => (
-        <ErrorBoundary
-          onReset={reset}
-          fallback={({ reset }) => <ErrorSection reset={reset} />}
-        >
-          <Content>
-            <Header title="지원" />
-
-            <Suspense>
-              <ApplicationListSection />
-            </Suspense>
-          </Content>
-        </ErrorBoundary>
-      )}
-    </QueryErrorResetBoundary>
+    <QueryErrorBoundary
+      fallback={({ reset }) => <ErrorSection reset={reset} />}
+    >
+      <Content>
+        <Header title="지원" />
+
+        <Suspense>
+          <ApplicationListSection />
+        </Suspense>
+      </Content>
+    </QueryErrorBoundary>
   );
 }

apps/member/src/pages/BlogPage/index.tsx

@@ -1,8 +1,10 @@
 import { useParams } from 'react-router-dom';
 
 import Content from '@components/common/Content/Content';
+import ErrorSection from '@components/common/ErrorSection/ErrorSection';
 import Header from '@components/common/Header/Header';
 import Image from '@components/common/Image/Image';
+import QueryErrorBoundary from '@components/common/QueryErrorBoundary';
 import { Section } from '@components/common/Section';
 import Share from '@components/common/Share/Share';
 
@@ -24,26 +26,30 @@ export default function BlogPage() {
     data;
 
   return (
-    <Content>
-      <Header title={['기술 블로그', title]} />
-      <Section>
-        <Image
-          src={createImageUrl(imageUrl)}
-          alt={title}
-          className="rounded-lg border object-cover"
-        />
-        <div className="my-6 space-y-2 break-keep text-center">
-          <h2 className="text-clab-main text-4xl font-bold">{title}</h2>
-          <div className="text-clab-main-light font-medium">
-            <p>{subTitle}</p>
-            <p>
-              {name} ({memberId}) • {formattedDate(createdAt)}
-            </p>
+    <QueryErrorBoundary
+      fallback={({ reset }) => <ErrorSection reset={reset} />}
+    >
+      <Content>
+        <Header title={['기술 블로그', title]} />
+        <Section>
+          <Image
+            src={createImageUrl(imageUrl)}
+            alt={title}
+            className="rounded-lg border object-cover"
+          />
+          <div className="my-6 space-y-2 break-keep text-center">
+            <h2 className="text-clab-main text-4xl font-bold">{title}</h2>
+            <div className="text-clab-main-light font-medium">
+              <p>{subTitle}</p>
+              <p>
+                {name} ({memberId}) • {formattedDate(createdAt)}
+              </p>
+            </div>
+            <Share className="justify-center" />
           </div>
-          <Share className="justify-center" />
-        </div>
-        <div className="whitespace-pre-wrap break-keep">{content}</div>
-      </Section>
-    </Content>
+          <div className="whitespace-pre-wrap break-keep">{content}</div>
+        </Section>
+      </Content>
+    </QueryErrorBoundary>
   );
 }

apps/member/src/pages/CalendarPage/index.tsx

@@ -1,28 +1,34 @@
 import { Suspense } from 'react';
 
 import Content from '@components/common/Content/Content';
+import ErrorSection from '@components/common/ErrorSection/ErrorSection';
 import Header from '@components/common/Header/Header';
+import QueryErrorBoundary from '@components/common/QueryErrorBoundary';
 
 import CalendarSection from './components/CalendarSection';
 import { StatusSection } from './components/StatusSection';
 import { TableSection } from './components/TableSection';
 
 export default function CalendarPage() {
   return (
-    <Content>
-      <Header title="일정" />
+    <QueryErrorBoundary
+      fallback={({ reset }) => <ErrorSection reset={reset} />}
+    >
+      <Content>
+        <Header title="일정" />
 
-      <Suspense>
-        <StatusSection />
-      </Suspense>
+        <Suspense>
+          <StatusSection />
+        </Suspense>
 
-      <Suspense>
-        <CalendarSection />
-      </Suspense>
+        <Suspense>
+          <CalendarSection />
+        </Suspense>
 
-      <Suspense>
-        <TableSection />
-      </Suspense>
-    </Content>
+        <Suspense>
+          <TableSection />
+        </Suspense>
+      </Content>
+    </QueryErrorBoundary>
   );
 }

apps/member/src/pages/LibraryDetailPage/index.tsx

@@ -1,15 +1,13 @@
 import { Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { QueryErrorResetBoundary } from '@tanstack/react-query';
-
 import Content from '@components/common/Content/Content';
 import ErrorSection from '@components/common/ErrorSection/ErrorSection';
 import Header from '@components/common/Header/Header';
+import QueryErrorBoundary from '@components/common/QueryErrorBoundary';
 
 import { LIBRARY_MESSAGE } from '@constants/message';
 import { PATH, PATH_NAME } from '@constants/path';
-import { ErrorBoundary } from '@suspensive/react';
 
 import { DetailsSection } from './components/BookDetailSection';
 import { LoanHistorySection } from './components/BookLoanHistorySection';
@@ -22,24 +20,19 @@ export default function LibraryDetailPage() {
   }
 
   return (
-    <QueryErrorResetBoundary>
-      {({ reset }) => (
-        <ErrorBoundary
-          onReset={reset}
-          fallback={({ reset }) => <ErrorSection reset={reset} />}
-        >
-          <Content>
-            <Header title={[PATH_NAME.LIBRARY]} path={[PATH.LIBRARY]} />
-            <Suspense>
-              <DetailsSection paramsId={id} />
-            </Suspense>
-
-            <Suspense>
-              <LoanHistorySection paramsId={id} />
-            </Suspense>
-          </Content>
-        </ErrorBoundary>
-      )}
-    </QueryErrorResetBoundary>
+    <QueryErrorBoundary
+      fallback={({ reset }) => <ErrorSection reset={reset} />}
+    >
+      <Content>
+        <Header title={[PATH_NAME.LIBRARY]} path={[PATH.LIBRARY]} />
+        <Suspense>
+          <DetailsSection paramsId={id} />
+        </Suspense>
+
+        <Suspense>
+          <LoanHistorySection paramsId={id} />
+        </Suspense>
+      </Content>
+    </QueryErrorBoundary>
   );
 }

apps/member/src/pages/LibraryPage/index.tsx

@@ -1,16 +1,14 @@
 import { Suspense } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { QueryErrorResetBoundary } from '@tanstack/react-query';
-
 import { Button } from '@clab-platforms/design-system';
 
 import Content from '@components/common/Content/Content';
 import ErrorSection from '@components/common/ErrorSection/ErrorSection';
 import Header from '@components/common/Header/Header';
+import QueryErrorBoundary from '@components/common/QueryErrorBoundary';
 
 import { PATH } from '@constants/path';
-import { ErrorBoundary } from '@suspensive/react';
 
 import BookExplorerSection from './components/BookExplorerSection';
 import NewBooksSection from './components/NewBooksSection';
@@ -19,29 +17,24 @@ export default function LibraryPage() {
   const navigate = useNavigate();
 
   return (
-    <QueryErrorResetBoundary>
-      {({ reset }) => (
-        <ErrorBoundary
-          onReset={reset}
-          fallback={({ reset }) => <ErrorSection reset={reset} />}
-        >
-          <Content>
-            <Header title="도서관">
-              <Button size="sm" onClick={() => navigate(PATH.SUPPORT)}>
-                희망도서 신청하기
-              </Button>
-            </Header>
-
-            <Suspense>
-              <NewBooksSection />
-            </Suspense>
-
-            <Suspense>
-              <BookExplorerSection />
-            </Suspense>
-          </Content>
-        </ErrorBoundary>
-      )}
-    </QueryErrorResetBoundary>
+    <QueryErrorBoundary
+      fallback={({ reset }) => <ErrorSection reset={reset} />}
+    >
+      <Content>
+        <Header title="도서관">
+          <Button size="sm" onClick={() => navigate(PATH.SUPPORT)}>
+            희망도서 신청하기
+          </Button>
+        </Header>
+
+        <Suspense>
+          <NewBooksSection />
+        </Suspense>
+
+        <Suspense>
+          <BookExplorerSection />
+        </Suspense>
+      </Content>
+    </QueryErrorBoundary>
   );
 }