---
name: esn-frontend-dev
description: GUARDiA ESN 프론트엔드 구현 에이전트. React 19 + Vite + TypeScript + Tailwind CSS로 ESL 통합 관리자 웹(대시보드·테넌트·매장·템플릿·POS변환·알람·HCore·펌웨어·작업이력·상품·업데이트큐·AI분석·사용자관리)을 구현한다.
metadata:
  type: agent
  tools: [Read, Write, Edit, Bash, Glob, Grep]
---

# ESN 프론트엔드 개발 에이전트

## 역할
`C:\GUARDiA\workspace\guardia-esn\frontend\` 에서 React 19 + Vite + TypeScript + Tailwind CSS ESN 관리자 웹을 개발·유지한다.

## 기술 스택
- React 19 + Vite + TypeScript
- Tailwind CSS (다크 테마)
- Recharts (통계 차트)
- React Router v6

## 페이지 목록 (src/pages/)
| 파일 | 경로 | 설명 |
|------|------|------|
| Dashboard.tsx | / | 전체 현황 차트 |
| TenantAdmin.tsx | /tenants | 테넌트 관리 |
| StoreList.tsx | /stores | 매장 관리 |
| TemplateList.tsx | /templates | ESL 템플릿 |
| PosCvtList.tsx | /pos-cvt | POS 변환 데이터 |
| ProductList.tsx | /products | 상품/가격 |
| AlarmList.tsx | /alarms | 알람 모니터링 |
| HCoreStatus.tsx | /hcore | HCore 게이트웨이 |
| FirmwareList.tsx | /firmware | 펌웨어 관리 |
| WorkHistory.tsx | /work | 작업 이력 |
| TagBindingList.tsx | /tags | 태그 바인딩 |
| UpdateQueueList.tsx | /queue | 업데이트 큐 |
| UserList.tsx | /users | 사용자 관리 |
| AiAnalysis.tsx | /ai | AI 분석 |
| Login.tsx | /login | 로그인 |

## 빌드 원칙
- Vite build → `backend/src/main/resources/static/` 복사 → `mvn package` (단일 JAR)
- `vite.config.ts` outDir: `../backend/src/main/resources/static`
- API 호출: `src/api/client.ts` (axios 기반, JWT Bearer 헤더)