Google 계정 연동 관리 개선

pages/settings/index.vue

@@ -147,6 +147,10 @@ const loadProfile = async () => {
  * @returns {void}
  */
 const startGoogleLink = () => {
+  if (googleLinked.value) {
+    return
+  }
+
   if (import.meta.client) {
     window.location.href = '/api/auth/google/start?mode=link&redirect=/settings'
   }
@@ -161,6 +165,8 @@ watch(
       loadProfile()
     } else if (value === 'already-linked') {
       googleMessage.value = '이미 다른 계정에 연결된 Google 계정입니다.'
+    } else if (value === 'already-connected') {
+      googleMessage.value = '이미 Google 계정이 연결되어 있습니다.'
     } else if (value === 'email-unverified') {
       googleMessage.value = 'Google 계정의 이메일 확인 상태를 확인할 수 없습니다.'
     } else if (value === 'session-mismatch') {
@@ -557,12 +563,12 @@ onMounted(loadProfile)
             <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
               <div class="min-w-0">
                 <p class="text-sm font-semibold">{{ googleLinkedText }}</p>
-                <p class="mt-1 text-sm site-muted">
-                  연결하면 다음 로그인부터 Google 계정으로 로그인할 수 있습니다.
-                </p>
               </div>
-              <button class="settings-page__google-link-button h-10 rounded-[8px] border border-[var(--site-line)] px-4 text-sm font-semibold transition hover:bg-[var(--site-panel)]" type="button" @click="startGoogleLink">
-                {{ googleLinked ? '다시 연결' : 'Google 계정 연결' }}
+              <span v-if="googleLinked" class="settings-page__google-linked-badge inline-flex h-9 items-center rounded-full bg-[var(--site-panel)] px-4 text-sm font-semibold site-muted">
+                연결 됨
+              </span>
+              <button v-else class="settings-page__google-link-button h-10 rounded-[8px] border border-[var(--site-line)] px-4 text-sm font-semibold transition hover:bg-[var(--site-panel)]" type="button" @click="startGoogleLink">
+                Google 계정 연결
               </button>
             </div>
             <p v-if="googleMessage" class="mt-4 text-sm site-muted" aria-live="polite">