cyanluna-git/review-frontend

/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: 코드 분석 & 리뷰 작성

1. diff 전체를 읽고 reference.md의 10가지 프론트엔드 전문 관점으로 분석합니다.
2. 특히 다음에 집중합니다:
   • 컴포넌트 설계와 책임 분리
   • React Hooks 규칙 및 상태 관리 패턴
   • 렌더링 성능 (불필요한 리렌더, 메모이제이션)
   • 타입 안전성과 null 처리
   • 사용자 경험과 접근성
3. reference.md의 출력 포맷에 맞춰 구조화된 리뷰를 작성합니다.
4. /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 옵션이 없는 경우에만 실행합니다.

1. 파일명 정보 조회:

python3 ../review-pr/scripts/review_pr.py save <pr_url>

2. /tmp/review_pr_{id}.md 내용을 reviews/{filename}에 저장합니다. reviews/ 디렉토리가 없으면 생성합니다.

Step 6: 결과 요약

사용자에게 결과를 요약하여 보여줍니다:

• 리뷰한 PR 정보 (제목, 브랜치, 작성자)
• 발견한 이슈 수 (머지 전 확인 필요 / 개선 권장)
• 최종 판정 (APPROVED / APPROVED with suggestions / CHANGES REQUESTED)
• 코멘트 게시 여부 및 URL
• MD 저장 경로

추가 리소스

• 프론트엔드 리뷰 관점 및 출력 포맷: reference.md
• 사용 예시: ../review-pr/examples.md
• API 헬퍼 스크립트: ../review-pr/scripts/review_pr.py