# 튜토리얼 실행

## 지원 함수 <a href="#function" id="function"></a>

`startGuide({guideId}, guide option object)` 함수를 호출해, 익스텐션으로 생성한 튜토리얼 가이드를 실행할 수 있습니다.

```javascript
StepBy.startGuide("{guideId}", {
    // Guide Option Parameters
    version: "{versionName}",
    isOnce: true | false,
    logging: true | false,
    nextGuides: "{nextGuidesArray}"
})
```

StepBy Admin 내 튜토리얼 상세 페이지에서 '실행 코드 복사' 버튼을 클릭해 가이드 별 실행 코드를 복사할 수 있습니다.

## Parameters

Guide Option Parameters를 통해 가이드 실행 시 원하는 옵션을 적용할 수 있습니다.

#### Guide Option Parameters

<table><thead><tr><th width="180">key</th><th width="102">type</th><th width="243">desc</th><th width="94" data-type="checkbox">required</th><th>default</th></tr></thead><tbody><tr><td>version</td><td>string</td><td>실행할 가이드 버전</td><td>false</td><td>해당 가이드의 최신 버전</td></tr><tr><td><a data-footnote-ref href="#user-content-fn-1">isOnce</a></td><td>boolean</td><td>사용자 별 가이드 1회 실행 여부</td><td>false</td><td>false</td></tr><tr><td>logging</td><td>boolean</td><td>가이드 통계 수집 여부</td><td>false</td><td>true</td></tr><tr><td><a data-footnote-ref href="#user-content-fn-2">nextGuides</a></td><td>array</td><td>가이드가 종료된 이후 이어서 실행될 가이드 목록</td><td>false</td><td>None</td></tr></tbody></table>

## 예시 코드 (React.js) <a href="#code-examples" id="code-examples"></a>

```javascript
// App.jsx
const App = () => {
  const handleStart = () => {
    // 튜토리얼 가이드 실행 시점을 직접 제어
    StepBy.startGuide("example-guide-id", {
      version: process.env.NODE_ENV === "development" ? "version-2" : "version-1", // 개발 환경에서만 version-2 가이드 실행 
      isOnce: true,
      logging: isInternalUser ? false : true // 내부 사용자인 경우, 통계 미수집
      nextGuides: [{ guideId: "example-guide-id-2" }] // 튜토리얼 가이드 완료 시, 다른 가이드 이어서 실행
    })
  }
  return <button onClick={handleStart}>let's start!</button>
}
```

[^1]: 자세한 사용 방법은 [가이드 한 번만 실행하기](https://stepby.gitbook.io/stepby/explore/start-guide-once) 에서 확인할 수 있습니다.

[^2]: 자세한 사용 방법은 [가이드 이어서 실행하기](https://stepby.gitbook.io/stepby/explore/guide-sequence) 에확 확인할 수 있습니다.
