코치마크 Coach mark

코치마크는 사용자에게 새로 도입된 기능을 안내하거나, 여러 단계를 거쳐 수행해야 하는 복잡한 과업을 사용자가 보다 쉽게 완료할 수 있도록 세부 수행 단계별로 고맥락적 도움말을 제공하는 컴포넌트이다.

기본

tsx

import { CoachMark } from '@krds.ui/react'

export default function CoachMarkDemo() {
  return <CoachMark isVisible title="전입신고 따라하기" description="주소를 입력하세요." currentStep={1} totalSteps={3} />
}

CoachMark

Props

이름	타입	기본값	설명
`title`	`string`	`1단계 : 코치 마크`	코치 마크 제목
`children`	`ReactNode`	-	코치 마크 내용
`description`	`string`	`1단계 코치 마크 내용입니다.`	코치 마크 설명
`currentStep`	`number`	`1`	현재 단계
`totalSteps`	`number`	`4`	총 단계 수
`onSkip`	`(() => void)`	-	그만보기 버튼 클릭 핸들러
`onPrevious`	`(() => void)`	-	이전으로 버튼 클릭 핸들러
`onNext`	`(() => void)`	-	다음으로 버튼 클릭 핸들러
`isVisible`	`boolean`	`true`	코치 마크 표시 여부

코치마크 Coach mark ​

기본 ​

CoachMark ​

Props

코치마크 Coach mark

기본

CoachMark