Merge pull request #297 from codestates-seb/feat/useGet

[Client] useGet에 제네릭 적용 및 403 에러 처리

client/src/components/Etc/Constants.js

@@ -121,3 +121,6 @@ export const ERROR_INFORMATION = `현재 정보를 불러올 수 없습니다.
 잠시 후 다시 시도해주세요.`;
 
 export const NO_ORDER_HISTORY = '주문 내역이 없습니다.';
+
+export const TOKEN_EXPIRED_INFOMATION =
+	'로그인이 만료되었습니다. 다시 로그인해주세요.';

client/src/hooks/useFetch.ts

@@ -1,13 +1,26 @@
+import { useNavigate } from 'react-router-dom';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useState } from 'react';
-import { AxiosResponse } from 'axios';
+import { AxiosResponse, AxiosError } from 'axios';
+import { toast } from 'react-toastify';
 import axiosInstance from '../utils/axiosInstance';
+import { TOKEN_EXPIRED_INFOMATION } from '../components/Etc/Constants';
 
-export function useGet(url: string, keyValue: string) {
-	const { isLoading, isError, isSuccess, data, error, refetch } = useQuery(
-		[keyValue],
-		() => axiosInstance.get(url),
-	);
+export function useGet<T>(url: string, keyValue: string) {
+	const navigate = useNavigate();
+	const { isLoading, isError, isSuccess, data, error, refetch } = useQuery<
+		AxiosResponse<T>
+	>([keyValue], () => axiosInstance.get(url), {
+		onError: (errRes) => {
+			const { response } = errRes as AxiosError;
+
+			if (response?.status === 403) {
+				localStorage.clear();
+				navigate('/login');
+				toast.error(TOKEN_EXPIRED_INFOMATION);
+			}
+		},
+	});
 
 	return { isLoading, isError, isSuccess, data, error, refetch };
 }