From dabb44204852696ad27185fdad4678a13d37cef7 Mon Sep 17 00:00:00 2001 From: corpi Date: Thu, 26 Feb 2026 12:29:45 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 3 + docs/skills/color_system.md | 25 +-- eslint.config.mjs | 4 + package-lock.json | 1 + src/app/(auth)/login/page.tsx | 40 +++++ src/app/(marketing)/page.tsx | 150 ++++++++---------- src/app/globals.css | 17 +- src/app/layout.tsx | 15 +- src/features/auth/api/authApi.ts | 17 ++ .../auth/components/SocialLoginGroup.tsx | 64 ++++++++ src/features/auth/hooks/useSocialLogin.ts | 68 ++++++++ src/features/auth/types/index.ts | 15 ++ src/shared/lib/colors.ts | 20 +++ src/shared/ui/Button.tsx | 65 ++++++++ 14 files changed, 402 insertions(+), 102 deletions(-) create mode 100644 src/app/(auth)/login/page.tsx create mode 100644 src/features/auth/api/authApi.ts create mode 100644 src/features/auth/components/SocialLoginGroup.tsx create mode 100644 src/features/auth/hooks/useSocialLogin.ts create mode 100644 src/features/auth/types/index.ts create mode 100644 src/shared/lib/colors.ts create mode 100644 src/shared/ui/Button.tsx 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 ( +
+ + {/* 상단 로고 (홈으로 돌아가기) */} + + 🪴 VibeRoom + + + {/* 로그인 카드 컨테이너 */} +
+ +
+

다시 오셨군요!

+

+ 비밀번호를 외울 필요 없이,
+ 사용 중인 계정으로 3초 만에 시작하세요. +

+
+ + {/* + 비즈니스 로직이 분리된 소셜 로그인 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() { /월
    -
  • ✓ 프리미엄 테마 무제한
    • -
  • ✓ 1:1 매칭 무제한
    • -
  • ✓ 고급 집중 통계 및 리포트
    • -
  • ✓ 공간 커스텀 아이템 제공
    • +
  • ✓ 프리미엄 테마 무제한
    • +
  • ✓ 1:1 매칭 무제한
    • +
  • ✓ 고급 집중 통계 및 리포트
    • +
  • ✓ 공간 커스텀 아이템 제공
- +
{/* Teams Plan */} -
-

Teams

-

리모트 워크 기업 및 팀

+
+

Teams

+

리모트 워크 기업 및 팀

- ₩12,000 - /인·월 + ₩12,000 + /인·월
-
    -
  • ✓ Pro 플랜의 모든 기능
    • -
  • ✓ 프라이빗 팀 스페이스
    • -
  • ✓ 팀 전체 생산성 대시보드
    • +
      +
    • ✓ Pro 플랜의 모든 기능
      • +
    • ✓ 프라이빗 팀 스페이스
      • +
    • ✓ 팀 전체 생산성 대시보드
    - +
@@ -181,7 +171,7 @@ export default function MarketingPage() { {/* Footer */} -