BottomCTA
원본: projects/skill-lens/design/components/BottomCTA/README.md
상태: Stable, 접근성 ✓, 다크 ✓, 코드 ✗
하단 고정 CTA: 주 버튼 하나, 이유 한 줄, 보조 링크
화면 아래의 주 행동 영역입니다. 주 버튼 하나와, 버튼이 안 눌리면 그 이유 한 줄.
쓰는 곳
온보딩, 진단, 시트처럼 한 화면에 다음 행동이 하나인 곳.
구성(화면이 넘겨줄 것)
주 버튼 라벨, 비활성 이유, (선택) 이전 버튼.
규칙
- 주 버튼은 하나. 두 번째 행동은 밑줄 링크(
sl-cta__link). - 비활성일 때 이유를 반드시 보입니다.
- 폰에서는 화면 아래 고정이고 높이 56, 전체 폭.
- 위쪽 그라데이션으로 스크롤 내용이 비치지 않게 합니다.
- 누르는 동안
action-pressed, 0.98로 줄어듭니다.
접근성
- 고정 영역이 마지막 내용과 포커스를 가리지 않게 본문 아래 여백을 둡니다.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Actions" height=320 subtitle="하단 고정 CTA: 주 버튼 하나, 이유 한 줄, 보조 링크" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.phone{width:360px;background:var(--surface);border-radius:var(--radius-xl);overflow:hidden;display:flex;flex-direction:column;gap:var(--space-3)}.phone>div:first-child{padding:var(--space-4) var(--space-4) 0;color:var(--ink-subtle);font:400 13px/20px var(--font-sans)}.grid{display:flex;gap:var(--space-4);flex-wrap:wrap}</style>
<div class="sl grid">
<div class="phone"><div>… 화면 내용 …</div><div class="sl-cta"><button class="sl-btn sl-btn--primary">초대</button><div class="sl-cta__reason">보낸 뒤에는 대상자와 기간을 바꿀 수 없어요</div></div></div>
<div class="phone"><div>… 화면 내용 …</div><div class="sl-cta"><div class="sl-cta__row"><button class="sl-btn sl-btn--secondary">이전</button><button class="sl-btn sl-btn--primary" disabled>직무확인</button></div><div class="sl-cta__reason">확인할 직무가 5개 남았어요</div></div></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.