BottomSheet
원본: projects/skill-lens/design/components/BottomSheet/README.md
상태: In Progress, 접근성 △(포커스 가두기는 코드 쪽), 다크 ✓, 코드 ✗
바텀시트: 손잡이, 제목, 목록, 하단 CTA
화면을 떠나지 않고 세부를 보거나 고치는 시트입니다. 원본은 8판 .sheet: PC는 오른쪽, 폰은 아래.
쓰는 곳
직무시트, 스킬셋 보기, 파일 읽은 결과, 메일 미리 보기, 폰의 선택 목록.
구성(화면이 넘겨줄 것)
제목, 한 줄 설명, 본문, 버튼(sl-sheet__foot), 닫기.
규칙
- PC(
sl-sheet--side): 오른쪽 520 전체 높이, 왼쪽 1px 선 + 왼쪽 그림자, 안쪽 24 사이 16. 폰에서는 아래 72% 시트가 됩니다. - 폰(
sl-sheet): 아래, 위 둥글기 18, 손잡이. - 버튼은 아래 오른쪽, 사이 10. 뒤는
scrim(먹색 35%). - 시트 안에 시트를 열지 않습니다.
접근성
role="dialog",aria-modal="true", 제목을aria-labelledby로. 손잡이의 누름 영역은 64×44.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Overlay" height=460 subtitle="바텀시트: 손잡이, 제목, 목록, 하단 CTA" -->
<style>body{margin:0;padding:var(--space-4);background:var(--canvas)}.phone{position:relative;width:360px;height:420px;overflow:hidden;border-radius:var(--radius-xl);background:var(--surface-sunken)}.phone>.bg{padding:var(--space-5);font:400 13px/20px var(--font-sans);color:var(--ink-subtle)}</style>
<div class="sl phone"><div class="bg">… 뒤 화면 …</div><div class="sl-scrim"></div>
<div class="sl-sheet" role="dialog" aria-modal="true" aria-labelledby="t1">
<div class="sl-sheet__handle"></div>
<div class="sl-sheet__head"><h2 class="sl-sheet__title" id="t1">서비스 PM의 스킬셋</h2><p class="sl-sheet__desc">스킬 6개, 진단 스킬 3개</p></div>
<div class="sl-sheet__body">
<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</span></div>
<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 3</span></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</span></div>
</div>
<div class="sl-cta"><button class="sl-btn sl-btn--primary">확인</button></div>
</div></div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.