feat: 로그아웃 에러 처리 로직 개선

Author: pepperdad

apps/ticket/src/app/(pages)/mypage/_clientBoundary/UserProfileClient/index.tsx

@@ -9,6 +9,7 @@ import { usePatchUserInfoMutation } from "@/data/users/patchUserInfo/mutation";
 import { useUserEmailCheckMutation } from "@/data/users/postUserEmailCheck/mutation";
 import { useLogoutMutation } from "@/data/users/postUserLogout/mutation";
 import { USER_QUERY_KEYS } from "@/data/users/queryKeys";
+import { ERROR_CODE } from "@/lib/axios/utils/errorCode";
 import { safeLocalStorage } from "@/lib/storage";
 import { IS_LOGINED } from "@/shared/constants/storage";
 import { isAxiosErrorResponse } from "@/shared/types/axioxError";
@@ -147,6 +148,10 @@ export const UserProfileClient = () => {
       window.location.href = "/login";
     } catch (error) {
       if (isAxiosErrorResponse(error)) {
+        if (error.code === ERROR_CODE.NO_ACCESS_TOKEN) {
+          return;
+        }
+
         alert(error.message);
       }
     }

apps/ticket/src/lib/axios/index.ts

@@ -28,6 +28,7 @@ instance.interceptors.request.use(
 );
 
 let isAlertShown = false;
+let isLoginAlertShown = false;
 
 // 응답 인터셉터
 instance.interceptors.response.use(
@@ -52,29 +53,30 @@ instance.interceptors.response.use(
     if (isAxiosErrorResponse(error.response?.data)) {
       // 엑세스 토큰 없음
       if (error.response?.data.code === ERROR_CODE.NO_ACCESS_TOKEN) {
-        alert("로그인이 필요한 페이지입니다.");
+        if (error.config?.url === API_URL.USER.LOGOUT) {
+          safeLocalStorage.remove(IS_LOGINED);
+
+          return;
+        }
 
-        safeLocalStorage.remove(IS_LOGINED);
-        window.location.href = "/login";
+        redirectToLoginOnce();
 
         return;
       }
 
       if (error.response?.data.code === ERROR_CODE.LOGIN_REQUIRED) {
         // 인증 페이지에서는 로그인 페이지로 이동하지 않음
         if (window.location.pathname !== "/auth") {
-          alert("로그인이 필요한 페이지입니다.");
+          redirectToLoginOnce();
 
-          safeLocalStorage.remove(IS_LOGINED);
-          window.location.href = "/login";
+          return;
         }
       }
 
       if (error.response?.data.code === ERROR_CODE.REFRESH_TOKEN_EXPIRED) {
-        alert("로그인이 필요한 페이지입니다.");
+        redirectToLoginOnce();
 
-        safeLocalStorage.remove(IS_LOGINED);
-        window.location.href = "/login";
+        return;
       }
     }
 
@@ -121,3 +123,13 @@ instance.interceptors.response.use(
     return Promise.reject(error.response?.data);
   },
 );
+
+function redirectToLoginOnce() {
+  if (isLoginAlertShown) return;
+
+  isLoginAlertShown = true;
+
+  alert("로그인이 필요한 페이지입니다.");
+  safeLocalStorage.remove(IS_LOGINED);
+  window.location.href = "/login";
+}

apps/ticket/src/shared/components/Footer/index.tsx

@@ -27,12 +27,21 @@ export const Footer = () => {
         <Typography type="body12" color="gray400">
           Copyright © 2024 PERMIT
         </Typography>
-        <Typography type="body12" color="gray400">
-          Instagram_Permit
-        </Typography>
-        <Typography type="body12" color="gray400">
-          Instagram_ceiling
-        </Typography>
+        <a href="https://www.instagram.com/permit_invites/" target="_blank" rel="noreferrer">
+          <Typography type="body12" color="gray400">
+            Instagram_Permit
+          </Typography>
+        </a>
+        <a href="https://www.instagram.com/ceilingservice/" target="_blank" rel="noreferrer">
+          <Typography type="body12" color="gray400">
+            Instagram_Ceiling
+          </Typography>
+        </a>
+        <a href="https://www.instagram.com/olympan.kr/" target="_blank" rel="noreferrer">
+          <Typography type="body12" color="gray400">
+            Instagram_Olympan
+          </Typography>
+        </a>
         <Typography type="body12" color="gray400">
           hello@permitseoul.com
         </Typography>