From 9c104dd9279ca40094b18593d96d47c75ec6cfcc Mon Sep 17 00:00:00 2001
From: suyeon <whtndus0809@naver.com>
Date: Wed, 14 May 2025 15:32:49 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=A4=91=EB=B3=B5=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=ED=97=88=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/apiClient.ts                    |  8 ++++-
 src/components/PageHeader/PageHeader.tsx | 38 ++++++++++++++++++++----
 src/pages/SignInPage/SignInPage.tsx      | 23 +++++++++++---
 3 files changed, 59 insertions(+), 10 deletions(-)

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 ca7ad3a..bc11313 100644
--- a/src/components/PageHeader/PageHeader.tsx
+++ b/src/components/PageHeader/PageHeader.tsx
@@ -3,6 +3,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";
 
 interface PageHeaderProps {
   title: string;
@@ -23,11 +24,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) {