코치 마크

<div class="txt-box bg-white bg-white krds-coach-mark">
	
	<div class="coach-balloon">
		<h5 class="sr-only">따라하기 가이드</h5>
		<h6 class="coach-tit">1단계 : 코치 마크</h6>
		<p class="desc">1단계 코치 마크 내용입니다.</p>
		<div class="coach-controls">
			<div class="num">
				<span class="sr-only">현재 단계</span>
				<strong>1</strong>
				<span class="sr-only">총 단계</span>
				<span>4</span>
			</div>
			<div class="btn-wrap">
				<button type="button" class="krds-btn small text">그만보기</button>
				<button type="button" class="krds-btn small tertiary">다음으로</button>
			</div>
		</div>
	</div>
	

	
	<div>
		<h3>코치 마크 내용</h3>
	</div>
	
</div>

<template>
  <div class="txt-box bg-white bg-white krds-coach-mark">
	
	<div class="coach-balloon">
		<h5 class="sr-only">따라하기 가이드</h5>
		<h6 class="coach-tit">1단계 : 코치 마크</h6>
		<p class="desc">1단계 코치 마크 내용입니다.</p>
		<div class="coach-controls">
			<div class="num">
				<span class="sr-only">현재 단계</span>
				<strong>1</strong>
				<span class="sr-only">총 단계</span>
				<span>4</span>
			</div>
			<div class="btn-wrap">
				<button type="button" class="krds-btn small text">그만보기</button>
				<button type="button" class="krds-btn small tertiary">다음으로</button>
			</div>
		</div>
	</div>
	

	
	<div>
		<h3>코치 마크 내용</h3>
	</div>
	
</div>
</template>

<script setup lang="ts">
// 코치 마크 컴포넌트
// 사용자 가이드 코치 마크입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>