release 0.0.3

.env.development

@@ -0,0 +1,3 @@
+# VUE_APP_API_URL=http://localhost:8081
+VUE_APP_DEVTOOLS=true
+VUE_APP_API_URL=http://223.130.155.196:8080/api

.env.production

@@ -1 +1,4 @@
-VUE_APP_API_URL=http://223.130.155.196:8080/api/
+# VUE_APP_API_URL=http://localhost:8081
+VUE_APP_API_URL=http://223.130.155.196:8080/api
+VUE_APP_ENABLE_DEVTOOLS=true
+

.github/workflows/deploy.yml

@@ -71,4 +71,5 @@ jobs:
             docker rm vue_frontend || true
             docker run -d -p 80:3000 --name vue_frontend \
               -e VUE_APP_API_URL=${{ secrets.VUE_APP_API_URL }} \
+              -e VUE_APP_DEVTOOLS=true \
               ${{ env.DOCKER_IMAGE_NAME }}:latest

.gitignore

@@ -21,6 +21,7 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
 .env.development
 
 

package.json

@@ -4,19 +4,21 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode development",
-    "build": "vue-cli-service build --mode production",
+    "build": "vue-cli-service build --mode development",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "axios": "^1.6.8",
     "core-js": "^3.8.3",
+    "mitt": "^3.0.1",
     "moment": "^2.30.1",
     "swiper": "^11.1.3",
     "vue": "^3.4.23",
     "vue-click-outside": "^1.1.0",
     "vue-router": "^4.3.2",
-    "vuex": "^4.0.0"
+    "vuex": "^4.0.0",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -1,23 +1,57 @@
 <template>
   <div class="wrapper">
-    <Header></Header>
-    <router-view></router-view>
-    <Footer></Footer>
+    <Header v-if="showHeaderFooter" />
+    <loading-spinner v-if="loading" />
+    <router-view />
+    <Footer v-if="showHeaderFooter" />
   </div>
 </template>
 
 <script>
 import Header from '@/views/Header.vue';
 import Footer from '@/views/Footer.vue';
+import LoadingSpinner from '@/components/LoadingSpinner.vue';
+import { EventBus } from '@/eventBus';
+
 export default {
   components: {
     Header,
     Footer,
+    LoadingSpinner,
+  },
+  data() {
+    return {
+      showHeaderFooter: true,
+      loading: false,
+    };
+  },
+  watch: {
+    $route(to) {
+      this.checkRoute(to);
+    },
+  },
+  created() {
+    this.checkRoute(this.$route);
+    EventBus.on('loading', status => {
+      this.loading = status;
+    });
+  },
+  methods: {
+    checkRoute(route) {
+      const noHeaderFooterRoutes = [
+        '/login',
+        '/login/register',
+        '/login/forgotpw',
+      ];
+      this.showHeaderFooter = !noHeaderFooterRoutes.includes(route.path);
+    },
+  },
+  beforeUnmount() {
+    EventBus.off('loading');
   },
 };
 </script>
 
 <style>
-/* @import './css/reset.css'; */
 @import './css/common.css';
 </style>

src/api/common/interceptors.js

@@ -1,12 +1,18 @@
-import store from '@/store/index'; // 스토어 모듈을 가져옵니다.
+import axios from 'axios';
+import store from '@/store/index';
+import {
+  saveAccessTokenToCookie,
+  getRefreshTokenFromCookie,
+} from '@/utils/cookies';
 
 export function setInterceptors(instance) {
   // 요청 인터셉터를 추가합니다.
   instance.interceptors.request.use(
     function (config) {
-      // 요청을 보내기 전에 수행할 작업입니다.
-      // console.log(config); // 요청(config)을 로깅합니다.
-      config.headers.Authorization = store.state.token; // 요청 헤더에 토큰을 추가합니다.
+      const token = store.state.accessToken; // Vuex 스토어에서 액세스 토큰을 가져옵니다.
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`; // 요청 헤더에 토큰을 추가합니다.
+      }
       return config; // 수정된 요청(config)을 반환합니다.
     },
     function (error) {
@@ -19,12 +25,37 @@ export function setInterceptors(instance) {
   instance.interceptors.response.use(
     function (response) {
       // 2xx 범위 내의 모든 상태 코드에 대해 이 함수가 실행됩니다.
-      // 응답 데이터 처리를 위한 작업을 수행합니다.
       return response; // 응답을 반환합니다.
     },
-    function (error) {
-      // 2xx 범위 외의 모든 상태 코드에 대해 이 함수가 실행됩니다.
-      // 응답 에러 처리를 위한 작업을 수행합니다.
+    async function (error) {
+      const {
+        config,
+        response: { status },
+      } = error;
+      const originalRequest = config;
+      if (
+        error.response &&
+        error.response.data &&
+        error.response.data.message
+      ) {
+        store.commit('setErrorMessage', error.response.data.message);
+      }
+      if (status === 401 && !error.response.data.message) {
+        // 액세스 토큰이 만료된 경우 새로운 액세스 토큰을 발급받습니다.
+        try {
+          const refreshToken = getRefreshTokenFromCookie(); // 쿠키에서 리프레시 토큰을 가져옵니다.
+          const { data } = await axios.post(
+            `${process.env.VUE_APP_API_URL}/api/token/access-token`,
+            { refreshToken },
+          );
+          store.commit('setAccessToken', data.accessToken); // 새로운 액세스 토큰을 Vuex 스토어에 저장합니다.
+          saveAccessTokenToCookie(data.accessToken); // 새로운 액세스 토큰을 쿠키에 저장합니다.
+          originalRequest.headers.Authorization = `Bearer ${data.accessToken}`; // 요청 헤더를 갱신된 토큰으로 수정합니다.
+          return axios(originalRequest); // 원래의 요청을 재시도합니다.
+        } catch (e) {
+          store.dispatch('logout'); // 리프레시 토큰 갱신 실패 시 로그아웃 처리합니다.
+        }
+      }
       return Promise.reject(error); // 에러를 반환합니다.
     },
   );