DataTablePhone
원본: projects/skill-lens/design/components/DataTablePhone/README.md
상태: In Progress, 접근성 ✓, 다크 ✓, 코드 ✗
표의 폰 꼴(767px 이하): 행 하나가 카드 한 장. 상태와 행동이 항상 보임
DataTable의 폰 꼴입니다. 행 하나가 카드 한 장이 됩니다.
쓰는 곳
767px 이하의 모든 표.
구성(화면이 넘겨줄 것)
DataTable과 같은 데이터.
규칙
- 카드: 머리(체크, 이름과 이메일, 상태 칩), 정보 줄(라벨 + 값), 행동 줄.
- 상태 색과 행동 라벨은 표와 같아야 합니다.
- 맨 위에 전체 선택과 "1,248명 중 3명 표시, 1명 선택", 맨 아래 쪽 넘김 폰 꼴.
- 폰에서는 정렬과 열 숨기기를 두지 않고 검색과 필터로 대신합니다.
접근성
- 가로 스크롤로 상태와 행동을 숨기지 않습니다.
견본 코드
AI 읽기 도구는 위 견본(iframe)을 그리지 못하므로 같은 견본의 HTML을 글로 둔다. 스타일은 bundle.css, 값은 tokens.css.
<!-- @dsCard group="Display" height=560 subtitle="표의 폰 꼴(767px 이하): 행 하나가 카드 한 장. 상태와 행동이 항상 보임" -->
<style>body{margin:0;padding:var(--space-4);background:var(--surface-sunken)}.phone{width:360px}</style>
<div class="sl phone sl-rowcards">
<div class="sl-rowcards__bar"><span class="sl-check" role="checkbox" aria-checked="mixed" aria-label="전체 선택"></span><span>1,248명 중 3명 표시, 1명 선택</span></div>
<div class="sl-rowcard is-selected"><div class="sl-rowcard__head"><span class="sl-check" role="checkbox" aria-checked="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><span><div class="sl-rowcard__name">김담당</div><div class="sl-rowcard__email">[email protected]</div></span><span class="sl-rowcard__status sl-chip sl-chip--success">자동 연결</span></div><div class="sl-rowcard__facts"><span>그룹 <b>교육사업본부</b></span><span>직무 <b>서비스 PM</b></span></div><div class="sl-rowcard__actions"><button class="sl-btn sl-btn--secondary sl-btn--sm">수정</button></div></div>
<div class="sl-rowcard"><div class="sl-rowcard__head"><span class="sl-check" role="checkbox" aria-checked="false"></span><span><div class="sl-rowcard__name">박실무</div><div class="sl-rowcard__email">[email protected]</div></span><span class="sl-rowcard__status sl-chip sl-chip--success">자동 연결</span></div><div class="sl-rowcard__facts"><span>그룹 <b>콘텐츠팀</b></span><span>직무 <b>발전교육 운영</b></span></div><div class="sl-rowcard__actions"><button class="sl-btn sl-btn--secondary sl-btn--sm">수정</button></div></div>
<div class="sl-rowcard is-attention"><div class="sl-rowcard__head"><span class="sl-check" role="checkbox" aria-checked="false"></span><span><div class="sl-rowcard__name">이확인</div><div class="sl-rowcard__email">[email protected]</div></span><span class="sl-rowcard__status sl-chip sl-chip--danger">확인 필요</span></div><div class="sl-rowcard__facts"><span>그룹 <b>신사업TF</b></span><span>직무 <b>없음</b></span></div><div class="sl-rowcard__actions"><button class="sl-btn sl-btn--primary sl-btn--sm">직무선택</button><button class="sl-btn sl-btn--secondary sl-btn--sm">합치기</button></div></div>
<nav class="sl-pager sl-pager--bare" aria-label="쪽 넘김"><span class="sl-pager__count"><b>1~20</b> / 1,248명</span><div class="sl-pager__nav"><button class="sl-pager__btn sl-pager__btn--arrow" disabled><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><button class="sl-pager__btn sl-pager__btn--arrow"><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></nav>
</div>
이 사이트는 ideber 저장소 projects/skill-lens/ 에서 자동으로 만들어집니다. 고칠 때는 저장소를 고칩니다. 공개 주소이지만 검색엔진에는 나오지 않습니다.