FE Code Review

$ARGUMENTS로 전달된 파일 또는 디렉토리의 코드를 체계적으로 리뷰한다.

리뷰 절차

1. 대상 파일 읽기: $ARGUMENTS 경로의 파일을 Read로 읽는다. 디렉토리면 Glob으로 .tsx, .ts 파일 목록을 가져온다
2. 관련 파일 탐색: import된 모듈, 사용된 타입, 훅 등 연관 파일도 함께 확인한다
3. 체크리스트 기반 리뷰: 아래 6개 카테고리에 대해 검사한다
4. 결과 리포트: 심각도별로 분류하여 개선안과 함께 보고한다

리뷰 체크리스트

1. TypeScript 타입 안전성

• any 타입 사용 여부 → unknown + type guard로 대체
• 불필요한 as 타입 단언
• nullable 처리 누락 (optional chaining, nullish coalescing)
• 제네릭 타입 적절성
• interface vs type 사용 일관성
• 미사용 타입/변수 존재 여부

2. React 패턴 & Best Practices

• 컴포넌트 단일 책임 원칙 (200줄 초과 시 분리 권장)
• Props drilling 깊이 (3단계 초과 시 Context/Zustand 권장)
• key prop에 배열 index 사용 여부
• 불필요한 useEffect (derived state로 대체 가능한지)
• useEffect 의존성 배열 정확성
• 이벤트 핸들러 인라인 함수로 인한 불필요한 재생성
• 조건부 렌더링에서 0 && falsy 버그
• 커스텀 훅 추출 가능한 로직 확인

3. 성능

• 불필요한 리렌더링 유발 패턴 (객체/배열 리터럴을 prop으로)
• useMemo/useCallback 필요한 곳에 미사용 (무분별한 사용도 지적)
• 큰 리스트의 가상화 미적용 (100+ 아이템)
• 이미지 최적화 (next/image 미사용)
• 번들 크기에 영향 주는 무거운 import (lodash 전체 import 등)
• Server/Client Component 경계 적절성

4. 접근성 (a11y)

• 시맨틱 HTML 사용 (div 남용 대신 적절한 태그)
• 인터랙티브 요소의 접근성 (aria-label, role)
• 이미지 alt 텍스트
• 키보드 네비게이션 가능 여부
• 색상만으로 정보 전달하지 않는지
• 포커스 관리 적절성

5. 보안

• dangerouslySetInnerHTML 사용 시 sanitize 여부
• 사용자 입력 직접 렌더링 (XSS)
• API 키/시크릿이 클라이언트 코드에 노출
• Server Action에서 입력 유효성 검사
• CSRF 보호 여부

6. 코드 품질 & 유지보수성

• 네이밍 일관성 및 명확성
• 매직 넘버/스트링 → 상수 추출
• 중복 코드 (DRY 위반)
• 에러 처리 적절성 (try-catch, Error Boundary)
• Import 순서 규칙 준수
• 불필요한 코드/주석

리포트 형식

# Code Review: [파일명]

## 요약
- 전체 평가: [우수/양호/개선필요/심각]
- 주요 이슈: N개 (Critical: N, Warning: N, Info: N)

## Critical (즉시 수정 필요)
### [C1] 이슈 제목
- **위치**: `파일:라인`
- **문제**: 설명
- **수정안**:
\`\`\`tsx
// before
...
// after
...
\`\`\`

## Warning (수정 권장)
### [W1] 이슈 제목
...

## Info (개선 제안)
### [I1] 이슈 제목
...

## 잘한 점
- ...

실행 규칙

1. 인자가 없으면 사용자에게 리뷰 대상을 질문한다
2. 파일이 여러 개이면 각 파일별로 리뷰하되, 공통 이슈는 묶어서 보고한다
3. 수정안은 항상 before/after 코드를 함께 제시한다
4. 프로젝트의 기존 패턴을 존중하고, 일관성을 우선한다
5. 과도한 지적을 피하고, 실질적 영향이 있는 이슈에 집중한다