feat: implement Kakao OAuth login functionality (#52)

- Add Kakao OAuth endpoint to constants
- Implement handleKakaoLogin with proper OAuth flow
- Add separate loading states for Google and Kakao buttons
- Fix loading spinner issue where both buttons showed loading state

Author: devgony

app/onboarding/_components/LoginScreen.tsx

@@ -16,7 +16,8 @@ interface LoginScreenProps {
 }
 
 export default function LoginScreen({ onNext }: LoginScreenProps) {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isGoogleLoading, setIsGoogleLoading] = useState(false);
+  const [isKakaoLoading, setIsKakaoLoading] = useState(false);
   const {
     oauthState,
     setOauthState,
@@ -62,7 +63,8 @@ export default function LoginScreen({ onNext }: LoginScreenProps) {
     if (error) {
       console.error("OAuth 인증 오류:", error);
       console.error("OAuth 로그인 실패");
-      setIsLoading(false);
+      setIsGoogleLoading(false);
+      setIsKakaoLoading(false);
       return;
     }
 
@@ -74,7 +76,8 @@ export default function LoginScreen({ onNext }: LoginScreenProps) {
       if (state && oauthState && state !== oauthState) {
         console.error("State 파라미터가 일치하지 않습니다.");
         console.error("OAuth state 파라미터 불일치");
-        setIsLoading(false);
+        setIsGoogleLoading(false);
+        setIsKakaoLoading(false);
         return;
       }
 
@@ -135,7 +138,7 @@ export default function LoginScreen({ onNext }: LoginScreenProps) {
   ]);
 
   const handleGoogleLogin = () => {
-    setIsLoading(true);
+    setIsGoogleLoading(true);
 
     // 현재 페이지 상태 저장 (인증 후 돌아올 때 사용)
     const currentStep = "login";
@@ -151,9 +154,19 @@ export default function LoginScreen({ onNext }: LoginScreenProps) {
   };
 
   const handleKakaoLogin = () => {
-    // TODO: Implement Kakao login
-    login();
-    onNext();
+    setIsKakaoLoading(true);
+
+    // 현재 페이지 상태 저장 (인증 후 돌아올 때 사용)
+    const currentStep = "login";
+    setOauthReturnStep(currentStep);
+
+    // CSRF 보호를 위한 state 파라미터 생성
+    const state = Math.random().toString(36).substring(2, 15);
+    setOauthState(state);
+
+    // Kakao OAuth 인증 페이지로 리다이렉트
+    const redirect_uri = `${process.env.NEXT_PUBLIC_FRONTEND_BASE_URL}/onboarding`;
+    window.location.href = `${OAUTH_ENDPOINTS.KAKAO_AUTHORIZE}?redirect_uri=${redirect_uri}&state=${state}`;
   };
 
   const handleBrowse = () => {
@@ -212,27 +225,32 @@ export default function LoginScreen({ onNext }: LoginScreenProps) {
           {/* Google Login */}
           <button
             onClick={handleGoogleLogin}
-            disabled={isLoading}
+            disabled={isGoogleLoading}
             className="w-full flex items-center justify-center gap-2 py-[15px] px-4 bg-background-alternative border border-line-normal rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
           >
-            {isLoading ? (
+            {isGoogleLoading ? (
               <div className="w-6 h-6 border-2 border-label-normal border-t-transparent rounded-full animate-spin"></div>
             ) : (
               <GoogleIcon size={24} />
             )}
             <span className="text-sm font-semibold text-label-normal">
-              {isLoading ? "로그인 중..." : "Google로 시작하기"}
+              {isGoogleLoading ? "로그인 중..." : "Google로 시작하기"}
             </span>
           </button>
 
           {/* Kakao Login */}
           <button
             onClick={handleKakaoLogin}
-            className="w-full flex items-center justify-center gap-2 py-[15px] px-4 bg-[#FEE500] rounded-lg"
+            disabled={isKakaoLoading}
+            className="w-full flex items-center justify-center gap-2 py-[15px] px-4 bg-[#FEE500] rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
           >
-            <KakaoIcon size={24} />
+            {isKakaoLoading ? (
+              <div className="w-6 h-6 border-2 border-label-normal border-t-transparent rounded-full animate-spin"></div>
+            ) : (
+              <KakaoIcon size={24} />
+            )}
             <span className="text-sm font-semibold text-label-normal">
-              카카오로 시작하기
+              {isKakaoLoading ? "로그인 중..." : "카카오로 시작하기"}
             </span>
           </button>
 

lib/constants.ts

@@ -5,7 +5,9 @@ export const API_BASE_URL = "http://motimo.kro.kr:8080";
 // OAuth 관련 상수
 export const OAUTH_ENDPOINTS = {
   GOOGLE_AUTHORIZE: `${API_BASE_URL}/oauth2/authorize/google`,
+  KAKAO_AUTHORIZE: `${API_BASE_URL}/oauth2/authorize/kakao`,
 } as const;
 
 // 기타 상수
-export const FRONTEND_BASE_URL = "http://localhost:3000"; 
+export const FRONTEND_BASE_URL = "http://localhost:3000";
+