Structured List
복잡한 콘텐츠를 카드 형식으로 정리하여 표시하는 구조화 목록 컴포넌트입니다.
개요
배지, 타이틀, 설명, 날짜, 태그, 액션 버튼 등 다양한 정보를 포함하는 복잡한 콘텐츠를 카드 형식으로 표시합니다.
StructuredList 컴포넌트 미리보기
npx hanui add structured-list로 설치하세요.설치
사용법
StructuredList 컴포넌트를 import하고 items 배열을 전달하여 사용합니다.
예제
레이아웃
variant prop으로 세로형(default)과 가로형(full) 레이아웃을 선택할 수 있습니다.
크기
size prop으로 카드 크기를 조절할 수 있습니다.
배지 스타일
badge.variant로 primary, success, secondary 스타일을 지정합니다.
공유/찜 기능
showShare, showLike prop과 onShare, onLike 핸들러로 공유/찜 기능을 구현합니다.
접근성
StructuredList는 WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.
- Semantic HTML: <ul>, <li> 요소를 사용한 시맨틱 마크업
- 키보드 접근성: 모든 링크와 버튼에 Tab으로 접근 가능
- 포커스 표시: 키보드 포커스 시 명확한 아웃라인 표시
- 명도 대비: WCAG AA 기준 색상 대비 준수
- 반응형: 모바일 환경에서 터치 친화적인 레이아웃
- 버튼에 title 속성으로 스크린리더 사용자를 위한 컨텍스트 제공