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. 과도한 지적을 피하고, 실질적 영향이 있는 이슈에 집중한다