중요 알림

<div class="main-urgent-wrap">
	<ul class="krds-critical-alerts">
		<li>
			<div class="critical-ban">
				<span class="critical-badge danger">긴급</span>
				<p class="critical-txt">긴급 공지 내용 표시</p>
				<a href="#" class="krds-btn medium link basic">
					<span class="m-hide">자세히 보기</span>
					<i class="svg-icon ico-angle right"></i>
				</a>
			</div>
		</li>
		<li>
			<div class="critical-ban">
				<span class="critical-badge ok">안전</span>
				<p class="critical-txt">긴급 공지 내용 표시</p>
				<a href="#" class="krds-btn medium link basic">
					<span class="m-hide">자세히 보기</span>
					<i class="svg-icon ico-angle right"></i>
				</a>
			</div>
		</li>
		<li>
			<div class="critical-ban">
				<span class="critical-badge info">안내</span>
				<p class="critical-txt">긴급 공지 내용 표시</p>
				<a href="#" class="krds-btn medium link basic">
					<span class="m-hide">자세히 보기</span>
					<i class="svg-icon ico-angle right"></i>
				</a>
			</div>
		</li>
	</ul>
</div>

<template>
  <div class="main-urgent-wrap">
	<ul class="krds-critical-alerts">
		<li>
			<div class="critical-ban">
				<span class="critical-badge danger">긴급</span>
				<p class="critical-txt">긴급 공지 내용 표시</p>
				<a href="#" class="krds-btn medium link basic">
					<span class="m-hide">자세히 보기</span>
					<i class="svg-icon ico-angle right"></i>
				</a>
			</div>
		</li>
		<li>
			<div class="critical-ban">
				<span class="critical-badge ok">안전</span>
				<p class="critical-txt">긴급 공지 내용 표시</p>
				<a href="#" class="krds-btn medium link basic">
					<span class="m-hide">자세히 보기</span>
					<i class="svg-icon ico-angle right"></i>
				</a>
			</div>
		</li>
		<li>
			<div class="critical-ban">
				<span class="critical-badge info">안내</span>
				<p class="critical-txt">긴급 공지 내용 표시</p>
				<a href="#" class="krds-btn medium link basic">
					<span class="m-hide">자세히 보기</span>
					<i class="svg-icon ico-angle right"></i>
				</a>
			</div>
		</li>
	</ul>
</div>
</template>

<script setup lang="ts">
// 중요 알림 컴포넌트
// 중요 알림 메시지 컴포넌트입니다.

import { ref } from 'vue'

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

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