feat: apiErrorboundary 수정

package.json

@@ -24,13 +24,14 @@
     "nanoid": "^5.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.50.1",
     "react-router-dom": "^6.22.1",
     "react-toastify": "^10.0.4",
     "wowds-icons": "^0.1.0",
     "wowds-tokens": "^0.0.9",
-    "zustand": "^4.5.0",
-    "wowds-ui": "^0.1.9"
+    "wowds-ui": "^0.1.9",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
     "@sentry/react": "^8.22.0",

src/components/ApiErrorBoundary.tsx

@@ -1,17 +1,26 @@
-import { PropsWithChildren } from 'react';
-
+import { PropsWithChildren, PropsWithRef } from 'react';
+import * as Sentry from '@sentry/react';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { redirect } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import RoutePath from '@/routes/routePath';
+import NotFoundPage from '@/pages/NotFound';
 
 type ErrorResponseType = {
   errorCodeName: string;
   errorMessage: string;
 };
 
-export default function ApiErrorBoundary({ children }: PropsWithChildren) {
+export type ApiErrorBoundaryProps = PropsWithRef<
+  PropsWithChildren<ErrorBoundary>
+>;
+
+export default function ApiErrorBoundary({
+  children,
+  ...rest
+}: ApiErrorBoundaryProps) {
   const queryClient = useQueryClient();
 
   queryClient.getQueryCache().config = {
@@ -38,7 +47,19 @@ export default function ApiErrorBoundary({ children }: PropsWithChildren) {
         toast.error(message);
         break;
     }
+
+    if (errorResponse) {
+      // eslint-disable-next-line import/namespace
+      Sentry.captureException(errorResponse, {});
+    }
   }
 
-  return <>{children}</>;
+  return (
+    <ErrorBoundary
+      {...rest}
+      onError={(error) => handleError(error as AxiosError)}
+      fallbackRender={() => <NotFoundPage />}>
+      {children}
+    </ErrorBoundary>
+  );
 }