v0.1.43 - 인증 강제와 회원 탈퇴 흐름 정리

2026-04-24 10:04:44 +09:00
parent 54f4b34e5e
commit a38714dfe4
9 changed files with 250 additions and 14 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,6 +11,8 @@ import StatsDashboard from './components/StatsDashboard.vue'
 import { fetchAdminOverview } from './lib/adminApi'
 import {
  clearAuthState,
+  confirmVerification,
+  deleteAccount,
  fetchCurrentUser,
  confirmPasswordReset,
  login,
@@ -88,10 +90,15 @@ const passwordForm = reactive({
  newPassword: '',
  confirmPassword: '',
 })
+const accountDeleteForm = reactive({
+  currentPassword: '',
+})
 const profileBusy = ref(false)
 const passwordBusy = ref(false)
 const profileMessage = ref('')
 const passwordMessage = ref('')
+const accountDeleteBusy = ref(false)
+const accountDeleteMessage = ref('')
 const carryoverMessage = ref('')
 const carryoverCheckPolicy = ref(readCarryoverCheckPolicy())
 const carryoverCheckPrompt = ref(null)
@@ -1443,6 +1450,10 @@ function resetPasswordForm() {
  passwordForm.confirmPassword = ''
 }

+function resetAccountDeleteForm() {
+  accountDeleteForm.currentPassword = ''
+}
+
 function openAuthDialog(mode = 'login') {
  authMode.value = mode
  authMessage.value = ''
@@ -1472,6 +1483,43 @@ function openPasswordResetFromUrl() {
  authDialogOpen.value = true
 }

+async function openVerificationFromUrl() {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const url = new URL(window.location.href)
+
+  if (!url.pathname.includes('verify-email')) {
+    return
+  }
+
+  const token = url.searchParams.get('token') ?? ''
+
+  if (!token) {
+    authMode.value = 'login'
+    authMessage.value = '이메일 인증 링크가 올바르지 않습니다.'
+    authDialogOpen.value = true
+    return
+  }
+
+  authBusy.value = true
+  authMode.value = 'login'
+  authDialogOpen.value = true
+
+  try {
+    const result = await confirmVerification({ token })
+    authMessage.value = result.message || '이메일 인증이 완료되었습니다. 이제 로그인할 수 있습니다.'
+    url.pathname = '/'
+    url.search = ''
+    window.history.replaceState({}, '', url.toString())
+  } catch (error) {
+    authMessage.value = toUserFacingApiError(error, '이메일 인증 링크를 처리하지 못했습니다.')
+  } finally {
+    authBusy.value = false
+  }
+}
+
 function closeAuthDialog() {
  authDialogOpen.value = false
  authMessage.value = ''
@@ -1537,7 +1585,14 @@ async function submitAuthForm() {
          password: authForm.password,
        })

-    await applyAuthSuccess(result, authMode.value === 'login' && authForm.rememberSession)
+    if (authMode.value === 'signup') {
+      authMode.value = 'login'
+      authForm.password = ''
+      authMessage.value = result.message
+      return
+    }
+
+    await applyAuthSuccess(result, authForm.rememberSession)
  } catch (error) {
    authMessage.value = toUserFacingApiError(error, '인증 처리 중 문제가 발생했습니다.')
  } finally {
@@ -1588,6 +1643,7 @@ function logout() {
  adminMessage.value = ''
  adminUsers.value = []
  adminRecentLogins.value = []
+  accountDeleteMessage.value = ''
  adminOverview.value = {
    totalUsers: 0,
    totalAdmins: 0,
@@ -1607,6 +1663,7 @@ function logout() {
  restoreLocalPlannerRecords()
  resetGoalForm()
  resetPasswordForm()
+  resetAccountDeleteForm()
 }

 async function loadAdminDashboard() {
@@ -1806,6 +1863,10 @@ function updatePasswordField({ field, value }) {
  passwordForm[field] = value
 }

+function updateAccountDeleteField({ field, value }) {
+  accountDeleteForm[field] = value
+}
+
 async function submitProfileForm() {
  profileBusy.value = true
  profileMessage.value = ''
@@ -1862,6 +1923,36 @@ async function submitPasswordForm() {
  }
 }

+async function submitDeleteAccount() {
+  if (!accountDeleteForm.currentPassword) {
+    accountDeleteMessage.value = '회원 탈퇴를 위해 현재 비밀번호를 입력해 주세요.'
+    return
+  }
+
+  const confirmed = window.confirm('정말로 회원 탈퇴하시겠습니까? 작성한 플래너와 목표 데이터도 함께 삭제됩니다.')
+
+  if (!confirmed) {
+    return
+  }
+
+  accountDeleteBusy.value = true
+  accountDeleteMessage.value = ''
+
+  try {
+    const result = await deleteAccount(authToken.value, {
+      currentPassword: accountDeleteForm.currentPassword,
+    })
+    resetAccountDeleteForm()
+    logout()
+    authMessage.value = ''
+    window.alert(result.message || '회원 탈퇴가 완료되었습니다.')
+  } catch (error) {
+    accountDeleteMessage.value = error.message || '회원 탈퇴를 처리하지 못했습니다.'
+  } finally {
+    accountDeleteBusy.value = false
+  }
+}
+
 function replacePlannerRecords(nextRecords) {
  Object.keys(plannerRecords).forEach((key) => {
    delete plannerRecords[key]
@@ -2026,6 +2117,12 @@ async function printPlannerRange() {
  window.print()
 }

+async function initializeAppSession() {
+  await openVerificationFromUrl()
+  openPasswordResetFromUrl()
+  await restoreAuthSession()
+}
+
 onMounted(() => {
  resetGoalForm()
  setSyncFeedback('local', '로그인 후 클라우드 저장을 사용할 수 있습니다.', {
@@ -2034,8 +2131,7 @@ onMounted(() => {
  updateWindowWidth()
  window.addEventListener('resize', updateWindowWidth)
  window.addEventListener('keydown', handleGlobalKeydown)
-  openPasswordResetFromUrl()
-  restoreAuthSession()
+  initializeAppSession()
 })

 onBeforeUnmount(() => {
@@ -2961,13 +3057,18 @@ onBeforeUnmount(() => {
        :password-busy="passwordBusy"
        :profile-message="profileMessage"
        :password-message="passwordMessage"
+        :account-delete-form="accountDeleteForm"
+        :account-delete-busy="accountDeleteBusy"
+        :account-delete-message="accountDeleteMessage"
        :guide-tooltip-reset-message="guideTooltipResetMessage"
        :carryover-check-policy="carryoverCheckPolicy"
        @update:profile-field="updateProfileField"
        @update:password-field="updatePasswordField"
+        @update:account-delete-field="updateAccountDeleteField"
        @update:carryover-check-policy="updateCarryoverCheckPolicy"
        @submit:profile="submitProfileForm"
        @submit:password="submitPasswordForm"
+        @submit:delete-account="submitDeleteAccount"
        @reset-guide-tooltips="resetGuideTooltips"
      />

--- a/src/components/SettingsDashboard.vue
+++ b/src/components/SettingsDashboard.vue
@@ -14,6 +14,10 @@ const props = defineProps({
    type: Object,
    required: true,
  },
+  accountDeleteForm: {
+    type: Object,
+    required: true,
+  },
  profileBusy: {
    type: Boolean,
    default: false,
@@ -30,6 +34,14 @@ const props = defineProps({
    type: String,
    default: '',
  },
+  accountDeleteBusy: {
+    type: Boolean,
+    default: false,
+  },
+  accountDeleteMessage: {
+    type: String,
+    default: '',
+  },
  guideTooltipResetMessage: {
    type: String,
    default: '',
@@ -45,6 +57,8 @@ const emit = defineEmits([
  'update:password-field',
  'submit:profile',
  'submit:password',
+  'update:account-delete-field',
+  'submit:delete-account',
  'reset-guide-tooltips',
  'update:carryover-check-policy',
 ])
@@ -66,6 +80,13 @@ function updatePasswordField(field, event) {
    value: event.target.value,
  })
 }
+
+function updateAccountDeleteField(field, event) {
+  emit('update:account-delete-field', {
+    field,
+    value: event.target.value,
+  })
+}
 </script>

 <template>
@@ -219,6 +240,42 @@ function updatePasswordField(field, event) {
          {{ passwordBusy ? '변경 중...' : '비밀번호 변경' }}
        </button>
      </form>
+
+      <form
+        v-if="user.role !== 'admin'"
+        class="rounded-[28px] border border-rose-200 bg-white/75 p-6"
+        @submit.prevent="emit('submit:delete-account')"
+      >
+        <p class="text-[11px] font-bold uppercase tracking-[0.24em] text-rose-500">Delete Account</p>
+        <p class="mt-4 text-sm font-semibold leading-6 text-stone-700">
+          회원 탈퇴를 진행하면 플래너 기록, 목표, 계정 정보가 함께 삭제됩니다.
+        </p>
+
+        <div class="mt-5 space-y-2">
+          <label class="text-[11px] font-bold tracking-[0.16em] text-stone-600">현재 비밀번호 확인</label>
+          <input
+            :value="accountDeleteForm.currentPassword"
+            type="password"
+            class="w-full rounded-2xl border border-rose-200 bg-white px-4 py-3 text-sm font-semibold text-stone-800 outline-none transition focus:border-rose-400"
+            @input="updateAccountDeleteField('currentPassword', $event)"
+          />
+        </div>
+
+        <p
+          v-if="accountDeleteMessage"
+          class="mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-semibold leading-6 text-rose-700"
+        >
+          {{ accountDeleteMessage }}
+        </p>
+
+        <button
+          type="submit"
+          class="mt-5 rounded-full border border-rose-500 px-5 py-3 text-xs font-bold tracking-[0.18em] text-rose-600 transition hover:bg-rose-500 hover:text-white disabled:cursor-not-allowed disabled:border-rose-200 disabled:text-rose-300"
+          :disabled="accountDeleteBusy"
+        >
+          {{ accountDeleteBusy ? '처리 중...' : '회원 탈퇴' }}
+        </button>
+      </form>
    </div>
  </section>
 </template>
--- a/src/lib/authClient.js
+++ b/src/lib/authClient.js
@@ -108,6 +108,14 @@ export async function updatePassword(token, { currentPassword, newPassword }) {
  })
 }

+export async function deleteAccount(token, { currentPassword }) {
+  return request('/api/auth/account', {
+    method: 'DELETE',
+    token,
+    body: { currentPassword },
+  })
+}
+
 export async function requestPasswordReset({ email }) {
  return request('/api/auth/password-reset/request', {
    method: 'POST',
@@ -121,3 +129,10 @@ export async function confirmPasswordReset({ token, newPassword }) {
    body: { token, newPassword },
  })
 }
+
+export async function confirmVerification({ token }) {
+  return request('/api/auth/verification/confirm', {
+    method: 'POST',
+    body: { token },
+  })
+}