코치마크
코치마크는 사용자에게 새로 도입된 기능을 안내하거나, 여러 단계를 거쳐 수행해야 하는 복잡한 과업을 사용자가 보다 쉽게 완료할 수 있도록 세부 수행 단계별로 고맥락적 도움말을 제공하는 컴포넌트이다.
코치마크는 사용자에게 새로 도입된 기능을 안내하거나, 여러 단계를 거쳐 수행해야 하는 복잡한 과업을 사용자가 보다 쉽게 완료할 수 있도록 세부 수행 단계별로 고맥락적 도움말을 제공하는 컴포넌트이다.
사용 지침
신규 기능 출시 직후 핵심 UI 위치를 알려야 할 때 한정적으로 사용하고, 같은 사용자에게 반복 노출하지 않도록 표시 여부를 저장합니다.
예제
Default
따라하기 가이드
1단계 : 코치 마크
1단계 코치 마크 내용입니다.
현재 단계1총 단계4
코치 마크 내용
Second Step
따라하기 가이드
2단계 : 다음 단계
2단계 코치 마크 내용입니다. 이제 다음 단계로 진행해보세요.
현재 단계2총 단계4
코치 마크 내용
Long Description
따라하기 가이드
긴 설명이 있는 코치 마크
이것은 매우 긴 설명을 가진 코치 마크입니다. 사용자에게 상세한 가이드를 제공하기 위해 충분한 정보를 포함하고 있습니다. 이 설명은 여러 줄에 걸쳐 표시될 수 있으며, 코치 마크의 크기에 맞게 자동으로 조정됩니다.
현재 단계1총 단계5
코치 마크 내용
Interactive
따라하기 가이드
1단계 : 코치 마크 시작
첫 번째 단계입니다. 다음으로 버튼을 클릭하여 진행하세요.
현재 단계1총 단계4
첫 번째 단계
속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| className | string | — | — |
| currentStep | number | 1 | — |
| description | string | 1단계 코치 마크 내용입니다. | — |
| isVisible | boolean | true | — |
| onNext | (() => void) | — | — |
| onPrevious | (() => void) | — | — |
| onSkip | (() => void) | — | — |
| title | string | 1단계 : 코치 마크 | — |
| totalSteps | number | 4 | — |