Dialog
원본: projects/skill-lens/design/components/Dialog/README.md
상태: In Progress, 접근성 △(포커스 가두기는 코드 쪽), 다크 ✓, 코드 ✗
확인 창: 되돌릴 수 없는 행동 전에만
되돌릴 수 없는 행동 앞에서만 묻는 확인 창입니다. 원본은 8판 .dlg.
쓰는 곳
초대 전송, 결과확정, 대상자 제외, 직무 겹침, 처음부터 다시, 세션 만료.
구성(화면이 넘겨줄 것)
질문형 제목(숫자 포함), 설명, 버튼 둘.
규칙
- 화면 위 40% 자리, 폭 440(폰은 좌우 20), 둥글기 16, 안쪽 24, 사이 12, 제목 20.
- 버튼은 오른쪽에 붙여 놓고(사이 10), 오른쪽이 주 행동.
- 지우거나 빼는 행동은
sl-dialog--danger. 한 흐름에 하나까지.
접근성
role="alertdialog", 열리면 포커스는 닫기 버튼으로.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Overlay" height=300 subtitle="확인 창: 되돌릴 수 없는 행동 전에만" -->
<style>body{margin:0;padding:var(--space-4);background:var(--canvas)}.wrap{display:flex;gap:var(--space-4);flex-wrap:wrap}.phone{position:relative;width:360px;height:260px;overflow:hidden;border-radius:var(--radius-xl);background:var(--surface-sunken)}</style>
<div class="sl wrap">
<div class="phone"><div class="sl-scrim"></div><div class="sl-dialog" role="alertdialog" aria-modal="true"><h2 class="sl-dialog__title">1,248명에게 초대를 보낼까요?</h2><p class="sl-dialog__desc">보낸 뒤에는 대상자와 기간을 바꿀 수 없어요. 스킬셋은 계속 고칠 수 있어요.</p><div class="sl-dialog__actions"><button class="sl-btn sl-btn--secondary">아직이요</button><button class="sl-btn sl-btn--primary sl-btn--final">전송</button></div></div></div>
<div class="phone"><div class="sl-scrim"></div><div class="sl-dialog sl-dialog--danger" role="alertdialog" aria-modal="true"><h2 class="sl-dialog__title">45명을 빼고 계속할까요?</h2><p class="sl-dialog__desc">직무가 연결되지 않은 45명은 이번 진단에서 빠져요. 나중에 추가할 수 있어요.</p><div class="sl-dialog__actions"><button class="sl-btn sl-btn--secondary">이전</button><button class="sl-btn sl-btn--primary">제외</button></div></div></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.