diff --git a/src/api/auth/googleLogin/authConstants.ts b/src/api/auth/googleLogin/authConstants.ts index 8d1eee5b..58493fcb 100644 --- a/src/api/auth/googleLogin/authConstants.ts +++ b/src/api/auth/googleLogin/authConstants.ts @@ -1,5 +1,5 @@ export const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID; -export const GOOGLE_REDIRECT_URI = import.meta.env.VITE_GOOGLE_REDIRECT_URI; +export const GOOGLE_REDIRECT_URI = import.meta.env.VITE_GOOGLE_REDIRECT_URI_LOCAL; export const GOOGLE_AUTH_BASE_URL = 'https://accounts.google.com/o/oauth2/v2/auth'; export const GOOGLE_SCOPE = 'openid email profile'; export const GOOGLE_RESPONSE_TYPE = 'code'; diff --git a/src/api/axiosInstance.ts b/src/api/axiosInstance.ts index 67cb8f1b..631ab46e 100644 --- a/src/api/axiosInstance.ts +++ b/src/api/axiosInstance.ts @@ -1,5 +1,4 @@ import axios from 'axios'; - import { HTTP_STATUS } from '@/api/constant/httpStatus'; const axiosInstance = axios.create({ @@ -10,6 +9,17 @@ const axiosInstance = axios.create({ withCredentials: true, }); +axiosInstance.interceptors.request.use( + (config) => { + const token = localStorage.getItem('accessToken'); + if (token) { + config.headers.Authorization = `Bearer ${token}`; + } + return config; + }, + (error) => Promise.reject(error), +); + // 응답 인터셉터 axiosInstance.interceptors.response.use( (response) => response, @@ -18,11 +28,11 @@ axiosInstance.interceptors.response.use( const { status } = error.response; if (status === HTTP_STATUS.UNAUTHORIZED) { - // console.warn('인증 실패'); + console.warn('인증 실패'); } if (status === HTTP_STATUS.INTERNAL_SERVER_ERROR) { - // console.error('서버 오류가 발생'); + console.error('서버 오류가 발생'); } } return Promise.reject(error); diff --git a/src/common/component/UserModal/UserModal.tsx b/src/common/component/UserModal/UserModal.tsx index 84128464..ff635010 100644 --- a/src/common/component/UserModal/UserModal.tsx +++ b/src/common/component/UserModal/UserModal.tsx @@ -3,15 +3,16 @@ import { useEffect, useRef } from 'react'; import { IcDivider } from '@/assets/svg'; import * as styles from '@/common/component/UserModal/UserModal.css'; import { useGetUser } from '@/api/domain/signup/hook/useGetUser'; +import { usePostLogout } from '@/api/domain/signup/hook/usePostLogout'; interface UserModalProps { - setIsLoggedIn: (value: boolean) => void; onClose: () => void; } -const UserModal = ({ setIsLoggedIn, onClose }: UserModalProps) => { +const UserModal = ({ onClose }: UserModalProps) => { const modalRef = useRef(null); const { data: user, isLoading, isError } = useGetUser(); + const { mutate: logoutMutate } = usePostLogout(); const handleClickOutside = (e: MouseEvent) => { if (modalRef.current && !modalRef.current.contains(e.target as Node)) { @@ -20,8 +21,17 @@ const UserModal = ({ setIsLoggedIn, onClose }: UserModalProps) => { }; const handleLogout = () => { - setIsLoggedIn(false); - onClose(); + logoutMutate(undefined, { + onSuccess: () => { + localStorage.removeItem('accessToken'); + onClose(); + window.location.reload(); + }, + onError: (error) => { + console.error('로그아웃 실패:', error); + onClose(); + }, + }); }; useEffect(() => { diff --git a/src/shared/component/Layout/layoutHeader/Header.tsx b/src/shared/component/Layout/layoutHeader/Header.tsx index c7024ac0..70bc7c53 100644 --- a/src/shared/component/Layout/layoutHeader/Header.tsx +++ b/src/shared/component/Layout/layoutHeader/Header.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { useNavigate, useLocation, Link } from 'react-router-dom'; import * as styles from './Header.css'; @@ -6,8 +6,9 @@ import * as styles from './Header.css'; import { PATH } from '@/route/path'; import IcLogo from '@/assets/svg/IcLogo'; import LoginModal from '@/common/component/LoginModal/LoginModal'; -import { useModal } from '@/common/hook/useModal'; import UserModal from '@/common/component/UserModal/UserModal'; +import { useModal } from '@/common/hook/useModal'; +import { useGetUser } from '@/api/domain/signup/hook/useGetUser'; const MENUS = [ { label: '나의 할 일', path: PATH.TODO }, @@ -18,18 +19,23 @@ const MENUS = [ const Header = () => { const navigate = useNavigate(); const location = useLocation(); + const accessToken = localStorage.getItem('accessToken'); const findActiveMenu = MENUS.find((menu) => location.pathname.startsWith(menu.path)); const initialMenu = findActiveMenu ? findActiveMenu.label : ''; - const [activeMenu, setActiveMenu] = useState(initialMenu); - const [isLoggedIn, setIsLoggedIn] = useState(false); - const [openProfile, setOpenProfile] = useState(false); + const [openProfile, setOpenProfile] = useState(false); const { openModal, closeModal, ModalWrapper } = useModal(); + const [isLoggedIn, setIsLoggedIn] = useState(!!accessToken); + const { data: user, isLoading } = useGetUser(); + + useEffect(() => { + setIsLoggedIn(!!localStorage.getItem('accessToken')); + }, []); + const handleLogin = () => { - setIsLoggedIn(true); openModal(); }; @@ -61,9 +67,17 @@ const Header = () => { ); })} - {/*