Banner
원본: projects/skill-lens/design/components/Banner/README.md
상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗
안내 상자(8판 .note, .ai): 연보라 기본, 회색, 산호 옅은 바탕, 렌지 안내. 행동은 하나까지
지금 상태와 할 일을 한두 줄로 알리는 안내 상자입니다. 원본은 8판 .note와 .ai.
쓰는 곳
"46개를 다 열지 않아도 돼요" 같은 안내, 검토대기, 렌지가 찾은 내용, 결과확정 막힘("검토필요 n명 남았어요", "반영 대기 n건 남았어요": 확인 필요 톤 + 남은 목록으로 가는 행동 하나, 도메인 규칙 6).
구성(화면이 넘겨줄 것)
톤, 문장 한두 줄, (선택) 행동 버튼 하나.
규칙
- 기본: 연보라 바탕, 둥글기 12, 안쪽 14 16, 글자 14, 굵은 구절은 보라.
--muted(회색),--warn(산호 옅은 바탕, 옛--attention과 같음),--done,--locked.- 렌지 안내(
--ai): 둥글기 14, 머리 줄(sl-banner__head, 렌즈 점 + 13 보라 600), 끝 줄(sl-banner__foot, 13 회색). - 한 화면에 하나. 오류는 그 자리에.
접근성
role="status".
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Feedback" height=420 width=880 subtitle="안내 상자(8판 .note, .ai): 연보라 기본, 회색, 산호 옅은 바탕, 렌지 안내. 행동은 하나까지" -->
<style>body{margin:0;padding:var(--space-6);background:var(--canvas)}.stack{display:flex;flex-direction:column;gap:var(--space-6)}.w880{max-width:814px}</style><div class="sl stack w880" style="gap:var(--space-3)">
<div class="sl-banner" role="status"><span>46개를 다 열지 않아도 돼요. <b>렌지가 짚은 직무 2개</b>만 보고 넘어가도 괜찮아요</span></div>
<div class="sl-banner sl-banner--muted" role="status"><span>초대를 보내기 전까지 바꿀 수 있어요</span></div>
<div class="sl-banner sl-banner--warn" role="status"><span><b>검토필요 3명이 남았어요.</b> 모두 검토해야 결과를 확정할 수 있어요</span><button class="sl-btn sl-btn--secondary sl-btn--sm">목록</button></div>
<div class="sl-banner sl-banner--ai" role="status"><span class="sl-banner__head"><i class="sl-lens-dot"></i>렌지가 찾았어요</span>가온에듀는 교육 서비스업, 직원 210명이에요<div class="sl-banner__foot">DART와 국민연금 사업장 자료 기준이에요</div></div>
<div class="sl-banner sl-banner--locked" role="status"><span><b>회차가 확정됐어요.</b> 스킬셋은 스킬셋 개선에서 고칠 수 있어요</span></div>
</div>이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.