TTS 크기

<button type="button" class="krds-tts xsmall">
	<span class="krds-tts-icon" aria-hidden="true">
		<i class="svg-icon ico-volume"></i>
	</span>
	<span class="krds-tts-text"> Xsmall TTS</span>
</button>
<button type="button" class="krds-tts small">
	<span class="krds-tts-icon">
		<i class="svg-icon ico-volume"></i>
	</span>
	<span class="krds-tts-text">Small TTS</span>
</button>
<button type="button" class="krds-tts medium">
	<span class="krds-tts-icon" aria-hidden="true">
		<i class="svg-icon ico-volume"></i>
	</span>
	<span class="krds-tts-text">Medium TTS</span>
</button>

<template>
  <button type="button" class="krds-tts xsmall">
	<span class="krds-tts-icon" aria-hidden="true">
		<i class="svg-icon ico-volume"></i>
	</span>
	<span class="krds-tts-text"> Xsmall TTS</span>
</button>
<button type="button" class="krds-tts small">
	<span class="krds-tts-icon">
		<i class="svg-icon ico-volume"></i>
	</span>
	<span class="krds-tts-text">Small TTS</span>
</button>
<button type="button" class="krds-tts medium">
	<span class="krds-tts-icon" aria-hidden="true">
		<i class="svg-icon ico-volume"></i>
	</span>
	<span class="krds-tts-text">Medium TTS</span>
</button>
</template>

<script setup lang="ts">
// TTS 크기 컴포넌트
// 다양한 크기의 TTS 버튼입니다.

import { ref } from 'vue'

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

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