feat: 로그인 화면

2026-02-26 12:29:45 +09:00
parent 53f160384d
commit dabb442048
14 changed files with 402 additions and 102 deletions
--- a/src/features/auth/api/authApi.ts
+++ b/src/features/auth/api/authApi.ts
@@ -0,0 +1,17 @@
+import { apiClient } from '@/shared/lib/apiClient';
+import { SocialLoginRequest, AuthResponse } from '../types';
+
+export const authApi = {
+  /**
+   * 프론트엔드에서 발급받은 소셜 토큰을 백엔드로 전송하여 VibeRoom 전용 토큰으로 교환합니다.
+   * @param data 구글/애플/페이스북에서 발급받은 Provider 이름과 Token
+   */
+  loginWithSocial: async (data: SocialLoginRequest): Promise<AuthResponse> => {
+    return apiClient<AuthResponse>('/auth/social', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+  },
+  
+  // TODO: 이후 필요 시 logout, refreshAccessToken 등 인증 관련 API 추가
+};
--- a/src/features/auth/components/SocialLoginGroup.tsx
+++ b/src/features/auth/components/SocialLoginGroup.tsx
@@ -0,0 +1,64 @@
+'use client'; // 클라이언트 사이드 이벤트(onClick) 및 훅(useRouter)을 사용하므로 필수
+
+import React from 'react';
+import { useSocialLogin } from '../hooks/useSocialLogin';
+
+/**
+ * 로그인 화면 UI (View)
+ * 비즈니스 로직(토큰 교환 등)을 전혀 모른 채, 오직 버튼만 그리고 이벤트를 훅(Hook)으로 위임합니다.
+ */
+export const SocialLoginGroup = () => {
+  // 로직과 뷰의 완벽한 분리: useSocialLogin 커스텀 훅에서 필요한 함수만 꺼내옵니다.
+  const { loginWithGoogle, loginWithApple, loginWithFacebook, isLoading, error } = useSocialLogin();
+
+  return (
+    <div className="space-y-4">
+      
+      {/* 1. Google 로그인 */}
+      <button 
+        onClick={loginWithGoogle}
+        disabled={isLoading}
+        className="w-full flex items-center justify-center gap-3 bg-white border border-brand-dark/20 text-brand-dark px-6 py-3.5 rounded-xl font-bold hover:bg-slate-50 transition-colors shadow-sm disabled:opacity-50"
+      >
+        <svg className="w-5 h-5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+          <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+          <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+          <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+        </svg>
+        {isLoading ? '연결 중...' : 'Google로 계속하기'}
+      </button>
+
+      {/* 2. Apple 로그인 */}
+      <button 
+        onClick={loginWithApple}
+        disabled={isLoading}
+        className="w-full flex items-center justify-center gap-3 bg-[#111111] text-white px-6 py-3.5 rounded-xl font-bold hover:bg-black transition-colors shadow-sm disabled:opacity-50"
+      >
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M16.365 21.438c-1.562 1.085-3.235 1.127-4.706.033-1.524-1.128-3.085-1.1-4.733.053-1.636 1.144-2.887 1.026-4.144-.393C1.516 19.882 0 16.516 0 12.872 0 8.783 2.502 6.075 5.753 5.92c1.46-.07 3.04.945 4.02.945 1.012 0 2.895-1.226 4.67-1.042 1.488.082 2.883.615 3.82 1.635-3.322 1.956-2.775 6.645.545 8.01-1.002 2.56-2.316 4.965-4.443 5.97zM11.95 5.567c-.204-2.618 1.914-5.004 4.544-5.26.335 2.723-2.074 5.213-4.544 5.26z"/>
+        </svg>
+        {isLoading ? '연결 중...' : 'Apple로 계속하기'}
+      </button>
+
+      {/* 3. Facebook 로그인 */}
+      <button 
+        onClick={loginWithFacebook}
+        disabled={isLoading}
+        className="w-full flex items-center justify-center gap-3 bg-[#1877F2] text-white px-6 py-3.5 rounded-xl font-bold hover:bg-[#1864D9] transition-colors shadow-sm disabled:opacity-50"
+      >
+        <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+        </svg>
+        {isLoading ? '연결 중...' : 'Facebook으로 계속하기'}
+      </button>
+
+      {/* 백엔드 연동 에러 메시지 표시 */}
+      {error && (
+        <p className="text-red-500 text-sm text-center mt-4 bg-red-50 p-3 rounded-xl border border-red-100">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+};
--- a/src/features/auth/hooks/useSocialLogin.ts
+++ b/src/features/auth/hooks/useSocialLogin.ts
@@ -0,0 +1,68 @@
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { authApi } from '../api/authApi';
+
+export const useSocialLogin = () => {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * [비즈니스 로직 1] 플랫폼별 소셜 SDK에서 받은 토큰을 백엔드로 보내어 VibeRoom JWT를 얻어오는 공통 함수
+   */
+  const handleSocialLogin = async (provider: 'google' | 'apple' | 'facebook', socialToken: string) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // 1. 백엔드로 소셜 토큰 전송 (토큰 교환)
+      const response = await authApi.loginWithSocial({
+        provider,
+        token: socialToken,
+      });
+
+      // 2. 응답받은 VibeRoom 전용 토큰을 로컬에 저장 (TODO: 실제로는 Zustand/Cookie에 저장)
+      console.log(`[${provider}] 백엔드 연동 성공! JWT:`, response.accessToken);
+      // ex) useAuthStore.getState().setToken(response.accessToken);
+
+      // 3. 성공 후 메인 대시보드 화면으로 이동
+      router.push('/dashboard');
+    } catch (err) {
+      console.error(`[${provider}] 로그인 실패:`, err);
+      setError('로그인에 실패했습니다. 다시 시도해 주세요.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * [비즈니스 로직 2] UI 컴포넌트(View)에서 호출할 개별 플랫폼 로그인 함수들
+   * 향후 여기에 구글/애플/페이스북의 실제 프론트엔드 SDK 코드가 들어갑니다.
+   */
+  const loginWithGoogle = async () => {
+    // TODO: Google Identity Services(GSI) SDK 호출 코드 작성
+    const mockGoogleToken = 'mock_google_token_123'; 
+    await handleSocialLogin('google', mockGoogleToken);
+  };
+
+  const loginWithApple = async () => {
+    // TODO: Sign in with Apple JS 호출 코드 작성
+    const mockAppleToken = 'mock_apple_token_456';
+    await handleSocialLogin('apple', mockAppleToken);
+  };
+
+  const loginWithFacebook = async () => {
+    // TODO: Facebook Login SDK 호출 코드 작성
+    const mockFacebookToken = 'mock_facebook_token_789';
+    await handleSocialLogin('facebook', mockFacebookToken);
+  };
+
+  // UI 컴포넌트에 노출할 상태와 함수들만 캡슐화하여 반환
+  return {
+    loginWithGoogle,
+    loginWithApple,
+    loginWithFacebook,
+    isLoading,
+    error,
+  };
+};
--- a/src/features/auth/types/index.ts
+++ b/src/features/auth/types/index.ts
@@ -0,0 +1,15 @@
+export interface SocialLoginRequest {
+  provider: 'google' | 'apple' | 'facebook';
+  token: string; // 소셜 프로바이더로부터 발급받은 id_token 또는 access_token
+}
+
+export interface AuthResponse {
+  accessToken: string;  // VibeRoom 전용 JWT (API 요청 시 사용)
+  refreshToken: string; // 토큰 갱신용
+  user: {
+    id: string;
+    email: string;
+    name: string;
+    profileImage?: string;
+  };
+}