DatePicker
원본: projects/skill-lens/design/components/DatePicker/README.md
상태: In Progress, 접근성 △(달력 키보드는 코드 쪽), 다크 ✓, 코드 ✗
날짜 고르기: 추천 날짜 칩 셋 + 달력. 오늘보다 앞은 못 고름. 폰은 시트
날짜 하나를 고릅니다. 추천 날짜 칩이 먼저, 달력이 다음입니다.
쓰는 곳
진단 마감일.
구성(화면이 넘겨줄 것)
라벨, 오늘 날짜, 추천 셋의 이름과 날짜, 고른 날짜, 안내 문장.
규칙
- 칩에는 이름과 실제 날짜를 같이 씁니다("2주 뒤 11. 20.").
- 오늘보다 앞은 흐리게 막고, 오늘은 테두리, 추천은 연보라, 고른 날은 채움. 넷의 모양이 모두 다릅니다.
- 표기는 "11. 20. (금)". 요일을 같이 씁니다.
- 한 달만 보이고 화살표로 넘깁니다.
- PC는 입력란 아래 펼침, 폰은 시트(아래 버튼에 고른 날짜).
접근성
- 날짜 칸은
aria-selected, 달력은grid.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Input" height=520 width=820 subtitle="날짜 고르기: 추천 날짜 칩 셋 + 달력. 오늘보다 앞은 못 고름. 폰은 시트" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.g{display:flex;gap:var(--space-6);align-items:flex-start;flex-wrap:wrap}.pc{width:360px}.phone{position:relative;width:360px;height:470px;overflow:hidden;border-radius:var(--radius-xl);background:var(--surface-sunken)}</style>
<div class="sl g">
<div class="pc sl-date"><label class="sl-field is-filled"><span class="sl-field__label">응답 마감일</span><span class="sl-field__box"><input class="sl-field__input" value="2026. 11. 20. (금)"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></label>
<div class="sl-date__chips"><button class="sl-date__chip" aria-pressed="false">열흘 뒤<small>11. 16. (월)</small></button><button class="sl-date__chip" aria-pressed="true">2주 뒤<small>11. 20. (금)</small></button><button class="sl-date__chip" aria-pressed="false">이달 말<small>11. 30. (월)</small></button></div>
<div class="sl-cal"><div class="sl-cal__head"><button class="sl-cal__nav" aria-label="지난달"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button><span>2026년 11월</span><button class="sl-cal__nav" aria-label="다음달"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button></div>
<div class="sl-cal__grid"><span class="sl-cal__dow">일</span><span class="sl-cal__dow">월</span><span class="sl-cal__dow">화</span><span class="sl-cal__dow">수</span><span class="sl-cal__dow">목</span><span class="sl-cal__dow">금</span><span class="sl-cal__dow">토</span>
<button class="sl-cal__day is-past">1</button><button class="sl-cal__day is-past">2</button><button class="sl-cal__day is-past">3</button><button class="sl-cal__day is-past">4</button><button class="sl-cal__day is-past">5</button><button class="sl-cal__day is-today">6</button><button class="sl-cal__day">7</button>
<button class="sl-cal__day">8</button><button class="sl-cal__day">9</button><button class="sl-cal__day">10</button><button class="sl-cal__day">11</button><button class="sl-cal__day">12</button><button class="sl-cal__day">13</button><button class="sl-cal__day">14</button>
<button class="sl-cal__day">15</button><button class="sl-cal__day is-suggested">16</button><button class="sl-cal__day">17</button><button class="sl-cal__day">18</button><button class="sl-cal__day">19</button><button class="sl-cal__day" aria-selected="true">20</button><button class="sl-cal__day">21</button>
<button class="sl-cal__day">22</button><button class="sl-cal__day">23</button><button class="sl-cal__day">24</button><button class="sl-cal__day">25</button><button class="sl-cal__day">26</button><button class="sl-cal__day">27</button><button class="sl-cal__day">28</button>
<button class="sl-cal__day">29</button><button class="sl-cal__day is-suggested">30</button></div></div>
<div class="sl-date__hint">마감 뒤에는 응답을 받지 않아요. 기간은 보낸 뒤 바꿀 수 없어요.</div></div>
<div class="phone"><div class="sl-scrim"></div><div class="sl-sheet" role="dialog" aria-modal="true"><div class="sl-sheet__handle"></div><div class="sl-sheet__head"><h2 class="sl-sheet__title">응답 마감일</h2><p class="sl-sheet__desc">오늘 11. 6.부터 고를 수 있어요</p></div>
<div class="sl-sheet__body sl-sheet__body--flush sl-date"><div class="sl-date__chips"><button class="sl-date__chip" aria-pressed="false">열흘 뒤<small>11. 16.</small></button><button class="sl-date__chip" aria-pressed="true">2주 뒤<small>11. 20.</small></button><button class="sl-date__chip" aria-pressed="false">이달 말<small>11. 30.</small></button></div>
<div class="sl-cal sl-cal--bare"><div class="sl-cal__head"><button class="sl-cal__nav"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m15 18-6-6 6-6"/></svg></button><span>2026년 11월</span><button class="sl-cal__nav"><svg class="sl-ico sl-ico--sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg></button></div>
<div class="sl-cal__grid"><span class="sl-cal__dow">일</span><span class="sl-cal__dow">월</span><span class="sl-cal__dow">화</span><span class="sl-cal__dow">수</span><span class="sl-cal__dow">목</span><span class="sl-cal__dow">금</span><span class="sl-cal__dow">토</span>
<button class="sl-cal__day is-past">1</button><button class="sl-cal__day is-past">2</button><button class="sl-cal__day is-past">3</button><button class="sl-cal__day is-past">4</button><button class="sl-cal__day is-past">5</button><button class="sl-cal__day is-today">6</button><button class="sl-cal__day">7</button>
<button class="sl-cal__day">8</button><button class="sl-cal__day">9</button><button class="sl-cal__day">10</button><button class="sl-cal__day">11</button><button class="sl-cal__day">12</button><button class="sl-cal__day">13</button><button class="sl-cal__day">14</button>
<button class="sl-cal__day">15</button><button class="sl-cal__day is-suggested">16</button><button class="sl-cal__day">17</button><button class="sl-cal__day">18</button><button class="sl-cal__day">19</button><button class="sl-cal__day" aria-selected="true">20</button><button class="sl-cal__day">21</button>
<button class="sl-cal__day">22</button><button class="sl-cal__day">23</button><button class="sl-cal__day">24</button><button class="sl-cal__day">25</button><button class="sl-cal__day">26</button><button class="sl-cal__day">27</button><button class="sl-cal__day">28</button>
<button class="sl-cal__day">29</button><button class="sl-cal__day is-suggested">30</button></div></div></div>
<div class="sl-cta"><button class="sl-btn sl-btn--primary">확정</button></div></div></div>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.