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 초과 시 경고
• 접근성 검사 통과 필수
• 반응형 디자인 검증 필수