feat: 프로젝트 세팅

docs/skills/color_system.md

@@ -0,0 +1,20 @@
+# VibeRoom Color System (3-Color Palette)
+
+본 문서는 VibeRoom 웹앱의 UI/UX 일관성을 유지하기 위해 엄격하게 제한된 3가지 핵심 색상 시스템을 정의합니다. AI(Cursor, Cline 등) 코딩 시 **이 3가지 색상과 기본 무채색(white, slate-50) 범위를 벗어난 임의의 색상 사용을 엄격히 금지**합니다.
+
+## 1. 색상 정의 및 용도
+빌드 캐시 에러를 원천 차단하기 위해 Tailwind의 JIT 헥스(HEX) 주입 방식(예: `bg-[#63adf2]`)을 기본으로 사용합니다.
+
+| 색상 코드 | Tailwind 적용 예시 | 역할 (Role) | 주요 사용처 |
+| :--- | :--- | :--- | :--- |
+| `#304d6d` | `text-[#304d6d]`, `bg-[#304d6d]` | **딥 네이비 (메인 텍스트 & 다크 배경)** | 묵직하고 차분한 색상. 본문 글씨, 제목, 선(border), 푸터(Footer), 강조 요금제 카드 등에 사용되어 화면의 무게중심을 잡아줍니다. |
+| `#63adf2` | `bg-[#63adf2]`, `text-[#63adf2]` | **소프트 코발트 (포인트 액션)** | 청명하고 기분 좋은 파란색. '무료로 시작하기', 추천 뱃지 등 유저가 액션을 취해야 하는 핵심 영역에만 포인트로 강조합니다. |
+| `#a7cced` | `bg-[#a7cced]`, `border-[#a7cced]` | **파스텔 스카이 (소프트 서페이스)** | 아주 연하고 부드러운 파란색. 기능 소개 카드의 은은한 배경이나 체크마크(`✓`), 호버 상태 등 편안한 포인트 요소에 사용됩니다. |
+
+## 2. AI 바이브 코딩 시 주의사항 (스타일 가이드)
+- **기본 배경:** 서비스의 기본 배경은 너무 파래서 답답하지 않도록 깨끗한 `slate-50`(`bg-slate-50`) 또는 `white`(`bg-white`)를 사용합니다.
+- **투명도(Opacity) 활용:** 이 3가지 색상만으로 디자인을 구성하되, 농도를 조절해야 할 때는 Tailwind의 투명도 문법을 활용하세요. 
+  - *예시 (텍스트 흐리게):* `text-[#304d6d]/70`
+  - *예시 (배경 옅게):* `bg-[#a7cced]/10`
+  - *예시 (테두리 연하게):* `border-[#304d6d]/20`
+- **테두리(Border):** 부드러운 느낌을 위해 각진 모서리는 피하고(`rounded-2xl`, `rounded-full` 권장), 선의 굵기보다 색상의 농도 조절로 구분감을 줍니다.

docs/skills/frontend_architecture.md

@@ -0,0 +1,43 @@
+# VibeRoom 프론트엔드 아키텍처 규칙 (Lite FSD)
+
+본 문서는 VibeRoom 웹앱의 프론트엔드 코드 작성을 위한 핵심 지침서입니다. AI(Cursor, Cline, Gemini 등)를 통한 코딩 시 반드시 본 문서의 아키텍처 원칙을 준수해야 코드가 얽히고 망가지는(Code Rot) 현상을 방지할 수 있습니다.
+
+## 1. 아키텍처 핵심 사상
+이 프로젝트는 **'도메인/피처 기반(Feature-Driven) 아키텍처'**를 채택했습니다. 복잡한 FSD(Feature-Sliced Design)를 단순화하여 백엔드 개발자와 AI가 모두 이해하기 쉬운 구조입니다.
+
+**핵심 철학: "한 기능(Domain)에 관련된 코드는 무조건 하나의 `features` 폴더에 모아둔다."**
+
+## 2. 폴더 구조 설명 및 엄수 사항
+
+```text
+src/
+├── app/                  # 진입점 (Routing & Pages)
+├── features/             # 도메인 로직 묶음 (비즈니스 핵심)
+├── shared/               # 공통 요소 (UI, Lib, Type - 도메인 종속성 0%)
+└── store/                # 글로벌 상태 관리 (최소한으로 사용)
+```
+
+### 🚨 [규칙 1] `app/` 폴더는 멍청한 조립 공장이다.
+- `app/**/page.tsx` 파일에는 절대 복잡한 비즈니스 로직(API 호출, 상태 관리)을 길게 작성하지 마세요.
+- 오직 `features/`나 `shared/`에서 완성된 컴포넌트들을 `import` 해와서 배치(Layout)하는 역할만 수행합니다.
+- 데이터 패칭이 필요하다면 SSR/RSC(React Server Components)의 장점을 살려 데이터를 가져온 후 하위 컴포넌트에 넘겨주는 선까지만 작성합니다.
+
+### 🚨 [규칙 2] `features/` 간의 상호 참조를 절대 금지한다.
+- `src/features/timer` 내부의 파일이 `src/features/space` 내부의 파일을 직접 `import` 해서는 안 됩니다.
+- 기능(도메인) 간의 결합도가 높아지면, AI가 한 도메인을 수정할 때 다른 도메인이 망가지는 나비효과가 발생합니다.
+- 만약 두 기능이 서로 통신해야 한다면 1) 부모 페이지 컴포넌트(`app/`)에서 상태를 내려주거나 2) `store/`의 전역 상태를 활용하세요.
+
+### 🚨 [규칙 3] `shared/`는 도메인을 몰라야 한다.
+- `src/shared/ui/Button.tsx`는 자기가 '로그인 버튼'인지, '타이머 시작 버튼'인지 절대 알면 안 됩니다.
+- 오직 범용적인 디자인 컴포넌트, 유틸 함수, 전역 타입만 위치합니다.
+- 이 폴더 안의 코드는 어떤 프로젝트에 복사/붙여넣기 해도 바로 동작할 만큼 순수(Pure)해야 합니다.
+
+### 🚨 [규칙 4] 컴포넌트 작성 시 '기능 중심' 사고방식
+- "버튼 하나 만들자" ➡️ `shared/ui`에 생성.
+- "로그인 폼 만들자" ➡️ `features/auth/components`에 생성.
+- "타이머 시작 함수 만들자" ➡️ `features/timer/api` 또는 `hooks`에 생성.
+- "사용자 데이터를 여러 화면에서 공유하자" ➡️ `store/globalStore.ts` (Zustand) 생성.
+
+---
+**※ AI 에이전트 지시사항 ※**
+코드를 생성하거나 리팩토링할 때 위 4가지 규칙 중 하나라도 위반하는 제안을 해서는 안 됩니다. 새로운 파일을 생성할 때는 반드시 이 폴더 트리 구조 중 어디에 속해야 하는지 명확히 설명하고 승인을 받으세요.

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 {
+@theme {
-  --background: #ffffff;
+  /* VibeRoom 4-Color System */
-  --foreground: #171717;
+  --color-brand-bg: #eaf6ff;
-}
+  --color-brand-primary: #009ffd;
-
+  --color-brand-secondary: #2a2a72;
-@theme inline {
+  --color-brand-dark: #232528;
-  --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;
-  }
 }
 
 body {
-  background: var(--background);
+  background-color: var(--color-brand-bg);
-  color: var(--foreground);
+  color: var(--color-brand-secondary);
-  font-family: Arial, Helvetica, sans-serif;
 }

src/app/layout.tsx

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