[API 개선] useApi 함수 리팩토링 및 API 플러그인 추가로 API 호출 방식 통일

app.vue

@@ -1,29 +1,24 @@
 <template>
   <NuxtLayout>
-    <keepAlive>
+    <NuxtPage :keepalive="true" />
-      <NuxtPage :keepalive="true" />
-  </keepAlive>
   </NuxtLayout>
 </template>
 
+<!-- <script setup lang="ts">
+onMounted(() => {
+  const script = document.createElement("script");
+  script.src = "/dist/cy_custom.js";
+  script.async = true;
+  script.onload = () => {
+    console.log("✅ cy_custom.js loaded");
+  };
+  script.onerror = () => {
+    console.error("❌ Failed to load cy_custom.js");
+  };
+  document.head.appendChild(script);
+});
+</script> -->
+
 <style>
 @import "./assets/css/main.css";
 </style>
-
-<script setup lang="ts">
-
-  onMounted(() => {
-    const script = document.createElement('script')
-    script.src = '/dist/cy_custom.js'
-    script.async = true
-    script.onload = () => {
-      console.log('✅ cy_custom.js loaded')
-    }
-    script.onerror = () => {
-      console.error('❌ Failed to load cy_custom.js')
-    }
-    document.head.appendChild(script)
-  })
-</script>
-
-

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.name }}</span>
         <div class="user-icon">
           <svg
             width="24"
@@ -105,9 +105,9 @@ function handleClickOutside(event) {
   }
 }
 
-function logout() {
+async function logout() {
-  userStore.logout();
   showDropdown.value = false;
+  await userStore.logout();
   router.push("/login");
 }
 
@@ -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,28 +1,36 @@
-import { useFetch, useRuntimeConfig, useCookie } from '#imports'
+/**
-
+ * API 호출을 위한 편의 함수
-export const useApi = <T>(
+ *
-  path: string,
+ * @template T - 응답 데이터의 타입
-  options: {
+ * @param path - API 엔드포인트 경로 (예: '/users', '/users/1')
-    method?: 'get' | 'post' | 'put' | 'delete'
+ * @param opts - 요청 옵션 (method, body, headers 등)
-    body?: any
+ * @returns Promise<T> - API 응답 데이터
-    query?: Record<string, any>
+ *
-    headers?: HeadersInit
+ * @example
-    server?: boolean // ← 이 줄 추가!
+ * // GET 요청
-  } = {}
+ * const users = await useApi<User[]>('/users')
-) => {
+ *
-  const config = useRuntimeConfig()
+ * // POST 요청
-  const token = useCookie('token')
+ * const newUser = await useApi<User>('/users', {
-
+ *   method: 'POST',
-  const method = options.method ? options.method.toUpperCase() : 'GET'
+ *   body: { name: 'John', email: 'john@example.com' }
-
+ * })
-  return useFetch<T>(() => `${config.public.apiBase}${config.public.contextPath}${path}`, {
+ *
-    method: method as any, // 타입 강제 우회
+ * // PUT 요청
-    body: options.body,
+ * const updatedUser = await useApi<User>('/users/1', {
-    query: options.query,
+ *   method: 'PUT',
-    headers: {
+ *   body: { name: 'John Updated' }
-      Authorization: token.value ? `Bearer ${token.value}` : '',
+ * })
-      ...options.headers
+ *
-    },
+ * // DELETE 요청
-    server: options.server // ← 이 줄 추가!
+ * await useApi('/users/1', { method: 'DELETE' })
-  })
+ *
-}
+ * // FormData 업로드
+ * const formData = new FormData()
+ * formData.append('file', file)
+ * await useApi('/upload', { method: 'POST', body: formData })
+ */
+export const useApi = <T>(path: string, opts?: any): Promise<T> => {
+  const { $api } = useNuxtApp();
+  return ($api as any)(path, opts);
+};

nuxt.config.ts

@@ -7,6 +7,7 @@ export default defineNuxtConfig({
     "@nuxt/image",
     "@nuxt/icon",
     "@pinia/nuxt",
+    "pinia-plugin-persistedstate/nuxt",
     "@nuxtjs/tailwindcss",
   ],
   app: {
@@ -17,14 +18,12 @@ export default defineNuxtConfig({
           href: "https://fonts.googleapis.com/icon?family=Material+Icons",
         },
       ],
-      script: [
+      //script: [{ src: "/dist/igv.js", defer: true }],
-        { src: '/dist/igv.js', defer: true }
-      ]
     },
   },
   vite: {
     optimizeDeps: {
-      include: ['cytoscape-overlays'],
+      include: ["cytoscape-overlays"],
     },
     build: {
       commonjsOptions: {
@@ -33,20 +32,20 @@ export default defineNuxtConfig({
     },
   },
   nitro: {
-    logLevel: 'debug'
+    logLevel: "debug",
   },
   runtimeConfig: {
     public: {
-      apiBase: process.env.API_BASE || 'http://localhost',
+      apiBase: process.env.API_BASE || "http://localhost",
-      contextPath: process.env.CONTEXT_PATH || '/service',
+      contextPath: process.env.CONTEXT_PATH || "/service",
-    }
+    },
   },
   typescript: {
     shim: false,
     strict: true,
   },
-  plugins: ['~/plugins/vue3-tui-grid.client.ts'],
+  plugins: ["~/plugins/vue3-tui-grid.client.ts"],
   components: [
-    { path: '~/components', pathPrefix: false }, // 경로 접두사 제거
+    { path: "~/components", pathPrefix: false }, // 경로 접두사 제거
-  ]
+  ],
 });

package-lock.json

@@ -11,7 +11,7 @@
         "@nuxt/icon": "^1.14.0",
         "@nuxt/image": "^1.10.0",
         "@nuxtjs/tailwindcss": "^7.0.0-beta.0",
-        "@pinia/nuxt": "^0.11.1",
+        "@pinia/nuxt": "^0.11.2",
         "ag-grid-community": "^34.0.0",
         "ag-grid-vue3": "^34.0.0",
         "chart.js": "^4.5.0",
@@ -22,6 +22,7 @@
         "eslint": "^9.29.0",
         "nuxt": "^3.17.5",
         "pinia": "^3.0.3",
+        "pinia-plugin-persistedstate": "^4.5.0",
         "tui-code-snippet": "^2.3.3",
         "tui-grid": "^4.21.22",
         "vue": "^3.5.17",
@@ -2827,9 +2828,9 @@
       }
     },
     "node_modules/@pinia/nuxt": {
-      "version": "0.11.1",
+      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.1.tgz",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.11.2.tgz",
-      "integrity": "sha512-tCD8ioWhhIHKwm8Y9VvyhBAV/kK4W5uGBIYbI5iM4N1t7duOqK6ECBUavrMxMolELayqqMLb9+evegrh3S7s2A==",
+      "integrity": "sha512-CgvSWpbktxxWBV7ModhAcsExsQZqpPq6vMYEe9DexmmY6959ev8ukL4iFhr/qov2Nb9cQAWd7niFDnaWkN+FHg==",
       "license": "MIT",
       "dependencies": {
         "@nuxt/kit": "^3.9.0"
@@ -6086,6 +6087,12 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "license": "MIT"
     },
+    "node_modules/deep-pick-omit": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/deep-pick-omit/-/deep-pick-omit-1.2.1.tgz",
+      "integrity": "sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw==",
+      "license": "MIT"
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -10770,6 +10777,33 @@
         }
       }
     },
