P06 목록과 그리드

상호작용 확인

행 목록, 카드 목록, 섹션 묶음

구성

행 목록, 카드 목록, 섹션 묶음

구성 컴포넌트

전체 구역 프리뷰

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다. 아래 컨트롤로 구성을 바꾸면 코드도 바뀝니다.

진행 중3

검토 중2

예정2

보기

결과 없음선택: ADX-101

<ListSection id="progress" title="진행 중" icon={<StatusIcon … />} count={3}
  action={<Button size="icon-xs" aria-label="진행 중 상태로 새 이슈">…</Button>}>
  <ListRow selected={id === selectedId} onSelect={() => select(id)}>
    …행 내용
  </ListRow>
</ListSection>

상태 흐름

행을 고르면 왼쪽 강조선과 선택 배경이 생기고 aria-current="true"가 붙는다. 상세 패널(P08)을 여는 쪽은 쓰는 화면이 정한다.
묶음 머리는 스크롤해도 위에 붙고, 오른쪽에 그 상태로 새로 만들기 같은 동작을 둔다.
결과가 없으면 목록 대신 ListEmpty를 둔다(제목과 다음 행동 안내).
행 높이는 row.height(크기 모드에 따라 44px, 큰 글씨에서 커짐), 카드 목록은 보드 열(P07)에도 쓴다.

샘플 데이터

이슈 예제의 샘플 이슈 7개(src/components/issues/data.ts의 initialIssues).

설치 항목

패턴은 아직 Registry 항목이 없습니다. 구성 컴포넌트를 설치한 뒤 아래 파일을 프로젝트에 복사합니다.

npx shadcn@4.23.0 add @adcapsule/button @adcapsule/badge @adcapsule/avatar

파일: src/components/patterns/grouped-list.tsx
내보내는 이름: ListSection, ListRow, ListCard, ListEmpty

이 패턴을 쓰는 템플릿

실제로 쓰는 화면: 이슈 작업 공간