FE Code Review

前端代码审查

$ARGUMENTS

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

对通过

$ARGUMENTS

传递的文件或目录中的代码进行系统化审查。

리뷰 절차

审查流程

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

读取目标文件：读取
```
$ARGUMENTS
```
路径下的文件。若为目录，则通过Glob获取
```
.tsx
```
、
```
.ts
```
文件列表
关联文件排查：同时检查导入的模块、使用的类型、Hook等关联文件
基于检查清单的审查：针对以下6个类别进行检查
结果报告：按严重程度分类，附带改进方案进行报告

리뷰 체크리스트

审查检查清单

1. TypeScript 타입 안전성

1. TypeScript类型安全性

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

是否使用
```
any
```
类型 → 建议用
```
unknown
```
+ type guard替代
不必要的
```
as
```
类型断言
可空值处理缺失（可选链、空值合并）
泛型类型的适用性
```
interface
```
与
```
type
```
使用的一致性
是否存在未使用的类型/变量

2. React 패턴 & Best Practices

2. React模式与最佳实践

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

组件单一职责原则（超过200行建议拆分）
Props透传深度（超过3层建议使用Context/Zustand）
是否将数组索引用作
```
key
```
属性
不必要的
```
useEffect
```
（是否可通过派生状态替代）
```
useEffect
```
依赖数组的准确性
事件处理程序因内联函数导致的不必要重创建
条件渲染中的
```
0 &&
```
假值Bug
检查是否有可提取为自定义Hook的逻辑

3. 성능

3. 性能

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

引发不必要重渲染的模式（将对象/数组字面量作为props传递）
需使用
```
useMemo
```
/
```
useCallback
```
的场景未使用（同时指出过度使用的情况）
大型列表未应用虚拟化（100+条数据）
未优化图片（未使用
```
next/image
```
）
影响打包体积的重量级导入（如完整导入lodash）
Server/Client Component边界的合理性

4. 접근성 (a11y)

4. 可访问性（a11y）

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

是否使用语义化HTML（避免滥用div，使用合适标签）
交互式元素的可访问性（aria-label、role）
图片alt文本
是否支持键盘导航
是否仅通过颜色传递信息
焦点管理的合理性

5. 보안

5. 安全性

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

使用
```
dangerouslySetInnerHTML
```
时是否进行了内容清理
直接渲染用户输入（存在XSS风险）
API密钥/机密信息暴露在客户端代码中
Server Action中是否对输入进行有效性验证
是否具备CSRF防护

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

6. 代码质量与可维护性

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

命名的一致性与明确性
魔法数字/字符串 → 建议提取为常量
重复代码（违反DRY原则）
错误处理的合理性（try-catch、Error Boundary）
是否遵循导入顺序规则
不必要的代码/注释

리포트 형식

报告格式

markdown

undefined

markdown

undefined

Code Review: [파일명]

Code Review: [文件名]

요약

摘要

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

整体评价: [优秀/良好/需改进/严重]
主要问题: N个（Critical: N, Warning: N, Info: N）

Critical (즉시 수정 필요)

Critical（需立即修改）

[C1] 이슈 제목

[C1] 问题标题

위치:
```
파일:라인
```
문제: 설명
수정안: ```tsx // before ... // after ... ```

位置:
```
文件:行号
```
问题: 说明
改进方案: ```tsx // before ... // after ... ```

Warning (수정 권장)

Warning（建议修改）

[W1] 이슈 제목

[W1] 问题标题

...

Info (개선 제안)

Info（改进建议）

[I1] 이슈 제목

[I1] 问题标题

...

잘한 점

优点

...

undefined

...

undefined

실행 규칙

执行规则

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

若未传入参数，则询问用户审查目标
若涉及多个文件，则逐个文件审查，但将共性问题合并报告
改进方案需始终附带before/after代码示例
尊重项目现有模式，优先保证一致性
避免过度指出问题，聚焦有实际影响的内容

fe-code-review

Original

Translation

FE Code Review

前端代码审查

리뷰 절차

审查流程

리뷰 체크리스트

审查检查清单

1. TypeScript 타입 안전성

1. TypeScript类型安全性

2. React 패턴 & Best Practices

2. React模式与最佳实践

3. 성능

3. 性能

4. 접근성 (a11y)

4. 可访问性（a11y）

5. 보안

5. 安全性

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

6. 代码质量与可维护性

리포트 형식

报告格式

Code Review: [파일명]

Code Review: [文件名]

요약

摘要

Critical (즉시 수정 필요)

Critical（需立即修改）

[C1] 이슈 제목

[C1] 问题标题

Warning (수정 권장)

Warning（建议修改）

[W1] 이슈 제목

[W1] 问题标题

Info (개선 제안)

Info（改进建议）

[I1] 이슈 제목

[I1] 问题标题

잘한 점

优点

실행 규칙

执行规则