diff --git a/docs/20260508_국제화도입.md b/docs/20260508_국제화도입.md index 3af418b..6862c6e 100644 --- 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`: 고정 스크립트 ` + diff --git a/src/locales/en.json b/src/locales/en.json index 919b342..9ae9c21 100644 --- 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", diff --git a/src/locales/ja.json b/src/locales/ja.json index d44527d..6e148db 100644 --- 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": "所属クリエイター", diff --git a/src/locales/ko.json b/src/locales/ko.json index d50bd50..9b08de8 100644 --- 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": "소속 크리에이터", diff --git a/src/store/accountStore.js b/src/store/accountStore.js index 5023846..a31c322 100644 --- 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) => { diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index b8b1bce..1a27072 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -17,14 +17,14 @@ @@ -36,7 +36,7 @@ color="primary" @click="loginSubmit" > - 로그인 + {{ $t('view.login.login') }} @@ -60,7 +60,7 @@ mdi-apple - Apple로 로그인 + {{ $t('view.login.loginWithApple') }} 카카오 로그인 버튼 @@ -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')); } }, }