From 94fe87277e891e0ae2aa3fdb8461c3aa7733c9bd Mon Sep 17 00:00:00 2001
From: gxxrxn <rbfks1221@naver.com>
Date: Tue, 9 Jul 2024 20:12:29 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20AuthFailedErrorBoundary=20=EB=AC=B4?=
 =?UTF-8?q?=ED=95=9C=20reset=20=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=9E=AC=EC=8B=9C=EB=8F=84=20=EA=B0=80=EB=8A=A5?=
 =?UTF-8?q?=ED=95=9C=20fallback=20=EB=A0=8C=EB=8D=94=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/AuthFailedErrorBoundary.tsx        | 24 ++++++++-----------
 .../common/QueryErrorBoundaryFallback.tsx     |  2 +-
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/components/common/AuthFailedErrorBoundary.tsx b/src/components/common/AuthFailedErrorBoundary.tsx
index efd5ce15..76e69a9b 100644
--- a/src/components/common/AuthFailedErrorBoundary.tsx
+++ b/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} />;
 };
diff --git a/src/components/common/QueryErrorBoundaryFallback.tsx b/src/components/common/QueryErrorBoundaryFallback.tsx
index 5146aece..a457f27d 100644
--- a/src/components/common/QueryErrorBoundaryFallback.tsx
+++ b/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>
   );