feat: 로그인 화면

src/app/(auth)/login/page.tsx

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { SocialLoginGroup } from "@/features/auth/components/SocialLoginGroup";
+
+export default function LoginPage() {
+  return (
+    <div className="min-h-screen bg-slate-50 flex flex-col justify-center items-center p-6 selection:bg-brand-soft/50">
+      
+      {/* 상단 로고 (홈으로 돌아가기) */}
+      <Link href="/" className="mb-12 text-2xl font-bold text-brand-dark tracking-tight flex items-center gap-2 hover:opacity-80 transition-opacity">
+        <span className="text-3xl">🪴</span> VibeRoom
+      </Link>
+
+      {/* 로그인 카드 컨테이너 */}
+      <div className="w-full max-w-md bg-white rounded-3xl shadow-sm border border-brand-dark/10 p-8 md:p-10">
+        
+        <div className="text-center mb-10">
+          <h1 className="text-2xl font-bold text-brand-dark mb-3">다시 오셨군요!</h1>
+          <p className="text-brand-dark/60 text-sm">
+            비밀번호를 외울 필요 없이,<br />
+            사용 중인 계정으로 3초 만에 시작하세요.
+          </p>
+        </div>
+
+        {/* 
+          비즈니스 로직이 분리된 소셜 로그인 UI 그룹
+          - 이 페이지 파일(View)은 실제 API가 어떻게 동작하는지 전혀 모릅니다.
+        */}
+        <SocialLoginGroup />
+
+        <div className="mt-10 text-center text-xs text-brand-dark/40 leading-relaxed">
+          로그인함으로써 VibeRoom의 <br className="md:hidden" />
+          <a href="#" className="underline hover:text-brand-dark/70">이용약관</a> 및 <a href="#" className="underline hover:text-brand-dark/70">개인정보처리방침</a>에 동의하게 됩니다.
+        </div>
+      </div>
+      
+      {/* 장식용 배경 요소 (은은한 빛) */}
+      <div className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-brand-soft/20 rounded-full blur-[100px] -z-10 pointer-events-none"></div>
+    </div>
+  );
+}

src/app/(marketing)/page.tsx

@@ -1,26 +1,22 @@
 import Link from "next/link";
