Timeline
프로젝트 경과를 세로 시간 흐름으로.
- 라이브러리 전용
개요
예시
상태
일별 묶음
묶음 없음
접힘
일부만 읽음
- Not scanned yet
Not scanned yet
비어 있음
Nothing to show here yet.
불러오는 중
이렇게 · 이렇게 하지 않기
- 이렇게 사건을 시간순으로만 나열하고 중요도에 따라 크기를 바꾸지 않는다.
- 이렇게 항목마다 출처를 달고 추정한 연결은 점선으로 표시한다.
- 이렇게 하지 않기 읽지 않은 기간을 “아무 일도 없던 기간”처럼 비워 두지 않는다. “아직 읽지 않은 기간” 행으로 쓴다.
- 이렇게 하지 않기 선 그리기·삽입 애니메이션을 쓰지 않는다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
items | readonly { id, datetime, title, source?, href?, inferred?, gap?, from? }[] | — | 최신 순. gap은 읽지 않은 기간(from–datetime), inferred는 앞 항목과의 연결이 추정임. 미리보기는 2주치 + 빈 기간 1개. |
grouping? | 'none' | 'day' | day | day면 날짜별로 h3 + 목록. |
collapsed? | boolean | false | 최근 visibleCount개만 보이고 “이전 n개 보기” 버튼을 둔다. 펼치면 첫 새 항목에 초점. |
visibleCount? | 3 | 5 | 3 | 접혔을 때 보이는 수. |
state? | CatalogDataState | ready | 데이터 상태. partial은 항목을 두고 “아직 읽지 않은 기간” 행을 더한다. |
timeZone? | string | Asia/Seoul | 시각·날짜 머리글의 IANA 시간대. 기본 Asia/Seoul. 서버와 브라우저가 같은 글자를 그리게 고정한다. |
ref | — | — | ref는 바깥 <div>로 전달된다. |
| 그 밖의 속성 | — | — | id, aria-label 등 네이티브 div 속성은 바깥 래퍼로 간다. className·style·children은 받지 않는다. |
접근성
키보드: 항목 안 링크와 “이전 n개 보기” 버튼을 Tab으로 지난다.
- 선·점은 장식이다. 시간 순서는 목록 순서로, 시각은 <time datetime>으로 전달한다.
- 추정 연결은 점선 + “추정” 글자, 빈 기간은 파선 + 글자(색만으로 구분하지 않음).