[fix] solution/frontend: 카카오 버튼이 정작 /login 에 안 떴다 — 로그인 폼이 세 벌이다

SignInForm 에만 붙였는데 `/login`·`/signup` 은 그 컴포넌트를 쓰지 않고 **각자 폼을 갖고
있다**(구글 버튼도 세 군데에 따로 적혀 있었다). 번들에는 키가 구워졌고 isKakaoLoginEnabled()
도 true 였는데 화면에만 없어서, 설정 문제로 보이는 종류였다.

- pages/LoginPage: 카카오 버튼 추가. returnTo 로 `from`(원래 가려던 곳)을 넘긴다
- pages/SignupPage: 가입도 같은 동작이라 같은 버튼을 쓴다(처음 온 회원번호면 백엔드가 생성)

lint(react-router typegen + tsc + eslint) 통과

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
hbyang 2026-09-30 16:58:13 +09:00
parent 7ee6911836
commit 34d9d12c3f
2 changed files with 18 additions and 4 deletions

View File

@ -3,9 +3,11 @@ import {Link, Navigate, useLocation, useNavigate} from 'react-router';
import {LogIn} from 'lucide-react'; import {LogIn} from 'lucide-react';
import {googleLogin, login} from '@/api'; import {googleLogin, login} from '@/api';
import {GoogleSignInButton} from '@/components/auth/GoogleSignInButton'; import {GoogleSignInButton} from '@/components/auth/GoogleSignInButton';
import {KakaoSignInButton} from '@/components/auth/KakaoSignInButton';
import {Button} from '@/components/ui/button'; import {Button} from '@/components/ui/button';
import {Input} from '@/components/ui/input'; import {Input} from '@/components/ui/input';
import {isGoogleLoginEnabled} from '@/lib/googleIdentity'; import {isGoogleLoginEnabled} from '@/lib/googleIdentity';
import {isKakaoLoginEnabled} from '@/lib/kakaoIdentity';
import {notifyApiError} from '@/lib/notify'; import {notifyApiError} from '@/lib/notify';
import {establishSession} from '@/lib/session'; import {establishSession} from '@/lib/session';
import {useAuthStore} from '@/stores/auth'; import {useAuthStore} from '@/stores/auth';
@ -129,14 +131,19 @@ export function LoginPage({
<span>로그인</span> <span>로그인</span>
</Button> </Button>
{selfServe && isGoogleLoginEnabled() && ( {selfServe && (isKakaoLoginEnabled() || isGoogleLoginEnabled()) && (
<> <>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="h-px flex-1 bg-border" /> <span className="h-px flex-1 bg-border" />
<span className="text-[11px] text-muted-foreground">또는</span> <span className="text-[11px] text-muted-foreground">또는</span>
<span className="h-px flex-1 bg-border" /> <span className="h-px flex-1 bg-border" />
</div> </div>
{/* ★ 카카오를 위에 둔다 — 카톡 채널로 홈페이지를 관리하려면 이 수단이어야
회원번호가 이어진다(docs/AGENT.md). 구글로 들어오면 6자리 코드를 거쳐야 한다. */}
<KakaoSignInButton returnTo={from} />
{isGoogleLoginEnabled() && (
<GoogleSignInButton onCredential={handleGoogle} text="signin_with" /> <GoogleSignInButton onCredential={handleGoogle} text="signin_with" />
)}
</> </>
)} )}

View File

@ -3,9 +3,11 @@ import {Link, Navigate, useNavigate} from 'react-router';
import {UserPlus} from 'lucide-react'; import {UserPlus} from 'lucide-react';
import {googleLogin, signup} from '@/api'; import {googleLogin, signup} from '@/api';
import {GoogleSignInButton} from '@/components/auth/GoogleSignInButton'; import {GoogleSignInButton} from '@/components/auth/GoogleSignInButton';
import {KakaoSignInButton} from '@/components/auth/KakaoSignInButton';
import {Button} from '@/components/ui/button'; import {Button} from '@/components/ui/button';
import {Input} from '@/components/ui/input'; import {Input} from '@/components/ui/input';
import {isGoogleLoginEnabled} from '@/lib/googleIdentity'; import {isGoogleLoginEnabled} from '@/lib/googleIdentity';
import {isKakaoLoginEnabled} from '@/lib/kakaoIdentity';
import {notify, notifyApiError} from '@/lib/notify'; import {notify, notifyApiError} from '@/lib/notify';
import {establishSession} from '@/lib/session'; import {establishSession} from '@/lib/session';
import {useAuthStore} from '@/stores/auth'; import {useAuthStore} from '@/stores/auth';
@ -179,14 +181,19 @@ export function SignupPage() {
<span>가입하기</span> <span>가입하기</span>
</Button> </Button>
{isGoogleLoginEnabled() && ( {(isKakaoLoginEnabled() || isGoogleLoginEnabled()) && (
<> <>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="h-px flex-1 bg-border" /> <span className="h-px flex-1 bg-border" />
<span className="text-[11px] text-muted-foreground">또는</span> <span className="text-[11px] text-muted-foreground">또는</span>
<span className="h-px flex-1 bg-border" /> <span className="h-px flex-1 bg-border" />
</div> </div>
{/* ★ 카카오는 가입과 로그인이 같은 동작이다 — 처음 온 회원번호면 백엔드가 그 자리에서
계정을 만든다. 그래서 두 화면이 같은 버튼을 쓴다. */}
<KakaoSignInButton label="카카오로 가입하기" />
{isGoogleLoginEnabled() && (
<GoogleSignInButton onCredential={handleGoogle} text="signup_with" /> <GoogleSignInButton onCredential={handleGoogle} text="signup_with" />
)}
</> </>
)} )}