diff --git a/.gitignore b/.gitignore
index 5ef6a52..a46e550 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,6 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
+
+*storybook.log
+storybook-static
diff --git a/docs/skills/color_system.md b/docs/skills/color_system.md
index 97fa8ab..e45ac9d 100644
--- a/docs/skills/color_system.md
+++ b/docs/skills/color_system.md
@@ -1,20 +1,21 @@
# VibeRoom Color System (3-Color Palette)
-본 문서는 VibeRoom 웹앱의 UI/UX 일관성을 유지하기 위해 엄격하게 제한된 3가지 핵심 색상 시스템을 정의합니다. AI(Cursor, Cline 등) 코딩 시 **이 3가지 색상과 기본 무채색(white, slate-50) 범위를 벗어난 임의의 색상 사용을 엄격히 금지**합니다.
+본 문서는 VibeRoom 웹앱의 UI/UX 일관성을 유지하기 위해 엄격하게 제한된 3가지 핵심 색상 시스템을 정의합니다.
+AI(Cursor, Cline 등) 코딩 시 **이 3가지 색상 변수(`brand-*`)와 기본 무채색(white, slate-50) 범위를 벗어난 임의의 헥스(HEX) 코드나 Tailwind 색상 사용을 엄격히 금지**합니다.
-## 1. 색상 정의 및 용도
-빌드 캐시 에러를 원천 차단하기 위해 Tailwind의 JIT 헥스(HEX) 주입 방식(예: `bg-[#63adf2]`)을 기본으로 사용합니다.
+## 1. 색상 정의 및 용도 (JS/TS 환경용)
+JS 환경(Canvas, 인라인 스타일 등)에서 헥스 코드가 필요하다면 `src/shared/lib/colors.ts`에 정의된 `colors` 객체를 `import` 하여 사용합니다.
-| 색상 코드 | Tailwind 적용 예시 | 역할 (Role) | 주요 사용처 |
+| 색상 변수명 | 헥스 코드 | 역할 (Role) | 주요 사용처 |
| :--- | :--- | :--- | :--- |
-| `#304d6d` | `text-[#304d6d]`, `bg-[#304d6d]` | **딥 네이비 (메인 텍스트 & 다크 배경)** | 묵직하고 차분한 색상. 본문 글씨, 제목, 선(border), 푸터(Footer), 강조 요금제 카드 등에 사용되어 화면의 무게중심을 잡아줍니다. |
-| `#63adf2` | `bg-[#63adf2]`, `text-[#63adf2]` | **소프트 코발트 (포인트 액션)** | 청명하고 기분 좋은 파란색. '무료로 시작하기', 추천 뱃지 등 유저가 액션을 취해야 하는 핵심 영역에만 포인트로 강조합니다. |
-| `#a7cced` | `bg-[#a7cced]`, `border-[#a7cced]` | **파스텔 스카이 (소프트 서페이스)** | 아주 연하고 부드러운 파란색. 기능 소개 카드의 은은한 배경이나 체크마크(`✓`), 호버 상태 등 편안한 포인트 요소에 사용됩니다. |
+| `brand-dark` | `#304d6d` | **딥 네이비 (메인 텍스트 & 다크 배경)** | 묵직하고 차분한 색상. 본문 글씨, 제목, 선(border), 푸터(Footer), 강조 요금제 카드 등에 사용되어 화면의 무게중심을 잡아줍니다. |
+| `brand-primary` | `#63adf2` | **소프트 코발트 (포인트 액션)** | 청명하고 기분 좋은 파란색. '무료로 시작하기', 추천 뱃지 등 유저가 액션을 취해야 하는 핵심 영역에만 포인트로 강조합니다. |
+| `brand-soft` | `#a7cced` | **파스텔 스카이 (소프트 서페이스)** | 아주 연하고 부드러운 파란색. 기능 소개 카드의 은은한 배경이나 체크마크(`✓`), 호버 상태 등 편안한 포인트 요소에 사용됩니다. |
-## 2. AI 바이브 코딩 시 주의사항 (스타일 가이드)
+## 2. AI 바이브 코딩 시 주의사항 (Tailwind 클래스 적용)
+- 모든 스타일링은 `globals.css`의 `@theme`에 주입된 변수를 사용하여 `bg-brand-primary`, `text-brand-dark` 형태로 작성해야 합니다. 절대 헥스 코드를 직접 입력하지 마세요 (예: `bg-[#63adf2]` ❌).
- **기본 배경:** 서비스의 기본 배경은 너무 파래서 답답하지 않도록 깨끗한 `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` 권장), 선의 굵기보다 색상의 농도 조절로 구분감을 줍니다.
\ No newline at end of file
+ - *예시 (텍스트 흐리게):* `text-brand-dark/70`
+ - *예시 (배경 옅게):* `bg-brand-soft/10`
+ - *예시 (테두리 연하게):* `border-brand-dark/20`
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 05e726d..162f8fc 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
@@ -13,6 +16,7 @@ const eslintConfig = defineConfig([
"build/**",
"next-env.d.ts",
]),
+ ...storybook.configs["flat/recommended"]
]);
export default eslintConfig;
diff --git a/package-lock.json b/package-lock.json
index 0aafad3..35ccd15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3246,6 +3246,7 @@
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
"dev": true,
"license": "MIT",
+ "peer": true,
"dependencies": {
"@rtsao/scc": "^1.1.0",
"array-includes": "^3.1.9",
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
new file mode 100644
index 0000000..81f200e
--- /dev/null
+++ b/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 (
+
+
+ {/*
+ 비즈니스 로직이 분리된 소셜 로그인 UI 그룹
+ - 이 페이지 파일(View)은 실제 API가 어떻게 동작하는지 전혀 모릅니다.
+ */}
+
+
+
+ 로그인함으로써 VibeRoom의
+ 이용약관 및 개인정보처리방침에 동의하게 됩니다.
+
+
+
+ {/* 장식용 배경 요소 (은은한 빛) */}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx
index d2c0f1f..ee166fc 100644
--- a/src/app/(marketing)/page.tsx
+++ b/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 (
-
+
{/* Navigation Bar */}
-
+
-
+
🪴 VibeRoom
-
@@ -30,50 +26,44 @@ export default function MarketingPage() {
-
+
함께하는 조용한 몰입,
- VibeRoom
+ VibeRoom
-
+
집중하기 어려운 순간, 당신을 다그치지 않는 편안한 공간으로 들어오세요.
구조화된 코워킹 세션과 느슨한 연대가 당신의 페이스를 되찾아 줍니다.
-
+
+
{/* Hero Illustration */}
-
-
+
+
-
-
-
+
+
+
-
+
🧑💻
-
+
-
+
☕
-
+
-
+
45:00 남음
@@ -86,8 +76,8 @@ export default function MarketingPage() {
-
당신을 위한 다정한 몰입 장치
-
단순한 타이머가 아닙니다. 무리하지 않고 오래 지속할 수 있는 환경을 제공합니다.
+
당신을 위한 다정한 몰입 장치
+
단순한 타이머가 아닙니다. 무리하지 않고 오래 지속할 수 있는 환경을 제공합니다.
@@ -96,12 +86,12 @@ export default function MarketingPage() {
{ icon: "🌱", title: "다정한 연대와 코워킹", desc: "화면 너머 누군가와 함께하는 바디 더블링 효과. 감시가 아닌, 조용하지만 강력한 동기를 서로 나누어보세요." },
{ icon: "🛋️", title: "나만의 심미적 공간", desc: "비 오는 다락방, 햇살 드는 카페. 백색소음과 함께 내가 가장 편안함을 느끼는 가상 공간을 꾸미고 머무르세요." }
].map((feature, idx) => (
-
-
+
+
{feature.icon}
-
{feature.title}
-
+
{feature.title}
+
{feature.desc}
@@ -114,31 +104,31 @@ export default function MarketingPage() {
-
나에게 맞는 공간 선택하기
-
개인의 가벼운 집중부터 프리랜서의 완벽한 워크스페이스까지.
+
나에게 맞는 공간 선택하기
+
개인의 가벼운 집중부터 프리랜서의 완벽한 워크스페이스까지.
{/* Starter Plan */}
-
-
Starter
-
가벼운 집중이 필요한 분
+
+
Starter
+
가벼운 집중이 필요한 분
- 무료
+ 무료
-
-
✓ 기본 가상 공간 테마
-
✓ 1:1 파트너 매칭 (주 3회)
-
✓ 오픈 코워킹 룸 입장
+
+
✓ 기본 가상 공간 테마
+
✓ 1:1 파트너 매칭 (주 3회)
+
✓ 오픈 코워킹 룸 입장
-
+
{/* Pro Plan */}
-
-
+
+
추천
Pro
@@ -148,32 +138,32 @@ export default function MarketingPage() {
/월