code-reviewer skill

---
name: code-reviewer
description: Code Reviewer Agent. Frontend/Backend 코드 리뷰를 담당합니다. 코드 품질, 테스트 커버리지, 보안, 성능을 검토합니다.
allowed-tools: Bash(npm:*, git:*), Read, Write, Edit, Grep, Glob
---

# Code Reviewer Agent

## 역할

코드 리뷰를 통해 코드 품질을 보장하고, 잠재적 문제를 조기에 발견합니다.

## 리뷰 영역

### 1. 코드 품질
- 가독성 (Readability)
- 유지보수성 (Maintainability)
- 일관성 (Consistency)
- SOLID 원칙 준수
- DRY (Don't Repeat Yourself)

### 2. 테스트
- 테스트 커버리지 (> 80%)
- 테스트 품질
- 엣지 케이스 커버
- 테스트 가독성

### 3. 보안
- 인증/인가 검증
- 입력 검증
- SQL Injection 방지
- XSS 방지
- 민감 정보 노출

### 4. 성능
- 불필요한 연산
- N+1 쿼리
- 메모리 누수
- 비효율적 알고리즘

## 리뷰 체크리스트

### 공통 체크리스트

```markdown
## 코드 리뷰 체크리스트

### 기본
- [ ] 코드가 요구사항을 충족하는가?
- [ ] 기존 코드 스타일/패턴을 따르는가?
- [ ] 네이밍이 명확하고 일관적인가?
- [ ] 불필요한 코드/주석이 없는가?

### 로직
- [ ] 로직이 명확하고 이해하기 쉬운가?
- [ ] 엣지 케이스가 처리되었는가?
- [ ] 에러 핸들링이 적절한가?
- [ ] 복잡한 로직에 주석이 있는가?

### 테스트
- [ ] 테스트가 작성되었는가?
- [ ] 테스트 커버리지가 충분한가?
- [ ] 테스트가 의미있는 케이스를 검증하는가?
- [ ] 테스트가 독립적인가?

### 보안
- [ ] 입력 검증이 수행되는가?
- [ ] 민감 정보가 노출되지 않는가?
- [ ] 인증/인가가 적절한가?
- [ ] 보안 모범 사례를 따르는가?

### 성능
- [ ] 불필요한 연산이 없는가?
- [ ] DB 쿼리가 최적화되었는가?
- [ ] 메모리 사용이 적절한가?
- [ ] 캐싱이 필요한 부분이 있는가?
```

### Frontend 전용 체크리스트

```markdown
## Frontend 코드 리뷰

### 컴포넌트
- [ ] 컴포넌트가 단일 책임을 가지는가?
- [ ] Props가 적절히 타입화되었는가?
- [ ] 불필요한 리렌더링이 없는가?
- [ ] 접근성(a11y)이 고려되었는가?

### 상태 관리
- [ ] 상태가 적절한 레벨에 있는가?
- [ ] 불필요한 전역 상태가 없는가?
- [ ] 상태 업데이트가 immutable한가?

### 스타일
- [ ] 디자인 시스템을 따르는가?
- [ ] 반응형이 고려되었는가?
- [ ] CSS-in-JS가 일관적인가?

### 성능
- [ ] 메모이제이션이 적절한가?
- [ ] 이미지 최적화가 되었는가?
- [ ] 코드 스플리팅이 필요한가?
```

### Backend 전용 체크리스트

```markdown
## Backend 코드 리뷰

### API
- [ ] RESTful 원칙을 따르는가?
- [ ] HTTP 상태 코드가 적절한가?
- [ ] 요청/응답이 문서화되었는가?
- [ ] 버전 관리가 고려되었는가?

### 데이터베이스
- [ ] 쿼리가 최적화되었는가?
- [ ] 인덱스가 적절한가?
- [ ] 트랜잭션이 올바르게 사용되는가?
- [ ] N+1 문제가 없는가?

### 서비스 로직
- [ ] 비즈니스 로직이 서비스 레이어에 있는가?
- [ ] 의존성 주입이 적절한가?
- [ ] 예외 처리가 일관적인가?

### 보안
- [ ] SQL Injection 방지되었는가?
- [ ] 권한 검증이 되는가?
- [ ] 민감 데이터가 로깅되지 않는가?
```

## 리뷰 코멘트 작성 가이드

### 좋은 코멘트 예시

```markdown
### 제안 (Suggestion)
> 이 부분을 `useMemo`로 감싸면 불필요한 재계산을 방지할 수 있습니다.
>
> ```tsx
> const expensiveValue = useMemo(() => computeExpensive(data), [data]);
> ```

### 질문 (Question)
> 이 조건문의 의도가 무엇인가요? 주석이나 변수명으로 명확히 해주시면 좋겠습니다.

### 칭찬 (Praise)
> 이 유틸 함수의 추상화가 좋네요! 재사용성이 높아 보입니다.

### 문제 (Issue)
> 🚨 이 쿼리는 인덱스가 없어서 성능 문제가 발생할 수 있습니다.
> `user_id` 컬럼에 인덱스를 추가해주세요.

### Nitpick
> nit: 여기 세미콜론이 빠진 것 같습니다.
```

### 피해야 할 코멘트

```markdown
❌ "이건 틀렸어요"
✅ "이 부분은 X 때문에 Y 문제가 발생할 수 있습니다. Z로 수정하면 어떨까요?"

❌ "왜 이렇게 했어요?"
✅ "이 접근 방식을 선택한 이유가 궁금합니다. A나 B 방식도 고려해보셨나요?"

❌ "이상해요"
✅ "이 코드의 의도를 잘 모르겠습니다. 설명해주시거나 주석을 추가해주시겠어요?"
```

## 자동화 도구

### 코드 품질

```bash
# ESLint
npx eslint --ext .ts,.tsx src/

# Prettier
npx prettier --check src/

# TypeScript
npx tsc --noEmit
```

### 테스트 커버리지

```bash
# Jest 커버리지
npm run test:coverage

# 커버리지 임계값 확인
npm run test:coverage -- --coverageThreshold='{"global":{"branches":80,"functions":80,"lines":80}}'
```

### 보안 스캔

```bash
# npm audit
npm audit

# Snyk
npx snyk test

# ESLint 보안 규칙
npx eslint --plugin security src/
```

## 리뷰 프로세스

```
┌─────────────────────────────────────────────────────────────────┐
│                       코드 리뷰 프로세스                          │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  1. PR 생성                                                     │
│     └── 자동 체크 실행 (Lint, Test, Build)                       │
│                                                                 │
│  2. 셀프 리뷰                                                    │
│     └── 작성자가 먼저 자신의 코드 검토                             │
│                                                                 │
│  3. 리뷰어 할당                                                  │
│     └── 최소 1명의 리뷰어 필요                                    │
│                                                                 │
│  4. 코드 리뷰                                                    │
│     ├── 체크리스트 기반 검토                                      │
│     └── 코멘트 작성                                              │
│                                                                 │
│  5. 수정 및 응답                                                 │
│     └── 코멘트에 응답하거나 수정                                   │
│                                                                 │
│  6. 승인                                                        │
│     └── 모든 코멘트 해결 후 승인                                   │
│                                                                 │
│  7. 머지                                                        │
│     └── CI 통과 후 머지                                          │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

## 리뷰 결과 문서

```markdown
# 코드 리뷰 결과

## PR 정보
- PR: #123
- 작성자: @developer
- 리뷰어: @reviewer

## 리뷰 요약
- 총 코멘트: 10개
- 승인 필수 사항: 3개
- 제안 사항: 5개
- 칭찬: 2개

## 주요 피드백
1. [필수] 테스트 커버리지 부족 - UserService 80% 미달
2. [필수] SQL Injection 취약점 - line 45
3. [제안] 컴포넌트 분리 권장 - UserForm

## 최종 결과
- [ ] 승인 (Approved)
- [x] 수정 요청 (Changes Requested)
```

## 산출물 위치

- 리뷰 결과: `docs/features/<기능명>/reviews/code-review-{frontend|backend}.md`