Google 계정 로그인 연동 추가

pages/signin.vue

@@ -7,6 +7,7 @@ const isSubmitting = ref(false)
 const errorMessage = ref('')
 const statusMessage = ref('')
 const showPassword = ref(false)
+const route = useRoute()
 
 const form = reactive({
   email: '',
@@ -19,6 +20,33 @@ const form = reactive({
  */
 const canSubmitSignIn = computed(() => Boolean(form.email.trim()) && Boolean(form.password))
 
+const googleStatusMessage = computed(() => {
+  const status = String(route.query.google || '')
+  if (status === 'email-exists') {
+    return '이미 가입된 이메일입니다. 기존 계정으로 로그인한 뒤 Google 계정을 연결해 주세요.'
+  }
+  if (status === 'email-unverified') {
+    return 'Google 계정의 이메일 확인 상태를 확인할 수 없습니다.'
+  }
+  if (status === 'session-mismatch') {
+    return '로그인 세션이 바뀌었습니다. 다시 로그인해 주세요.'
+  }
+  if (status === 'cancelled') {
+    return 'Google 로그인이 취소되었습니다.'
+  }
+  return ''
+})
+
+/**
+ * Google 로그인으로 이동한다.
+ * @returns {void}
+ */
+const startGoogleSignIn = () => {
+  if (import.meta.client) {
+    window.location.href = '/api/auth/google/start?mode=member&redirect=/'
+  }
+}
+
 /**
  * 로그인 입력값을 검증한다.
  * @returns {boolean} 검증 통과 여부
@@ -113,9 +141,23 @@ const submitSignIn = async () => {
           </button>
         </form>
 
+        <div class="mt-5 border-t border-[#1a212a] pt-5">
+          <button
+            class="auth-signin__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="startGoogleSignIn"
+          >
+            <span class="text-lg font-bold text-[#4285f4]">G</span>
+            Google로 로그인
+          </button>
+        </div>
+
         <p v-if="errorMessage" class="mt-4 text-xs text-[#e5acb1]" aria-live="polite">
           {{ errorMessage }}
         </p>
+        <p v-if="googleStatusMessage" class="mt-4 text-xs text-[#e5acb1]" aria-live="polite">
+          {{ googleStatusMessage }}
+        </p>
         <p v-if="statusMessage" class="mt-4 text-xs text-[#9fc4ff]" aria-live="polite">
           {{ statusMessage }}
         </p>