| name | review-frontend |
| description | Frontend 코드 리뷰. PR의 프론트엔드 코드를 컴포넌트 설계, 상태 관리, 렌더링 성능, 접근성 관점으로 분석. 사용법: /review-frontend <PR_URL> |
| argument-hint | <pr_url> [--no-post] [--no-save] |
| allowed-tools | Bash(python3 *), Read, Grep, WebFetch |
/review-frontend - Frontend 코드 리뷰
PR URL을 입력받아 프론트엔드 코드를 도메인 전문 관점으로 분석하고, 구조화된 리뷰 코멘트를 PR에 자동으로 게시합니다.
대상 코드
- React / Next.js (TypeScript, JSX/TSX)
- Vue.js, Angular, Svelte
- CSS / TailwindCSS / CSS-in-JS
- 상태 관리 (Redux, Zustand, Context, TanStack Query)
- 테스트 (Jest, Vitest, Testing Library, Playwright)
옵션
| 옵션 | 설명 |
|---|
| (없음) | 리뷰 + PR 코멘트 게시 + 로컬 MD 저장 |
--no-post | PR 코멘트 게시 생략 (분석만) |
--no-save | 로컬 MD 저장 생략 |
필수 실행 워크플로우
아래 단계를 반드시 순서대로 실행하세요. 건너뛰지 마세요.
Step 1: 인자 파싱
사용자 입력에서 PR URL과 옵션을 파싱합니다.
입력: <pr_url> [--no-post] [--no-save]
Step 2: PR 데이터 수집
python3 ../review-pr/scripts/review_pr.py fetch <pr_url>
JSON 출력을 분석합니다. diff_file 키가 있으면 diff가 별도 파일로 저장된 것이므로 Read 도구로 해당 파일을 읽으세요.
Step 3: 코드 분석 & 리뷰 작성
- diff 전체를 읽고 reference.md의 10가지 프론트엔드 전문 관점으로 분석합니다.
- 특히 다음에 집중합니다:
- 컴포넌트 설계와 책임 분리
- React Hooks 규칙 및 상태 관리 패턴
- 렌더링 성능 (불필요한 리렌더, 메모이제이션)
- 타입 안전성과 null 처리
- 사용자 경험과 접근성
- reference.md의 출력 포맷에 맞춰 구조화된 리뷰를 작성합니다.
/tmp/review_pr_{id}.md에 임시 저장합니다.
리뷰 언어: 한국어로 작성합니다.
Step 4: PR에 코멘트 게시
--no-post 옵션이 없는 경우에만 실행합니다.
python3 ../review-pr/scripts/review_pr.py comment <pr_url> < /tmp/review_pr_{id}.md
Step 5: 로컬 MD 저장
--no-save 옵션이 없는 경우에만 실행합니다.
- 파일명 정보 조회:
python3 ../review-pr/scripts/review_pr.py save <pr_url>
/tmp/review_pr_{id}.md 내용을 reviews/{filename}에 저장합니다. reviews/ 디렉토리가 없으면 생성합니다.
Step 6: 결과 요약
사용자에게 결과를 요약하여 보여줍니다:
- 리뷰한 PR 정보 (제목, 브랜치, 작성자)
- 발견한 이슈 수 (머지 전 확인 필요 / 개선 권장)
- 최종 판정 (APPROVED / APPROVED with suggestions / CHANGES REQUESTED)
- 코멘트 게시 여부 및 URL
- MD 저장 경로
추가 리소스
