diff --git a/solution/frontend/src/components/auth/GoogleSignInButton.tsx b/solution/frontend/src/components/auth/GoogleSignInButton.tsx index fd3d3aa..75b47d0 100644 --- a/solution/frontend/src/components/auth/GoogleSignInButton.tsx +++ b/solution/frontend/src/components/auth/GoogleSignInButton.tsx @@ -11,7 +11,7 @@ import {GOOGLE_CLIENT_ID, isGoogleLoginEnabled, loadGoogleIdentity} from '@/lib/ */ export function GoogleSignInButton({ onCredential, - text = 'continue_with', + text = 'signin_with', }: { onCredential: (credential: string) => void; text?: 'continue_with' | 'signin_with' | 'signup_with'; @@ -46,7 +46,9 @@ export function GoogleSignInButton({ size: 'large', shape: 'rectangular', text, - locale: 'ko', + // ★ 'ko' 로는 영문('Continue with Google')이 그대로 나왔다. 지역까지 줘야 한국어다. + // 문구는 우리가 못 정한다 — 구글 브랜드 가이드라 GIS 가 주는 번역을 그대로 쓴다. + locale: 'ko_KR', logo_alignment: 'center', // GIS 는 숫자 px 만 받는다(최대 400). 컨테이너 폭이 잡히기 전이면 최소값으로 그린다. width: holder.current.offsetWidth || 320, diff --git a/solution/frontend/src/features/auth/SignInForm.tsx b/solution/frontend/src/features/auth/SignInForm.tsx index ba5e622..0979015 100644 --- a/solution/frontend/src/features/auth/SignInForm.tsx +++ b/solution/frontend/src/features/auth/SignInForm.tsx @@ -6,10 +6,12 @@ */ import {useState, type FormEvent, type ReactNode} from 'react'; import {LogIn} from 'lucide-react'; -import {login} from '@/api'; +import {googleLogin, login} from '@/api'; +import {GoogleSignInButton} from '@/components/auth/GoogleSignInButton'; import {Button} from '@/components/ui/button'; import {Input} from '@/components/ui/input'; import {notifyApiError} from '@/lib/notify'; +import {isGoogleLoginEnabled} from '@/lib/googleIdentity'; import {establishSession} from '@/lib/session'; interface SignInFormProps { @@ -26,6 +28,27 @@ export function SignInForm({header, footer, submitLabel = '로그인', onSignedI const [password, setPassword] = useState(''); const [isSubmitting, setIsSubmitting] = useState(false); + // 구글은 가입과 로그인이 같은 동작이다 — 처음 온 계정이면 백엔드가 그 자리에서 만든다. + const handleGoogle = async (credential: string) => { + setIsSubmitting(true); + try { + const res = await googleLogin({credential}); + if (res.result?.success === false) { + notifyApiError({data: res}, '구글 로그인에 실패했습니다.'); + return; + } + if (!(await establishSession(res, ''))) { + notifyApiError({data: res}, '로그인 응답에 토큰이 없습니다.'); + return; + } + onSignedIn?.(); + } catch (error) { + notifyApiError(error, '구글 로그인에 실패했습니다.'); + } finally { + setIsSubmitting(false); + } + }; + const handleSubmit = async (event: FormEvent) => { event.preventDefault(); setIsSubmitting(true); @@ -89,6 +112,19 @@ export function SignInForm({header, footer, submitLabel = '로그인', onSignedI {submitLabel} + {/* ★ 로그인 화면이 여기 하나만 있는 게 아니다 — 에디터 관문·2단계도 이 폼을 쓴다. + 구글 버튼을 LoginPage 에만 붙여 두면 정작 사장님이 만나는 자리엔 없다. */} + {isGoogleLoginEnabled() && ( + <> +