feat: 로그아웃 성공

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';

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 @@
   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 @@
       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);

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<HTMLDivElement>(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(() => {

src/shared/component/Layout/layoutHeader/Header.tsx

@@ -1,13 +1,14 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate, useLocation, Link } from 'react-router-dom';
 
 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<string>(initialMenu);
-  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
-  const [openProfile, setOpenProfile] = useState<boolean>(false);
 
+  const [openProfile, setOpenProfile] = useState<boolean>(false);
   const { openModal, closeModal, ModalWrapper } = useModal();
 
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(!!accessToken);
+  const { data: user, isLoading } = useGetUser();
+
+  useEffect(() => {
+    setIsLoggedIn(!!localStorage.getItem('accessToken'));
+  }, []);
+
   const handleLogin = () => {
-    setIsLoggedIn(true);
     openModal(<LoginModal onClose={closeModal} />);
   };
 
@@ -61,9 +67,17 @@ const Header = () => {
           );
         })}
       </nav>
-      {/* <button className={styles.profilePlaceholder} onClick={handleProfile} /> */}
-      {isLoggedIn && openProfile && (
-        <UserModal setIsLoggedIn={setIsLoggedIn} onClose={handleProfile} />
+
+      {!isLoading && user && (
+        <>
+          <img
+            src={user.profileImageUrl}
+            alt="유저 프로필"
+            className={styles.profilePlaceholder}
+            onClick={handleProfile}
+          />
+          {openProfile && <UserModal onClose={handleProfile} />}
+        </>
       )}
     </>
   );
@@ -87,4 +101,5 @@ const Header = () => {
     </header>
   );
 };
+
 export default Header;