feat(login): Google 로그인 버튼 언어 전환 동적 로드 구현 및 문서 갱신

2026-05-08 14:33:15 +09:00
parent 43d0ebc9ed
commit 4e0b40afc0
7 changed files with 270 additions and 37 deletions
--- a/docs/20260508_국제화도입.md
+++ b/docs/20260508_국제화도입.md
@@ -47,3 +47,89 @@
    - 확인 항목: en=USD 통화기호/소수 2자리, ko=KRW 소수 0자리, ja=JPY 소수 0자리로 `$n(..., 'currency')` 표기 ✓
  - 오류 핸들링: API 실패 시 공통 메시지 `common.error.unknown` 사용, 목록 실패 시 `common.error.fetchFailed` 사용 ✓
  - Vuetify 동기화: 언어 전환 시 Vuetify locale이 함께 변경되는지 확인(메시지/레이블) ✓
+
+### 3차 점검 – 하드코딩 문자열 스캔 (2026-05-08)
+- 무엇을: 소스 내 한글/일문 하드코딩 문자열이 남아있는 위치를 정규식으로 일괄 스캔해 목록화
+- 왜: 남아있는 하드코딩 텍스트를 체계적으로 발견·우선순위화하여 i18n 치환 누락을 방지하기 위함
+- 어떻게:
+  - 실행 명령: `npm run i18n:scan`
+  - 주요 결과(파일 단위 요약):
+    - 로그인/계정 관련
+      - `src/views/Login/Login.vue`
+      - `src/store/accountStore.js`
+      - `src/api/member.js` (주석 한국어 포함)
+    - 정산(레거시 경로) 관련
+      - `src/views/Calculate/CalculateLive.vue`
+      - `src/views/Calculate/CalculateContent.vue`
+      - `src/views/Calculate/CalculateContentDonation.vue`
+      - `src/views/Calculate/CalculateCommunityPost.vue`
+      - `src/views/Calculate/CalculateChannelDonation.vue`
+      - `src/views/Calculate/CalculateAccumulation.vue`
+    - 콘텐츠 관리 관련
+      - `src/views/Content/ContentList.vue`
+      - `src/views/Content/ContentCategoryList.vue`
+      - `src/views/Content/ContentSeriesList.vue`
+      - `src/views/Content/ContentSeriesDetail.vue`
+    - 에이전트 화면(신규 경로는 다수 치환되었으나 일부 주석/텍스트 존재 가능)
+      - `src/views/Agent/Creators.vue`
+      - `src/views/Agent/Calculate/AgentCalculateLive.vue`
+      - `src/views/Agent/Calculate/AgentCalculateContent.vue`
+      - `src/views/Agent/Calculate/AgentCalculateContentDonation.vue`
+      - `src/views/Agent/Calculate/AgentCalculateCommunityPost.vue`
+      - `src/views/Agent/Calculate/AgentCalculateChannelDonation.vue`
+    - 공통/기반 코드(주석/문구)
+      - `src/components/SideMenu.vue`
+      - `src/router/index.js`
+      - `src/main.js`
+      - `src/i18n/index.js`
+      - `src/api/agent_calculate.js`
+
+- 비고:
+  - 위 목록에는 “주석 내 한국어”도 포함된다. 실동작 텍스트 우선 치환 대상은 템플릿 내 라벨/버튼/메시지/테이블 헤더 등 사용자 노출부이다.
+  - `views/Agent/*` 경로는 상당수 치환됨. 반면 `views/Calculate/*`, `views/Content/*`, `views/Login/*`에는 하드코딩 문자열이 상대적으로 많이 남아 있음.
+
+#### 후속 액션(우선순위 제안)
+- P1 (가시성·필수 유입 경로): 로그인/계정
+  - `src/views/Login/Login.vue`의 오류/안내 메시지 i18n 치환
+  - `src/store/accountStore.js`의 사용자 노출 에러 메시지 i18n 치환
+- P2 (업무 핵심): 레거시 정산 화면 `views/Calculate/*`
+  - 테이블 헤더/합계/필터 라벨/버튼 등 일괄 키 도출 → `view.calculate.*` 네임스페이스 제안
+- P3 (업무 빈도 높음): 콘텐츠 관리 `views/Content/*`
+  - 목록/상세/시리즈 화면의 라벨/버튼/알림 메시지 치환 → `view.content.*` 네임스페이스 제안
+- P4: 공통 남은 텍스트 및 주석 정리(사용자 노출 X 주석은 후순위)
+
+#### 참고(샘플 라인)
+- `src/views/Login/Login.vue`: '카카오 인증 모듈을 불 러오지 못했습니다. 페이지를 새로고침 해주세요.' 등 다수 경고/안내 메시지 하드코딩
+- `src/store/accountStore.js`: '로그인 정보를 확인해주세요.' 등 계정 관련 오류 메시지 하드코딩
+
+### 4차 구현 – 로그인/계정 치환 (2026-05-08)
+- 무엇을: 로그인 화면과 계정 스토어의 사용자 노출 문자열을 i18n으로 치환하고 3개 언어 리소스를 추가함
+- 왜: 필수 유입 경로인 로그인 단계에서 다국어 경험을 보장하고, 오류 시 일관된 안내를 제공하기 위함
+- 어떻게:
+  - 변경 파일:
+    - `src/views/Login/Login.vue`: 라벨/버튼/alt/안내·오류 메시지 전면 `$t()` 치환
+    - `src/store/accountStore.js`: 에러 메시지 `i18n.t()`로 치환(ko/en/ja 키 사용)
+    - `src/locales/{ko,en,ja}.json`: `view.login.*`, `alt.kakaoLoginButton`, `notice.loading.{appleSdk,kakaoSdk}`, `common.error.{login,google,kakao,apple}.*` 키 추가
+  - 실행 명령 1: `npm run i18n:scan`
+    - 기대 결과: Login.vue, accountStore.js 내 한/일문 하드코딩 라인이 0 또는 주석만 남음 ✓
+  - 실행 명령 2: `npm run serve` 후 로그인 화면 확인
+    - 확인 항목: Email/Password 라벨, 로그인/소셜 로그인 버튼 텍스트가 ko/en/ja 전환에 따라 변경됨 ✓
+    - 확인 항목: 애플/카카오 SDK 로딩/실패/잘못된 응답 등의 안내 메시지가 각 언어로 표시됨 ✓
+
+### 5차 구현 – Google 버튼 런타임 언어 전환 반영 (2026-05-08)
+- 무엇을: Google Identity Services(GIS) 버튼이 앱의 언어 전환과 함께 텍스트도 변경되도록, GIS 스크립트를 선택 로케일(`hl`)로 동적 로드하고 버튼을 재렌더하도록 구현함
+- 왜: 외부 위젯(GIS 버튼)은 `vue-i18n` 전환을 자동으로 따르지 않기 때문에, 사용자 경험을 일치시키기 위해 수동 재로드가 필요함
+- 어떻게:
+  - 변경 파일:
+    - `public/index.html`: 고정 스크립트 `<script src="https://accounts.google.com/gsi/client">` 제거(주석으로 동적 로드 안내 추가)
+    - `src/views/Login/Login.vue`:
+      - `loadGisScript(locale)`: `?hl=<locale>`로 SDK 동적 주입(+ 캐시 버스터)
+      - `renderGoogleButton()`: `initialize` 후 `renderButton` 재호출, 컨테이너 초기화
+      - `mountGoogleButtonForLocale(locale)`: SDK 로드 후 버튼 렌더 묶음
+      - `mounted()`: 초기 로케일로 로드 + `$i18n.locale` watch로 언어 변경 시 재주입/재렌더
+      - 기존 `initGoogleLogin()` 대체
+  - 실행 명령 1: `npm run serve`
+    - 확인 항목: 초기 언어(ko/en/ja)에 따라 Google 버튼 라벨이 해당 언어로 표시됨 ✓
+  - 실행 명령 2: 헤더의 언어 드롭다운으로 `ko → en → ja` 순서로 전환
+    - 확인 항목: 각 전환 시 Google 버튼 라벨이 즉시 새 언어로 변경됨 ✓
+  - 참고: 외부 위젯 특성상 캐시 환경에 따라 반영이 지연될 수 있어, SDK URL에 캐시 버스터 파라미터 추가함
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,7 @@
    <title>보이스온 크리에이터 관리자</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
