첫 커밋

src/widgets/fallbacks/api-error.tsx

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import { FallbackProps } from 'react-error-boundary';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+
+import { Dialog, DialogProps } from '@/shared/ui/dialogs/dialog';
+
+type CommonErrorProps = FallbackProps & {
+  height?: number;
+};
+export const APIError = ({ error, resetErrorBoundary }: CommonErrorProps) => {
+  const { navigateBack } = useNavigate();
+  const msg = useMemo(() => {
+    let message: Partial<DialogProps> = {
+      title: '일시적인 오류가 발생하였습니다.',
+      message: '잠시 후 다시 시도해주세요.',
+    };
+    if (error?.response?.data?.message) {
+      message = { message: error.response.data.message };
+    }
+    return message;
+  }, [error]);
+
+  const handleCancel = () => {
+    navigateBack();
+    resetErrorBoundary();
+  };
+
+  return (
+    <Dialog
+      afterLeave={() => null}
+      open={true}
+      onClose={() => null}
+      onConfirmClick={resetErrorBoundary}
+      onCancelClick={handleCancel}
+      message={msg.message}
+      buttonLabel={['취소', '재시도']}
+    />
+  );
+};

src/widgets/fallbacks/common-error.tsx

@@ -0,0 +1,35 @@
+import { useMemo, useState } from 'react';
+import { FallbackProps } from 'react-error-boundary';
+
+import { Dialog, DialogProps } from '@/shared/ui/dialogs/dialog';
+
+type CommonErrorProps = FallbackProps & {
+  height?: number;
+};
+export const CommonError = ({ error, resetErrorBoundary }: CommonErrorProps) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const msg = useMemo(() => {
+    let message: Partial<DialogProps> = {
+      title: '일시적인 오류가 발생하였습니다.',
+      message: '잠시 후 다시 시도해주세요.',
+    };
+    if (error?.response?.data?.message) {
+      message = { message: error.response.data.message };
+    }
+    return message;
+  }, [error]);
+
+  return (
+    <Dialog
+      afterLeave={() => null}
+      open={isOpen}
+      onClose={() => setIsOpen(false)}
+      onConfirmClick={resetErrorBoundary}
+      onCancelClick={() => {
+        location.href = '/';
+      }}
+      message={msg.message}
+      buttonLabel={['취소', '재시도']}
+    />
+  );
+};

src/widgets/fallbacks/index.ts

@@ -0,0 +1,2 @@
+export { CommonError } from './common-error';
+export { NotFoundError } from './not-found-error';

src/widgets/fallbacks/kick-out-error.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable @cspell/spellchecker */
+import { useEffect, useMemo } from 'react';
+import { CBDCAxiosFallbackProps } from '@/shared/@types/error';
+import { Dialog, DialogProps } from '@/shared/ui/dialogs/dialog';
+
+export const KickOutError = ({ error, resetErrorBoundary }: CBDCAxiosFallbackProps) => {
+  useEffect(() => {
+    console.error('[ErrorBoundary] Kickout Error', JSON.stringify(error.response?.data));
+    // clearAuthData();
+  }, [error]);
+
+  const msg = useMemo(() => {
+    let message: Partial<DialogProps> = {
+      title: '일시적인 오류가 발생하였습니다.',
+      message: '잠시 후 다시 시도해주세요.',
+    };
+    if (error?.response?.data?.message) {
+      message = { message: error.response.data.message };
+    }
+    return message;
+  }, [error]);
+
+  const handleCancel = () => {
+    resetErrorBoundary?.();
+  };
+
+  const handleConfirm = () => {
+    resetErrorBoundary?.();
+    // kickOut();
+  };
+
+  return (
+    <Dialog
+      afterLeave={() => null}
+      open={true}
+      onClose={() => null}
+      onConfirmClick={handleConfirm}
+      onCancelClick={handleCancel}
+      message={msg.message}
+    />
+  );
+};

src/widgets/fallbacks/not-found-error.tsx

@@ -0,0 +1,10 @@
+export const NotFoundError = () => {
+  return (
+    <div className="blank">
+      <div className="blank-inner-box no-auth">
+        <div className="icon">ICON</div>
+        <p>접근할 수 없는 페이지입니다.</p>
+      </div>
+    </div>
+  );
+};