② 목록 — 표 · 필터 · 선택 액션

가장 많이 만드는 화면입니다. 위에서부터 찾기 → 좁히기 → 고르기 → 처리하기 순서로 배치합니다.

배치 순서

드롭다운 안에만 두면 사용자는 왜 결과가 적은지 모릅니다. 적용된 필터를 태그로 꺼내 놓으세요. 각 태그에 제거 버튼(close 아이콘)과 aria-label을 붙입니다.

아무것도 선택하지 않았는데 “일괄 발행” 버튼이 떠 있으면 누를 수 없는 버튼이 화면을 차지합니다. 0건일 때는 숨기고, 1건 이상일 때 나타나게 하세요.

🚫

어두운 .jt-bulkbar 위의 ghost 버튼은 글자색만 바꾸면 흰 배경 + 흰 글자가 되어 사라집니다. 시스템이 --jt-btn-bg: transparent까지 처리해 두었으니 그대로 쓰세요.

전체 <span class="jt-num">128</span>건 중 <span class="jt-num">1–4</span>

무한 스크롤은 “전체 몇 건인지” 감이 없어 업무 화면에는 맞지 않습니다. 페이지네이션을 쓰고 총 건수를 함께 적으세요.

<div class="jt-table-wrap" data-sticky-head>
  <table class="jt-table">…</table>
</div>

jt-table-wrap이 없으면 좁은 화면에서 가로 스크롤이 페이지 전체로 번집니다. data-sticky-head는 긴 표에서 헤더를 고정합니다.

열이 4개를 넘으면 모바일에서 표는 읽을 수 없습니다. .jt-card-row로 전환하세요. ⑤ 모바일 내비게이션의 왼쪽 예시가 그 형태입니다.