Merge pull request #32 from TaskFlow-CLAP/CLAP-151

Clap-151 axios 공통함수 선언

Author: Minkyu0424

.gitignore

@@ -13,6 +13,7 @@ dist
 dist-ssr
 coverage
 *.local
+.env
 
 /cypress/videos/
 /cypress/screenshots/
@@ -27,4 +28,5 @@ coverage
 *.sln
 *.sw?
 
+
 *.tsbuildinfo

package-lock.json

@@ -14,12 +14,14 @@
   },
   "dependencies": {
     "axios": "^1.7.9",
+    "js-cookie": "^3.0.5",
     "pinia": "^2.3.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.10.2",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",

package.json

@@ -0,0 +1,16 @@
+import axiosInstance from '../utils/axios'
+
+export const getNotifications = async () => {
+  const response = await axiosInstance.get('/api/notifications?page=0&size=5')
+  return response.data
+}
+
+export const postLogin = async (nickname: string, password: string) => {
+  const response = await axiosInstance.post('/api/auths/login', { nickname, password })
+  return response.data
+}
+
+export const patchReadNotification = async (notificationId: number) => {
+  const response = await axiosInstance.patch(`/api/notification/${notificationId}`)
+  return response.data
+}

src/api/test.ts

@@ -32,11 +32,6 @@ const router = createRouter({
       name: 'MyRequest',
       component: MyRequestView
     },
-    {
-      path: '/icon',
-      name: 'icon',
-      component: () => import('../views/IconView.vue')
-    },
     {
       path: '/task-request',
       name: 'task-request',

src/router/index.ts

@@ -0,0 +1,58 @@
+import axios, { type InternalAxiosRequestConfig } from 'axios'
+import Cookies from 'js-cookie'
+const baseURL = import.meta.env.VITE_API_BASE_URL
+
+const axiosInstance = axios.create({
+  baseURL: baseURL,
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json',
+    Accept: 'application/json'
+  }
+})
+
+axiosInstance.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    if (typeof window !== 'undefined') {
+      const token = Cookies.get('accessToken')
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`
+      }
+    }
+    return config
+  },
+  error => Promise.reject(error)
+)
+
+axiosInstance.interceptors.response.use(
+  response => response,
+  error => {
+    if (axios.isCancel(error)) {
+      console.log('요청이 취소되었습니다:', error.message)
+    } else {
+      if (error.response) {
+        switch (error.response.status) {
+          case 401:
+            console.error('인증 오류: 다시 로그인하세요.')
+            break
+          case 403:
+            console.error('권한 오류: 접근 권한이 없습니다.')
+            break
+          case 404:
+            console.error('요청한 자원을 찾을 수 없습니다.')
+            break
+          case 500:
+            console.error('서버 오류: 잠시 후 다시 시도하세요.')
+            break
+          default:
+            console.error(`에러 발생: ${error.response.status}`)
+        }
+      } else {
+        console.error('네트워크 오류: 서버에 연결할 수 없습니다.')
+      }
+    }
+    return Promise.reject(error)
+  }
+)
+
+export default axiosInstance