List

항목들을 깔끔하게 나열하기 위한 리스트 컴포넌트

개요

  • 첫 번째 항목
  • 두 번째 항목
  • 세 번째 항목

설치

사용법

List와 ListItem을 import하여 사용합니다. variant로 리스트 스타일을 지정합니다.

예제

순서 없는 목록

unordered, dash, check 세 가지 variant를 제공합니다.

Unordered (•) - 기본
  • 첫 번째 항목
  • 두 번째 항목
  • 세 번째 항목
Dash (−) - 보조 항목
  • 대시 항목 1
  • 대시 항목 2
  • 대시 항목 3
Check (✓) - 완료/체크 항목
  • 완료된 항목 1
  • 완료된 항목 2
  • 완료된 항목 3

순서 있는 목록

ordered, ordered-alpha, ordered-circle 세 가지 variant를 제공합니다.

Ordered (1, 2, 3...) - 숫자 순서
  1. 첫 번째 단계
  2. 두 번째 단계
  3. 세 번째 단계
Ordered Alpha (a, b, c...) - 알파벳 순서
  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목
Ordered Circle (①, ②, ③...) - 원형 번호
  1. 첫 번째 항목
  2. 두 번째 항목
  3. 세 번째 항목

2depth 중첩 리스트

ListItem 내부에 List를 중첩하면 자동으로 dash 스타일이 적용됩니다.

  • 사용자가 한 개의 항목을 선택할 수 있는 경우
    • 라디오 버튼을 사용합니다
  • 옵션을 선택하거나 해제하는 경우
    • 토글 스위치를 사용합니다
    • 부분적으로 옵션을 활성화할 수 있습니다
  • 여러 개의 항목을 선택할 수 있는 경우
    • 체크박스를 사용합니다
    • 선택된 항목의 개수를 표시할 수 있습니다

3depth 중첩 리스트

최대 3단계까지 중첩이 가능하며, 각 레벨마다 다른 인디케이터가 적용됩니다.

  • 컴포넌트 설계 원칙
    • 접근성을 최우선으로 고려
      • 키보드 내비게이션 지원
      • 스크린 리더 호환성
      • ARIA 속성 활용
    • 일관된 디자인 시스템
      • KRDS 색상 팔레트 준수
      • 타이포그래피 규칙 적용
  • 개발 가이드
    • 코드 품질 관리
      • TypeScript 타입 안정성
      • ESLint 규칙 준수

간격

spacing prop으로 항목 간 간격을 조절합니다.

Tight - 간격이 좁은 경우
  • 항목 1
  • 항목 2
  • 항목 3
Default - 일반적인 경우
  • 항목 1
  • 항목 2
  • 항목 3
Loose - 간격이 넓은 경우
  • 항목 1
  • 항목 2
  • 항목 3

접근성

List는 WCAG 2.1 / KWCAG 2.2 Level AA 기준을 준수합니다.

  • 시맨틱 HTML: <ul>, <ol>, <li> 태그를 사용하여 스크린 리더를 지원합니다.
  • 자동 중첩 처리: ListItem 안에 List를 넣으면 자동으로 depth가 증가하며 적절한 들여쓰기와 아이콘을 제공합니다 (최대 3depth).
  • CSS ::before 활용: 인디케이터는 ::before 가상 요소로 구현되어 깔끔한 마크업을 유지합니다.