Google 계정 로그인 연동 추가

This commit is contained in:
2026-07-29 14:02:07 +09:00
parent 99af25b8fa
commit 52ed053876
20 changed files with 897 additions and 9 deletions

View File

@@ -13,6 +13,7 @@ const errorMessage = ref('')
const showPassword = ref(false)
const emailInput = ref(null)
const passwordInput = ref(null)
const route = useRoute()
const { data: bootstrapStatus } = await useFetch('/api/auth/bootstrap-status', {
default: () => ({
@@ -27,6 +28,30 @@ const { data: bootstrapStatus } = await useFetch('/api/auth/bootstrap-status', {
*/
const canSubmitAdminLogin = computed(() => Boolean(form.email.trim()) && Boolean(form.password))
const googleStatusMessage = computed(() => {
const status = String(route.query.google || '')
if (status === 'admin-not-linked') {
return '연결된 관리자 Google 계정을 찾을 수 없습니다. 먼저 관리자 계정에서 Google 계정을 연결해 주세요.'
}
if (status === 'email-unverified') {
return 'Google 계정의 이메일 확인 상태를 확인할 수 없습니다.'
}
if (status === 'cancelled') {
return 'Google 로그인이 취소되었습니다.'
}
return ''
})
/**
* 관리자 Google 로그인으로 이동한다.
* @returns {void}
*/
const startGoogleAdminLogin = () => {
if (import.meta.client) {
window.location.href = '/api/auth/google/start?mode=admin&redirect=/admin'
}
}
/**
* 브라우저/비밀번호 관리자 자동완성 값을 로그인 폼 상태에 반영한다.
* @returns {void}
@@ -158,6 +183,20 @@ onMounted(() => {
</button>
</form>
<div class="mt-5 border-t border-[#1a212a] pt-5">
<button
class="admin-login__google-button flex h-10 w-full items-center justify-center gap-2 rounded-[8px] border border-[#1a212a] bg-white text-sm font-semibold text-[#15171a] transition hover:bg-[#f1f3f4]"
type="button"
@click="startGoogleAdminLogin"
>
<span class="text-lg font-bold text-[#4285f4]">G</span>
Google로 로그인
</button>
</div>
<p v-if="googleStatusMessage" class="mt-4 text-right text-xs text-[#e5acb1]" aria-live="polite">
{{ googleStatusMessage }}
</p>
<NuxtLink class="mt-6 flex justify-end text-xs text-[#9ba3af] hover:opacity-80" to="/">
사이트로 돌아가기
</NuxtLink>