Status Indicator
설치 확인이슈·작업 상태 아이콘과 색. 예정·진행 중·검토 중·완료·막힘·취소
1. 목적과 출처
이슈·작업 상태 아이콘과 색. 예정·진행 중·검토 중·완료·막힘·취소
- 출처
- 자체 제작
- 프로젝트
src/components/ui/status-indicator.tsx- Registry
@adcapsule/status-indicator
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| status | 기본 | 작게 | 글자 숨김 |
|---|---|---|---|
| 예정 todo | 예정 | 예정 | 예정 |
| 진행 중 progress | 진행 중 | 진행 중 | 진행 중 |
| 검토 중 review | 검토 중 | 검토 중 | 검토 중 |
| 완료 done | 완료 | 완료 | 완료 |
| 막힘 blocked | 막힘 | 막힘 | 막힘 |
| 취소 canceled | 취소 | 취소 | 취소 |
3. 속성 바꿔 보기
진행 중
status
size
4. 설치와 사용
- npm 패키지
- class-variance-authority, lucide-react
- 함께 설치
- @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- status: todo·progress·review·done·blocked·canceled
- label로 글자 바꾸기
- hideLabel: 화면 낭독기에만 읽힘
- size: sm·default
- 아이콘 모양도 바뀌어 색만으로 구분하지 않음
공통으로 유지할 토큰
- status.warning (진행 중)
- status.info (검토 중)
- status.success (완료)
- status.danger (막힘)
- text.muted (예정·취소)