From 34d9d12c3f952f5ae72be44a37aa0661d273068d Mon Sep 17 00:00:00 2001
From: hbyang <hbyang@o2o.kr>
Date: Wed, 30 Sep 2026 16:58:13 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20solution/frontend:=20=EC=B9=B4=EC=B9=B4?=
 =?UTF-8?q?=EC=98=A4=20=EB=B2=84=ED=8A=BC=EC=9D=B4=20=EC=A0=95=EC=9E=91=20?=
 =?UTF-8?q?/login=20=EC=97=90=20=EC=95=88=20=EB=96=B4=EB=8B=A4=20=E2=80=94?=
 =?UTF-8?q?=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8F=BC=EC=9D=B4=20=EC=84=B8?=
 =?UTF-8?q?=20=EB=B2=8C=EC=9D=B4=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 solution/frontend/src/pages/LoginPage.tsx  | 11 +++++++++--
 solution/frontend/src/pages/SignupPage.tsx | 11 +++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/solution/frontend/src/pages/LoginPage.tsx b/solution/frontend/src/pages/LoginPage.tsx
index b190e97..13c270a 100644
--- a/solution/frontend/src/pages/LoginPage.tsx
+++ b/solution/frontend/src/pages/LoginPage.tsx
@@ -3,9 +3,11 @@ import {Link, Navigate, useLocation, useNavigate} from 'react-router';
 import {LogIn} from 'lucide-react';
 import {googleLogin, login} from '@/api';
 import {GoogleSignInButton} from '@/components/auth/GoogleSignInButton';
+import {KakaoSignInButton} from '@/components/auth/KakaoSignInButton';
 import {Button} from '@/components/ui/button';
 import {Input} from '@/components/ui/input';
 import {isGoogleLoginEnabled} from '@/lib/googleIdentity';
+import {isKakaoLoginEnabled} from '@/lib/kakaoIdentity';
 import {notifyApiError} from '@/lib/notify';
 import {establishSession} from '@/lib/session';
 import {useAuthStore} from '@/stores/auth';
@@ -129,14 +131,19 @@ export function LoginPage({
           <span>로그인</span>
         </Button>
 
-        {selfServe && isGoogleLoginEnabled() && (
+        {selfServe && (isKakaoLoginEnabled() || isGoogleLoginEnabled()) && (
           <>
             <div className="flex items-center gap-2">
               <span className="h-px flex-1 bg-border" />
               <span className="text-[11px] text-muted-foreground">또는</span>
               <span className="h-px flex-1 bg-border" />
             </div>
-            <GoogleSignInButton onCredential={handleGoogle} text="signin_with" />
+          {/* ★ 카카오를 위에 둔다 — 카톡 채널로 홈페이지를 관리하려면 이 수단이어야
+              회원번호가 이어진다(docs/AGENT.md). 구글로 들어오면 6자리 코드를 거쳐야 한다. */}
+            <KakaoSignInButton returnTo={from} />
+            {isGoogleLoginEnabled() && (
+              <GoogleSignInButton onCredential={handleGoogle} text="signin_with" />
+            )}
           </>
         )}
 
diff --git a/solution/frontend/src/pages/SignupPage.tsx b/solution/frontend/src/pages/SignupPage.tsx
index f1f7d4b..5062e95 100644
--- a/solution/frontend/src/pages/SignupPage.tsx
+++ b/solution/frontend/src/pages/SignupPage.tsx
@@ -3,9 +3,11 @@ import {Link, Navigate, useNavigate} from 'react-router';
 import {UserPlus} from 'lucide-react';
 import {googleLogin, signup} from '@/api';
 import {GoogleSignInButton} from '@/components/auth/GoogleSignInButton';
+import {KakaoSignInButton} from '@/components/auth/KakaoSignInButton';
 import {Button} from '@/components/ui/button';
 import {Input} from '@/components/ui/input';
 import {isGoogleLoginEnabled} from '@/lib/googleIdentity';
+import {isKakaoLoginEnabled} from '@/lib/kakaoIdentity';
 import {notify, notifyApiError} from '@/lib/notify';
 import {establishSession} from '@/lib/session';
 import {useAuthStore} from '@/stores/auth';
@@ -179,14 +181,19 @@ export function SignupPage() {
           <span>가입하기</span>
         </Button>
 
-        {isGoogleLoginEnabled() && (
+        {(isKakaoLoginEnabled() || isGoogleLoginEnabled()) && (
           <>
             <div className="flex items-center gap-2">
               <span className="h-px flex-1 bg-border" />
               <span className="text-[11px] text-muted-foreground">또는</span>
               <span className="h-px flex-1 bg-border" />
             </div>
-            <GoogleSignInButton onCredential={handleGoogle} text="signup_with" />
+            {/* ★ 카카오는 가입과 로그인이 같은 동작이다 — 처음 온 회원번호면 백엔드가 그 자리에서
+                계정을 만든다. 그래서 두 화면이 같은 버튼을 쓴다. */}
+            <KakaoSignInButton label="카카오로 가입하기" />
+            {isGoogleLoginEnabled() && (
+              <GoogleSignInButton onCredential={handleGoogle} text="signup_with" />
+            )}
           </>
         )}