Timeline
시간 순서에 따라 항목을 카드 형태로 표시하는 타임라인 컴포넌트
개요
Timeline은 Collapsible 영역 안에 시간순 카드 목록을 표시하며, 무한 스크롤로 추가 데이터를 로드할 수 있는 컴포넌트입니다.
주요 특징
- ✅ 시간순 카드: 각 항목을 날짜·제목·내용 구조의 카드로 표시
- ✅ 접기/펼치기: Collapsible 영역으로 콘텐츠 접기·펼치기 지원
- ✅ 무한 스크롤: 스크롤 하단 도달 시 onLoadMore 콜백으로 추가 데이터 로드
- ✅ 로딩 상태: loading prop으로 로딩 오버레이 표시
- ✅ 빈 데이터 상태: 데이터가 없을 때 안내 메시지 표시
- ✅ 영역별 스타일: timestampStyle, titleStyle, contentStyle로 커스터마이징
기본 사용
title과 items 배열을 전달합니다.
Preview
빈 데이터 상태
items가 빈 배열이면 emptyText가 표시됩니다.
Preview
로딩 상태
loading prop으로 로딩 인디케이터를 표시합니다.
Preview
접기/펼치기
defaultCollapsed로 초기 접힘 상태를, collapseDisabled로 접기 잠금을 설정합니다.
Preview
ScrollArea 내부 스크롤
Timeline의 항목 영역은 Foundation ScrollArea / ScrollBar를 사용합니다. height, fullSize, hasMore, loading, onLoadMore 등 공개 API는 바뀌지 않으며, 하단 도달 여부는 내부 Viewport의 실제 위치를 기준으로 계산합니다. 제목과 접기/펼치기 영역은 스크롤 영역 밖에 유지됩니다.
스크롤바는 List의 스크롤바 스타일 예제처럼 Timeline을 감싼 요소에서 중첩된 [data-token="scroll-area"]를 선택해 같은 Foundation 토큰으로 꾸밀 수 있습니다.
무한 스크롤
onLoadMore와 hasMore를 사용하여 스크롤 하단 도달 시 추가 데이터를 로드합니다.
Preview
영역별 스타일
timestampStyle, titleStyle, contentStyle로 각 영역의 폰트·색상을 커스터마이징합니다.
Preview
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Collapsible 헤더에 표시할 제목 |
items | TimelineItem[] | [] | 타임라인 데이터 배열 |
loading | boolean | false | 로딩 상태 표시 |
hasMore | boolean | false | 추가 데이터 존재 여부 (false면 무한 스크롤 중단) |
pageSize | number | 10 | 한 번에 로드할 데이터 수 (정보성) |
collapseDisabled | boolean | false | 접기/펼치기 잠금 |
defaultCollapsed | boolean | false | 초기 접힘 상태 (true=닫힘) |
fullSize | boolean | false | 부모 컨테이너 크기에 맞춤 |
visible | boolean | true | 표시 여부 (false → 렌더 안 함) |
height | string | number | "250px" | 스크롤 영역 높이 |
emptyText | string | "데이터가 없습니다" | 빈 상태 텍스트 |
backgroundColor | string | - | 콘텐츠 영역 배경색 |
timestampStyle | CSSProperties | - | 날짜 영역 스타일 |
titleStyle | CSSProperties | - | 제목 영역 스타일 |
contentStyle | CSSProperties | - | 내용 영역 스타일 |
onLoadMore | () => void | - | 스크롤 하단 도달 시 추가 데이터 로드 콜백 |
className | string | - | 컨테이너 CSS 클래스 |
style | CSSProperties | - | 인라인 스타일 |
TimelineItem
| Field | Type | Required | Description |
|---|---|---|---|
timestamp | string | ✅ | 날짜/시간 문자열 |
title | string | ✅ | 제목 |
content | string | ✅ | 내용 |
접근성
권장 사항
- ✅ 타임라인 항목이
ol > li시맨틱 마크업으로 렌더링 - ✅ Collapsible 활용으로 키보드 접근성(Enter/Space) 자동 지원
- ✅ 접기/펼치기 트리거에
aria-expanded자동 적용
관련 컴포넌트
- Steps: 진행 단계 표시
Last updated on