KRDS Angular

코치마크 Coach mark ​

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

KRDS 가이드

기본 ​

단계마다 안내할 영역을 <krds-coach-mark>로 감싸고, 전체 단계(steps), 이 코치마크의 단계 번호(step, 1부터), 같은 [(current)]를 연결합니다. current가 step과 같은 코치마크에만 말풍선이 표시되며, 다음으로·이전으로 버튼이 current를 바꾸고 그만보기 버튼은 (closed)를 보냅니다. 첫 단계에는 이전으로, 마지막 단계에는 다음으로 버튼이 없습니다. 다음으로·이전으로를 누르면 새 단계의 말풍선 제목으로 초점이 옮겨 갑니다. 말풍선은 대상 요소 위쪽에 표시되므로 위에 여백을 둡니다.

안내 중인 영역은 KRDS 클래스로 강조합니다. 영역은 코치마크에 txt-box, 버튼은 그 버튼에 coach-btn을 현재 단계일 때만 붙입니다.

ts
import { Component, signal } from '@angular/core'
import { KrdsButton, KrdsCoachMark, KrdsFormGroup, KrdsInput, type KrdsCoachMarkStep } from '@krds.ui/angular'

@Component({
  selector: 'demo-coach-mark-basic',
  imports: [KrdsButton, KrdsCoachMark, KrdsFormGroup, KrdsInput],
  template: `
    <button krdsButton variant="tertiary" size="xsmall" (click)="current.set(1)">코치마크 보기</button>
    <div style="display: flex; flex-direction: column; gap: 40px; padding: 150px 40px 40px">
      <krds-coach-mark
        [steps]="steps"
        [step]="1"
        [(current)]="current"
        [class.txt-box]="current() === 1"
        style="max-width: 500px"
        (closed)="current.set(null)"
      >
        <div style="display: flex; flex-direction: column; gap: 20px">
          <h3>1. 이전 살던 곳 작성</h3>
          <krds-form-group label="이전 살던 곳">
            <div style="display: flex; gap: 8px; width: 100%">
              <input krdsInput style="width: 100%" />
              <button krdsButton variant="secondary">주소 조회</button>
            </div>
          </krds-form-group>
        </div>
      </krds-coach-mark>
      <div style="border-top: 1px solid lightgray"></div>
      <krds-coach-mark
        [steps]="steps"
        [step]="2"
        [(current)]="current"
        [class.txt-box]="current() === 2"
        style="max-width: 500px"
        (closed)="current.set(null)"
      >
        <div style="display: flex; flex-direction: column; gap: 20px">
          <h3>2. 현재 사는 곳 작성</h3>
          <krds-form-group label="현재 사는 곳">
            <div style="display: flex; gap: 8px; width: 100%">
              <input krdsInput style="width: 100%" />
              <button krdsButton variant="secondary">주소 조회</button>
            </div>
          </krds-form-group>
        </div>
      </krds-coach-mark>
      <div style="border-top: 1px solid lightgray"></div>
      <krds-coach-mark
        [steps]="steps"
        [step]="3"
        [(current)]="current"
        style="display: flex; justify-content: flex-end"
        (closed)="current.set(null)"
      >
        <button krdsButton [class.coach-btn]="current() === 3">주소 이전 신청 완료</button>
      </krds-coach-mark>
    </div>
  `
})
export default class CoachMarkBasic {
  readonly current = signal<number | null>(null)
  readonly steps: KrdsCoachMarkStep[] = [
    { id: 1, title: '첫번째 단계', description: '첫번째 단계의 내용임' },
    { id: 2, title: '두번째 단계', description: '두번째 단계의 내용임' },
    { id: 3, title: '세번째 단계', description: '세번째 단계의 내용임' }
  ]
}

KrdsCoachMark ​

선택자 krds-coach-mark

Inputs

이름타입기본값설명
steps (필수)KrdsCoachMarkStep[]-전체 단계
step (필수)number-이 코치마크가 맡은 단계 번호 (1부터)
[(current)]number | nullnull지금 보이는 단계 번호 (없으면 null)

Outputs

이름값설명
closedvoid그만보기를 눌렀을 때

타입

ts
/** 코치마크 단계 */
export interface KrdsCoachMarkStep {
  id: number
  title: string
  description: string
}