feat: 프로젝트 세팅

src/app/(marketing)/page.tsx

@@ -0,0 +1,219 @@
+import Link from "next/link";
+
+export default function MarketingPage() {
+  return (
+    <div className="min-h-screen bg-slate-50 text-[#304d6d] font-sans selection:bg-[#a7cced]/50">
+      
+      {/* Navigation Bar */}
+      <header className="sticky top-0 z-50 w-full border-b border-[#304d6d]/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">
+            <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>
+        </div>
+      </header>
+
+      <main>
+        {/* Hero Section */}
+        <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]">
+                함께하는 조용한 몰입,<br />
+                <span className="text-[#63adf2]">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>
+              <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"
+                >
+                  나만의 공간 만들기
+                </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"
+                >
+                  더 알아보기
+                </a>
+              </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="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>
+                  <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="text-4xl mb-2">🧑‍💻</div>
+                      <div className="h-2 w-16 bg-[#63adf2]/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="text-4xl mb-2">☕</div>
+                      <div className="h-2 w-16 bg-[#a7cced] 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">
+                    45:00 남음
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Features Section */}
+        <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>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              {[
+                { icon: "⏳", title: "구조화된 세션 타이머", desc: "부담 없이 시작할 수 있는 짧은 몰입과 확실한 휴식. 당신만의 작업 리듬을 부드럽게 설정하고 관리하세요." },
+                { 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">
+                    {feature.icon}
+                  </div>
+                  <h3 className="text-xl font-bold text-[#304d6d] mb-3">{feature.title}</h3>
+                  <p className="text-[#304d6d]/70 leading-relaxed">
+                    {feature.desc}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Pricing Section */}
+        <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>
+            </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="mb-8">
+                  <span className="text-4xl font-bold text-[#304d6d]">무료</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>
+                <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">
+                  무료로 시작하기
+                </Link>
+              </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>
+                <h3 className="text-xl font-bold text-white mb-2">Pro</h3>
+                <p className="text-white/60 text-sm mb-6 h-10">방해 없는 완벽한 몰입 환경</p>
+                <div className="mb-8 flex items-baseline gap-1">
+                  <span className="text-4xl font-bold text-white">₩6,900</span>
+                  <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>
+                </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">
+                  Pro 시작하기
+                </Link>
+              </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="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>
+                </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>
+                <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">
+                  도입 문의하기
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-[#304d6d] 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">
+              <Link href="/" className="text-xl font-bold text-white tracking-tight flex items-center gap-2 mb-4">
+                <span className="text-2xl">🪴</span> VibeRoom
+              </Link>
+              <p className="text-white/60 text-sm leading-relaxed max-w-xs">
+                프리랜서와 온전한 집중이 필요한 분들을 위한 따뜻하고 구조화된 온라인 코워킹 스페이스입니다.
+              </p>
+            </div>
+            <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>
+              </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>
+              </ul>
+            </div>
+          </div>
+          <div className="border-t border-white/10 pt-8 text-center text-sm text-white/40">
+            &copy; 2026 VibeRoom. All rights reserved.
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

src/app/globals.css

@@ -1,26 +1,14 @@
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+@theme {
+  /* VibeRoom 4-Color System */
+  --color-brand-bg: #eaf6ff;
+  --color-brand-primary: #009ffd;
+  --color-brand-secondary: #2a2a72;
+  --color-brand-dark: #232528;
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background-color: var(--color-brand-bg);
+  color: var(--color-brand-secondary);
 }

src/app/layout.tsx

@@ -1,20 +1,9 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import type { Metadata } from 'next';
+import './globals.css';
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'VibeRoom - 당신만의 편안한 몰입 공간',
+  description: '프리랜서와 온전한 집중이 필요한 분들을 위한 따뜻하고 구조화된 온라인 코워킹 스페이스. 작업 타이머, 세션 관리, 그리고 느슨한 연대를 통해 당신의 리듬을 찾아보세요.',
 };
 
 export default function RootLayout({
@@ -23,12 +12,10 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+    <html lang="ko">
+      <body className="antialiased bg-stone-50 text-stone-800">
         {children}
       </body>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,65 +0,0 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
-}

src/shared/lib/apiClient.ts

@@ -0,0 +1,37 @@
+/**
+ * VibeRoom 공통 API 클라이언트
+ * 환경 변수(NEXT_PUBLIC_API_BASE_URL)를 기반으로 자동으로 Base URL이 설정됩니다.
+ * 
+ * - npm run dev 실행 시: https://api-dev.viberoom.io (from .env.development)
+ * - 빌드 후 운영 환경: https://api.viberoom.io (from .env.production)
+ */
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:8080';
+
+export const apiClient = async <T>(
+  endpoint: string,
+  options: RequestInit = {}
+): Promise<T> => {
+  // 엔드포인트 앞의 슬래시(/) 중복 방지
+  const url = `${API_BASE_URL}${endpoint.startsWith('/') ? endpoint : `/${endpoint}`}`;
+  
+  const defaultHeaders = {
+    'Content-Type': 'application/json',
+  };
+
+  const response = await fetch(url, {
+    ...options,
+    headers: {
+      ...defaultHeaders,
+      ...options.headers,
+    },
+  });
+
+  if (!response.ok) {
+    // 향후 서비스 무드에 맞춰 "잠시 연결이 원활하지 않아요. 다시 시도해 주세요." 와 같이
+    // 부드러운 에러 핸들링을 추가할 수 있는 진입점입니다.
+    throw new Error(`API 요청 실패: ${response.status}`);
+  }
+
+  return response.json() as Promise<T>;
+};