init source

2025-08-08 13:11:33 +09:00
parent 02660627d2
commit 61d947a644
57 changed files with 1852863 additions and 0 deletions
--- a/components/PageDescription.vue
+++ b/components/PageDescription.vue
@@ -0,0 +1,66 @@
+<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>