Frontend 기술 스택
🏗️ Backoffice 아키텍처
기술 상세
UI Layer
State Management
API Integration
프로젝트 구조
backoffice/
├── src/
│ ├── app/ # App Router
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── components/ # UI Components
│ │ ├── ui/ # shadcn/ui
│ │ ├── features/ # Feature Components
│ │ └── layouts/ # Layout Components
│ ├── hooks/ # Custom Hooks
│ ├── stores/ # Zustand Stores
│ ├── services/ # API Services
│ ├── types/ # TypeScript Types
│ └── utils/ # Utilities
├── public/ # Static Assets
└── tests/ # Test Files
컴포넌트 아키텍처
성능 최적화
주요 의존성
| 패키지 | 버전 | 용도 |
|---|---|---|
| React | 19.x | UI Framework |
| TypeScript | 5.x | Type Safety |
| Vite | 5.x | Build Tool |
| Tailwind CSS | 4.x | Styling |
| Zustand | 4.x | State Management |
| TanStack Query | 5.x | Server State |
| shadcn/ui | Latest | UI Components |
반응형 디자인
관련 문서: