Skip to content

마일스톤

진행 단계, 마일스톤, 단계별 표시 등 순서가 있는 블록을 보여줄 때 사용하는 위젯입니다.

용도

  • 단계별 가이드, 진행 상황, 체크리스트 형태의 UI
  • 데이터 소스를 연동하면 단계 목록을 동적으로 표시할 수 있습니다.

사용법

  1. 툴킷의 기본 요소에서 마일스톤을 캔버스에 드래그해 넣습니다.
  2. 최소 5×4 크기를 권장합니다. 배치 후 설정에서 제목·설명과 데이터 소스(선택)를 설정합니다.

설정 방법

  • 스타일 & 콘텐츠: 라벨·설명으로 제목을 넣고, 강조 색상·배경 투명도로 스타일을 조정합니다.
  • 데이터 소스 탭: API 연동 시 엔드포인트·응답 매핑으로 단계 항목을 지정합니다.

라이브 미리보기

아래는 실제 마일스톤 위젯이 렌더된 모습입니다. 앱에서 라벨·설명을 넣고 데이터 소스를 연동하면 단계 목록이 동적으로 표시됩니다.

마일스톤
마일스톤 / 진행 단계가 여기에 표시됩니다.

위는 실제 마일스톤 위젯 모습입니다. 앱의 설정 패널에서 라벨·설명을 넣고, 데이터 소스를 연동하면 단계 목록이 동적으로 표시됩니다.

설정에 따른 변경 확인

캔버스에서 마일스톤 블록 모양이 보이는지 확인하고, 데이터 연동 후에는 실제 페이지(/feature/카테고리ID)에서 단계 목록이 올바르게 나오는지 확인합니다.