diff --git a/src/hooks/useLogout.ts b/src/hooks/useLogout.ts new file mode 100644 index 00000000..548cf4b6 --- /dev/null +++ b/src/hooks/useLogout.ts @@ -0,0 +1,15 @@ +import { useNavigate } from 'react-router-dom'; + +export const useLogout = () => { + const navigate = useNavigate(); + + const handleLogout = () => { + // 1. localStorage에서 토큰 제거 + localStorage.removeItem('authToken'); + + // 2. 로그인 페이지로 리다이렉트 + navigate('/', { replace: true }); + }; + + return { handleLogout }; +}; diff --git a/src/pages/mypage/Mypage.tsx b/src/pages/mypage/Mypage.tsx index 46df6451..17936f5f 100644 --- a/src/pages/mypage/Mypage.tsx +++ b/src/pages/mypage/Mypage.tsx @@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'; import { colors, typography } from '@/styles/global/global'; import MenuButton from '@/components/Mypage/MenuButton'; import { usePopupActions } from '@/hooks/usePopupActions'; +import { useLogout } from '@/hooks/useLogout'; import alert from '../../assets/mypage/alert.svg'; import guide from '../../assets/mypage/guide.svg'; import save from '../../assets/mypage/save.svg'; @@ -18,6 +19,7 @@ const Mypage = () => { const [profile, setProfile] = useState(null); const { openConfirm, closePopup } = usePopupActions(); const navigate = useNavigate(); + const { handleLogout: logout } = useLogout(); useEffect(() => { const fetchProfile = async () => { @@ -40,10 +42,9 @@ const Mypage = () => { title: '로그아웃', disc: '또 THIP 해주실거죠?', onConfirm: () => { - //실제 로그아웃 로직 구현 console.log('로그아웃 실행'); closePopup(); - //토큰 삭제, 메인 페이지로 이동 + logout(); // 실제 로그아웃 로직 실행 }, onClose: () => { console.log('로그아웃 취소');