sori.studio/pages/admin/login.vue

<script setup>
definePageMeta({
  layout: false
})

const form = reactive({
  email: '',
  password: ''
})

const pending = ref(false)
const errorMessage = ref('')
const showPassword = ref(false)
const emailInput = ref(null)
const passwordInput = ref(null)

const { data: bootstrapStatus } = await useFetch('/api/auth/bootstrap-status', {
  default: () => ({
    hasUsers: true,
    needsAdminSetup: false
  })
})

/**
 * 관리자 로그인 제출 가능 여부
 * @returns {boolean} 제출 가능 여부
 */
const canSubmitAdminLogin = computed(() => Boolean(form.email.trim()) && Boolean(form.password))

/**
 * 브라우저/비밀번호 관리자 자동완성 값을 로그인 폼 상태에 반영한다.
 * @returns {void}
 */
const syncAdminLoginAutofill = () => {
  const emailValue = emailInput.value?.value || ''
  const passwordValue = passwordInput.value?.value || ''

  if (emailValue && emailValue !== form.email) {
    form.email = emailValue
  }
  if (passwordValue && passwordValue !== form.password) {
    form.password = passwordValue
  }
}

/**
 * 관리자 로그인 제출
 * @returns {Promise<void>} 로그인 처리 결과
 */
const submitLogin = async () => {
  syncAdminLoginAutofill()

  pending.value = true
  errorMessage.value = ''

  try {
    await $fetch('/admin/api/auth/login', {
      method: 'POST',
      body: {
        email: form.email.trim(),
        password: form.password
      },
      credentials: 'include'
    })

    if (import.meta.client) {
      window.location.assign('/admin')
      return
    }

    await navigateTo('/admin')
  } catch (error) {
    const statusCode = Number(error?.statusCode || error?.response?.status || 0)

    if (statusCode === 401) {
      errorMessage.value = '이메일 또는 비밀번호를 확인해 주세요.'
    } else if (statusCode >= 500) {
      errorMessage.value = '서버 또는 데이터베이스 연결을 확인해 주세요.'
    } else {
      errorMessage.value = '로그인에 실패했습니다. 잠시 후 다시 시도해 주세요.'
    }
  } finally {
    pending.value = false
  }
}

onMounted(() => {
  syncAdminLoginAutofill()
  window.setTimeout(syncAdminLoginAutofill, 100)
  window.setTimeout(syncAdminLoginAutofill, 500)
})
</script>

<template>
  <main class="admin-login min-h-screen bg-[#0a0b0d] text-[#f5f7fa] [color-scheme:dark]">
    <div class="mx-auto flex min-h-screen w-full max-w-[1280px] items-center justify-end px-5 py-12 sm:px-10 lg:px-16">
      <section class="admin-login__panel w-full max-w-[430px] p-5 sm:p-8">
        <p class="admin-login__eyebrow text-right text-xs font-semibold uppercase text-[#9ba3af]">
          Admin
        </p>
        <h1 class="admin-login__title text-right mt-2 text-2xl font-semibold leading-tight">
          관리자 로그인
        </h1>
        <p class="mt-2 text-right text-sm text-[#9ba3af]">
          관리자 계정으로 로그인해 콘텐츠와 사이트 설정을 관리하세요.
        </p>
        <p
          v-if="bootstrapStatus?.needsAdminSetup"
          class="mt-5 rounded-[10px] border border-[#b03b43]/50 bg-[#b03b43]/10 px-3 py-2 text-right text-xs text-[#e5acb1]"
        >
          등록된 관리자가 없습니다.
          <NuxtLink class="font-semibold text-[#7eb8ff] underline-offset-2 hover:underline" to="/signup">
            관리자 등록으로 이동
          </NuxtLink>
        </p>

        <form class="admin-login__form mt-8 space-y-5" @submit.prevent="submitLogin">
          <label class="admin-login__field block space-y-1.5">
            <span class="admin-login__label text-xs text-[#d8dee6]">이메일</span>
            <input
              ref="emailInput"
              v-model="form.email"
            class="auth-form-input admin-login__input h-10 w-full rounded-[8px] border border-[#1a212a] bg-transparent px-3 text-sm outline-none transition-colors focus:border-[#2f6feb]"
              type="email"
              autocomplete="username"
              required
              @change="syncAdminLoginAutofill"
              @focus="syncAdminLoginAutofill"
              @input="syncAdminLoginAutofill"
            >
          </label>
          <label class="admin-login__field block space-y-1.5">
            <span class="admin-login__label text-xs text-[#d8dee6]">비밀번호</span>
            <span class="flex items-center rounded-[8px] border border-[#1a212a] transition-colors focus-within:border-[#2f6feb]">
              <input
                ref="passwordInput"
                v-model="form.password"
                class="auth-form-input admin-login__input h-10 min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
                :type="showPassword ? 'text' : 'password'"
                autocomplete="current-password"
                required
                @change="syncAdminLoginAutofill"
                @focus="syncAdminLoginAutofill"
                @input="syncAdminLoginAutofill"
              >
              <AuthPasswordVisibilityToggle v-model="showPassword" />
            </span>
          </label>
          <p v-if="errorMessage" class="admin-login__error text-right text-xs text-[#e5acb1]" aria-live="polite">
            {{ errorMessage }}
          </p>
          <button
            class="admin-login__button ml-auto block h-9 rounded-[8px] bg-[#2f6feb] px-8 text-xs font-medium text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
            type="submit"
            :disabled="pending || !canSubmitAdminLogin"
          >
            {{ pending ? '확인 중' : '로그인' }}
          </button>
        </form>

        <NuxtLink class="mt-6 flex justify-end text-xs text-[#9ba3af] hover:opacity-80" to="/">
          사이트로 돌아가기
        </NuxtLink>
      </section>
    </div>
  </main>
</template>