StatusBadge
원본: projects/skill-lens/design/components/StatusBadge/README.md
상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗
상태 꼬리표: 톤 다섯 + 앞 모양(빈 원, 시계, 점, 체크, 되돌림). 숨김은 잠금, 데이터 없음은 대시
진단 진행 상태와 확인 필요 같은 상태를 보이는 꼬리표입니다. 크기는 8판 .tag(13 600 알약, 안쪽 4 9). 색, 단어, 앞 모양 셋이 함께 갑니다.
쓰는 곳
명단 표의 상태 칸, 행 이름 옆 꼬리표("렌지가 짚음"), 검토 서랍, 스킬 수정 내역.
구성(화면이 넘겨줄 것)
상태 값 하나. 글은 용어 사전의 이름만 씁니다.
규칙
- 톤은 다섯: 기본(
sl-status, 회색, 빈 원), 진행(--active, 연보라, 반원), 확인 필요(--attention, 산호 옅은 바탕, 채운 원), 끝남(--done, 초록, 체크), 멈춤(--paused, 회색, 막대). 다른 톤은 만들지 않습니다. - 앞 모양: 기본 빈 원, 진행 반원, 검토대기 시계, 확인 필요 점, 끝남 체크, 재진단 요청 되돌림, 숨김 잠금, 진단 안 함 대시(Lucide, 이모지 금지).
- 진단(관리자 화면): 미초대(기본), 진행 중(진행), 검토필요(확인 필요), 검토완료(끝남), 재진단 요청(멈춤). 실무자 화면에서는 검토필요 대신 "검토대기". 스킬 수정: 반영 대기(확인 필요), 반영됨(끝남), 미반영(멈춤).
- 8판 꼬리표 대응:
.tag.c(직무 못 맞춤, 이메일 오류) → 확인 필요,.tag.so(중복) → 기본,.tag.g(연결됨, 바로 사용) → 끝남,.mk(추천, 렌지가 짚음) → 진행. 8판의.tag.g가 파일 형식처럼 상태가 아닌 글이면 꼬리표 없이 보조 글로 씁니다. - 라임 채움은 쓰지 않습니다(README 2장: 라임은 장식 자리만).
- "반려, 승인, 거부"는 쓰지 않습니다. 누르는 필터는
StatRow필터나Tabs.
접근성
- 글이 상태를 말하므로 모양은
aria-hidden.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Display" height=170 subtitle="상태 꼬리표: 톤 다섯 + 앞 모양(빈 원, 시계, 점, 체크, 되돌림). 숨김은 잠금, 데이터 없음은 대시" -->
<style>body{margin:0;padding:var(--space-6);background:var(--canvas)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.row2{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-start}.ph{width:390px;max-width:100%}.pc{width:880px;max-width:100%}.cap{font:600 12px/16px var(--font-sans);color:var(--ink-muted);margin:0 0 6px}.ph-screen{padding:var(--space-5);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:0 0 0 1px var(--border)}</style><div class="sl stack">
<div style="display:flex;flex-wrap:wrap;gap:8px"><span class="sl-status"><i></i>미초대</span><span class="sl-status sl-status--active"><i></i>진행 중</span><span class="sl-status sl-status--active"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>검토대기</span><span class="sl-status sl-status--attention"><i></i>검토필요</span><span class="sl-status sl-status--done"><i></i>검토완료</span><span class="sl-status sl-status--paused"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>재진단 요청</span></div>
<div style="display:flex;flex-wrap:wrap;gap:8px"><span class="sl-status sl-status--attention"><i></i>반영 대기</span><span class="sl-status sl-status--done"><i></i>반영됨</span><span class="sl-status sl-status--paused"><i></i>미반영</span><span class="sl-status"><svg viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>5명 미만</span><span class="sl-status"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/></svg>진단 안 함</span></div></div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.