Composer
원본: projects/skill-lens/design/components/Composer/README.md
상태: Experimental(초안), 접근성 △, 다크 ✓, 코드 ✗
메일 쓰기: 받는 사람, 미리보기, 보내지 않는 사람
초대, 독려, 재진단 메일을 보내기 전에 받는 사람과 글을 확인하는 창(PC는 서랍, 폰은 전체 화면)입니다.
쓰는 곳
실무자 명단의 초대, 독려, 재진단.
구성(화면이 넘겨줄 것)
받는 사람 수와 빠지는 사람(이유별), 제목, 본문(바꿀 수 있는 자리 {이름}, {마감}), 미리보기.
규칙
- 맨 위에 "42명에게 보내요"와 빠지는 사람("3명은 이미 제출해 빠져요")을 먼저.
- 본문은 고칠 수 있지만 링크와 마감 자리는 지울 수 없습니다.
- 미리보기는 실제 받는 사람 한 명의 이름으로.
- 24시간 안에 같은 메일을 받은 사람은 다시 보내지 않고 수만 알립니다.
- 보내기는 되돌릴 수 없으므로 아래 버튼은
sl-btn--final, 확인 창 없이 이 화면이 확인을 대신합니다.
접근성
- 미리보기 영역은
region과 라벨.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Overlay" height=330 subtitle="메일 쓰기: 받는 사람, 미리보기, 보내지 않는 사람" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.stack{display:flex;flex-direction:column;gap:var(--space-3)}.wrap{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}</style>
<div class="sl stack">
<div class="sl-composer"><div class="sl-composer__to"><b>42명에게 보내요</b><span>3명은 이미 제출해 빠져요</span></div><label class="sl-field is-filled"><span class="sl-field__label">제목</span><span class="sl-field__box"><input class="sl-field__input" value="스킬 진단을 부탁드려요"></span></label><div class="sl-composer__preview"><small>미리보기: 김하나 님</small><p>김하나 님, 11. 20. (금)까지 스킬 진단을 마쳐 주세요.</p></div><div class="sl-review__foot"><button class="sl-btn sl-btn--primary sl-btn--final">전송</button></div></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.