SkillDetail
원본: projects/skill-lens/design/components/SkillDetail/README.md
상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗
스킬 정의와 레벨 1~5 설명, 원본 대비
스킬 하나의 정의와 다섯 레벨 설명을 보이는 서랍(폰은 시트)입니다. 수정된 스킬은 표준 원본과 나란히 보입니다.
쓰는 곳
스킬 칩이나 히트맵 행을 눌렀을 때. 검토 서랍의 수정 비교.
구성(화면이 넘겨줄 것)
이름, 종류, 정의, 레벨 1~5 이름과 설명, (수정된 스킬) 원본 설명, (관리자) 요구레벨.
규칙
- 레벨 표기는 Lv 1~Lv 5(한글 단계 이름 없음, 용어 사전), 설명은 스킬마다.
- 수정된 스킬은 레벨마다 "원본"과 "수정" 두 줄을 나란히, 바뀐 낱말만 굵게(
sl-diff). - 요구레벨이 있으면 그 레벨 줄에 "요구" 꼬리표.
- 렌지 초안으로 만든 설명은 "렌지 초안" 꼬리표. 만든 사람이 고친 뒤에는 뗍니다.
접근성
- 서랍은
dialog(비모달), 제목에 포커스.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Overlay" height=300 subtitle="스킬 정의와 레벨 1~5 설명, 원본 대비" -->
<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="sl-detail"><h3>데이터 분석 <span class="sl-status sl-status--attention"><i></i>반영 대기</span></h3><p class="sl-detail__def">자료를 모으고 정리해 판단의 근거를 만드는 능력.</p><div class="sl-detail__lv"><b>Lv 3</b><div class="sl-diff"><span>원본</span><p>정해진 양식으로 보고서를 만든다.</p><span>수정</span><p><strong>대시보드를 직접 설계해</strong> 보고서를 만든다.</p></div></div></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.