+import { Button } from "@/shared/ui/Button";
 
 export default function MarketingPage() {
   return (
-    <div className="min-h-screen bg-slate-50 text-[#304d6d] font-sans selection:bg-[#a7cced]/50">
+    <div className="min-h-screen bg-slate-50 text-brand-dark font-sans selection:bg-brand-soft/50">
       
       {/* Navigation Bar */}
-      <header className="sticky top-0 z-50 w-full border-b border-[#304d6d]/10 bg-slate-50/80 backdrop-blur-md">
+      <header className="sticky top-0 z-50 w-full border-b border-brand-dark/10 bg-slate-50/80 backdrop-blur-md">
         <div className="container mx-auto px-6 h-16 flex items-center justify-between">
-          <Link href="/" className="text-xl font-bold text-[#304d6d] tracking-tight flex items-center gap-2">
+          <Link href="/" className="text-xl font-bold text-brand-dark tracking-tight flex items-center gap-2">
             <span className="text-2xl">🪴</span> VibeRoom
           </Link>
           
-          <nav className="hidden md:flex items-center gap-8 text-sm font-medium text-[#304d6d]/80">
-            <a href="#features" className="hover:text-[#63adf2] transition-colors">기능 소개</a>
-            <a href="#pricing" className="hover:text-[#63adf2] transition-colors">요금제</a>
-            <Link href="/login" className="hover:text-[#63adf2] transition-colors">로그인</Link>
-            <Link 
-              href="/signup" 
-              className="px-5 py-2.5 bg-[#63adf2] text-white rounded-lg hover:bg-[#63adf2]/90 transition-colors shadow-sm"
-            >
-              무료로 시작하기
-            </Link>
+          <nav className="hidden md:flex items-center gap-6 text-sm font-medium text-brand-dark/80">
+            <Button variant="ghost" size="sm" href="#features">기능 소개</Button>
+            <Button variant="ghost" size="sm" href="#pricing">요금제</Button>
+            <Button variant="ghost" size="sm" href="/login">로그인</Button>
+            <Button variant="primary" size="md" href="/login">무료로 시작하기</Button>
           </nav>
         </div>
       </header>
@@ -30,50 +26,44 @@ export default function MarketingPage() {
         <section className="pt-24 pb-32 px-6">
           <div className="container mx-auto max-w-5xl flex flex-col md:flex-row items-center gap-16">
             <div className="flex-1 text-center md:text-left">
-              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 tracking-tight leading-tight text-[#304d6d]">
+              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 tracking-tight leading-tight text-brand-dark">
                 함께하는 조용한 몰입,<br />
-                <span className="text-[#63adf2]">VibeRoom</span>
+                <span className="text-brand-primary">VibeRoom</span>
               </h1>
-              <p className="text-lg md:text-xl text-[#304d6d]/70 mb-10 max-w-xl mx-auto md:mx-0 leading-relaxed">
+              <p className="text-lg md:text-xl text-brand-dark/70 mb-10 max-w-xl mx-auto md:mx-0 leading-relaxed">
                 집중하기 어려운 순간, 당신을 다그치지 않는 편안한 공간으로 들어오세요.
                 구조화된 코워킹 세션과 느슨한 연대가 당신의 페이스를 되찾아 줍니다.
               </p>
               <div className="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
-                <Link 
-                  href="/app" 
-                  className="px-8 py-4 bg-[#63adf2] text-white rounded-xl hover:bg-[#63adf2]/90 transition-colors shadow-sm text-center font-medium text-lg"
-                >
+                <Button variant="primary" size="lg" href="/login">
                   나만의 공간 만들기
-                </Link>
-                <a 
-                  href="#features" 
-                  className="px-8 py-4 bg-white/50 text-[#304d6d] border border-[#304d6d]/20 rounded-xl hover:bg-white transition-colors text-center font-medium text-lg"
-                >
+                </Button>
+                <Button variant="outline" size="lg" href="#features">
                   더 알아보기
-                </a>
+                </Button>
               </div>
             </div>
             
             {/* Hero Illustration */}
             <div className="flex-1 w-full max-w-md md:max-w-full hidden sm:block">
-              <div className="aspect-square md:aspect-video bg-[#a7cced]/20 rounded-3xl border border-[#a7cced]/30 shadow-sm flex items-center justify-center p-8 relative overflow-hidden">
-                <div className="relative z-10 w-full h-full bg-white rounded-2xl shadow-sm border border-[#304d6d]/5 flex flex-col p-6">
+              <div className="aspect-square md:aspect-video bg-brand-soft/20 rounded-3xl border border-brand-soft/30 shadow-sm flex items-center justify-center p-8 relative overflow-hidden">
+                <div className="relative z-10 w-full h-full bg-white rounded-2xl shadow-sm border border-brand-dark/5 flex flex-col p-6">
                   <div className="flex gap-3 mb-6">
-                    <div className="w-3 h-3 rounded-full bg-[#304d6d]/20"></div>
-                    <div className="w-3 h-3 rounded-full bg-[#304d6d]/20"></div>
-                    <div className="w-3 h-3 rounded-full bg-[#304d6d]/20"></div>
+                    <div className="w-3 h-3 rounded-full bg-brand-dark/20"></div>
+                    <div className="w-3 h-3 rounded-full bg-brand-dark/20"></div>
+                    <div className="w-3 h-3 rounded-full bg-brand-dark/20"></div>
                   </div>
                   <div className="flex-1 flex gap-6">
-                    <div className="flex-1 bg-slate-50 rounded-xl border border-[#304d6d]/5 p-4 flex flex-col items-center justify-center">
+                    <div className="flex-1 bg-slate-50 rounded-xl border border-brand-dark/5 p-4 flex flex-col items-center justify-center">
                       <div className="text-4xl mb-2">🧑‍💻</div>
-                      <div className="h-2 w-16 bg-[#63adf2]/50 rounded-full mt-2"></div>
+                      <div className="h-2 w-16 bg-brand-primary/50 rounded-full mt-2"></div>
                     </div>
-                    <div className="flex-1 bg-slate-50 rounded-xl border border-[#304d6d]/5 p-4 flex flex-col items-center justify-center">
+                    <div className="flex-1 bg-slate-50 rounded-xl border border-brand-dark/5 p-4 flex flex-col items-center justify-center">
                       <div className="text-4xl mb-2">☕</div>
-                      <div className="h-2 w-16 bg-[#a7cced] rounded-full mt-2"></div>
+                      <div className="h-2 w-16 bg-brand-soft rounded-full mt-2"></div>
                     </div>
                   </div>
-                  <div className="mt-6 h-12 bg-[#a7cced]/20 rounded-xl border border-[#63adf2]/20 flex items-center justify-center text-[#63adf2] font-medium text-sm">
+                  <div className="mt-6 h-12 bg-brand-soft/20 rounded-xl border border-brand-primary/20 flex items-center justify-center text-brand-primary font-medium text-sm">
                     45:00 남음
                   </div>
                 </div>
@@ -86,8 +76,8 @@ export default function MarketingPage() {
         <section id="features" className="py-24 bg-white px-6">
           <div className="container mx-auto max-w-6xl">
             <div className="text-center max-w-2xl mx-auto mb-16">
-              <h2 className="text-3xl md:text-4xl font-bold mb-4 text-[#304d6d] tracking-tight">당신을 위한 다정한 몰입 장치</h2>
-              <p className="text-[#304d6d]/70 text-lg">단순한 타이머가 아닙니다. 무리하지 않고 오래 지속할 수 있는 환경을 제공합니다.</p>
+              <h2 className="text-3xl md:text-4xl font-bold mb-4 text-brand-dark tracking-tight">당신을 위한 다정한 몰입 장치</h2>
+              <p className="text-brand-dark/70 text-lg">단순한 타이머가 아닙니다. 무리하지 않고 오래 지속할 수 있는 환경을 제공합니다.</p>
             </div>
             
             <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
@@ -96,12 +86,12 @@ export default function MarketingPage() {
                 { icon: "🌱", title: "다정한 연대와 코워킹", desc: "화면 너머 누군가와 함께하는 바디 더블링 효과. 감시가 아닌, 조용하지만 강력한 동기를 서로 나누어보세요." },
                 { icon: "🛋️", title: "나만의 심미적 공간", desc: "비 오는 다락방, 햇살 드는 카페. 백색소음과 함께 내가 가장 편안함을 느끼는 가상 공간을 꾸미고 머무르세요." }
               ].map((feature, idx) => (
-                <div key={idx} className="p-8 bg-[#a7cced]/10 rounded-2xl border border-[#a7cced]/30 transition-transform hover:-translate-y-1 duration-300 hover:shadow-md">
-                  <div className="w-14 h-14 bg-white text-[#63adf2] rounded-2xl flex items-center justify-center mb-6 text-2xl shadow-sm border border-[#304d6d]/5">
+                <div key={idx} className="p-8 bg-brand-soft/10 rounded-2xl border border-brand-soft/30 transition-transform hover:-translate-y-1 duration-300 hover:shadow-md">
+                  <div className="w-14 h-14 bg-white text-brand-primary rounded-2xl flex items-center justify-center mb-6 text-2xl shadow-sm border border-brand-dark/5">
                     {feature.icon}
                   </div>
-                  <h3 className="text-xl font-bold text-[#304d6d] mb-3">{feature.title}</h3>
-                  <p className="text-[#304d6d]/70 leading-relaxed">
+                  <h3 className="text-xl font-bold text-brand-dark mb-3">{feature.title}</h3>
+                  <p className="text-brand-dark/70 leading-relaxed">
                     {feature.desc}
                   </p>
                 </div>
@@ -114,31 +104,31 @@ export default function MarketingPage() {
         <section id="pricing" className="py-24 px-6 bg-slate-50">
           <div className="container mx-auto max-w-5xl">
             <div className="text-center max-w-2xl mx-auto mb-16">
-              <h2 className="text-3xl md:text-4xl font-bold mb-4 text-[#304d6d] tracking-tight">나에게 맞는 공간 선택하기</h2>
-              <p className="text-[#304d6d]/70 text-lg">개인의 가벼운 집중부터 프리랜서의 완벽한 워크스페이스까지.</p>
+              <h2 className="text-3xl md:text-4xl font-bold mb-4 text-brand-dark tracking-tight">나에게 맞는 공간 선택하기</h2>
+              <p className="text-brand-dark/70 text-lg">개인의 가벼운 집중부터 프리랜서의 완벽한 워크스페이스까지.</p>
             </div>
 
             <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
               {/* Starter Plan */}
-              <div className="p-8 bg-white rounded-3xl border border-[#304d6d]/10 shadow-sm">
-                <h3 className="text-xl font-bold text-[#304d6d] mb-2">Starter</h3>
-                <p className="text-[#304d6d]/60 text-sm mb-6 h-10">가벼운 집중이 필요한 분</p>
+              <div className="p-8 bg-white rounded-3xl border border-brand-dark/10 shadow-sm">
+                <h3 className="text-xl font-bold text-brand-dark mb-2">Starter</h3>
+                <p className="text-brand-dark/60 text-sm mb-6 h-10">가벼운 집중이 필요한 분</p>
                 <div className="mb-8">
-                  <span className="text-4xl font-bold text-[#304d6d]">무료</span>
+                  <span className="text-4xl font-bold text-brand-dark">무료</span>
                 </div>
-                <ul className="space-y-4 mb-8 text-[#304d6d]/80 text-sm">
-                  <li className="flex items-center gap-3"><span className="text-[#63adf2]">✓</span> 기본 가상 공간 테마</li>
-                  <li className="flex items-center gap-3"><span className="text-[#63adf2]">✓</span> 1:1 파트너 매칭 (주 3회)</li>
-                  <li className="flex items-center gap-3"><span className="text-[#63adf2]">✓</span> 오픈 코워킹 룸 입장</li>
+                <ul className="space-y-4 mb-8 text-brand-dark/80 text-sm">
+                  <li className="flex items-center gap-3"><span className="text-brand-primary">✓</span> 기본 가상 공간 테마</li>
+                  <li className="flex items-center gap-3"><span className="text-brand-primary">✓</span> 1:1 파트너 매칭 (주 3회)</li>
+                  <li className="flex items-center gap-3"><span className="text-brand-primary">✓</span> 오픈 코워킹 룸 입장</li>
                 </ul>
-                <Link href="/signup" className="block w-full py-3 px-4 bg-slate-50 text-[#304d6d] text-center rounded-xl font-bold hover:bg-slate-100 transition-colors">
+                <Button variant="secondary" size="full" href="/login">
                   무료로 시작하기
-                </Link>
+                </Button>
               </div>
 
               {/* Pro Plan */}
-              <div className="p-8 bg-[#304d6d] rounded-3xl border border-[#304d6d] shadow-xl relative transform md:-translate-y-4">
-                <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-[#63adf2] text-white px-4 py-1 rounded-full text-xs font-bold tracking-wide">
+              <div className="p-8 bg-brand-dark rounded-3xl border border-brand-dark shadow-xl relative transform md:-translate-y-4">
+                <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-primary text-white px-4 py-1 rounded-full text-xs font-bold tracking-wide">
                   추천
                 </div>
                 <h3 className="text-xl font-bold text-white mb-2">Pro</h3>
@@ -148,32 +138,32 @@ export default function MarketingPage() {
                   <span className="text-white/60">/월</span>
                 </div>
                 <ul className="space-y-4 mb-8 text-white/90 text-sm">
-                  <li className="flex items-center gap-3"><span className="text-[#a7cced]">✓</span> 프리미엄 테마 무제한</li>
-                  <li className="flex items-center gap-3"><span className="text-[#a7cced]">✓</span> 1:1 매칭 무제한</li>
-                  <li className="flex items-center gap-3"><span className="text-[#a7cced]">✓</span> 고급 집중 통계 및 리포트</li>
-                  <li className="flex items-center gap-3"><span className="text-[#a7cced]">✓</span> 공간 커스텀 아이템 제공</li>
+                  <li className="flex items-center gap-3"><span className="text-brand-soft">✓</span> 프리미엄 테마 무제한</li>
+                  <li className="flex items-center gap-3"><span className="text-brand-soft">✓</span> 1:1 매칭 무제한</li>
+                  <li className="flex items-center gap-3"><span className="text-brand-soft">✓</span> 고급 집중 통계 및 리포트</li>
+                  <li className="flex items-center gap-3"><span className="text-brand-soft">✓</span> 공간 커스텀 아이템 제공</li>
                 </ul>
-                <Link href="/signup?plan=pro" className="block w-full py-3 px-4 bg-[#63adf2] text-white text-center rounded-xl font-bold hover:bg-[#63adf2]/90 transition-colors">
+                <Button variant="primary" size="full" href="/login?plan=pro">
                   Pro 시작하기
-                </Link>
+                </Button>
               </div>
 
               {/* Teams Plan */}
-              <div className="p-8 bg-white rounded-3xl border border-[#304d6d]/10 shadow-sm">
-                <h3 className="text-xl font-bold text-[#304d6d] mb-2">Teams</h3>
-                <p className="text-[#304d6d]/60 text-sm mb-6 h-10">리모트 워크 기업 및 팀</p>
+              <div className="p-8 bg-white rounded-3xl border border-brand-dark/10 shadow-sm">
+                <h3 className="text-xl font-bold text-brand-dark mb-2">Teams</h3>
+                <p className="text-brand-dark/60 text-sm mb-6 h-10">리모트 워크 기업 및 팀</p>
                 <div className="mb-8 flex items-baseline gap-1">
-                  <span className="text-4xl font-bold text-[#304d6d]">₩12,000</span>
-                  <span className="text-[#304d6d]/60 text-sm">/인·월</span>
+                  <span className="text-4xl font-bold text-brand-dark">₩12,000</span>
+                  <span className="text-brand-dark/60 text-sm">/인·월</span>
                 </div>
-                <ul className="space-y-4 mb-8 text-[#304d6d]/80 text-sm">
-                  <li className="flex items-center gap-3"><span className="text-[#63adf2]">✓</span> Pro 플랜의 모든 기능</li>
-                  <li className="flex items-center gap-3"><span className="text-[#63adf2]">✓</span> 프라이빗 팀 스페이스</li>
-                  <li className="flex items-center gap-3"><span className="text-[#63adf2]">✓</span> 팀 전체 생산성 대시보드</li>
+                <ul className="space-y-4 mb-8 text-brand-dark/80 text-sm">
+                  <li className="flex items-center gap-3"><span className="text-brand-primary">✓</span> Pro 플랜의 모든 기능</li>
+                  <li className="flex items-center gap-3"><span className="text-brand-primary">✓</span> 프라이빗 팀 스페이스</li>
+                  <li className="flex items-center gap-3"><span className="text-brand-primary">✓</span> 팀 전체 생산성 대시보드</li>
                 </ul>
-                <a href="#contact" className="block w-full py-3 px-4 bg-slate-50 text-[#304d6d] text-center rounded-xl font-bold hover:bg-slate-100 transition-colors">
+                <Button variant="secondary" size="full" href="#contact">
                   도입 문의하기
-                </a>
+                </Button>
               </div>
             </div>
           </div>
@@ -181,7 +171,7 @@ export default function MarketingPage() {
       </main>
 
       {/* Footer */}
-      <footer className="bg-[#304d6d] pt-16 pb-8 px-6 text-white/80">
+      <footer className="bg-brand-dark pt-16 pb-8 px-6 text-white/80">
         <div className="container mx-auto max-w-6xl">
           <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
             <div className="md:col-span-2">
@@ -195,17 +185,17 @@ export default function MarketingPage() {
             <div>
               <h4 className="font-bold text-white mb-4">제품</h4>
               <ul className="space-y-3 text-sm text-white/60">
-                <li><a href="#features" className="hover:text-[#a7cced] transition-colors">기능 소개</a></li>
-                <li><a href="#pricing" className="hover:text-[#a7cced] transition-colors">요금제</a></li>
-                <li><Link href="/app" className="hover:text-[#a7cced] transition-colors">웹앱 로그인</Link></li>
+                <li><a href="#features" className="hover:text-brand-soft transition-colors">기능 소개</a></li>
+                <li><a href="#pricing" className="hover:text-brand-soft transition-colors">요금제</a></li>
+                <li><Link href="/login" className="hover:text-brand-soft transition-colors">웹앱 로그인</Link></li>
               </ul>
             </div>
             <div>
               <h4 className="font-bold text-white mb-4">회사</h4>
               <ul className="space-y-3 text-sm text-white/60">
-                <li><a href="#" className="hover:text-[#a7cced] transition-colors">소개</a></li>
-                <li><a href="#" className="hover:text-[#a7cced] transition-colors">개인정보처리방침</a></li>
-                <li><a href="#" className="hover:text-[#a7cced] transition-colors">이용약관</a></li>
+                <li><a href="#" className="hover:text-brand-soft transition-colors">소개</a></li>
+                <li><a href="#" className="hover:text-brand-soft transition-colors">개인정보처리방침</a></li>
+                <li><a href="#" className="hover:text-brand-soft transition-colors">이용약관</a></li>
               </ul>
             </div>
           </div>

src/app/globals.css

@@ -1,14 +1,17 @@
 @import "tailwindcss";
 
 @theme {
-  /* VibeRoom 4-Color System */
-  --color-brand-bg: #eaf6ff;
-  --color-brand-primary: #009ffd;
-  --color-brand-secondary: #2a2a72;
-  --color-brand-dark: #232528;
+  /* Noto Sans 다국어 폰트 적용 (next/font/google 변수) */
+  --font-sans: var(--font-noto-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  /* VibeRoom 3-Color System (Tailwind v4 테마 변수) */
+  --color-brand-primary: #63adf2; /* 소프트 코발트 (핵심 액션) */
+  --color-brand-dark: #304d6d;    /* 딥 네이비 (메인 텍스트/어두운배경) */
+  --color-brand-soft: #a7cced;    /* 파스텔 스카이 (은은한 배경/호버) */
 }
 
+/* VibeRoom 기본 색상 설정 */
 body {
-  background-color: var(--color-brand-bg);
-  color: var(--color-brand-secondary);
+  background-color: theme('colors.slate.50'); /* #f8fafc */
+  color: var(--color-brand-dark);
 }

src/app/layout.tsx

@@ -1,6 +1,15 @@
 import type { Metadata } from 'next';
+import { Noto_Sans_KR } from 'next/font/google';
 import './globals.css';
 
+// 1. Noto Sans KR 폰트 설정 (라틴어, 프랑스어, 한국어 등 다국어 지원 베이스)
+const notoSans = Noto_Sans_KR({
+  subsets: ['latin'], // 영어, 프랑스어 등 기본 라틴 알파벳 포함
+  weight: ['300', '400', '500', '700'], // 얇은 굵기부터 두꺼운 굵기까지 로드
+  variable: '--font-noto-sans', // Tailwind CSS에서 사용할 CSS 변수 이름
+  display: 'swap', // 폰트 로딩 시 텍스트 깜빡임 방지
+});
+
 export const metadata: Metadata = {
   title: 'VibeRoom - 당신만의 편안한 몰입 공간',
   description: '프리랜서와 온전한 집중이 필요한 분들을 위한 따뜻하고 구조화된 온라인 코워킹 스페이스. 작업 타이머, 세션 관리, 그리고 느슨한 연대를 통해 당신의 리듬을 찾아보세요.',
@@ -12,10 +21,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="ko">
-      <body className="antialiased bg-stone-50 text-stone-800">
+    <html lang="ko" className={notoSans.variable}>
+      <body className="antialiased font-sans">
         {children}
       </body>
     </html>
   );
-}
+}

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 추가
+};

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>
+  );
+};

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,
+  };
+};

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;
+  };
+}

src/shared/lib/colors.ts

@@ -0,0 +1,20 @@
+/**
+ * VibeRoom 공통 색상 팔레트 (JS/TS 환경용)
+ * 
+ * Tailwind CSS(globals.css)에 정의된 색상과 동일한 값을 가집니다.
+ * 이 파일은 Tailwind 클래스를 사용할 수 없는 곳(Canvas, Three.js 3D 객체, 차트 라이브러리 등)이나
+ * JS 로직 내에서 색상 코드가 직접 필요할 때 사용합니다.
+ */
+export const colors = {
+  brand: {
+    primary: '#63adf2', // 소프트 코발트 (핵심 액션, 포인트)
+    dark: '#304d6d',    // 딥 네이비 (메인 텍스트, 무게감 있는 배경)
+    soft: '#a7cced',    // 파스텔 스카이 (은은한 배경, 호버/체크마크)
+  },
+  base: {
+    background: '#f8fafc', // slate-50 (서비스 기본 배경)
+    white: '#ffffff',
+  }
+} as const;
+
+export type BrandColor = keyof typeof colors.brand;

src/shared/ui/Button.tsx

@@ -0,0 +1,65 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import Link, { LinkProps } from 'next/link';
+
+// 1. 버튼 Variant(스타일) 및 Size 타입 정의
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'full';
+
+// 2. 공통 Props 인터페이스 정의 (HTML 버튼 속성 + Link 속성 혼합)
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  href?: string; // href가 주어지면 Next.js Link 컴포넌트로 렌더링
+  className?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * VibeRoom 공통 버튼 컴포넌트
+ * (3-Color System 엄격 적용: #304d6d, #63adf2, #a7cced)
+ */
+export const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+  (
+    { variant = 'primary', size = 'md', href, className = '', children, ...props },
+    ref
+  ) => {
+    // 공통 베이스 스타일
+    const baseStyle = "inline-flex items-center justify-center font-bold rounded-xl transition-all duration-200";
+
+    // Variant별 테마 (VibeRoom 3-Color System)
+    const variants: Record<ButtonVariant, string> = {
+      primary: "bg-brand-primary text-white hover:bg-brand-primary/90 shadow-sm",
+      secondary: "bg-slate-50 text-brand-dark hover:bg-slate-100",
+      outline: "bg-white/50 text-brand-dark border border-brand-dark/20 hover:bg-white shadow-sm",
+      ghost: "bg-transparent text-brand-dark/80 hover:text-brand-primary",
+    };
+
+    // 크기별 테마
+    const sizes: Record<ButtonSize, string> = {
+      sm: "px-4 py-2 text-sm",
+      md: "px-5 py-2.5 text-base",
+      lg: "px-8 py-4 text-lg",
+      full: "w-full py-3 px-4 text-base",
+    };
+
+    const combinedClassName = `${baseStyle} ${variants[variant]} ${sizes[size]} ${className}`;
+
+    // href 속성이 있으면 Next.js Link로 렌더링
+    if (href) {
+      return (
+        <Link href={href} className={combinedClassName} ref={ref as React.Ref<HTMLAnchorElement>}>
+          {children}
+        </Link>
+      );
+    }
+
+    // 기본은 HTML Button
+    return (
+      <button className={combinedClassName} ref={ref as React.Ref<HTMLButtonElement>} {...props}>
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';