ScoreBreakdown
원본: projects/skill-lens/design/components/ScoreBreakdown/README.md
상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗
SRS 총점 + 네 부분 + 기준 인원
SRS(스킬준비도) 총점과 네 부분(충족도 70, 다양성 10, 균형 10, 참여도 10)을 한 장에 보입니다.
쓰는 곳
조직 결과 머리, 내 스킬준비도, 검토 서랍.
구성(화면이 넘겨줄 것)
총점, 목표 점수, 네 부분의 점수와 만점, 기준 인원("검토완료 n명 기준"), (선택) 지난 회차 대비.
규칙
- 총점은 큰 숫자, 바로 옆에 목표 대비("목표 75 중 68, 91%").
- 부분은 막대 넷, 막대 길이는 만점 대비. 만점이 다르므로(70, 10, 10, 10) 각 막대 옆에 "52 / 70"처럼 씁니다.
- "스킬셋 그대로만" 조직은 참여도 막대를 빼고 충족도 만점을 80으로.
- 조직 화면에는 "검토완료 n명 기준"을 늘 적습니다.
- 계산을 확인할 수 없으면 숫자 대신 "확인할 수 없음".
- 사람을 줄 세우는 점수가 아닙니다. 순위나 상위 n%를 붙이지 않습니다.
- 산식 보기는
Disclosure로 접어 둡니다.
접근성
- 막대는 장식이고 숫자 글이 뜻을 전합니다.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Data" height=260 subtitle="SRS 총점 + 네 부분 + 기준 인원" -->
<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-score-break"><div class="sl-score-break__head"><b class="sl-score-break__total">68</b><span>목표 75 중 91%<br><small>검토완료 42명 기준</small></span></div><div class="sl-score-break__row"><span>요구레벨 충족도</span><i class="p74"></i><em>52 / 70</em></div><div class="sl-score-break__row"><span>다양성</span><i class="p60"></i><em>6 / 10</em></div><div class="sl-score-break__row"><span>균형</span><i class="p50"></i><em>5 / 10</em></div><div class="sl-score-break__row"><span>참여도</span><i class="p50"></i><em>5 / 10</em></div></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.