[Phase 3] feat(auth): 라우터 가드·헤더 로그인 상태 반영·세션 복원 구현

frontend/src/App.vue

@@ -9,7 +9,12 @@
         <RouterLink to="/chat" class="app-header__link" active-class="app-header__link--active">챗봇</RouterLink>
       </nav>
       <div class="app-header__right">
-        <RouterLink to="/login" class="app-header__cta">로그인</RouterLink>
+        <template v-if="auth.isLoggedIn">
+          <button class="app-header__cta" @click="handleLogout">로그아웃</button>
+        </template>
+        <template v-else>
+          <RouterLink to="/login" class="app-header__cta">로그인</RouterLink>
+        </template>
       </div>
     </header>
 
@@ -24,7 +29,17 @@
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router'
 import logoBlack from '@/assets/logo-black.png'
+import { useAuthStore } from '@/store/authStore.js'
+
+const router = useRouter()
+const auth = useAuthStore()
+
+async function handleLogout() {
+  await auth.logout()
+  router.push('/')
+}
 </script>
 
 <style scoped>
@@ -95,4 +110,9 @@ import logoBlack from '@/assets/logo-black.png'
 .app-header__cta:hover {
   background: #374151;
 }
+button.app-header__cta {
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
 </style>

frontend/src/api/auth.js

@@ -0,0 +1,19 @@
+import http from './http.js'
+
+export const sendVerificationEmail = (email) =>
+  http.post('/api/v1/auth/email/send', { email })
+
+export const verifyEmail = (email, code) =>
+  http.post('/api/v1/auth/email/verify', { email, code })
+
+export const signup = (email, password, nickname) =>
+  http.post('/api/v1/auth/signup', { email, password, nickname })
+
+export const login = (email, password) =>
+  http.post('/api/v1/auth/login', { email, password })
+
+export const logout = () =>
+  http.post('/api/v1/auth/logout')
+
+export const refresh = (refreshToken) =>
+  http.post('/api/v1/auth/refresh', { refreshToken })

frontend/src/api/http.js

@@ -3,6 +3,9 @@ import axios from 'axios'
 const viteEnv = import.meta.env || {}
 const baseURL = viteEnv.VITE_API_BASE_URL || 'http://localhost:8080'
 
+const ACCESS_KEY = 'salmanhae.accessToken'
+const REFRESH_KEY = 'salmanhae.refreshToken'
+
 const http = axios.create({
   baseURL,
   timeout: 10000,
@@ -15,8 +18,8 @@ const readAccessToken = () => {
   try {
     if (typeof window === 'undefined' || !window.localStorage) return ''
     return (
+      window.localStorage.getItem(ACCESS_KEY) ||
       window.localStorage.getItem('accessToken') ||
-      window.localStorage.getItem('salmanhae.accessToken') ||
       ''
     )
   } catch {
@@ -32,4 +35,64 @@ http.interceptors.request.use((config) => {
   return config
 })
 
+let isRefreshing = false
+let pendingQueue = []
+
+const flushQueue = (error, token = null) => {
+  pendingQueue.forEach(({ resolve, reject }) => {
+    if (error) reject(error)
+    else resolve(token)
+  })
+  pendingQueue = []
+}
+
+http.interceptors.response.use(
+  (res) => res,
+  async (error) => {
+    const original = error.config
+
+    if (error.response?.status !== 401 || original._retry) {
+      return Promise.reject(error)
+    }
+
+    const storedRefresh = localStorage.getItem(REFRESH_KEY)
+    if (!storedRefresh) {
+      return Promise.reject(error)
+    }
+
+    if (isRefreshing) {
+      return new Promise((resolve, reject) => {
+        pendingQueue.push({ resolve, reject })
+      }).then((token) => {
+        original.headers.Authorization = `Bearer ${token}`
+        return http(original)
+      })
+    }
+
+    original._retry = true
+    isRefreshing = true
+
+    try {
+      const res = await axios.post(`${baseURL}/api/v1/auth/refresh`, {
+        refreshToken: storedRefresh,
+      })
+      const { accessToken, refreshToken } = res.data.data
+      localStorage.setItem(ACCESS_KEY, accessToken)
+      localStorage.setItem(REFRESH_KEY, refreshToken)
+      http.defaults.headers.common.Authorization = `Bearer ${accessToken}`
+      flushQueue(null, accessToken)
+      original.headers.Authorization = `Bearer ${accessToken}`
+      return http(original)
+    } catch (refreshError) {
+      flushQueue(refreshError)
+      localStorage.removeItem(ACCESS_KEY)
+      localStorage.removeItem(REFRESH_KEY)
+      window.location.href = '/login'
+      return Promise.reject(refreshError)
+    } finally {
+      isRefreshing = false
+    }
+  }
+)
+
 export default http

frontend/src/main.js

@@ -3,8 +3,13 @@ import { createPinia } from 'pinia'
 import router from './router'
 import App from './App.vue'
 import './assets/main.css'
+import { useAuthStore } from './store/authStore.js'
 
 const app = createApp(App)
-app.use(createPinia())
+const pinia = createPinia()
+app.use(pinia)
 app.use(router)
-app.mount('#app')
+
+useAuthStore().restoreSession()
+
+app.mount('#app')

frontend/src/router/index.js

@@ -5,13 +5,14 @@ import Community from '../views/Community.vue'
 import Recommend from '../views/Recommend.vue'
 import Chatbot from '../views/Chatbot.vue'
 import AuthView from '../views/AuthView.vue'
+import { useAuthStore } from '../store/authStore.js'
 
 const routes = [
   { path: '/', name: 'MapExplorer', component: MapExplorer },
   { path: '/login', name: 'Auth', component: AuthView },
   { path: '/diagnosis', name: 'Diagnosis', component: Diagnosis },
   { path: '/recommend', name: 'Recommend', component: Recommend },
-  { path: '/chat', name: 'Chatbot', component: Chatbot },
+  { path: '/chat', name: 'Chatbot', component: Chatbot, meta: { requiresAuth: true } },
   { path: '/community', name: 'Community', component: Community }
 ]
 
@@ -21,4 +22,13 @@ const router = createRouter({
   scrollBehavior: () => ({ top: 0 })
 })
 
+router.beforeEach((to, _, next) => {
+  const auth = useAuthStore()
+  if (to.meta.requiresAuth && !auth.isLoggedIn) {
+    next({ path: '/login', query: { redirect: to.fullPath } })
+  } else {
+    next()
+  }
+})
+
 export default router

frontend/src/store/authStore.js

@@ -0,0 +1,57 @@
+import { defineStore } from 'pinia'
+import { login as apiLogin, logout as apiLogout, signup as apiSignup } from '../api/auth.js'
+
+const ACCESS_KEY = 'salmanhae.accessToken'
+const REFRESH_KEY = 'salmanhae.refreshToken'
+
+export const useAuthStore = defineStore('auth', {
+  state: () => ({
+    user: null,
+    accessToken: '',
+    refreshToken: '',
+  }),
+
+  getters: {
+    isLoggedIn: (state) => !!state.accessToken,
+  },
+
+  actions: {
+    restoreSession() {
+      this.accessToken = localStorage.getItem(ACCESS_KEY) || ''
+      this.refreshToken = localStorage.getItem(REFRESH_KEY) || ''
+    },
+
+    _saveTokens(accessToken, refreshToken) {
+      this.accessToken = accessToken
+      this.refreshToken = refreshToken
+      localStorage.setItem(ACCESS_KEY, accessToken)
+      localStorage.setItem(REFRESH_KEY, refreshToken)
+    },
+
+    _clearTokens() {
+      this.user = null
+      this.accessToken = ''
+      this.refreshToken = ''
+      localStorage.removeItem(ACCESS_KEY)
+      localStorage.removeItem(REFRESH_KEY)
+    },
+
+    async login(email, password) {
+      const res = await apiLogin(email, password)
+      const { accessToken, refreshToken } = res.data.data
+      this._saveTokens(accessToken, refreshToken)
+    },
+
+    async logout() {
+      try {
+        await apiLogout()
+      } finally {
+        this._clearTokens()
+      }
+    },
+
+    async signup(email, password, nickname) {
+      await apiSignup(email, password, nickname)
+    },
+  },
+})