🐛 fix: 토큰 만료 상태에서 마이페이지 접근 시 로컬스토리지 클리어 및 로그인 페이지로 이동 #311

client/src/assets/Constants.ts

@@ -129,7 +129,7 @@ export const ERROR_INFORMATION = `현재 정보를 불러올 수 없습니다.
 export const NO_ORDER_HISTORY = '주문 내역이 없습니다.';
 
 export const TOKEN_EXPIRED_INFORMATION =
-	'로그인이 만료되었습니다. 다시 로그인해주세요.';
+	'로그인 세션이 만료되었습니다. 다시 로그인해주세요.';
 
 export const WRITE_MORE_THAN_20_CHARACTERS = '20자 이상 작성해주세요.';
 
@@ -154,3 +154,6 @@ export const NO_TALKS_WRITTEN = '작성하신 토크가 없습니다.';
 export const NO_WISH_LIST = '찜한 상품이 없습니다.';
 
 export const NO_SUBSCRIPTION_HISTORY = '정기구독 신청 내역이 없습니다.';
+
+export const EXPIRED_TOKEN_RESPONSE_MESSAGE =
+	'Full authentication is required to access this resource';

client/src/hooks/useFetch.ts

@@ -4,7 +4,15 @@ import { useState } from 'react';
 import { AxiosResponse, AxiosError } from 'axios';
 import { toast } from 'react-toastify';
 import axiosInstance from '../utils/axiosInstance';
-import { TOKEN_EXPIRED_INFORMATION } from '../assets/Constants';
+import {
+	TOKEN_EXPIRED_INFORMATION,
+	EXPIRED_TOKEN_RESPONSE_MESSAGE,
+} from '../assets/Constants';
+
+interface ResponseData {
+	message: string;
+	status: number;
+}
 
 export function useGet<T>(url: string, keyValue: string) {
 	const navigate = useNavigate();
@@ -13,8 +21,12 @@ export function useGet<T>(url: string, keyValue: string) {
 	>([keyValue], () => axiosInstance.get(url), {
 		onError: (errRes) => {
 			const { response } = errRes as AxiosError;
+			const { message } = response?.data as ResponseData;
 
-			if (response?.status === 403) {
+			if (
+				response?.status === 403 ||
+				message === EXPIRED_TOKEN_RESPONSE_MESSAGE
+			) {
 				localStorage.clear();
 				navigate('/login');
 				toast.error(TOKEN_EXPIRED_INFORMATION);