From 6886367a9446fd5ad9efdb73af010a49a59d0628 Mon Sep 17 00:00:00 2001
From: hwookim <gusdn9754@gmail.com>
Date: Mon, 13 Feb 2023 23:12:14 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20useMember=20=EC=8B=A4=ED=8C=A8=20?=
 =?UTF-8?q?=EC=8B=9C=20token=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Header/Header.tsx | 13 ++++++++++++-
 src/queires/useMember.ts                |  5 +++--
 2 files changed, 15 insertions(+), 3 deletions(-)

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<ErrorResponse>;
+      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<GetMemberResponse>) => {
   const result = useQuery<GetMemberResponse>([queryKeys.profile, token], getMember, {
+    ...options,
     enabled: !!token,
   });