🚀 COLORVERSE

[ 카카오, 메타버스 비전 ‘카카오 유니버스’ 컬러버스 데모 프로젝트 ]

기존 데모 프로젝트의 레거시 시스템을 Next.js와 TypeScript 기반의 현대적이고 확장 가능한 아키텍처로 재구성한 프로젝트 입니다. 단, shadcn/ui와 같은 컴포넌트 라이브러리는 사용하지 않으며, 커스텀 훅과 컴포넌트를 직접 구현하는 방식으로 아키텍처를 구성하였습니다.

---

🛠 Tech Stack

프로젝트에서 사용 중인 주요 기술을 명시합니다.

• Framework: Next.js (App Router / Pages Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Server State: TanStack Query
• Client State: Zustand
• Backend & DB: Supabase
• Deployment: Vercel
• Component Documentation & Testing: Storybook

---

✨ Key Features

기존 프로젝트 대비 어떤 점이 개선되었는지 또는 주요 기능이 무엇인지 요약합니다.

• ⚡ Next.js와 TypeScript를 통한 성능 및 안정성 향상

  • Next.js App Router를 기반으로 한 최적화된 렌더링으로 빠른 페이지 로딩 및 UX 개선
  • TypeScript를 활용한 엄격한 타입 안정성을 바탕으로 런타임 에러 방지 및 유지보수성 대폭 향상

• 🎨 디자인 시스템 기반의 UI 구현 및 반응형 레이아웃

  • Figma 디자인의 세밀한 속성(Hug, Fill 등)을 Tailwind CSS를 활용해 반응형 웹으로 완벽 구현

• 🧩 재사용 가능한 공통 컴포넌트(Common Component) 및 UI 시스템

  • 카드, 버튼 등 자주 사용되는 UI 요소를 공통 컴포넌트로 모듈화하여 재사용성 및 확장성 극대화

• 📖 컴포넌트 주도 개발 및 독립적인 UI 테스트 (Component-Driven Development)

  • Storybook을 도입하여 UI 컴포넌트를 독립된 환경에서 개발하고 시각적으로 검증
  • 컴포넌트의 다양한 상태와 변형(Variants)을 문서화하여 UI 유지보수 및 협업 효율성 극대화

• 🔄 서버/클라이언트 상태 분리를 통한 명확한 데이터 흐름

  • TanStack Query로 서버 상태(API 데이터)를 관리하여 캐싱, 리페칭, 로딩/에러 상태를 선언적으로 처리
  • Zustand로 클라이언트 상태(UI/세션 상태 등)를 관리하여 불필요한 리렌더링 없이 가볍게 전역 상태 공유

• 🔐 Supabase 기반 인증 및 백엔드 연동

  • Supabase를 BaaS로 활용하여 인증 및 데이터베이스 기능을 빠르게 구축

---

📁 Project Structure

데모 버전에서 실제 서비스로 확장하는 과정까지 고려하여 FSD 구조로 진행했습니다.

app/
├── (protected)/      # 로그인 필요 라우트
└── (public)/         # 로그인 불필요 라우트
src/
├── app/              # 전역 스타일, 레이아웃, Next.js 라우트 및 프로바이더
├── shared/           # 전역적으로 공유되는 유틸리티, 훅, 타입, 공통 UI
├── entities/         # 비즈니스 엔티티
├── features/         # 유저와 상호작용하는 독립적인 기능
└── widgets/          # 엔티티와 기능을 조합하여 화면을 구성하는 컴포넌트