snp-connection-monitoring/docs/design/prompts/review-checklist.md

디자인 리뷰 체크리스트

컴포넌트 구현 완료 후, 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 본문에 아래 내용을 포함한다.

## 디자인 리뷰

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

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

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

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