corpi/viberoom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fsd): 허브·스페이스 중심 UI 목업 구조로 재편

Browse Source 
맥락:

- 기존 라우트/컴포넌트 구조를 FSD 기준으로 정리하고, /app 허브와 /space 집중 화면 중심의 목업 흐름을 구성하기 위해

변경사항:

- App Router 구조를 /landing, /app, /space, /stats, /settings 중심으로 재배치

- entities/session/room/user 더미 데이터와 타입 정의 추가

- features(커스텀 입장, 룸 선택, 체크인, 리액션, 30초 리스타트 등) 단위로 로직 분리

- widgets(허브, 룸 갤러리, 타이머 HUD, 툴 도크 등) 조합형 UI 추가

- shared 공용 UI(Button/Chip/Modal/Toast 등) 및 유틸(cn/useReducedMotion) 정비

- 로그인 후 이동 경로를 /dashboard 에서 /app 으로 변경

- README를 현재 프로젝트 구조/라우트/구현 범위 기준으로 갱신

검증:

- npx tsc --noEmit

세션-상태: 허브·스페이스 목업이 FSD 레이어로 동작 가능하도록 정리됨

세션-다음: /space 상단 및 도크의 인원 수 카피를 분위기형 카피로 후속 정리

세션-리스크: build는 네트워크 환경에서 Google Fonts fetch 실패 가능
This commit is contained in:
corpi
2026-02-27 13:30:55 +09:00
parent 583837fb8d
commit cbd9017744
87 changed files with 2900 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
src/app/(landing)/page.tsx Normal file
View File

@@ -0,0 +1,209 @@
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-brand-dark font-sans selection:bg-brand-soft/50">
{/* Navigation Bar */}
<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-brand-dark tracking-tight flex items-center gap-2">
<span className="text-2xl">🪴</span> VibeRoom
</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>
<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-brand-dark">
함께하는 조용한 몰입,<br />
<span className="text-brand-primary">VibeRoom</span>
</h1>
<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">
<Button variant="primary" size="lg" href="/login">
나만의 공간 만들기
</Button>
<Button variant="outline" size="lg" href="#features">
더 알아보기
</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-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-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-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-brand-primary/50 rounded-full mt-2"></div>
</div>
<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-brand-soft rounded-full mt-2"></div>
</div>
</div>
<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>
</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-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">
{[
{ icon: "⏳", title: "구조화된 세션 타이머", desc: "부담 없이 시작할 수 있는 짧은 몰입과 확실한 휴식. 당신만의 작업 리듬을 부드럽게 설정하고 관리하세요." },
{ icon: "🌱", title: "다정한 연대와 코워킹", desc: "화면 너머 누군가와 함께하는 바디 더블링 효과. 감시가 아닌, 조용하지만 강력한 동기를 서로 나누어보세요." },
{ icon: "🛋️", title: "나만의 심미적 공간", desc: "비 오는 다락방, 햇살 드는 카페. 백색소음과 함께 내가 가장 편안함을 느끼는 가상 공간을 꾸미고 머무르세요." }
].map((feature, idx) => (
<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-brand-dark mb-3">{feature.title}</h3>
<p className="text-brand-dark/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-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-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-brand-dark">무료</span>
</div>
<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>
<Button variant="secondary" size="full" href="/login">
무료로 시작하기
</Button>
</div>
{/* Pro Plan */}
<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>
<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-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>
<Button variant="primary" size="full" href="/login?plan=pro">
Pro 시작하기
</Button>
</div>
{/* Teams Plan */}
<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-brand-dark">₩12,000</span>
<span className="text-brand-dark/60 text-sm">/인·월</span>
</div>
<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>
<Button variant="secondary" size="full" href="#contact">
도입 문의하기
</Button>
</div>
</div>
</div>
</section>
</main>
{/* Footer */}
<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">
<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-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-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>
<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>
);
}