67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div class="page-description">
|
||
|
|
<button class="toggle-btn" @click="toggleOpen">
|
||
|
|
<span v-if="isOpen">▼</span>
|
||
|
|
<span v-else>▲</span>
|
||
|
|
<span>{{ isOpen ? "설명 접기" : "설명 펼치기" }}</span>
|
||
|
|
</button>
|
||
|
|
<div v-show="isOpen">
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from "vue";
|
||
|
|
|
||
|
|
const isOpen = ref(false);
|
||
|
|
function toggleOpen() {
|
||
|
|
isOpen.value = !isOpen.value;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.page-description {
|
||
|
|
background: #fff; /* 기존 #f5f7fa → #fff */
|
||
|
|
border-left: 5px solid #3498db; /* 기존 4px #409eff → 5px #3498db */
|
||
|
|
border: 1px solid #ddd; /* 추가: 박스 테두리 */
|
||
|
|
padding: 20px 24px;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
color: #333;
|
||
|
|
border-radius: 6px;
|
||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: 0.01em;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(h1) {
|
||
|
|
color: #2c3e50;
|
||
|
|
}
|
||
|
|
:deep(h2) {
|
||
|
|
margin-top: 30px;
|
||
|
|
color: #34495e;
|
||
|
|
}
|
||
|
|
:deep(ul) {
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|
||
|
|
:deep(.highlight) {
|
||
|
|
font-weight: bold;
|
||
|
|
color: #e74c3c;
|
||
|
|
}
|
||
|
|
.toggle-btn {
|
||
|
|
cursor: pointer;
|
||
|
|
background: none;
|
||
|
|
border: none;
|
||
|
|
font-size: 1.1em;
|
||
|
|
color: #3498db;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 4px;
|
||
|
|
}
|
||
|
|
.toggle-btn:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
</style>
|