+    "node_modules/pinia-plugin-persistedstate": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/pinia-plugin-persistedstate/-/pinia-plugin-persistedstate-4.5.0.tgz",
+      "integrity": "sha512-QTkP1xJVyCdr2I2p3AKUZM84/e+IS+HktRxKGAIuDzkyaKKV48mQcYkJFVVDuvTxlI5j6X3oZObpqoVB8JnWpw==",
+      "license": "MIT",
+      "dependencies": {
+        "deep-pick-omit": "^1.2.1",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": ">=3.0.0",
+        "@pinia/nuxt": ">=0.10.0",
+        "pinia": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "@pinia/nuxt": {
+          "optional": true
+        },
+        "pinia": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-types": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.2.0.tgz",

package.json

@@ -16,7 +16,7 @@
     "@nuxt/icon": "^1.14.0",
     "@nuxt/image": "^1.10.0",
     "@nuxtjs/tailwindcss": "^7.0.0-beta.0",
-    "@pinia/nuxt": "^0.11.1",
+    "@pinia/nuxt": "^0.11.2",
     "ag-grid-community": "^34.0.0",
     "ag-grid-vue3": "^34.0.0",
     "chart.js": "^4.5.0",
@@ -27,6 +27,7 @@
     "eslint": "^9.29.0",
     "nuxt": "^3.17.5",
     "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.5.0",
     "tui-code-snippet": "^2.3.3",
     "tui-grid": "^4.21.22",
     "vue": "^3.5.17",

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>
@@ -27,6 +27,17 @@
             {{ userStore.isAdmin ? "관리자" : "사용자" }} 권한으로
             로그인되었습니다.
           </p>
+          <p class="text-sm text-gray-600">
+            <button
+              @click="
+                useApi<ApiResponse<{}>>('/files/download/1756167537354001', {
+                  method: 'get',
+                })
+              "
+            >
+              Test
+            </button>
+          </p>
         </div>
         <div
           v-else

plugins/api.ts

@@ -0,0 +1,44 @@
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig();
+  const baseURL = `${config.public.apiBase}${config.public.contextPath}`;
+
+  const api = $fetch.create({
+    baseURL,
+    credentials: "include",
+    onRequest({ request, options }) {
+      // 1) GET/HEAD가 아니면 body만 넣기 (GET에 body 금지)
+      const method = (options.method ?? "GET").toUpperCase();
+      if (method === "GET" || method === "HEAD") {
+        delete (options as any).body;
+      }
+
+      // 2) FormData면 Content-Type 자동 지정 금지
+      const isFormData =
+        typeof FormData !== "undefined" && options.body instanceof FormData;
+      options.headers = {
+        ...(isFormData ? {} : { "Content-Type": "application/json" }),
+        ...(options.headers || {}),
+      };
+
+      // 3) SSR 쿠키 포워딩
+      if (import.meta.server) {
+        const cookie = useRequestHeaders(["cookie"])?.cookie;
+        // request가 절대 URL이면 호스트 비교
+        const reqUrl = typeof request === "string" ? request : String(request);
+        const isBackendApi =
+          !reqUrl.startsWith("http") || // 상대경로면 내 API
+          reqUrl.startsWith(baseURL); // 혹은 baseURL과 동일
+
+        if (cookie && isBackendApi) {
+          options.headers = { ...(options.headers || {}), cookie } as any;
+        }
+      }
+    },
+    onResponseError({ response }) {
+      // 공통 로깅
+      console.error("[API ERROR]", response.status, response._data);
+    },
+  });
+
+  return { provide: { api } };
+});

stores/tab.ts

@@ -1,9 +1,9 @@
 import { defineStore } from "pinia";
 
 interface Tab {
-  key: number;          // 1~10
+  key: number; // 1~10
   label: string;
-  to: string;           // 페이지 라우트
+  to: string; // 페이지 라우트
   componentName: string;
 }
 
