SkillChip
원본: projects/skill-lens/design/components/SkillChip/README.md
상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗
스킬 하나: 이름, 종류, 출처, 상태
스킬 하나를 칩으로 보입니다. 누르면 스킬 상세가 열리고, 빼기와 담기는 칩 끝 버튼 하나로 합니다.
쓰는 곳
실무자의 내 스킬셋, 관리자의 스킬셋 개선, 검토 서랍.
구성(화면이 넘겨줄 것)
스킬 이름, 종류(하드, 소프트), 출처(표준, 수정함, 커스텀), 상태(담음, 뺌, 잠김).
규칙
- 칩 하나에 버튼은 하나(빼기 또는 담기). 이름을 누르면 상세.
- 출처는 작은 꼬리표: 수정함은 "수정", 커스텀은 "커스텀".
- 뺀 스킬은 회색과 취소선 없이 "뺌" 꼬리표로(다시 담을 수 있게 남김).
- 잠김(스킬셋 그대로만 조직, 결과확정 뒤)은 버튼을 숨기고 자물쇠.
- 폰 누름 영역은 40 이상.
접근성
- 칩 이름은 버튼, 끝 버튼은
aria-label("데이터 분석 빼기").
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Display" height=150 subtitle="스킬 하나: 이름, 종류, 출처, 상태" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.stack{display:flex;flex-direction:column;gap:var(--space-3)}.wrap{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}</style>
<div class="sl stack">
<div class="wrap"><span class="sl-skillchip"><button class="sl-skillchip__name">데이터 분석</button><em>하드</em><button class="sl-skillchip__act" aria-label="빼기">×</button></span><span class="sl-skillchip"><button class="sl-skillchip__name">협상</button><em>소프트</em><small>수정</small><button class="sl-skillchip__act" aria-label="빼기">×</button></span><span class="sl-skillchip is-out"><button class="sl-skillchip__name">SQL</button><small>뺌</small><button class="sl-skillchip__act" aria-label="담기">+</button></span><span class="sl-skillchip"><button class="sl-skillchip__name">현장 문제 개선</button><small>커스텀</small><button class="sl-skillchip__act" aria-label="빼기">×</button></span></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.