-    <script src="https://accounts.google.com/gsi/client" async defer></script>
+    <!-- Google Identity Services SDK는 런타임 로케일에 맞춰 동적으로 로드합니다 (Login.vue) -->
    <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
    <script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
  </head>
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3,7 +3,24 @@
    "logout": "Log out",
    "error": {
      "unknown": "An unknown error occurred. Please sign in again.",
-      "fetchFailed": "Failed to load the list. Please try again."
+      "fetchFailed": "Failed to load the list. Please try again.",
+      "login": {
+        "checkInfo": "Please check your login information."
+      },
+      "google": {
+        "checkInfo": "Please check your Google sign-in information."
+      },
+      "kakao": {
+        "checkInfo": "Please check your Kakao sign-in information.",
+        "failed": "Kakao sign-in failed.",
+        "notInitialized": "Kakao SDK is not initialized. Please try again shortly.",
+        "moduleLoad": "Failed to load Kakao auth module. Please refresh the page."
+      },
+      "apple": {
+        "checkInfo": "Please check your Apple sign-in information.",
+        "failed": "Apple sign-in failed.",
+        "invalidResponse": "Invalid Apple sign-in response."
+      }
    },
    "unit": {
      "can": "CAN"
@@ -17,6 +34,15 @@
      "title": "VoiceON Creator Admin"
    }
  },