@@ -12,7 +12,7 @@ const defaultTab = { key: 1, label: "홈", to: "/", componentName: "home" };
 export const useTabsStore = defineStore("tabs", {
   state: () => ({
     tabs: [defaultTab] as Tab[],
-    activeTab: 1
+    activeTab: 1,
   }),
   actions: {
     // ✅ 새 탭 추가 (기본 페이지는 "/")
@@ -27,7 +27,7 @@ export const useTabsStore = defineStore("tabs", {
       let key = 1;
       while (this.tabs.find(t => t.key === key)) key++;
 
-      this.tabs.push({...defaultTab, key : key});
+      this.tabs.push({ ...defaultTab, key: key });
       this.activeTab = key;
       $router.push(defaultTab.to);
       return key;
@@ -49,7 +49,9 @@ export const useTabsStore = defineStore("tabs", {
     removeTab(key: number) {
       this.tabs = this.tabs.filter(t => t.key !== key);
       if (this.activeTab === key) {
-        this.activeTab = this.tabs.length ? this.tabs[this.tabs.length - 1].key : 0;
+        this.activeTab = this.tabs.length
+          ? this.tabs[this.tabs.length - 1].key
+          : 0;
       }
     },
 
@@ -59,6 +61,7 @@ export const useTabsStore = defineStore("tabs", {
 
       const tab = this.tabs.find(t => t.key === this.activeTab);
       $router.push(`/${tab?.key}${tab?.to}`);
-    }
+    },
-  }
+  },
+  persist: true,
 });

stores/user.ts

@@ -1,102 +1,112 @@
-export const useUserStore = defineStore("user", () => {
+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);
-
-
-  interface LoginData {
-    userId: string
-    role: string
-    lastLoginAt: 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 }
-      })     
-     
-      let mockUser;
-
-      if(data && data.value && data.value.success){
-        mockUser = data.value.data;
-      }else{
-        throw new Error("아이디 또는 비밀번호가 올바르지 않습니다.");
-      }
-
-      user.value = mockUser;
-      token.value = "mock-token-" + Date.now();
-      isLoggedIn.value = true;
-
-      // 로컬 스토리지에 저장
-      localStorage.setItem("user", JSON.stringify(mockUser));
-      localStorage.setItem("token", token.value);
-
-      return { success: true, user: mockUser };
-    } catch (error) {
-      console.error("로그인 실패:", error);
-      return {
-        success: false,
-        error:
-          error instanceof Error ? error.message : "로그인에 실패했습니다.",
-      };
-    }
-  };
-
-  const logout = () => {
-    user.value = null;
-    token.value = null;
-    isLoggedIn.value = false;
-
-    // 로컬 스토리지에서 제거
-    localStorage.removeItem("user");
-    localStorage.removeItem("token");
-  };
-
-  const checkAuth = () => {
-    // 페이지 로드 시 로컬 스토리지에서 사용자 정보 복원
-    const savedUser = localStorage.getItem("user");
-    const savedToken = localStorage.getItem("token");
-
-    if (savedUser && savedToken) {
-      user.value = JSON.parse(savedUser);
-      token.value = savedToken;
-      isLoggedIn.value = true;
-    }
-  };
-
-  // 초기 인증 상태 확인
-  if (import.meta.client) {
-    checkAuth();
-  }
-
-  return {
     // 상태
-    isLoggedIn,
+    const isLoggedIn = ref(false);
-    user,
+    const user = ref<{
-    token,
+      userId?: string;
+      name?: string;
+    } | null>(null);
+    const token = ref<string | null>(null);
 
-    // 게터
+    // 추후 제거 필요
-    isAdmin,
+    const isAdmin = true;
-    userName,
 
+    interface LoginData {
+      userId: string;
+    }
     // 액션
-    login,
+    const login = async (userId: string, password: string) => {
-    logout,
+      try {
-    checkAuth,
+        // 실제 API 호출로 대체할 수 있습니다
-  };
+
-});
+        const { success, data } = await useApi<ApiResponse<LoginData>>(
+          "/login",
+          {
+            method: "post",
+            body: { userId, password },
+          }
+        );
+
+        if (success) {
+          user.value = data;
+          isLoggedIn.value = true;
+        } else {
+          throw new Error("아이디 또는 비밀번호가 올바르지 않습니다.");
+        }
+
+        return { success };
+      } catch (error: any) {
+        console.log(error);
+        return {
+          success: false,
+          error:
+            error?.response?.status === 401
+              ? "아이디 또는 비밀번호가 올바르지 않습니다."
+              : error instanceof Error
+                ? error.message
+                : "로그인에 실패했습니다.",
+        };
+      }
+    };
+
+    const logout = async () => {
+      try {
+        await useApi("/members/logout", {
+          method: "post",
+        });
+      } catch (error) {
+        console.error("로그아웃 요청 실패:", error);
+      } finally {
+        // 로컬 상태 정리
+        user.value = null;
+        isLoggedIn.value = false;
+      }
+    };
+
+    const checkAuth = () => {
+      // 페이지 로드 시 로컬 스토리지에서 사용자 정보 복원
+      const savedUser = localStorage.getItem("user");
+      const savedToken = localStorage.getItem("token");
+
+      if (savedUser && savedToken) {
+        user.value = JSON.parse(savedUser);
+        token.value = savedToken;
+        isLoggedIn.value = true;
+      }
+    };
+
+    const setToken = (accessToken: string) => {
+      token.value = accessToken;
+    };
+
+    const getToken = () => {
+      return token;
+    };
+
+    // 초기 인증 상태 확인
+    if (import.meta.client) {
+      checkAuth();
+    }
+
+    return {
+      // 상태
+      isLoggedIn,
+      user,
+      token,
+
+      // 게터
+      isAdmin,
+
+      // 액션
+      login,
+      logout,
+      checkAuth,
+      setToken,
+      getToken,
+    };
+  },
+  {
+    persist: true,
+  }
+);