feat: AsyncBoundary 기본 폴백 설정

f-lab-edu · Feb 10, 2025 · 7c94783 · 7c94783
1 parent 94e3341
commit 7c94783
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/src/shared/ui/async-boundary.tsx b/src/shared/ui/async-boundary.tsx
@@ -2,13 +2,25 @@
 
 import { Suspense, SuspenseProps } from 'react';
 import { ErrorBoundary, ErrorBoundaryPropsWithRender } from 'react-error-boundary';
+import { Loading } from './loading';
+import { Rejected } from './rejected';
 
 export interface AsyncBoundaryProps extends Omit<ErrorBoundaryPropsWithRender, 'fallbackRender'> {
-  pendingFallback: SuspenseProps['fallback'];
-  rejectedFallback: ErrorBoundaryPropsWithRender['fallbackRender'];
+  pendingFallback?: SuspenseProps['fallback'];
+  rejectedFallback?: ErrorBoundaryPropsWithRender['fallbackRender'];
 }
 
-const AsyncBoundary = ({ pendingFallback, rejectedFallback, children, ...errorBoundaryProps }: AsyncBoundaryProps) => {
+const AsyncBoundary = ({
+  pendingFallback = <Loading />,
+  rejectedFallback = ({ error, resetErrorBoundary }) => (
+    <Rejected
+      error={error}
+      onReset={resetErrorBoundary}
+    />
+  ),
+  children,
+  ...errorBoundaryProps
+}: AsyncBoundaryProps) => {
   return (
     <ErrorBoundary
       fallbackRender={rejectedFallback}