인페이지 내비게이션

<div class="krds-in-page-navigation-type">
	
	<div class="krds-in-page-navigation-area">
		<div class="in-page-navigation-header">
			<p class="quick-caption">이 페이지의 구성</p>
			<p class="quick-title">장애아동수당</p>
		</div>
		<nav class="in-page-navigation-list">
			<ul>
				<li><a href="#section_01" class="active">서비스 개요</a></li>
				<li><a href="#section_02">서비스 상세</a></li>
				<li><a href="#section_03">신청 방법 및 절차</a></li>
				<li><a href="#section_04">제출 서류</a></li>
				<li><a href="#section_05">함께 신청할 수 있는 서비스</a></li>
				<li><a href="#section_06">부가정보</a></li>
				<li><a href="#section_07">정보 변경 내역</a></li>
			</ul>
		</nav>
		<div class="in-page-navigation-action">
			<button type="button" class="krds-btn medium">온라인 신청하기</button>
			<p class="quick-info">장애아동수당 외 <strong>1건</strong></p>
		</div>
	</div>
	
</div>

<template>
  <div class="krds-in-page-navigation-type">
	
	<div class="krds-in-page-navigation-area">
		<div class="in-page-navigation-header">
			<p class="quick-caption">이 페이지의 구성</p>
			<p class="quick-title">장애아동수당</p>
		</div>
		<nav class="in-page-navigation-list">
			<ul>
				<li><a href="#section_01" class="active">서비스 개요</a></li>
				<li><a href="#section_02">서비스 상세</a></li>
				<li><a href="#section_03">신청 방법 및 절차</a></li>
				<li><a href="#section_04">제출 서류</a></li>
				<li><a href="#section_05">함께 신청할 수 있는 서비스</a></li>
				<li><a href="#section_06">부가정보</a></li>
				<li><a href="#section_07">정보 변경 내역</a></li>
			</ul>
		</nav>
		<div class="in-page-navigation-action">
			<button type="button" class="krds-btn medium">온라인 신청하기</button>
			<p class="quick-info">장애아동수당 외 <strong>1건</strong></p>
		</div>
	</div>
	
</div>
</template>

<script setup lang="ts">
// 인페이지 내비게이션 컴포넌트
// 페이지 내 앵커 내비게이션입니다.

import { ref } from 'vue'

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

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