ContentsList
Dark Mode다수의 Title-Value 쌍을 나열하는 리스트 컴포넌트입니다. Table(2열 그리드)과 List(1열 세로) 두 가지 레이아웃을 지원하며, 각 항목에 좌·우 아이콘을 배치할 수 있습니다.
import { ContentsList } from "@/shared/ui/common"인터랙티브 데모
기업명
디캠프 주식회사대표자
홍길동설립일
2020.01.15업종
소프트웨어 개발tsx
const items = [
{ title: "기업명", value: "디캠프 주식회사" },
{ title: "대표자", value: "홍길동" },
{ title: "설립일", value: "2020.01.15" },
{ title: "업종", value: "소프트웨어 개발" },
];
<ContentsList
items={items}
/>Layouts
Table은 2열 그리드로 넓은 영역에, List는 1열 세로로 좁은 영역에 적합합니다.
Table (2열)
기업명
디캠프 주식회사대표자
홍길동설립일
2020.01.15업종
소프트웨어 개발직원 수
42명투자 단계
Series AList (1열)
기업명
디캠프 주식회사대표자
홍길동설립일
2020.01.15업종
소프트웨어 개발직원 수
42명투자 단계
Series AItem Counts
항목 개수별 레이아웃 비교입니다. Table 레이아웃에서 홀수 개일 경우 마지막 행은 1개만 표시됩니다.
Table
3 Items
기업명
디캠프 주식회사대표자
홍길동설립일
2020.01.154 Items
기업명
디캠프 주식회사대표자
홍길동설립일
2020.01.15업종
소프트웨어 개발5 Items
기업명
디캠프 주식회사대표자
홍길동설립일
2020.01.15업종
소프트웨어 개발직원 수
42명6 Items
기업명
디캠프 주식회사대표자
홍길동설립일
2020.01.15업종
소프트웨어 개발직원 수
42명투자 단계
Series AList
3 Items
기업명
디캠프 주식회사대표자
홍길동설립일
2020.01.154 Items
기업명
디캠프 주식회사대표자
홍길동설립일
2020.01.15업종
소프트웨어 개발6 Items
기업명
디캠프 주식회사대표자
홍길동설립일
2020.01.15업종
소프트웨어 개발직원 수
42명투자 단계
Series AWith Icons
각 항목의 제목에 왼쪽/오른쪽 아이콘을 배치할 수 있습니다.
Table + Icons
매출 추이
1,240만 원회계 기간
2024.Q4상세 정보
보기투자 현황
50억List + Icons
매출 추이
1,240만 원회계 기간
2024.Q4상세 정보
보기투자 현황
50억Props
ContentsList
| Prop | Type | Required | Default | 설명 |
|---|---|---|---|---|
items | ContentsListItem[] | ✓ | — | 표시할 항목 목록 |
layout | "table" | "list" | — | "table" | 레이아웃 (table: 2열 그리드 / list: 1열 세로) |
className | string | — | — | 추가 CSS 클래스 |
ContentsListItem
| Prop | Type | Required | Default | 설명 |
|---|---|---|---|---|
title | string | ✓ | — | 항목 제목 |
value | string | ✓ | — | 항목 값 |
leftIcon | ComponentType<{ className?: string }> | — | — | 제목 앞 아이콘 |
rightIcon | ComponentType<{ className?: string }> | — | — | 제목 뒤 아이콘 |