탭

<div class="krds-tab-area layer">
	
	<div class="tab line full">
		<ul role="tablist">
			<li id="tab_login_01" role="tab" aria-selected="true" aria-controls="panel_login_01" class="active">
				<button type="button" class="btn-tab">타이틀 1 <i class="sr-only created"> 선택됨</i></button>
			</li>
			<li id="tab_login_02" role="tab" aria-selected="false" aria-controls="panel_login_02">
				<button type="button" class="btn-tab">타이틀 2</button>
			</li>
		</ul>
	</div>
	
	
	
	<div class="tab-conts-wrap">
		<section id="panel_login_01" aria-labelledby="tab_login_01" class="tab-conts active" data-quick-nav="false">
			<h3 class="sr-only">탭 영역 타이틀</h3>
			탭 1 영역
		</section>
		<section id="panel_login_02" aria-labelledby="tab_login_02" class="tab-conts" data-quick-nav="false">
			<h3 class="sr-only">탭 영역 타이틀</h3>
			탭 2 영역
		</section>
	</div>
	
</div>

<template>
  <div class="krds-tab-area layer">
	
	<div class="tab line full">
		<ul role="tablist">
			<li id="tab_login_01" role="tab" aria-selected="true" aria-controls="panel_login_01" class="active">
				<button type="button" class="btn-tab">타이틀 1 <i class="sr-only created"> 선택됨</i></button>
			</li>
			<li id="tab_login_02" role="tab" aria-selected="false" aria-controls="panel_login_02">
				<button type="button" class="btn-tab">타이틀 2</button>
			</li>
		</ul>
	</div>
	
	
	
	<div class="tab-conts-wrap">
		<section id="panel_login_01" aria-labelledby="tab_login_01" class="tab-conts active" data-quick-nav="false">
			<h3 class="sr-only">탭 영역 타이틀</h3>
			탭 1 영역
		</section>
		<section id="panel_login_02" aria-labelledby="tab_login_02" class="tab-conts" data-quick-nav="false">
			<h3 class="sr-only">탭 영역 타이틀</h3>
			탭 2 영역
		</section>
	</div>
	
</div>
</template>

<script setup lang="ts">
// 탭 컴포넌트
// 콘텐츠 탭 컴포넌트입니다.

import { ref } from 'vue'

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

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