Skip to content

tellmefrankie/saas-dashboard

Admin Pro — SaaS 어드민 대시보드

한국형 SaaS 어드민 대시보드. 주문/결제, 회원, 예약 관리 기능을 갖춘 프로페셔널한 관리자 패널입니다.

라이브 데모

Vite React TypeScript Tailwind CSS shadcn/ui

스크린샷

대시보드 메인

대시보드

주문 목록

주문 목록

주문 상세 (결제 정보)

주문 상세

회원 관리

회원 관리

예약 관리

예약 관리

주요 기능

  • 대시보드 — 오늘 매출, 신규 주문, 신규 회원, 전환율 통계 카드 + 월별 매출 차트
  • 주문/결제 관리 — 주문 목록 (필터, 검색, 페이지네이션) + 주문 상세 (토스페이먼츠 스타일 결제 정보)
  • 회원 관리 — 회원 목록 (등급 VVIP/VIP/일반, 상태 필터) + 주문이력/누적결제금액
  • 예약 관리 — 예약 목록 + 월간 캘린더 뷰 (날짜별 예약 건수)
  • 설정 — 프로필, 계정, 테마(라이트/다크), 알림, 화면 설정
  • 반응형 레이아웃 — 모바일/태블릿/데스크톱 대응
  • 다크모드 — 라이트/다크 테마 토글

기술 스택

카테고리 기술
프레임워크 Vite + React 19
언어 TypeScript (strict)
라우팅 TanStack Router (파일 기반)
상태관리 TanStack React Query + Zustand
UI Tailwind CSS v4 + shadcn/ui (Radix UI)
차트 Recharts
폼/검증 React Hook Form + Zod
아이콘 Lucide React

아키텍처

graph TD
    A[Vite Dev Server] --> B[React 19 + TypeScript]
    B --> C[TanStack Router]
    C --> D[Pages / Routes]
    D --> E[대시보드]
    D --> F[주문관리]
    D --> G[회원관리]
    D --> H[예약관리]
    D --> I[설정]
    B --> J[shadcn/ui Components]
    B --> K[Tailwind CSS v4]
    B --> L[Zustand Store]
    B --> M[Mock Data]
Loading

로컬 실행

git clone https://github.com/tellmefrankie/saas-dashboard.git
cd saas-dashboard
pnpm install
pnpm dev

http://localhost:5173에서 확인할 수 있습니다.

빌드

pnpm build
pnpm preview

라이선스

MIT

About

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages