# List
URL: /components/list
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/list.mdx
가로 행으로 구성된 콘텐츠를 표현하는 컴포넌트입니다.
## Anatomy
List Item은 Suffix, Prefix, Title, Detail로 구성됩니다.
**배경색은 가이드에서 시각적 구분을 위해 추가된 것이며, 컴포넌트 자체에는 배경색이 지정되어 있지 않습니다.**
## Properties
### Align Property
Align의 기본값은 Center입니다. Prefix와 Suffix가 콘텐츠 영역의 수직 중앙에 정렬됩니다. Title과 Detail이 한 줄로 짧게 표시되는 경우에 적합합니다.
Align을 Top으로 설정하면 Prefix와 Suffix가 콘텐츠 영역의 상단에 고정됩니다. Title이 길어져 두 줄 이상으로 넘어가거나, Detail 텍스트가 많아질 때 사용합니다.
### Highlighted Property
List 컴포넌트의 Highlighted prop은 새로운 알림이나 업데이트처럼 사용자의 주목이 필요한 항목을 시각적으로 강조할 때 사용합니다.
### List State
List 컴포넌트는 Enabled, Pressed, Disabled 상태를 제공합니다.
### Prefix Property
Prefix Slot은 List 좌측에 위치합니다. List Item 컴포넌트는 Prefix에 여러 가지 타입을 프리셋 형태로 제공합니다. 포함된 타입 이외에 다른 요소를 사용하고 싶은 경우 Custom Child Swap을 통해서 변경해주세요.
### Suffix Property
Suffix는 List 우측에 위치합니다. List Item 컴포넌트는 Suffix에 여러 가지 타입을 프리셋 형태로 제공합니다. 포함된 타입 이외에 다른 요소를 사용하고 싶은 경우 Custom Child Swap을 통해서 변경해주세요.
### Detail Property
Detail은 List 제목 하단에 위치합니다. Sub Text, Tag Group을 기본으로 제공하며 사용처 필요에 따라서 Custom해서 사용할 수 있습니다.
## Guidelines
### List, List Item 사용하기
List Item은 정보를 가로 행으로 묶어서 표현되는 컴포넌트로 사용자가 빠르게 인지하고 단순한 액션을 필요로 할 때 사용해야 합니다. List는 여러개의 List Item을 묶어서 연속된 열로 표현해야할 때 사용합니다.
List의 부모 컨테이너는 사용처의 의도에 맞게 자유롭게 사용할 수 있습니다.
### List Header로 묶어서 사용하기
List를 그룹 단위로 묶어서 표현할 수 있도록 List Header 컴포넌트를 제공합니다.
### List Item 클리커블 사용하지 않기
List Item은 클리커블 동작을 기본으로 포함하고 있습니다. 사용처에서는 의도와 플로우, 맥락에 따라서 클리커블을 직접 제거해서 사용할 수 있습니다.
### List Item 내부 간격 조정
List Item는 높이, 넓이 패딩 간격을 갖고 있으며, 사용처 의도에 따라서 자유롭게 조정해서 사용할 수 있습니다.
- 간격은 SEED에서 제공하는 Token을 활용해주세요.
- 넓이 간격을 조정할 때는 `{global-gutter=16px}` 보다 좁아지지 않도록 주의해주세요.
- 내부 간격을 조정할 때 List 안에서 각 Item의 정렬이 달라지지 않도록 조심하세요.
### List Item 클리커블
List Item은 기본으로 클릭 동작을 제공하며 여러개의 상호작용 가능한 요소와 조합되어 사용할 수 있습니다. List에서 제공하는 Button 컴포넌트 이외에 다른 요소를 Custom하게 사용할 경우 별도 Spec으로 동작 명세를 정의해주세요.
**List Item은 표현 공간에 제약이 있기 때문에 복잡하게 상호작용 요소를 조합하지 마세요.**
### Switch/Checkmark/Radiomark 사용 시
List Item의 prefix나 suffix에 [Switchmark](/components/switch#switchmark), [Checkmark](/components/checkbox#checkmark), [Radiomark](/components/radio#radio-mark)를 넣을 때는 List Item 전체를 하나의 클릭 영역으로 사용하여 행 어디를 눌러도 동작이 일어나도록 합니다. 이 경우 prefix/suffix에 [Action Button](/components/action-button)과 같이 자체 클릭 영역이 필요한 요소를 함께 넣지 않습니다.
약관과 같이 별도 화면에서 확인해야 하는 정보가 있는 경우, 레이블 텍스트 안에 하이퍼링크를 사용하되, 행 동작으로 탭이 전파되지 않도록 처리합니다.
### Concentric Radius
List Item을 포함하는 컨테이너의 모서리 반경(radius)에 맞춰 항목의 pressed-inset radius를 유연하게 조정할 수 있습니다.
리스트가 R값을 가진 카드 컨테이너 안에 포함될 때, 컨테이너와 동일한 반경을 그대로 적용하면 시각적으로 반경이 맞지 않게 보일 수 있습니다.
이를 위해 내부 요소의 Radius는 상위 컨테이너의 반경에서 내부 패딩 값만큼 빼서 적용합니다. 예를 들면, 카드 컨테이너의 Radius가 16px, 카드의 Padding이 6px인 경우, 내부 리스트의 Radius는 = 16px - 6px = 10px입니다.
### List Item을 Select로 Custom하기
List Item에 [Checkbox](/components/checkbox), Radio Mark를 조합한다면 Select로 사용할 수 있습니다. Checkbox는 Multi Select (복수 선택), Radio Mark는 Single Select (단일 선택)을 의미합니다.
Single Select을 사용할 경우 List Item이 반드시 2개 이상 포함되어 있어야 올바르게 Select를 구성할 수 있습니다.
## Specification
### List Item
Component spec (JSON): /rootage/components/list-item.json
### List Header
Component spec (JSON): /rootage/components/list-header.json