From 070ab5475a4bc2b0bae47e98a072bf13b912e04e Mon Sep 17 00:00:00 2001
From: crolvlee <leecrolv@gmail.com>
Date: Thu, 25 Jun 2026 10:44:50 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat(auth):=20AuthView=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=C2=B7=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EC=9D=B4?=
 =?UTF-8?q?=EB=A9=94=EC=9D=BC=20=EC=9D=B8=EC=A6=9D=203=EB=8B=A8=EA=B3=84?=
 =?UTF-8?q?=20API=20=EC=97=B0=EA=B2=B0=20(#84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/views/AuthView.vue | 116 +++++++++++++++++++++++++++-----
 1 file changed, 98 insertions(+), 18 deletions(-)

diff --git a/frontend/src/views/AuthView.vue b/frontend/src/views/AuthView.vue
index 5aaa017..87abcae 100644
--- a/frontend/src/views/AuthView.vue
+++ b/frontend/src/views/AuthView.vue
@@ -64,29 +64,66 @@
       <template v-else>
         <h2>회원가입</h2>
         <p class="sub">살만해에 가입하고 내 집 마련을 시작하세요</p>
-        <form @submit.prevent="handleRegister">
+
+        <!-- Step 1: 이메일 입력 -->
+        <form v-if="registerStep === 'email'" @submit.prevent="handleSendCode">
           <div class="field">
-            <label for="reg-name">이름</label>
+            <label for="reg-email">이메일</label>
             <div class="field-input">
               <input
-                id="reg-name"
-                v-model="name"
+                id="reg-email"
+                v-model="email"
+                type="email"
+                placeholder="you@example.com"
+                autocomplete="email"
+                required
+              />
+            </div>
+          </div>
+          <p v-if="errorMsg" class="error-msg">{{ errorMsg }}</p>
+          <button type="submit" class="btn-submit" :disabled="loading">
+            {{ loading ? '발송 중…' : '인증코드 발송' }}
+          </button>
+        </form>
+
+        <!-- Step 2: 인증코드 입력 -->
+        <form v-else-if="registerStep === 'code'" @submit.prevent="handleVerifyCode">
+          <div class="field">
+            <label>이메일</label>
+            <div class="field-input">
+              <input :value="email" type="email" readonly />
+            </div>
+          </div>
+          <div class="field">
+            <label for="reg-code">인증코드</label>
+            <div class="field-input">
+              <input
+                id="reg-code"
+                v-model="verifyCode"
                 type="text"
-                placeholder="홍길동"
-                autocomplete="name"
+                placeholder="6자리 코드 입력"
+                maxlength="6"
                 required
               />
             </div>
           </div>
+          <p v-if="errorMsg" class="error-msg">{{ errorMsg }}</p>
+          <button type="submit" class="btn-submit" :disabled="loading">
+            {{ loading ? '확인 중…' : '확인' }}
+          </button>
+        </form>
+
+        <!-- Step 3: 닉네임·비밀번호 입력 -->
+        <form v-else @submit.prevent="handleRegister">
           <div class="field">
-            <label for="reg-email">이메일</label>
+            <label for="reg-nickname">닉네임</label>
             <div class="field-input">
               <input
-                id="reg-email"
-                v-model="email"
-                type="email"
-                placeholder="you@example.com"
-                autocomplete="email"
+                id="reg-nickname"
+                v-model="nickname"
+                type="text"
+                placeholder="홍길동"
+                autocomplete="name"
                 required
               />
             </div>
@@ -113,6 +150,7 @@
             {{ loading ? '가입 중…' : '회원가입' }}
           </button>
         </form>
+
         <p class="signup-line">
           이미 계정이 있으신가요?
           <a href="#" @click.prevent="switchMode('login')">로그인</a>
@@ -127,34 +165,76 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import heroHouse from '@/assets/hero_house.jpg'
 import logoWhite from '@/assets/logo-white.png'
+import { useAuthStore } from '@/store/authStore.js'
+import { sendVerificationEmail, verifyEmail } from '@/api/auth.js'
 
 const router = useRouter()
+const auth = useAuthStore()
 
 const mode = ref('login')
+const registerStep = ref('email')
+
 const email = ref('')
 const password = ref('')
-const name = ref('')
+const nickname = ref('')
+const verifyCode = ref('')
 const showPw = ref(false)
 const loading = ref(false)
 const errorMsg = ref('')
 
 function switchMode(next) {
   mode.value = next
+  registerStep.value = 'email'
   email.value = ''
   password.value = ''
-  name.value = ''
+  nickname.value = ''
+  verifyCode.value = ''
   showPw.value = false
   errorMsg.value = ''
 }
 
+function parseError(e, fallback) {
+  const code = e?.response?.data?.code
+  if (code === 'INVALID_VERIFICATION_CODE') return '인증코드가 올바르지 않습니다.'
+  if (code === 'EMAIL_ALREADY_EXISTS') return '이미 가입된 이메일입니다.'
+  if (code === 'EMAIL_NOT_VERIFIED') return '이메일 인증을 먼저 완료해주세요.'
+  return e?.response?.data?.message ?? fallback
+}
+
 async function handleLogin() {
   loading.value = true
   errorMsg.value = ''
   try {
-    // TODO: useAuthStore().login({ email, password }) 연결
+    await auth.login(email.value, password.value)
     router.push('/')
   } catch (e) {
-    errorMsg.value = e?.response?.data?.message ?? '로그인에 실패했습니다.'
+    errorMsg.value = parseError(e, '로그인에 실패했습니다.')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleSendCode() {
+  loading.value = true
+  errorMsg.value = ''
+  try {
+    await sendVerificationEmail(email.value)
+    registerStep.value = 'code'
+  } catch (e) {
+    errorMsg.value = parseError(e, '인증코드 발송에 실패했습니다.')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleVerifyCode() {
+  loading.value = true
+  errorMsg.value = ''
+  try {
+    await verifyEmail(email.value, verifyCode.value)
+    registerStep.value = 'info'
+  } catch (e) {
+    errorMsg.value = parseError(e, '인증에 실패했습니다.')
   } finally {
     loading.value = false
   }
@@ -164,10 +244,10 @@ async function handleRegister() {
   loading.value = true
   errorMsg.value = ''
   try {
-    // TODO: useAuthStore().register({ name, email, password }) 연결
+    await auth.signup(email.value, password.value, nickname.value)
     switchMode('login')
   } catch (e) {
-    errorMsg.value = e?.response?.data?.message ?? '회원가입에 실패했습니다.'
+    errorMsg.value = parseError(e, '회원가입에 실패했습니다.')
   } finally {
     loading.value = false
   }

From 7432d68fe507c55c12be12a7af70c5e0b9aab30f Mon Sep 17 00:00:00 2001
From: crolvlee <leecrolv@gmail.com>
Date: Thu, 25 Jun 2026 10:39:16 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat(auth):=20auth=20API=20=ED=81=B4?=
 =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EC=96=B8=ED=8A=B8=C2=B7authStore=C2=B7401=20?=
 =?UTF-8?q?=EC=9D=B8=ED=84=B0=EC=85=89=ED=84=B0=20=EA=B5=AC=ED=98=84=20(#8?=
 =?UTF-8?q?2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/api/auth.js        | 19 ++++++++++
 frontend/src/api/http.js        | 65 ++++++++++++++++++++++++++++++++-
 frontend/src/store/authStore.js | 57 +++++++++++++++++++++++++++++
 3 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/api/auth.js
 create mode 100644 frontend/src/store/authStore.js

diff --git a/frontend/src/api/auth.js b/frontend/src/api/auth.js
new file mode 100644
index 0000000..79805a2
--- /dev/null
+++ b/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 })
diff --git a/frontend/src/api/http.js b/frontend/src/api/http.js
index a856572..75758c0 100644
--- a/frontend/src/api/http.js
+++ b/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
diff --git a/frontend/src/store/authStore.js b/frontend/src/store/authStore.js
new file mode 100644
index 0000000..cd5316d
--- /dev/null
+++ b/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)
+    },
+  },
+})