fix: AuthFailedErrorBoundary 무한 reset 되지 않도록 재시도 가능한 fallback 렌더링

src/components/common/AuthFailedErrorBoundary.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { useEffect } from 'react';
 import { QueryErrorResetBoundary } from '@tanstack/react-query';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 
+import { SESSION_COOKIES_KEYS } from '@/constants';
+import { deleteCookie } from '@/utils/cookie';
 import useToast from '@/components/common/Toast/useToast';
-import { isAuthFailedError, isAxiosErrorWithCustomCode } from '@/utils/helpers';
-import Loading from '@/components/common/Loading';
+import QueryErrorBoundaryFallback from '@/components/common/QueryErrorBoundaryFallback';
 
 const AuthFailedErrorBoundary = ({
   children,
@@ -26,18 +26,14 @@ const AuthFailedErrorBoundary = ({
 
 export default AuthFailedErrorBoundary;
 
-const AuthFailedFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
+const AuthFailedFallback = ({ resetErrorBoundary }: FallbackProps) => {
   const { show: showToast } = useToast();
 
-  useEffect(() => {
-    if (
-      isAxiosErrorWithCustomCode(error) &&
-      isAuthFailedError(error.response.data.code)
-    ) {
-      showToast({ message: '다시 로그인 해주세요' });
-      resetErrorBoundary();
-    }
-  }, [error, resetErrorBoundary, showToast]);
+  const handleError = () => {
+    SESSION_COOKIES_KEYS.map(key => deleteCookie(key));
+    showToast({ message: '다시 로그인 해주세요' });
+    resetErrorBoundary();
+  };
 
-  return <Loading fullpage />;
+  return <QueryErrorBoundaryFallback resetErrorBoundary={handleError} />;
 };

src/components/common/QueryErrorBoundaryFallback.tsx

@@ -9,7 +9,7 @@ const QueryErrorBoundaryFallback = ({
     <div className="flex h-full w-full flex-col items-center justify-center gap-[1rem] rounded-lg py-[2rem]">
       <p className="font-body1-bold">데이터를 불러오는 중 문제가 발생했어요.</p>
       <Button size="small" onClick={resetErrorBoundary}>
-        다시 불러오기
+        다시 시도하기
       </Button>
     </div>
   );