Timeline
시간 순서에 따라 항목을 카드 형태로 표시하는 타임라인 컴포넌트
개요
Timeline은 Collapsible 영역 안에 시간순 카드 목록을 표시하며, 무한 스크롤로 추가 데이터를 로드할 수 있는 컴포넌트입니다.
주요 특징
- ✅ 시간순 카드: 각 항목을 날짜·제목·내용 구조의 카드로 표시
- ✅ 접기/펼치기: Collapsible 영역으로 콘텐츠 접기·펼치기 지원
- ✅ 무한 스크롤: 스크롤 하단 도달 시 onLoadMore 콜백으로 추가 데이터 로드
- ✅ 로딩 상태: loading prop으로 로딩 오버레이 표시
- ✅ 빈 데이터 상태: 데이터가 없을 때 안내 메시지 표시
- ✅ 영역별 스타일: timestampStyle, titleStyle, contentStyle로 커스터마이징
기본 사용
title과 items 배열을 전달합니다.
Preview
배포 완료
v1.19.0 프로덕션 배포가 완료되었습니다.QA 테스트 통과
모든 테스트 케이스가 통과되었습니다.개발 착수
Timeline 컴포넌트 개발을 시작했습니다.요구사항 확정
PRD 문서 작성 및 검토가 완료되었습니다.
빈 데이터 상태
items가 빈 배열이면 emptyText가 표시됩니다.
Preview
조회 결과가 없습니다
로딩 상태
loading prop으로 로딩 인디케이터를 표시합니다.
Preview
배포 완료
v1.19.0 프로덕션 배포가 완료되었습니다.QA 테스트 통과
모든 테스트 케이스가 통과되었습니다.개발 착수
Timeline 컴포넌트 개발을 시작했습니다.요구사항 확정
PRD 문서 작성 및 검토가 완료되었습니다.
접기/펼치기
defaultCollapsed로 초기 접힘 상태를, collapseDisabled로 접기 잠금을 설정합니다.
Preview
배포 완료
v1.19.0 프로덕션 배포가 완료되었습니다.QA 테스트 통과
모든 테스트 케이스가 통과되었습니다.개발 착수
Timeline 컴포넌트 개발을 시작했습니다.요구사항 확정
PRD 문서 작성 및 검토가 완료되었습니다.
무한 스크롤
onLoadMore와 hasMore를 사용하여 스크롤 하단 도달 시 추가 데이터를 로드합니다.
Preview
항목 1
자동 생성된 타임라인 항목 #1의 상세 내용입니다.항목 2
자동 생성된 타임라인 항목 #2의 상세 내용입니다.항목 3
자동 생성된 타임라인 항목 #3의 상세 내용입니다.항목 4
자동 생성된 타임라인 항목 #4의 상세 내용입니다.항목 5
자동 생성된 타임라인 항목 #5의 상세 내용입니다.
영역별 스타일
timestampStyle, titleStyle, contentStyle로 각 영역의 폰트·색상을 커스터마이징합니다.
Preview
배포 완료
v1.19.0 프로덕션 배포가 완료되었습니다.QA 테스트 통과
모든 테스트 케이스가 통과되었습니다.개발 착수
Timeline 컴포넌트 개발을 시작했습니다.요구사항 확정
PRD 문서 작성 및 검토가 완료되었습니다.
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