LevelPicker
원본: projects/skill-lens/design/components/LevelPicker/README.md
상태: In Progress, 접근성 △(라디오 키보드는 코드 쪽), 다크 ✓, 코드 ✗
스킬 레벨 고르기 1~5: PC는 행 안에서 작게, 폰은 시트. 레벨마다 한 줄 설명
스킬 레벨 1~5를 고릅니다. 레벨마다 그 스킬의 한 줄 설명이 붙습니다.
쓰는 곳
자기진단, 온보딩의 요구레벨 정하기.
구성(화면이 넘겨줄 것)
현재 레벨, 스킬별 레벨 설명(비어 있으면 공통 레벨 가이드 한 줄), 변경 처리.
규칙
- PC: 행 안에서 알약 다섯 + 설명으로 펼칩니다.
- 폰: 시트 목록(번호, 설명), 아래 버튼 "선택".
- 표기는 Lv 1~Lv 5. 단계마다 한글 이름("입문, 능숙" 같은)을 붙이지 않습니다(용어 사전, DEC-180). 설명은 스킬마다 다릅니다.
- 레벨과 중요도(필수, 확장)를 섞지 않습니다.
- 자기진단에서는 숫자보다 행동 설명이 주인공입니다. 화면 꼴(폰 한 스킬씩, PC 묶음)은 화면 설계 단계 후보(
archived/screen-candidates/SelfAssess).
접근성
radiogroup, 각 레벨radio.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Input" height=520 width=820 subtitle="스킬 레벨 고르기 1~5: PC는 행 안에서 작게, 폰은 시트. 레벨마다 한 줄 설명" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.g{display:flex;gap:var(--space-6);align-items:flex-start;flex-wrap:wrap}.pc{width:400px;display:flex;flex-direction:column;gap:var(--space-2)}.phone{position:relative;width:360px;height:480px;overflow:hidden;border-radius:var(--radius-xl);background:var(--surface-sunken)}</style>
<div class="sl g">
<div class="pc">
<div class="sl-row"><span class="sl-check" role="checkbox" aria-checked="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><span class="sl-row__main">제품 로드맵 수립</span><span class="sl-chip sl-chip--kind">하드</span><span class="sl-row__level">Lv 4 <svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></div>
<div class="sl-row sl-row--ai sl-row--stack"><div class="sl-row__head"><span class="sl-check" role="checkbox" aria-checked="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><span class="sl-row__main">데이터 기반 의사결정</span><span class="sl-chip sl-chip--kind">하드</span></div>
<div class="sl-row__sub"><div class="sl-level" role="radiogroup" aria-label="요구 레벨"><button class="sl-level__btn" role="radio" aria-checked="false">Lv 1</button><button class="sl-level__btn" role="radio" aria-checked="false">Lv 2</button><button class="sl-level__btn" role="radio" aria-checked="true">Lv 3</button><button class="sl-level__btn" role="radio" aria-checked="false">Lv 4</button><button class="sl-level__btn" role="radio" aria-checked="false">Lv 5</button></div>
<div class="sl-level__desc"><b>Lv 3</b> 지표를 직접 설계해 의사결정에 쓰고, 다른 사람의 분석을 검토할 수 있어요.</div></div></div>
<div class="sl-row"><span class="sl-check" role="checkbox" aria-checked="false"></span><span class="sl-row__main">이해관계자 조율</span><span class="sl-chip sl-chip--kind">소프트</span><span class="sl-row__level">Lv 3 <svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></div>
</div>
<div class="phone"><div class="sl-scrim"></div><div class="sl-sheet" role="dialog" aria-modal="true"><div class="sl-sheet__handle"></div><div class="sl-sheet__head"><h2 class="sl-sheet__title">데이터 기반 의사결정</h2><p class="sl-sheet__desc">이 직무에 필요한 레벨을 고르세요</p></div>
<div class="sl-sheet__body sl-sheet__body--flush sl-level-list" role="radiogroup">
<div class="sl-level-row" role="radio" aria-checked="false"><span class="sl-level-row__n">1</span><span><span class="sl-level-row__d">용어를 알고 정해진 지표를 읽어요</span></span></div>
<div class="sl-level-row" role="radio" aria-checked="false"><span class="sl-level-row__n">2</span><span><span class="sl-level-row__d">안내에 따라 지표를 뽑고 해석해요</span></span></div>
<div class="sl-level-row" role="radio" aria-checked="true"><span class="sl-level-row__n">3</span><span><span class="sl-level-row__d">지표를 직접 설계해 의사결정에 써요</span></span></div>
<div class="sl-level-row" role="radio" aria-checked="false"><span class="sl-level-row__n">4</span><span><span class="sl-level-row__d">팀의 분석 기준을 정하고 검토해요</span></span></div>
<div class="sl-level-row" role="radio" aria-checked="false"><span class="sl-level-row__n">5</span><span><span class="sl-level-row__d">조직의 데이터 체계를 설계해요</span></span></div></div>
<div class="sl-cta"><button class="sl-btn sl-btn--primary">Lv 3 확정</button></div></div></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.