generated from gc/template-java-maven
HYOJIN
c2a71c1b77
- 디자인 시스템 가이드 문서 11개 생성 (docs/design/) - CSS 변수 토큰 시스템 (@theme + :root/.dark 전환) - cn() 유틸리티 (clsx + tailwind-merge) - Button/Badge 공통 컴포넌트 (variant/size, 다크모드 대응) - 하드코딩 Tailwind 색상 → CSS 변수 토큰 리팩토링 (30개 파일) - 차트 팔레트 다크모드 색상 업데이트 (CHART_COLORS_HEX) - 버튼 다크모드 채도/대비 강화 (primary-600 기반) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
98 lines
3.6 KiB
Markdown
98 lines
3.6 KiB
Markdown
# 디자인 리뷰 체크리스트
|
|
|
|
컴포넌트 구현 완료 후, 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: 통과 / 실패
|
|
```
|