코치마크 Coach mark

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

기본

단계마다 KrdsCoachMark를 두고 같은 v-model을 연결합니다. v-model 값이 active-step과 같은 코치마크에만 말풍선이 표시되며, 다음으로·이전으로 버튼이 v-model을 바꾸고 그만보기 버튼은 close 이벤트를 보냅니다. 말풍선은 대상 요소 위쪽에 표시되므로 위에 여백을 둡니다.

1. 이전 살던 곳 작성

이전 살던 곳

2. 현재 사는 곳 작성

현재 사는 곳

vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsButton, KrdsCoachMark, KrdsFormLabel, KrdsInput } from '@krds.ui/vue'

  const currentStep = ref<number | null>(null)
  const stepsData = [
    { id: 1, title: '첫번째 단계', description: '첫번째 단계의 내용임' },
    { id: 2, title: '두번째 단계', description: '두번째 단계의 내용임' },
    { id: 3, title: '세번째 단계', description: '세번째 단계의 내용임' }
  ]
</script>

<template>
  <KrdsButton variant="tertiary" size="xsmall" @click="currentStep = 1">코치마크 보기</KrdsButton>
  <div style="display: flex; flex-direction: column; gap: 40px; padding: 150px 40px 40px">
    <KrdsCoachMark
      v-model="currentStep"
      :active-step="1"
      :steps-data="stepsData"
      :coach-mark-class="[currentStep === 1 ? 'txt-box' : '']"
      style="max-width: 500px"
      @close="currentStep = null"
    >
      <template #coach-mark-content>
        <div style="display: flex; flex-direction: column; gap: 20px">
          <h3>1. 이전 살던 곳 작성</h3>
          <div style="display: flex; flex-direction: column; gap: 8px">
            <KrdsFormLabel for="coach-prev-address">이전 살던 곳</KrdsFormLabel>
            <div style="display: flex; gap: 8px">
              <KrdsInput id="coach-prev-address" style="width: 100%" />
              <KrdsButton variant="secondary">주소 조회</KrdsButton>
            </div>
          </div>
        </div>
      </template>
    </KrdsCoachMark>
    <div style="border-top: 1px solid lightgray" />
    <KrdsCoachMark
      v-model="currentStep"
      :active-step="2"
      :steps-data="stepsData"
      style="max-width: 500px"
      :coach-mark-class="[currentStep === 2 ? 'txt-box' : '']"
      @close="currentStep = null"
    >
      <template #coach-mark-content>
        <div style="display: flex; flex-direction: column; gap: 20px">
          <h3>2. 현재 사는 곳 작성</h3>
          <div style="display: flex; flex-direction: column; gap: 8px">
            <KrdsFormLabel for="coach-current-address">현재 사는 곳</KrdsFormLabel>
            <div style="display: flex; gap: 8px">
              <KrdsInput id="coach-current-address" style="width: 100%" />
              <KrdsButton variant="secondary">주소 조회</KrdsButton>
            </div>
          </div>
        </div>
      </template>
    </KrdsCoachMark>
    <div style="border-top: 1px solid lightgray" />
    <KrdsCoachMark
      v-model="currentStep"
      :active-step="3"
      :steps-data="stepsData"
      style="display: flex; justify-content: flex-end"
      @close="currentStep = null"
    >
      <template #coach-mark-content>
        <KrdsButton :class="[currentStep === 3 ? 'coach-btn' : '']">주소 이전 신청 완료</KrdsButton>
      </template>
    </KrdsCoachMark>
  </div>
</template>

KrdsCoachMark

Props

이름	타입	기본값	설명
`style`	`string \| Record<string, string \| number>`	-	인라인 스타일
`modelValue`	`number \| null`	`null`	현재 노출 중인 단계 (v-model)
`coachMarkClass`	`string \| string[]`	`''`	코치마크 래퍼에 추가할 클래스
`stepsData` (필수)	`StepsData[]`	-	전체 단계 데이터
`activeStep` (필수)	`number`	-	이 코치마크가 담당하는 단계 번호

Events

이름	인자	설명
`close`	`[]`	닫기 버튼으로 닫을 때
`update:modelValue`	`[value: number \| null]`	이전·다음 버튼으로 단계가 바뀔 때 (v-model)

Slots

이름	설명
`coach-mark-content`	코치마크 말풍선 아래에 함께 보여 줄 내용

코치마크 Coach mark ​

기본 ​