전자상거래 플랫폼의 운영 효율화를 위한 통합 관리자 솔루션입니다. 회원 관리, 상품/주문 승인, 고객센터 운영 등 비즈니스 핵심 프로세스를 직관적인 UI/UX로 구현했습니다.
- 🎬 실제 서비스 시연: https://www.youtube.com/watch?v=dM07anPjfsk&t=112s
서비스의 주요 지표를 한눈에 파악하고, 안전한 보안 로그인을 제공합니다.
| Dashboard | Login |
|---|---|
 |
 |
| 실시간 회원/상품 통계 및 Trend Chart | JWT 기반 보안 로그인 및 세션 관리 |
플랫폼 상품과 결제 내역을 체계적으로 관리합니다.
| Product Management | Order Management |
|---|---|
 |
 |
| 상품 목록 조회, 상태 변경 및 카테고리 관리 | 결제 내역 조회 및 환불/취소 처리 |
전체 회원 정보를 조회하고 공지사항을 통해 고객과 소통합니다.
| Admin & Members | Announcements |
|---|---|
 |
 |
| 관리자 권한 부여 및 상세 회원 정보 조회 | WYSIWYG 에디터를 통한 공지 등록 |
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS, Radix UI, CVA
- State Mgmt: Zustand (Client), React Query (Server)
- Robust API Client (
lib/api/client.ts)- API 호출 중앙화 & Failover 시스템 구축 (Main Server -> Fallback Server 자동 전환)
- JWT 만료 시
Unauthorized(401)감지 및 토큰 자동 재발급(Silent Refresh) 메커니즘
- Optimized State Management
- Server State: React Query를 활용한 데이터 캐싱 및 동기화, 도메인별 Hook 분리 (
hooks/useMembers.ts등) - Client State: 로그인 정보 등 전역 상태는 Zustand로 경량화하여 관리
- Server State: React Query를 활용한 데이터 캐싱 및 동기화, 도메인별 Hook 분리 (
- Type-Safe Forms
- Zod + React Hook Form을 결합하여 복잡한 입력 폼의 런타임 유효성 검증 및 에러 핸들링 표준화
├── app/ # Next.js App Router (Page & Layout)
│ ├── (auth)/ # 인증 (로그인 등)
│ ├── admin/ # 관리자 관리
│ ├── dashboard/ # 통계 대시보드
│ ├── services/ # 상품, 카테고리, 주문 관리
│ └── support/ # 고객센터 (공지, FAQ)
├── components/ # UI Components
│ ├── common/ # 공통 처리 (DataTable, Modal 등)
│ ├── layout/ # Global Layout (Sidebar, Header)
│ └── [feature]/ # 도메인별 특화 컴포넌트
├── hooks/ # Custom Hooks (React Query)
├── lib/ # Business Logic & Utils
│ ├── api/ # API Client & Endpoints
│ ├── schemas/ # Zod Validation Schemas
│ └── stores/ # Zustand Stores# Install dependencies
pnpm install
# Run development server
pnpm dev
# -> http://localhost:3000