diff --git a/src/apis/apiClient.ts b/src/apis/apiClient.ts index 42f0e26..658909e 100644 --- a/src/apis/apiClient.ts +++ b/src/apis/apiClient.ts @@ -49,7 +49,13 @@ apiClient.interceptors.response.use( try { originalRequest.__isRetryRequest = true; - const refreshResponse = await reissueTokenClient.get("/users/reissue"); + const deviceId = localStorage.getItem("deviceId"); + +const refreshResponse = await reissueTokenClient.get("/users/reissue", { + headers: { + "X-Device-Id": deviceId ?? "", + }, +});; const newAccessToken = refreshResponse?.data?.data?.accessToken ?? null; if (!newAccessToken) { diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx index fe6bd45..77312c2 100644 --- a/src/components/PageHeader/PageHeader.tsx +++ b/src/components/PageHeader/PageHeader.tsx @@ -10,6 +10,7 @@ import { useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import useUserStore from "@stores/useUserStore"; import AccountCircleIcon from "@mui/icons-material/AccountCircle"; +import apiClient from "@apis/apiClient"; import ArrowBackIcon from "@mui/icons-material/ArrowBackIos"; interface PageHeaderProps { @@ -31,11 +32,38 @@ const PageHeader = ({ title, userName, action }: PageHeaderProps) => { setAnchorEl(null); }; - const handleLogout = () => { - sessionStorage.removeItem("_ZA"); - clearUser(); - navigate("/sign-in"); - handleClose(); + const handleLogout = async () => { + try { + const accessToken = sessionStorage.getItem("_ZA"); + const deviceId = localStorage.getItem("deviceId"); + + if (!accessToken || !deviceId) { + throw new Error("로그아웃 정보가 부족합니다."); + } + + await apiClient.post( + "/users/logout", + {}, + { + headers: { + Authorization: `Bearer ${accessToken}`, + "X-Device-Id": deviceId, + }, + withCredentials: true, + } + ); + + sessionStorage.removeItem("_ZA"); + clearUser(); + navigate("/sign-in"); + } catch (error) { + console.error("로그아웃 실패", error); + sessionStorage.removeItem("_ZA"); + clearUser(); + navigate("/sign-in"); + } finally { + handleClose(); + } }; return ( diff --git a/src/pages/SignInPage/SignInPage.tsx b/src/pages/SignInPage/SignInPage.tsx index cbdb0af..7306543 100644 --- a/src/pages/SignInPage/SignInPage.tsx +++ b/src/pages/SignInPage/SignInPage.tsx @@ -18,11 +18,26 @@ const SignInPage = () => { const isSignInButtonDisabled = !userId || !password; const handleClickSignInButton = () => { + let deviceId = localStorage.getItem("deviceId"); + if (!deviceId) { + deviceId = crypto.randomUUID(); // 브라우저에서 UUID 생성 + localStorage.setItem("deviceId", deviceId); + } + apiClient - .post("/users/login", { - id: userId, - password, - }) + .post( + "/users/login", + { + id: userId, + password, + }, + { + headers: { + "X-Device-Id": deviceId, + }, + withCredentials: true, + } + ) .then((res) => { const accessToken = res?.data?.data?.accessToken; if (res.status === 200 && accessToken) {