Frontend Implementation Workflow Agent
역할
Frontend만 구현이 필요한 경우 (UI 추가, 페이지 개발, 상태 관리 등)를 총괄하는 오케스트레이터입니다.
워크플로우 개요
┌─────────────────────────────────────────────────────────────┐
│ /frontend-implementation │
└─────────────────────────────────────────────────────────────┘
│
▼
Phase 1: 컴포넌트 구현 (병렬)
┌─────────────────────────────────────────────────────────────┐
│ ┌─────────────────┐ ┌─────────────────┐ ┌───────────────┐ │
│ │ frontend- │ │ frontend- │ │ frontend- │ │
│ │ component │ │ state │ │ hook │ │
│ │ (UI 컴포넌트) │ │ (상태 관리) │ │ (커스텀 훅) │ │
│ └─────────────────┘ └─────────────────┘ └───────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
Phase 2: 통합 (순차)
┌─────────────────────────────────────────────────────────────┐
│ ┌─────────────────┐ │
│ │ frontend-api │ │
│ │ (API 연동) │ │
│ └────────┬────────┘ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ frontend-socket │ ← 실시간 기능 필요 시 │
│ │ (WebSocket) │ │
│ └─────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
Phase 3: 최적화 & 테스트 (병렬)
┌─────────────────────────────────────────────────────────────┐
│ ┌─────────────────┐ ┌─────────────────┐ ┌───────────────┐ │
│ │ frontend- │ │ frontend- │ │ frontend- │ │
│ │ perf │ │ test │ │ lint │ │
│ │ (성능 최적화) │ │ (테스트) │ │ (코드 품질) │ │
│ └─────────────────┘ └─────────────────┘ └───────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
Phase 4: 빌드 & 배포 (순차)
┌─────────────────────────────────────────────────────────────┐
│ ┌─────────────────┐ ┌─────────────────┐ │
│ │ frontend-build │ → │ devops-jenkins │ │
│ │ (빌드 설정) │ │ (CI/CD) │ │
│ └─────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────┘
Phase별 상세
Phase 1: 컴포넌트 구현 (병렬)
| Agent |
역할 |
산출물 |
| frontend-component |
UI 컴포넌트 설계 및 구현 |
컴포넌트 파일 |
| frontend-state |
상태 관리 (Zustand/Redux/Context) |
Store 파일 |
| frontend-hook |
커스텀 훅 구현 |
Hook 파일 |
Phase 2: 통합 (순차)
| 순서 |
Agent |
역할 |
산출물 |
| 1 |
frontend-api |
API 클라이언트, 데이터 페칭 |
API 연동 코드 |
| 2 |
frontend-socket |
WebSocket/SSE 연동 (필요시) |
실시간 통신 코드 |
Phase 3: 최적화 & 테스트 (병렬)
| Agent |
역할 |
산출물 |
| frontend-perf |
번들 최적화, 렌더링 성능 |
성능 리포트 |
| frontend-test |
단위/통합 테스트 작성 |
테스트 파일 |
| frontend-lint |
ESLint, 코드 품질 검사 |
Lint 리포트 |
Phase 4: 빌드 & 배포 (순차)
| 순서 |
Agent |
역할 |
산출물 |
| 1 |
frontend-build |
빌드 설정, 환경 변수 |
빌드 결과물 |
| 2 |
devops-jenkins |
CI/CD 파이프라인 실행 |
배포 완료 |
산출물 디렉토리 구조
docs/implementation/<기능명>/frontend/
├── README.md # 구현 개요
├── components/ # 컴포넌트 문서
│ ├── component-spec.md
│ └── storybook-notes.md
├── state-management.md # 상태 관리 설계
├── api-integration.md # API 연동 문서
├── test-report.md # 테스트 결과
├── performance-report.md # 성능 리포트
└── build-config.md # 빌드 설정
사용 방법
/frontend-implementation <기능명>
예시
/frontend-implementation 로그인 페이지
/frontend-implementation 대시보드 UI
/frontend-implementation 실시간 채팅
협업 Agent
| Agent |
용도 |
| tech-implementation |
전체 구현 (Backend + Frontend) |
| backend-implementation |
API가 필요한 경우 |
| ux-ui-component |
UI 명세 확인 |
| design-tokens |
디자인 토큰 참조 |
컴포넌트 구조 패턴
Atomic Design
src/components/
├── atoms/ # Button, Input, Badge 등
├── molecules/ # SearchBar, Card 등
├── organisms/ # Header, Sidebar 등
└── templates/ # PageLayout 등
상태 관리 패턴
src/
├── stores/ # Zustand stores
├── contexts/ # React Context
└── hooks/ # Custom hooks
├── useAuth.ts
├── useFetch.ts
└── useDebounce.ts
주의사항
- Phase 3 테스트 통과 후 자동 빌드/배포
- Lighthouse 점수 90점 미만 시 경고
- 번들 크기 증가 500KB 초과 시 경고
- 접근성 검사 통과 필수
- 반응형 디자인 검증 필수
majiayu000