Timeline
시간 순서에 따른 이벤트·활동을 표시하는 타임라인 컴포넌트입니다.
기본
timeline_dot에 공통 color_* 클래스로 이벤트 유형을 구분합니다.
프로젝트 킥오프
팀 미팅을 통해 프로젝트 범위와 일정을 확정했습니다.
1차 릴리스 완료
MVP 기능이 프로덕션에 배포되었습니다.
성능 이슈 발견
대시보드 로딩 시간이 기준을 초과하여 조사를 시작했습니다.
긴급 패치 배포
인증 관련 보안 취약점을 수정하는 핫픽스를 배포했습니다.
간단
제목만 표시하는 간결한 타임라인입니다.
주문 접수
배송 준비 중
배송 완료
아웃라인 도트
timeline_dot-outline으로 속이 빈 원형 마커를 사용합니다. 밀도 높은 목록에 적합합니다.
기획 단계
요구사항 정의 및 와이어프레임 작성
디자인 단계
UI 키트 및 프로토타입 제작
개발 단계
컴포넌트 구현 및 통합 테스트 진행 중
배포 단계
스테이징 검증 후 프로덕션 릴리스 예정
아이콘 도트
timeline_icon과 icon_circle을 조합해 이벤트 유형을 아이콘으로 표시합니다.
팀원 합류
프론트엔드 개발자 2명이 프로젝트에 참여했습니다.
QA 통과
회귀 테스트 142건 모두 통과했습니다.
일정 지연 알림
외부 API 연동 이슈로 1주일 일정이 조정되었습니다.
배포 롤백
결제 모듈 오류로 이전 버전으로 롤백했습니다.
카드형
timeline_card로 콘텐츠 영역에 카드 스타일을 적용합니다. timeline_meta로 태그·액션을 함께 표시할 수 있습니다.
디자인 시스템 v2.0 릴리스
타이포그래피·컬러 토큰이 업데이트되었습니다. 기존 컴포넌트와 하위 호환됩니다.
접근성 감사 완료
WCAG 2.2 AA 기준 47개 항목 검토를 마쳤습니다.
문서 업데이트 예정
Button · Timeline 컴포넌트 가이드가 추가됩니다.
날짜 레이블
timeline_label-col과 timeline_label로 왼쪽에 기간·날짜 열을 배치합니다.
알파 버전 출시
내부 테스트용 알파 빌드를 배포했습니다.
베타 공개
선택 파트너사 대상 베타 프로그램을 시작했습니다.
정식 출시
GA 버전이 프로덕션에 배포되었습니다.
엔터프라이즈 기능
SSO · 감사 로그 · 역할 기반 접근 제어를 추가합니다.
좌우 교차
timeline_alternate로 768px 이상에서 중앙 축을 기준으로 항목이 좌우로 교차 배치됩니다.
회사 설립
UXKM 팀이 공식적으로 출범했습니다.
컴포넌트 가이드 오픈
HTML 컴포넌트 라이브러리 문서를 공개했습니다.
1,000 스타 달성
GitHub 저장소가 1,000 스타를 돌파했습니다.
v2 로드맵 공개
다크 모드 · RTL · 접근성 강화 계획을 발표했습니다.
가로형
timeline_horizontal로 단계·프로세스 흐름을 가로로 표시합니다. 768px 미만에서는 세로형으로 표시됩니다.
신청
심사
승인
완료
크기
timeline_sm · timeline_lg로 간격과 텍스트 크기를 조절합니다.
Small
알림 발송
수신 확인
Large
연간 컨퍼런스
2024 UX 디자인 서밋 참가
워크숍 진행
디자인 토큰 실습 세션
상태
is-active로 현재 진행 항목, is-pending으로 예정·미완료 항목을 표시합니다.
계정 생성
프로필 설정
팀 초대
첫 프로젝트 생성
API · Timeline Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
card | boolean | false | 카드형 콘텐츠 (timeline_card) |
alternate | boolean | false | 좌우 교차 배치 (timeline_alternate) |
horizontal | boolean | false | 가로 타임라인 (timeline_horizontal) |
labelCol | boolean | false | 좌측 라벨 열 (timeline_label-col) |
icon | boolean | false | 아이콘 점 모드 (timeline_icon) |
iconSize | 'sm' | 'md' | md | icon 모드 점 크기 (timeline_icon-sm) |
size | 'sm' | 'md' | 'lg' | md | timeline_sm · timeline_lg |
tag | 'ol' | 'ul' | ol | 루트 태그 |
className | string | — | timeline 루트에 추가 클래스 |
API · TimelineItem Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
color | string | primary | 점 색상 color_* |
title | string | — | 이벤트 제목 (timeline_title) |
description | string | — | 설명 (timeline_desc) |
time | string | — | 시간 텍스트 (timeline_time) |
datetime | string | — | time 요소 datetime 속성 |
label | string | — | 좌측 라벨 (timeline_label) |
labelDatetime | string | — | 라벨 datetime 속성 |
active | boolean | false | 진행 중 (is-active) |
pending | boolean | false | 대기·미완료 (is-pending) |
outline | boolean | false | 테두리 점 (timeline_dot-outline) |
className | string | — | timeline_item에 추가 클래스 |
API · Timeline Children
| Children | 설명 |
|---|---|
children | TimelineItem을 전달하는 React children |
API · TimelineItem Children
| Children / Prop | 설명 |
|---|---|
title | 이벤트 제목 (timeline_title) |
description | 설명 (timeline_desc) |
time | 시간 텍스트 (timeline_time) |
children | title·description 대신 표시할 React children |
dot | 커스텀 점·아이콘으로 전달하는 React 노드 |
meta | 하단 메타로 전달하는 React 노드 (timeline_meta) |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
timeline | 타임라인 루트 |
timeline_card · timeline_alternate · timeline_horizontal | 레이아웃 변형 |
timeline_label-col · timeline_icon · timeline_icon-sm | 라벨 열·아이콘 모드 |
timeline_sm · timeline_lg | 크기 |
timeline_item · timeline_dot · timeline_content | 항목 구조 |
timeline_label · timeline_time · timeline_title · timeline_desc | 텍스트 파트 |
is-active · is-pending | 상태 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--timeline-gap | var(--space-lg) | 항목 간격 |
--timeline-dot-size · --timeline-line-width | 10px · 2px | 점·연결선 |
--timeline-label-width | 4.5rem | 라벨 열 너비 |
--timeline-title-size · --timeline-desc-size | — | 제목·설명 크기 |