StepProgress

원본: projects/skill-lens/design/components/StepProgress/README.md

상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗

상단 단계 표시: 현재 점은 작은 렌즈, 전환 때 미끄러짐

견본만 새 창으로

흐름 위쪽의 단계 표시입니다. 원본은 8판 .stp.

쓰는 곳

온보딩 다섯 단계(Shell 위 바 가운데), 진단 흐름.

구성(화면이 넘겨줄 것)

전체 단계 수, 현재 단계, 단계 이름.

규칙

• 점 10, 선 2(최소 14), 빈 곳은 divider, 지나온 점과 선은 보라.
• 현재 위치는 작은 렌즈(sl-steps__glide, 14 + 연보라 링 4, 안쪽 흰색에서 라임으로)이고 360ms(폰 300) 동안 다음 점으로 미끄러집니다. 위치는 left:calc(5px + (100% - 10px) * 단계비율).
• 단계 글("1/5 회사, 목적, 목표 (2/3)")은 Shell 위 바에서는 숨기고(8판), 다른 자리에서는 보입니다.

접근성

• 점만으로 위치를 전하지 않습니다. 위 바에서도 단계 이름을 화면 읽기 도구용 글(sl-sr)로 둡니다.

견본 코드

AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.

<!-- @dsCard group="Navigation" height=190 subtitle="상단 단계 표시: 현재 점은 작은 렌즈, 전환 때 미끄러짐" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.stack{display:flex;flex-direction:column;gap:var(--space-4)}.wrap{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.cap{font:500 12px/16px var(--font-sans);color:var(--ink-muted)}.card{padding:var(--space-4);background:var(--surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}</style>
<div class="sl stack">

<div style="max-width:360px" class="stack">
<div class="sl-steps"><div class="sl-steps__label"><span>1/5</span><span>회사, 목적, 목표</span><span style="color:var(--ink-subtle)">(1/3)</span></div>
<div class="sl-steps__track"><i class="sl-steps__dot"></i><i class="sl-steps__line"></i><i class="sl-steps__dot"></i><i class="sl-steps__line"></i><i class="sl-steps__dot"></i><i class="sl-steps__line"></i><i class="sl-steps__dot"></i><i class="sl-steps__line"></i><i class="sl-steps__dot"></i><i class="sl-steps__fill" style="width:0%"></i><i class="sl-steps__glide" style="left:0%"></i></div></div>
<div class="sl-steps"><div class="sl-steps__label"><span>3/5</span><span>스킬</span></div>
<div class="sl-steps__track"><i class="sl-steps__dot is-done"></i><i class="sl-steps__line"></i><i class="sl-steps__dot is-done"></i><i class="sl-steps__line"></i><i class="sl-steps__dot"></i><i class="sl-steps__line"></i><i class="sl-steps__dot"></i><i class="sl-steps__line"></i><i class="sl-steps__dot"></i><i class="sl-steps__fill" style="width:50%"></i><i class="sl-steps__glide" style="left:50%"></i></div></div>
</div>
</div>

이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.