+  "alt": {
+    "kakaoLoginButton": "Kakao login button"
+  },
+  "notice": {
+    "loading": {
+      "appleSdk": "Loading Apple SDK. Please try again shortly.",
+      "kakaoSdk": "Loading Kakao SDK. Please try again shortly."
+    }
+  },
  "comp": {
    "sideMenu": {
      "creators": "Affiliated creators",
@@ -30,6 +56,13 @@
    }
  },
  "view": {
+    "login": {
+      "email": "Email",
+      "password": "Password",
+      "login": "Sign in",
+      "loginWithApple": "Sign in with Apple",
+      "loginWithKakao": "Sign in with Kakao"
+    },
    "agent": {
      "creators": {
        "title": "Affiliated creators",
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -3,7 +3,24 @@
    "logout": "ログアウト",
    "error": {
      "unknown": "不明なエラーが発生しました。再度ログインしてください。",
-      "fetchFailed": "リストを読み込めませんでした。もう一度お試しください。"
+      "fetchFailed": "リストを読み込めませんでした。もう一度お試しください。",
+      "login": {
+        "checkInfo": "ログイン情報を確認してください。"
+      },
+      "google": {
+        "checkInfo": "Googleログイン情報を確認してください。"
+      },
+      "kakao": {
+        "checkInfo": "Kakaoログイン情報を確認してください。",
+        "failed": "Kakaoログインに失敗しました。",
+        "notInitialized": "Kakao SDKが初期化されていません。しばらくしてから再試行してください。",
+        "moduleLoad": "Kakao認証モジュールを読み込めませんでした。ページを再読み込みしてください。"
+      },
+      "apple": {
+        "checkInfo": "Appleログイン情報を確認してください。",
+        "failed": "Appleログインに失敗しました。",
+        "invalidResponse": "Appleログインの応答が正しくありません。"
+      }
    },
    "unit": {
      "can": "CAN"
@@ -17,6 +34,15 @@
      "title": "ボイスオン クリエイター管理"
    }
  },
+  "alt": {
+    "kakaoLoginButton": "Kakao ログインボタン"
+  },
+  "notice": {
+    "loading": {
+      "appleSdk": "Apple SDKを読み込み中です。しばらくしてから再試行してください。",
+      "kakaoSdk": "Kakao SDKを読み込み中です。しばらくしてから再試行してください。"
+    }
+  },
  "comp": {
    "sideMenu": {
      "creators": "所属クリエイター",
@@ -30,6 +56,13 @@
    }
  },
  "view": {
+    "login": {
+      "email": "メール",
+      "password": "パスワード",
+      "login": "ログイン",
+      "loginWithApple": "Appleでログイン",
+      "loginWithKakao": "Kakaoでログイン"
+    },
    "agent": {
      "creators": {
        "title": "所属クリエイター",
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -3,7 +3,24 @@
    "logout": "로그아웃",
    "error": {
      "unknown": "알 수 없는 오류가 발생했습니다. 다시 로그인 해주세요!",
-      "fetchFailed": "목록을 불러오지 못했습니다. 다시 시도해 주세요."
+      "fetchFailed": "목록을 불러오지 못했습니다. 다시 시도해 주세요.",
+      "login": {
+        "checkInfo": "로그인 정보를 확인해주세요."
+      },
+      "google": {
+        "checkInfo": "구글 로그인 정보를 확인해주세요."
+      },
+      "kakao": {
+        "checkInfo": "카카오 로그인 정보를 확인해주세요.",
+        "failed": "카카오 로그인에 실패했습니다.",
+        "notInitialized": "카카오 SDK가 초기화되지 않았습니다. 잠시 후 다시 시도해주세요.",
+        "moduleLoad": "카카오 인증 모듈을 불러오지 못했습니다. 페이지를 새로고침 해주세요."
+      },
+      "apple": {
+        "checkInfo": "애플 로그인 정보를 확인해주세요.",
+        "failed": "애플 로그인에 실패했습니다.",
+        "invalidResponse": "애플 로그인 응답이 올바르지 않습니다."
+      }
    },
    "unit": {
      "can": "캔"
@@ -17,6 +34,15 @@
      "title": "보이스온 크리에이터 관리자"
    }
  },
+  "alt": {
+    "kakaoLoginButton": "카카오 로그인 버튼"
+  },
+  "notice": {
+    "loading": {
+      "appleSdk": "애플 SDK를 불러오는 중입니다. 잠시 후 다시 시도해주세요.",
+      "kakaoSdk": "카카오 SDK를 불러오는 중입니다. 잠시 후 다시 시도해주세요."
+    }
+  },
  "comp": {
    "sideMenu": {
      "creators": "소속 크리에이터",
@@ -30,6 +56,13 @@
    }
  },
  "view": {
+    "login": {
+      "email": "이메일",
+      "password": "비밀번호",
+      "login": "로그인",
+      "loginWithApple": "Apple로 로그인",
+      "loginWithKakao": "카카오로 로그인"
+    },
    "agent": {
      "creators": {
        "title": "소속 크리에이터",
--- a/src/store/accountStore.js
+++ b/src/store/accountStore.js
@@ -1,5 +1,6 @@
 import * as memberApi from '@/api/member'
 import Vue from 'vue';
+import i18n from '@/i18n'

 const enhanceAccessToken = () => {
    const {accessToken} = localStorage
@@ -75,7 +76,7 @@ const accountStore = {
                    errorMessage = res.data.message
                }
            } catch (e) {
-                errorMessage = '로그인 정보를 확인해주세요.'
+                errorMessage = i18n.t('common.error.login.checkInfo')
            }

            return new Promise((resolve, reject) => {
@@ -100,7 +101,7 @@ const accountStore = {
                    errorMessage = res.data.message
                }
            } catch (e) {
-                errorMessage = '구글 로그인 정보를 확인해주세요.'
+                errorMessage = i18n.t('common.error.google.checkInfo')
            }

            return new Promise((resolve, reject) => {
@@ -125,7 +126,7 @@ const accountStore = {
                    errorMessage = res.data.message
                }
            } catch (e) {
-                errorMessage = '카카오 로그인 정보를 확인해주세요.'
+                errorMessage = i18n.t('common.error.kakao.checkInfo')
            }

            return new Promise((resolve, reject) => {
@@ -150,7 +151,7 @@ const accountStore = {
                    errorMessage = res.data.message
                }
            } catch (e) {
-                errorMessage = '애플 로그인 정보를 확인해주세요.'
+                errorMessage = i18n.t('common.error.apple.checkInfo')
            }

            return new Promise((resolve, reject) => {
@@ -176,7 +177,7 @@ const accountStore = {
                    errorMessage = res.data.message
                }
            } catch (e) {
-                errorMessage = '로그인 정보를 확인해주세요.'
+                errorMessage = i18n.t('common.error.login.checkInfo')
            }

            return new Promise((resolve, reject) => {
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -17,14 +17,14 @@
                <v-form>
                  <v-text-field
                    v-model="email"
-                    label="Email"
+                    :label="$t('view.login.email')"
                    type="text"
                  />
                  <v-text-field
                    v-model="password"
                    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
                    :type="showPassword ? 'text' : 'password'"
-                    label="Password"
+                    :label="$t('view.login.password')"
                    @click:append="showPassword = !showPassword"
                    @keyup.enter="loginSubmit"
                  />
@@ -36,7 +36,7 @@
                  color="primary"
                  @click="loginSubmit"
                >
-                  로그인
+                  {{ $t('view.login.login') }}
                </v-btn>
              </v-card-actions>
              <v-divider />
@@ -60,7 +60,7 @@
                    <v-icon left>
                      mdi-apple
                    </v-icon>
-                    Apple로 로그인
+                    {{ $t('view.login.loginWithApple') }}
                  </v-btn>
                  <v-btn
                    width="192"
@@ -72,7 +72,7 @@
                  >
                    <img
                      src="@/assets/kakao_login.png"
-                      alt="카카오 로그인 버튼"
+                      :alt="$t('alt.kakaoLoginButton')"
                      style="width: 100%; height: 100%; display: block;"
                    >
                  </v-btn>
@@ -98,9 +98,17 @@ export default {
  }),

  mounted() {
-    this.initGoogleLogin();
+    // Google 버튼은 로케일별로 SDK를 동적 로드하여 렌더링
+    this.mountGoogleButtonForLocale(this.$i18n && this.$i18n.locale ? this.$i18n.locale : 'en');
    this.initKakaoLogin();
    this.initAppleLogin();
+
+    // 언어 전환 시 Google 버튼도 재로드/재렌더
+    if (this.$watch && this.$i18n) {
+      this.$watch(() => this.$i18n.locale, (val) => {
+        this.mountGoogleButtonForLocale(val || 'en');
+      });
+    }
  },

  methods: {
@@ -206,7 +214,7 @@ export default {
    loginApple() {
      if (typeof AppleID === 'undefined' || !AppleID.auth) {
        this.initAppleLogin();
-        this.notifyError('애플 SDK를 불러오는 중입니다. 잠시 후 다시 시도해주세요.');
+        this.notifyError(this.$t('notice.loading.appleSdk'));
        return;
      }
      (async () => {
@@ -252,7 +260,7 @@ export default {
          const idToken = res && res.authorization && res.authorization.id_token;

          if (!idToken) {
-            this.notifyError('애플 로그인 응답이 올바르지 않습니다.');
+            this.notifyError(this.$t('common.error.apple.invalidResponse'));
            return;
          }

@@ -267,7 +275,7 @@ export default {
              this.notifyError(message);
            })
        } catch (err) {
-          this.notifyError('애플 로그인에 실패했습니다.');
+          this.notifyError(this.$t('common.error.apple.failed'));
          console.error(err);
        }
      })();
@@ -289,7 +297,7 @@ export default {
      if (typeof Kakao !== 'undefined') {
        if (!Kakao.isInitialized()) {
          this.initKakaoLogin();
-          this.notifyError('카카오 SDK가 초기화되지 않았습니다. 잠시 후 다시 시도해주세요.');
+          this.notifyError(this.$t('common.error.kakao.notInitialized'));
          return;
        }

@@ -305,34 +313,73 @@ export default {
                })
            },
            fail: (err) => {
-              this.notifyError('카카오 로그인에 실패했습니다.');
+              this.notifyError(this.$t('common.error.kakao.failed'));
              console.error(err);
            },
          });
        } else {
-          this.notifyError('카카오 인증 모듈을 불러오지 못했습니다. 페이지를 새로고침 해주세요.');
+          this.notifyError(this.$t('common.error.kakao.moduleLoad'));
        }
      } else {
        this.initKakaoLogin();
-        this.notifyError('카카오 SDK를 불러오는 중입니다. 잠시 후 다시 시도해주세요.');
+        this.notifyError(this.$t('notice.loading.kakaoSdk'));
      }
    },

-    initGoogleLogin() {
+    // Google Identity Services SDK 동적 로더
+    loadGisScript(locale) {
+      return new Promise((resolve, reject) => {
+        try {
+          const prev = document.getElementById('gis-sdk');
+          if (prev && prev.parentNode) prev.parentNode.removeChild(prev);
+
+          // 가능한 범위 내 초기화/정리
+          if (window.google && window.google.accounts && window.google.accounts.id) {
+            try { window.google.accounts.id.cancel(); } catch (e) { /* noop */ }
+          }
+          try { delete window.google; } catch (e) { window.google = undefined; }
+
+          const script = document.createElement('script');
+          script.id = 'gis-sdk';
+          // 캐시 무효화를 위해 ts 파라미터 부여(언어 전환 즉시 반영 보조)
+          const ts = Date.now();
+          script.src = `https://accounts.google.com/gsi/client?hl=${encodeURIComponent(locale)}&v=${ts}`;
+          script.async = true;
+          script.defer = true;
+          script.onload = () => resolve();
+          script.onerror = (e) => reject(e);
+          document.head.appendChild(script);
+        } catch (e) {
+          reject(e);
+        }
+      });
+    },
+
+    // Google 버튼 렌더링
+    renderGoogleButton() {
      /* global google */
-      if (typeof google !== 'undefined') {
-        google.accounts.id.initialize({
-          client_id: process.env.VUE_APP_GOOGLE_CLIENT_ID,
-          callback: this.handleCredentialResponse
-        });
-        google.accounts.id.renderButton(
-          document.getElementById("google-login-btn"),
-          { theme: "outline", size: "large", width: 192 }
-        );
-      } else {
-        setTimeout(() => {
-          this.initGoogleLogin();
-        }, 500);
+      if (!(window.google && window.google.accounts && window.google.accounts.id)) return;
+
+      window.google.accounts.id.initialize({
+        client_id: process.env.VUE_APP_GOOGLE_CLIENT_ID,
+        callback: this.handleCredentialResponse
+      });
+
+      const el = document.getElementById('google-login-btn');
+      if (el) {
+        el.innerHTML = '';
+        window.google.accounts.id.renderButton(el, { theme: 'outline', size: 'large', width: 192 });
+      }
+    },
+
+    // 로케일에 맞춰 SDK 로드 후 버튼 렌더
+    async mountGoogleButtonForLocale(locale) {
+      try {
+        await this.loadGisScript(locale || 'en');
+        this.renderGoogleButton();
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('[Google Identity Services] load/render failed:', e);
      }
    },

@@ -365,7 +412,7 @@ export default {
            this.notifyError(message);
          })
      } catch (e) {
-        this.notifyError('로그인 정보를 확인해주세요.');
+        this.notifyError(this.$t('common.error.login.checkInfo'));
      }
    },
  }