Timeline

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

• 배포 기록, 감사 로그, 작업 단계처럼 시간 순서의 사건을 보여 주세요. 순서 있는 목록이며 aria-label로 이름을 붙입니다. Item 하나가 사건 하나이고, 톤의 아이콘으로 표시합니다.
• Item 안에서 Title은 무슨 일이 있었는지, Time은 언제인지를 dateTime이 있는 time 요소로 적습니다. Status는 상태를 톤의 글자색으로 글로 적고, Description은 누가 했는지나 얼마나 걸렸는지를 덧붙입니다. 이 순서로 적으면 스크린 리더가 무엇, 언제, 어떻게 끝났는지를 차례로 읽습니다.
• 이어 주는 선은 없습니다. 아이콘 열이 순서를 보여 줍니다. current는 지금 진행 중인 단계를 한 단계 들어간 면에 두고 현재 단계로 알립니다.
• Detail은 로그, 차이, 변경 목록을 펼침 뒤에 둡니다. 열면 한 단계 들어간 면 위에 놓이고, 레이블은 제목과 줄을 맞춥니다.
• 단계가 남긴 답변이나 실행한 도구처럼 사건에 담긴 그 밖의 내용은 부분들 아래에서 각자 한 줄을 받아, 사건 너비 전체에 소스 순서대로 놓입니다. 직접 만든 요소로 감싸면 되고, 따로 부분은 필요 없습니다.

• 독자가 정렬하거나 거르는 기록에는 타임라인 대신 Table을 쓰세요.
• 색이나 아이콘만으로 상태를 전하지 마세요. Status에 글로 적으세요.
• 5분 전처럼 상대 시간만 적지 마세요. 절대 시각을 dateTime과 글이나 title에 남기세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root(ol) → Item(li: mark + body) → Title, Time(time), Status, Description, Detail(Collapsible), then any other block on a line of its own

키보드와 접근성

• 목록은 포커스를 받지 않습니다. Tab은 각 Detail의 펼침 버튼과 사건 안의 링크에 닿습니다.
• Enter나 Space로 Detail을 열고 닫습니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Timeline } from '@surflane/ui'

<Timeline.Root aria-label='Deploy history'>
  <Timeline.Item tone='success'>
    <Timeline.Title>platform-api 1.42.0 to production</Timeline.Title>
    <Timeline.Time dateTime='2026-10-26T09:42:00Z'>09:42 UTC</Timeline.Time>
    <Timeline.Status>Succeeded</Timeline.Status>
    <Timeline.Description>by Mina Park, 3 min 12 s</Timeline.Description>
    <Timeline.Detail summary='3 changes'>…</Timeline.Detail>
  </Timeline.Item>
  <Timeline.Item tone='progress' current>
    <Timeline.Title>Canary rollout to 25%</Timeline.Title>
    <Timeline.Time dateTime='2026-10-26T09:38:00Z'>09:38 UTC</Timeline.Time>
    <Timeline.Status>Running</Timeline.Status>
  </Timeline.Item>
</Timeline.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