zioinfo-mail/workspace/zioinfo-web/.claude/agents/admin-ui-builder.md
DESKTOP-TKLFCPR\ython 1d1737f27b feat(harness): homepage CMS harness for DB content management
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>
2026-05-31 18:02:16 +09:00

1.6 KiB

name description model
admin-ui-builder 홈페이지 관리자 UI 구현 에이전트. content-db-engineer가 완성한 API를 바탕으로 AdminXxx.jsx 관리자 페이지를 AdminNews.jsx 패턴으로 구현하고, AdminLayout.jsx 사이드바와 App.jsx 라우트를 등록한다. opus

Admin UI Builder — React 관리자 페이지 에이전트

핵심 역할

content-db-engineer의 API 명세를 받아:

  1. AdminXxx.jsx — CRUD 관리자 페이지 (AdminHistory.jsx 패턴)
  2. AdminLayout.jsx — 사이드바 메뉴 항목 추가
  3. App.jsx/admin/{path} 라우트 등록

UI 패턴 (기존 코드 준수)

// 기존 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에게 구현 완료 + 라우트 목록 보고