[사용자 정보 및 로그아웃 처리 개선] 사용자 이름 접근 방식 수정 및 로그아웃 함수 비동기 처리 추가

components/layout/AppHeader.vue

@@ -33,7 +33,7 @@
     <!-- 사용자 정보 및 드롭다운 -->
     <div class="user-menu-wrapper">
       <div class="user-info" @click="toggleDropdown">
-        <span class="user-name">{{ userStore.user?.name }}</span>
+        <span class="user-name">{{ userStore.name }}</span>
         <div class="user-icon">
           <svg
             width="24"
@@ -105,9 +105,9 @@ function handleClickOutside(event) {
   }
 }
 
-function logout() {
-  userStore.logout();
+async function logout() {
   showDropdown.value = false;
+  await userStore.logout();
   router.push("/login");
 }
 

composables/useApi.ts

@@ -1,5 +1,4 @@
 import { useRuntimeConfig } from "#imports";
-import { useUserStore } from "~/stores/user";
 
 export const useApi = async <T>(
   path: string,
@@ -8,11 +7,10 @@ export const useApi = async <T>(
     body?: any;
     query?: Record<string, any>;
     headers?: HeadersInit;
+    credentials?: RequestCredentials;
   } = {}
 ): Promise<T> => {
-  const userStore = useUserStore();
   const config = useRuntimeConfig();
-
   const method = options.method ? options.method.toUpperCase() : "GET";
 
   try {
@@ -22,18 +20,11 @@ export const useApi = async <T>(
         method: method as any,
         body: options.body,
         query: options.query,
+        credentials: options.credentials || "include", // 쿠키 자동 전송
         headers: {
-          Authorization: "Bearer " + userStore.token,
+          "Content-Type": "application/json",
           ...options.headers,
         },
-        onResponse({ response }) {
-          const authHeader = response.headers.get("Authorization");
-
-          if (authHeader && authHeader.startsWith("Bearer ")) {
-            const accessToken = authHeader.substring(7);
-            userStore.setToken(accessToken);
-          }
-        },
       }
     );
 

stores/user.ts

@@ -24,7 +24,6 @@ export const useUserStore = defineStore("user", () => {
       });
 
       if (success) {
-        console.log(data);
         user.value = data;
         isLoggedIn.value = true;
       } else {
@@ -46,14 +45,18 @@ export const useUserStore = defineStore("user", () => {
     }
   };
 
-  const logout = () => {
-    user.value = null;
-    token.value = null;
-    isLoggedIn.value = false;
-
-    // 로컬 스토리지에서 제거
-    localStorage.removeItem("user");
-    localStorage.removeItem("token");
+  const logout = async () => {
+    try {
+      await useApi("/members/logout", {
+        method: "post",
+      });
+    } catch (error) {
+      console.error("로그아웃 요청 실패:", error);
+    } finally {
+      // 로컬 상태 정리
+      user.value = null;
+      isLoggedIn.value = false;
+    }
   };
 
   const checkAuth = () => {