# 디자인 리뷰 체크리스트

컴포넌트 구현 완료 후, MR 생성 전에 아래 9개 카테고리를 점검한다.

---

## 1. 컬러 토큰

- [ ] HEX 색상 코드가 직접 사용되지 않았다
- [ ] Tailwind 기본 팔레트(gray-*, blue-* 등)를 브랜드 컬러 대용으로 사용하지 않았다
- [ ] 모든 색상이 CSS 변수 토큰(`var(--color-*)`)을 통해 지정되었다
- [ ] 시멘틱 컬러(success, warning, danger, info)가 의미에 맞게 사용되었다
- [ ] 시멘틱 컬러를 장식 목적으로 사용하지 않았다

## 2. 다크 모드

- [ ] CSS 변수 토큰을 사용하므로 다크 모드가 자동으로 전환된다
- [ ] 토큰이 없는 케이스(그라디언트, 특수 색상 등)에만 `dark:` 클래스를 사용했다
- [ ] `dark:` 클래스가 CSS 변수 토큰과 충돌하지 않는다
- [ ] 이미지, SVG 등 미디어가 다크 모드에서 적절히 표시된다

## 3. 타이포그래피

- [ ] 폰트 크기가 타입 스케일(`text-sm`, `text-base`, `text-lg` 등)을 사용한다
- [ ] 임의의 px 폰트 크기(`text-[22px]` 등)를 사용하지 않았다
- [ ] 텍스트 색상이 CSS 변수 토큰(`--color-text-primary` 등)을 사용한다
- [ ] 한글 텍스트에 `word-break: keep-all`이 적용되었다 (본문, 설명)

## 4. 스페이싱

- [ ] 여백이 4px 단위 스케일(`p-2`, `p-4`, `gap-3` 등)을 사용한다
- [ ] 임의의 px 여백(`p-[13px]`)을 사용하지 않았다
- [ ] 인라인 스타일로 여백을 지정하지 않았다

## 5. 컴포넌트 API

- [ ] Props 인터페이스가 `interface {Name}Props`로 정의되었다
- [ ] `className` prop이 허용되고 `cn()`으로 병합된다
- [ ] `cn()` 유틸리티(`src/utils/cn.ts`)를 사용한다
- [ ] DOM 접근이 필요한 경우 `forwardRef`가 적용되었다
- [ ] `any` 타입이 사용되지 않았다

## 6. 아이콘

- [ ] Lucide React 아이콘만 사용했다 (다른 라이브러리 혼용 없음)
- [ ] 아이콘 크기가 사이즈 스케일(`size-4`, `size-5`, `size-6` 등)을 사용한다
- [ ] 아이콘 색상이 텍스트 색상 상속 또는 CSS 변수 토큰을 사용한다
- [ ] 장식용 아이콘에 `aria-hidden="true"`가 적용되었다
- [ ] 의미 있는 아이콘 버튼에 `aria-label`이 있다

## 7. 접근성

- [ ] 모든 인터랙티브 요소가 키보드로 접근 가능하다
- [ ] `focus-visible` 스타일이 적용되었다
- [ ] ARIA 속성이 올바르게 사용되었다 (`role`, `aria-label`, `aria-expanded` 등)
- [ ] 색상만으로 정보를 전달하지 않는다 (아이콘, 텍스트 보조)
- [ ] 이미지에 `alt` 텍스트가 있다

## 8. 모션

- [ ] 트랜지션 지속 시간이 200ms 이하이다 (특별한 경우 300ms)
- [ ] 진입/퇴장 애니메이션에 올바른 easing이 적용되었다 (진입: `ease-out`, 퇴장: `ease-in`)
- [ ] `motion-reduce:transition-none` 또는 `motion-reduce:duration-0`이 적용되었다
- [ ] 불필요한 애니메이션이 없다

## 9. 코드 품질

- [ ] `console.log`가 없다
- [ ] 사용하지 않는 import가 없다
- [ ] 매직 넘버/문자열이 상수로 추출되었다
- [ ] `tsc --noEmit` 통과
- [ ] 컴포넌트에 `displayName`이 설정되었다 (forwardRef 사용 시)
- [ ] Import 순서가 컨벤션을 따른다

---

## 리뷰 요청 템플릿

MR 본문에 아래 내용을 포함한다.

```markdown
## 디자인 리뷰

### 컬러 토큰
- [ ] CSS 변수 토큰 사용
- [ ] 다크 모드 자동 전환

### 접근성
- [ ] 키보드 접근성
- [ ] ARIA 속성

### 모션
- [ ] prefers-reduced-motion 처리

### 자체 검증
- tsc --noEmit: 통과 / 실패
```