feat: Async Boundary 구현

src/components/AsyncBoundary/components/ErrorBoundary.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import { Component, type PropsWithChildren } from 'react';
+
+import CommonErrorScreen from './ErrorScreen';
+
+interface ErrorBoundaryProps {
+  errorFallBack?: ReactNode;
+  onError?: (error: Error) => void;
+}
+
+class ErrorBoundary extends Component<
+  PropsWithChildren<ErrorBoundaryProps>,
+  { error: Error | null }
+> {
+  error = null;
+
+  componentDidCatch(error: Error) {
+    if (this.props.onError) {
+      this.setState({
+        error,
+      });
+    }
+  }
+
+  render() {
+    const { error } = this.state;
+
+    if (error) {
+      if (this.props.errorFallBack) {
+        return this.props.errorFallBack;
+      }
+
+      return <CommonErrorScreen error={error} />;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/components/AsyncBoundary/components/ErrorScreen.tsx

@@ -0,0 +1,14 @@
+interface CommonErrorScreenProps {
+  error: Error;
+}
+
+// TODO: 의도되지 않은 에러에 대한 공통 스크린 정의 (404, 400, 500 등은 에러 페이지로 구현)
+const CommonErrorScreen = ({ error }: CommonErrorScreenProps) => {
+  if (!error) {
+    window.location.reload();
+  }
+
+  return <>{JSON.stringify(error)}</>;
+};
+
+export default CommonErrorScreen;

src/components/AsyncBoundary/index.tsx

@@ -0,0 +1,21 @@
+import { type PropsWithChildren, type ReactNode, Suspense } from 'react';
+
+import LoadingView from '../Loading';
+import ErrorBoundary from './components/ErrorBoundary';
+
+interface AsyncBoundaryProps {
+  loadingFallback?: ReactNode;
+}
+
+const AsyncBoundary = ({
+  children,
+  loadingFallback = <LoadingView />,
+}: PropsWithChildren<AsyncBoundaryProps>) => {
+  return (
+    <ErrorBoundary>
+      <Suspense fallback={loadingFallback}>{children}</Suspense>
+    </ErrorBoundary>
+  );
+};
+
+export default AsyncBoundary;

src/components/Loading/components/Spinner.tsx

@@ -0,0 +1,5 @@
+const Spinner = () => {
+  return <>spinner</>;
+};
+
+export default Spinner;

src/components/Loading/index.tsx

@@ -0,0 +1,18 @@
+import type { FC } from 'react';
+
+import Spinner from './components/Spinner';
+
+type LoadingViewType = 'spinner';
+
+interface LoadingViewProps {
+  type?: LoadingViewType;
+}
+
+const LoadingView: FC<LoadingViewProps> = ({ type = 'spinner' }) => {
+  switch (type) {
+    default:
+      return <Spinner />;
+  }
+};
+
+export default LoadingView;