diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index 03c1386..d64b6da 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -1,7 +1,9 @@ +import { AxiosError } from 'axios'; import Link from 'next/link'; import { FC, useState } from 'react'; import { useRecoilValue, useResetRecoilState } from 'recoil'; +import { ErrorResponse } from '@src/apis'; import Icon from '@src/components/common/Icon'; import UserInfo from '@src/components/common/UserInfo'; import useMember from '@src/queires/useMember'; @@ -12,8 +14,17 @@ import UserMenu from './UserMenu'; const Header: FC = () => { const userSession = useRecoilValue($userSession); - const { data: member } = useMember(userSession?.accessToken); const resetUser = useResetRecoilState($userSession); + const { data: member } = useMember(userSession?.accessToken, { + onError: (err) => { + const error = err as AxiosError; + const code = error.response?.data.code; + if (Number(code) !== 2003) return; + + resetUser(); + }, + }); + const [viewUserMenu, setViewUserMenu] = useState(false); const handleLogout = () => { diff --git a/src/queires/useMember.ts b/src/queires/useMember.ts index 2eb9da0..4fe7614 100644 --- a/src/queires/useMember.ts +++ b/src/queires/useMember.ts @@ -1,10 +1,11 @@ -import { useQuery } from '@tanstack/react-query'; +import { UseQueryOptions, useQuery } from '@tanstack/react-query'; import { GetMemberResponse, getMember } from '@src/apis'; import { queryKeys } from '@src/queires/constant'; -const useMember = (token = '') => { +const useMember = (token = '', options?: UseQueryOptions) => { const result = useQuery([queryKeys.profile, token], getMember, { + ...options, enabled: !!token, });