Options

StepGuide는 다양한 옵션을 제공하여 사용자 경험을 커스터마이징할 수 있습니다. 다음은 StepGuide에서 사용할 수 있는 옵션 목록입니다.

옵션	타입	설명
el	HTMLElement	StepGuide가 적용될 HTML 요소입니다.
options	Object	StepGuide의 설정 옵션을 포함하는 객체입니다.
steps	Array<Step>	가이드의 각 단계를 정의하는 배열입니다. 각 단계는 element, title, description 등의 속성을 가집니다.
useAnimation	boolean	애니메이션 효과를 사용할지 여부를 설정합니다. 기본값은 true입니다.
buttonLabel	ButtonLabel	버튼의 라벨을 설정합니다. ButtonLabel 타입은 { next: string; prev: string; skip: string; } 형태로 정의됩니다.
clickableDim	boolean	배경을 클릭할 수 있도록 설정합니다. 기본값은 false입니다. false일 경우, 배경을 클릭하면 StepGuide가 닫힙니다.
hideSkip	boolean	건너뛰기 버튼을 숨길지 여부를 설정합니다. 기본값은 true입니다.
hideStepCount	boolean	단계 수를 숨길지 여부를 설정합니다. 기본값은 true입니다.
onExit	function	종료 후 callback function을 설정 합니다.

Step Option

옵션	타입	설명
element	HTMLElement | string | null	StepGuide가 적용될 HTML 요소입니다. 문자열로 CSS 선택자를 전달하거나 직접 HTMLElement를 전달할 수 있습니다. null인 경우 중앙에 요소가 생성됩니다.
title	string	해당 단계의 제목을 설정합니다. 필수 속성입니다.
description	string	해당 단계의 설명을 설정합니다. 선택적 속성입니다.
position	'right' | 'bottom'	툴팁이 표시될 위치를 설정합니다. 'right'는 요소의 오른쪽, 'bottom'은 요소의 아래쪽에 표시됩니다. 기본값은 'bottom'입니다.
customStyle	Record<string, string>	요소에 적용할 커스텀 CSS 스타일을 설정합니다. CSS 속성과 값의 객체 형태로 전달합니다.
isFixed	boolean	요소의 위치를 고정할지 여부를 설정합니다. 선택적 속성입니다.

예시

다음은 StepGuide 옵션을 사용한 예시입니다:

const guide = stepGuide({
  el: document.body,
  options: {
    onExit: () => {
      console.log('종료 완료');
    },
    steps: [
      {
        element: '#first-step',
        title: '첫 번째 단계',
        description: '이것은 첫 번째 단계입니다.',
      },
    ],
    useAnimation: true,
    buttonLabel: {
      next: '다음',
      prev: '이전',
      skip: '건너뛰기',
    },
    clickableDim: false,
    viewStepCount: true,
    hideSkip: false,
    hideStepCount: false,
  },
});

이 문서를 통해 StepGuide의 옵션을 이해하고 활용할 수 있습니다.