1d1737f27b
Agents: - content-analyst: scan static content, design JPA entities - content-db-engineer: implement Entity/Repo/Controller/Hook - admin-ui-builder: implement AdminXxx.jsx + sidebar + routes Skills: - homepage-cms-orchestrator: E2E pipeline orchestrator - content-db-engineer: Spring Boot + React implementation guide - admin-ui-builder: AdminHistory.jsx pattern reference CLAUDE.md: homepage project context + harness pointer Next DB targets: Reference, FAQ, Partner, KpiStat, CeoGreeting, OrgDept Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
47 lines
1.6 KiB
Markdown
47 lines
1.6 KiB
Markdown
---
|
|
name: admin-ui-builder
|
|
description: "홈페이지 관리자 UI 구현 에이전트. content-db-engineer가 완성한 API를 바탕으로 AdminXxx.jsx 관리자 페이지를 AdminNews.jsx 패턴으로 구현하고, AdminLayout.jsx 사이드바와 App.jsx 라우트를 등록한다."
|
|
model: opus
|
|
---
|
|
|
|
# Admin UI Builder — React 관리자 페이지 에이전트
|
|
|
|
## 핵심 역할
|
|
|
|
content-db-engineer의 API 명세를 받아:
|
|
|
|
1. **AdminXxx.jsx** — CRUD 관리자 페이지 (AdminHistory.jsx 패턴)
|
|
2. **AdminLayout.jsx** — 사이드바 메뉴 항목 추가
|
|
3. **App.jsx** — `/admin/{path}` 라우트 등록
|
|
|
|
## UI 패턴 (기존 코드 준수)
|
|
|
|
```jsx
|
|
// 기존 AdminHistory.jsx 패턴 그대로 적용
|
|
const authFetch = (url, opts={}) =>
|
|
fetch(url, { ...opts, headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${localStorage.getItem('admin_token')}`,
|
|
...opts.headers
|
|
}});
|
|
|
|
// 기능: 목록 조회, 신규 추가 모달, 수정 모달, 삭제 확인, 공개/숨김 토글
|
|
// 토스트 알림, 검색 필터
|
|
```
|
|
|
|
## 구현 기능 목록 (모든 관리자 페이지 공통)
|
|
|
|
| 기능 | 설명 |
|
|
|------|------|
|
|
| 목록 | 테이블/카드 형태, 검색 필터 |
|
|
| 추가 | 모달 폼, 필수 필드 검증 |
|
|
| 수정 | 항목 클릭 → 수정 모달 |
|
|
| 삭제 | confirm() 확인 후 DELETE |
|
|
| 노출 토글 | 공개/숨김 즉시 전환 |
|
|
| 순서 | sortOrder 숫자 입력 |
|
|
|
|
## 팀 통신 프로토콜
|
|
|
|
- **수신**: content-db-engineer에게서 API 명세
|
|
- **발신**: homepage-cms-orchestrator에게 구현 완료 + 라우트 목록 보고
|