[API 통신 보완] $fetch방식으로 변경 및 로그인 처리 보완완

components/layout/AppHeader.vue

@@ -33,7 +33,7 @@
     <!-- 사용자 정보 및 드롭다운 -->
     <div class="user-menu-wrapper">
       <div class="user-info" @click="toggleDropdown">
-        <span class="user-name">{{ userStore.userName }}</span>
+        <span class="user-name">{{ userStore.user?.name }}</span>
         <div class="user-icon">
           <svg
             width="24"
@@ -128,7 +128,9 @@ onBeforeUnmount(() => {
   border: none;
   padding: 0.5rem 1.5rem;
   border-radius: 6px;
-  transition: background 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    color 0.15s;
   cursor: pointer;
 }
 .menu-btn.active {

composables/useApi.ts

@@ -1,33 +1,45 @@
-import { useFetch, useRuntimeConfig } from '#imports';
+import { useRuntimeConfig } from "#imports";
+import { useUserStore } from "~/stores/user";
 
-export const useApi = <T>(
+export const useApi = async <T>(
   path: string,
   options: {
-    method?: 'get' | 'post' | 'put' | 'delete'
-    body?: any
-    query?: Record<string, any>
-    headers?: HeadersInit
-    server?: boolean // ← 이 줄 추가!
+    method?: "get" | "post" | "put" | "delete";
+    body?: any;
+    query?: Record<string, any>;
+    headers?: HeadersInit;
   } = {}
-) => {
+): Promise<T> => {
   const userStore = useUserStore();
-
   const config = useRuntimeConfig();
 
-  const method = options.method ? options.method.toUpperCase() : 'GET'
+  const method = options.method ? options.method.toUpperCase() : "GET";
 
-  return useFetch<T>(() => `${config.public.apiBase}${config.public.contextPath}${path}`, {
-    method: method as any, // 타입 강제 우회
-    body: options.body,
-    query: options.query,
-    headers: {
-      Authorization: 'Bearer ' + userStore.getToken,
-      ...options.headers,
-    },
-    onResponse({response}){    
-      const accessToken = response.headers.get("Authorization") || "";
-      userStore.setToken(accessToken.replace("Bearer ", ""));
-    },
-    server: options.server // ← 이 줄 추가!
-  })
-}
+  try {
+    const response = await $fetch<T>(
+      `${config.public.apiBase}${config.public.contextPath}${path}`,
+      {
+        method: method as any,
+        body: options.body,
+        query: options.query,
+        headers: {
+          Authorization: "Bearer " + userStore.token,
+          ...options.headers,
+        },
+        onResponse({ response }) {
+          const authHeader = response.headers.get("Authorization");
+
+          if (authHeader && authHeader.startsWith("Bearer ")) {
+            const accessToken = authHeader.substring(7);
+            userStore.setToken(accessToken);
+          }
+        },
+      }
+    );
+
+    return response;
+  } catch (error) {
+    console.error("API 호출 실패:", error);
+    throw error;
+  }
+};

pages/[tabId]/index.vue

@@ -19,7 +19,7 @@
           <p class="text-lg text-gray-800 mb-2">
             안녕하세요,
             <span class="font-semibold text-blue-600">{{
-              userStore.userName
+              userStore.user?.name
             }}</span
             >님!
           </p>
@@ -28,7 +28,15 @@
             로그인되었습니다.
           </p>
           <p class="text-sm text-gray-600">
-            <button @click="useApi<ApiResponse<{}>>('/files/download/1756167537354001',{method: 'get'});" > Test</button>
+            <button
+              @click="
+                useApi<ApiResponse<{}>>('/files/download/1756167537354001', {
+                  method: 'get',
+                })
+              "
+            >
+              Test
+            </button>
           </p>
         </div>
         <div

stores/user.ts

@@ -2,53 +2,46 @@ export const useUserStore = defineStore("user", () => {
   // 상태
   const isLoggedIn = ref(false);
   const user = ref<{
-    id?: string;
     userId?: string;
-    email?: string;
     name?: string;
-    role?: string;
   } | null>(null);
   const token = ref<string | null>(null);
 
+  // 추후 제거 필요
+  const isAdmin = true;
 
   interface LoginData {
-    userId: string
-    role: string
-    lastLoginAt: string
+    userId: string;
   }
-
-  // 게터
-  const isAdmin = computed(() => user.value?.role === "admin");
-  const userName = computed(() => user.value?.name || "사용자");
   // 액션
   const login = async (userId: string, password: string) => {
     try {
       // 실제 API 호출로 대체할 수 있습니다
 
-      const {data, error: _error } = await useApi<ApiResponse<LoginData>>('/login', {
-        method: 'post',
-        body: { userId, password }
-      })     
+      const { success, data } = await useApi<ApiResponse<LoginData>>("/login", {
+        method: "post",
+        body: { userId, password },
+      });
 
-      let mockUser;
-
-      if(data && data.value && data.value.success){
-        mockUser = data.value.data;
-      }else{
+      if (success) {
+        console.log(data);
+        user.value = data;
+        isLoggedIn.value = true;
+      } else {
         throw new Error("아이디 또는 비밀번호가 올바르지 않습니다.");
       }
 
-      user.value = mockUser;
-      // token.value = "mock-token-" + Date.now();
-      isLoggedIn.value = true;
-
-      return { success: true, user: mockUser };
-    } catch (error) {
-      console.error("로그인 실패:", error);
+      return { success };
+    } catch (error: any) {
+      console.log(error);
       return {
         success: false,
         error:
-          error instanceof Error ? error.message : "로그인에 실패했습니다.",
+          error?.response?.status === 401
+            ? "아이디 또는 비밀번호가 올바르지 않습니다."
+            : error instanceof Error
+              ? error.message
+              : "로그인에 실패했습니다.",
       };
     }
   };
@@ -75,13 +68,13 @@ export const useUserStore = defineStore("user", () => {
     }
   };
 
-  const setToken = (accessToken : string) => {
+  const setToken = (accessToken: string) => {
     token.value = accessToken;
-  }
+  };
 
   const getToken = () => {
     return token;
-  }
+  };
 
   // 초기 인증 상태 확인
   if (import.meta.client) {
@@ -96,13 +89,12 @@ export const useUserStore = defineStore("user", () => {
 
     // 게터
     isAdmin,
-    userName,
 
     // 액션
     login,
     logout,
     checkAuth,
     setToken,
-    getToken
+    getToken,
   };
 });