Frontend Workflow Helper
프론트엔드 개발 워크플로우를 효율적으로 관리할 수 있는 VS Code 확장프로그램입니다. Claude AI와 연동하여 요구사항 분석부터 작업 실행까지 전체 개발 프로세스를 지원합니다.
✨ 주요 기능
🚀 워크플로우 관리
- 요구사항 분석: 자연어로 작성된 요구사항을 구조화된 형태로 분석
- 워크플로우 생성: 분석된 요구사항을 바탕으로 자동 워크플로우 생성
- 드래그 앤 드롭: 직관적인 UI로 작업과 서브테스크 관리
- 실시간 상태 추적: 작업 진행 상황을 실시간으로 모니터링
🎯 작업 실행
- 서브테스크 편집: 클릭으로 서브테스크 내용 수정
- AI 기반 가이드: 각 작업 유형별 상세한 구현 가이드 제공
- 자동 코드 생성: Claude AI를 통한 코드 생성 지원
📊 프로젝트 관리
- PRD 관리: Product Requirements Document 작성 및 관리
- 작업 우선순위: 중요도와 긴급도에 따른 작업 우선순위 설정
- 진행률 추적: 전체 프로젝트 진행률 시각화
🎨 스크린샷
🚀 시작하기
1. 확장프로그램 설치
VS Code 마켓플레이스에서 "Frontend Workflow Helper"를 검색하여 설치하세요.
2. 사이드바 열기
VS Code Activity Bar에서 🚀 아이콘을 클릭하여 사이드바를 엽니다.
3. 워크플로우 생성
- "워크플로우 열기" 버튼 클릭
- "🚀 워크플로우 만들기" 버튼으로 새 워크플로우 생성
- 요구사항을 입력하고 분석 시작
4. 작업 관리
- 드래그 앤 드롭으로 작업 상태 변경
- 서브테스크 클릭으로 내용 수정
- "작업 시작" 버튼으로 AI 가이드 실행
📋 사용법
워크플로우 생성
# 1. 사이드바에서 "워크플로우 열기" 클릭
# 2. "워크플로우 만들기" 버튼 클릭
# 3. 요구사항 입력 예시:
"사용자 인증 시스템을 구현하고 싶습니다.
로그인, 회원가입, 비밀번호 재설정 기능이 필요합니다."
작업 실행
- 원하는 서브테스크를 클릭
- "작업 시작" 버튼 클릭
- AI가 제공하는 가이드에 따라 구현 진행
상태 관리
- BACKLOG: 대기 중인 작업
- IN_PROGRESS: 진행 중인 작업
- DONE: 완료된 작업
⚙️ 설정
Claude API 키 설정
- VS Code 설정 열기 (
Ctrl/Cmd + ,)
- "Frontend Workflow" 검색
- Claude API 키 입력
워크플로우 파일 위치
기본적으로 .plans/ 디렉토리에 다음 파일들이 생성됩니다:
workflow.json: 워크플로우 데이터prd.json: Product Requirements Document
🔧 개발자 정보
지원하는 작업 유형
- API Function Implementation: API 함수 구현
- React Query Implementation: React Query 훅 구현
- Entity Component Development: 엔티티 컴포넌트 개발
- Feature Component Development: 기능 컴포넌트 개발
- Page Component Development: 페이지 컴포넌트 개발
- Integration Implementation: 통합 구현
- Testing: 테스트 작성
- Quality Review: 품질 검토
- Security Review: 보안 검토
- Commit Message: 커밋 메시지 작성
🤝 기여하기
버그 리포트나 기능 제안은 언제든지 환영합니다.
📄 라이선스
MIT License - 자세한 내용은 LICENSE 파일을 참조하세요.
🙏 감사의 말
Frontend Workflow Helper로 더 효율적인 프론트엔드 개발을 경험해보세요! 🚀
| |
