Analytics
MilestoneTracker
스타트업의 주요 이벤트를 시간순으로 보여주는 수평 타임라인 위젯입니다. 연도 뱃지 클릭으로 해당 연도 위치로 스크롤하며, InformationCard와 조합하여 사용합니다.
import { MilestoneTracker } from "@/shared/ui/widget/analytics"Interactive Demo
Milestone Tracker
현재
2026.10
배치
디캠프 배치 7기
2026.07
투자
Series A
6,200,000,000원
2025
2025.12
특허권
특허권 등록
2025.10
상표권
상표권 등록
2025.10
정부사업선정
2025년 창도패 선정
2025.05
투자
Pre-A
3,500,000,000원
2024
2024.04
수상
K-Startup 창업경진대회 우수상
1,200,000,000원
2024.02
투자
Seed
1,200,000,000원
2023
2023.08
D.DAY
D.DAY 7기 우승
Demo Day 7기 대상 수상
2023.05
제품
MVP 출시
기업 데이터 분석 SaaS MVP베타 출시
2023.03
설립
법인 설립
주식회사 팩트시트 설립
tsx
const milestones: MilestoneData[] = [
{ date: "2026.10", label: "배치", title: "디캠프 배치 7기" },
{ date: "2026.07", label: "투자", title: "Series A", description: "6,200,000,000원" },
{ date: "2025.12", label: "특허권", title: "특허권 등록" },
{ date: "2025.05", label: "투자", title: "Pre-A", description: "3,500,000,000원" },
{ date: "2024.04", label: "수상", title: "K-Startup 창업경진대회 우수상" },
{ date: "2023.08", label: "D.DAY", title: "D.DAY 7기 우승" },
{ date: "2023.03", label: "설립", title: "법인 설립" },
];
<InformationCard
title="Milestone Tracker"
action={
<MilestoneYearBadges
years={["2026", "2025", "2024", "2023"]}
onYearClick={(year) => console.log(year)}
/>
}
>
<MilestoneTracker milestones={milestones} />
</InformationCard>Variants
최소 구성
Milestone Tracker
현재
2025.06
투자
Series A
10억 원
2024
2024.03
설립
법인 설립
Props
MilestoneTracker
| Prop | Type | Required | Default | 설명 |
|---|---|---|---|---|
milestones | MilestoneData[] | ✓ | — | 시간 역순 정렬된 마일스톤 데이터 배열 |
activeYear | string | — | — | 스크롤할 연도 — 변경 시 해당 연도 divider로 수평 스크롤 |
className | string | — | — | 추가 CSS 클래스 |
MilestoneData
| Prop | Type | Required | Default | 설명 |
|---|---|---|---|---|
date | string | ✓ | — | 날짜 (예: "2026.10") |
label | string | ✓ | — | 카테고리 라벨 (예: "배치", "투자", "수상") |
title | string | ✓ | — | 제목 (핵심 이벤트) |
description | string | — | — | 보조 정보 (금액, 설명 등) |