방식 개편

busan/components/FaqAccordion.vue

@@ -2,38 +2,33 @@
   <section class="faq-section">
     <div class="section-header">
       <span class="section-badge">궁금한 점을 풀어드립니다</span>
-      <h2 class="section-title">{{ regionDong }} 1:1 과외 자주 묻는 질문</h2>
+      <h2 class="section-title">{{ shortSido }} {{ gradeShort }} {{ subjectName }} 과외 · {{ regionDong }} 1:1 과외 자주 묻는 질문</h2>
       <p class="section-desc">학부모님들께서 가장 많이 문의하시는 내용을 모았습니다.</p>
     </div>
 
     <div class="faq-list">
-      <div 
+      <details 
         v-for="(faq, idx) in faqs" 
         :key="idx" 
-        class="faq-item"
-        :class="{ active: openIndex === idx }"
+        class="faq-item qa"
+        :open="idx === 0"
       >
-        <button 
-          type="button" 
-          class="faq-question" 
-          @click="toggle(idx)"
-          :aria-expanded="openIndex === idx"
-        >
+        <summary class="faq-question">
           <span class="q-icon">Q</span>
           <span class="q-text">{{ faq.q }}</span>
-          <span class="toggle-icon">{{ openIndex === idx ? '▲' : '▼' }}</span>
-        </button>
-        <div v-show="openIndex === idx" class="faq-answer">
+          <span class="toggle-icon">▼</span>
+        </summary>
+        <div class="faq-answer ans">
           <span class="a-icon">A</span>
           <p class="a-text">{{ faq.a }}</p>
         </div>
-      </div>
+      </details>
     </div>
   </section>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps({
   regionDong: {
@@ -44,38 +39,40 @@ const props = defineProps({
     type: String,
     default: '중학생'
   },
+  gradeShort: {
+    type: String,
+    default: '중등'
+  },
+  shortSido: {
+    type: String,
+    default: '부산'
+  },
   subjectName: {
     type: String,
-    default: '영어'
+    default: '수학'
   }
 })
 
-const openIndex = ref(0)
-
-const toggle = (idx) => {
-  openIndex.value = openIndex.value === idx ? -1 : idx
-}
-
 const faqs = computed(() => [
   {
-    q: `${props.regionDong} ${props.grade} ${props.subjectName} 방문 과외와 온라인 화상 과외 중 어떤 것이 가능한가요?`,
-    a: `학생과 학부모님의 선호에 따라 100% 자택 방문 대면 과외 또는 실시간 쌍방향 비대면 화상 과외 중 자유롭게 선택하실 수 있습니다. ${props.regionDong} 전 지역 방문 수업이 가능합니다.`
+    q: `${props.shortSido} ${props.gradeShort} ${props.subjectName} 과외 및 ${props.regionDong} ${props.grade} ${props.subjectName} 방문 과외와 화상 과외 중 어떤 것이 가능한가요?`,
+    a: `학생과 학부모님의 선호에 따라 ${props.shortSido} ${props.gradeShort} ${props.subjectName} 과외 100% 자택 방문 대면 수업 또는 실시간 쌍방향 화상 과외 중 자유롭게 선택하실 수 있습니다. ${props.regionDong} 전 지역 방문 수업이 가능합니다.`
   },
   {
-    q: `${props.grade} ${props.subjectName} 전문 선생님이 학생과 잘 맞지 않으면 교체 가능한가요?`,
-    a: '네, 1회 무료 모의수업을 통해 사전에 호흡을 맞추며, 정규 수업 시작 후에도 학생의 성향이나 요청에 따라 추가 비용 없이 100% 무료 교체 및 환불 규정을 보장합니다.'
+    q: `${props.shortSido} ${props.gradeShort} 과외 · ${props.regionDong} ${props.grade} ${props.subjectName} 전문 선생님이 학생과 맞지 않으면 교체 가능한가요?`,
+    a: `네, ${props.shortSido} ${props.gradeShort} ${props.subjectName} 과외는 1회 무료 모의수업을 통해 사전에 호흡을 맞추며, 정규 수업 시작 후에도 학생의 성향이나 요청에 따라 추가 비용 없이 100% 무료 교체 및 환불 규정을 보장합니다.`
   },
   {
-    q: `${props.grade} ${props.subjectName} 과외 수업 비용은 어떻게 되나요?`,
-    a: `${props.grade} 내신 단계, 주당 수업 횟수, 수업 시간(1회 60분/90분/120분)에 따라 표준 교육청 가이드라인에 맞춘 투명한 정찰제로 운영됩니다. 무료 상담 시 상세 견적표를 안내해 드립니다.`
+    q: `${props.shortSido} ${props.gradeShort} ${props.subjectName} 과외 및 ${props.regionDong} ${props.grade} ${props.subjectName} 과외 수업 비용은 어떻게 되나요?`,
+    a: `${props.shortSido} ${props.gradeShort} 과외는 ${props.grade} 내신 단계, 주당 수업 횟수, 수업 시간(1회 60분/90분/120분)에 따라 표준 교육청 가이드라인에 맞춘 투명한 정찰제로 운영됩니다. 무료 상담 시 상세 견적표를 안내해 드립니다.`
   },
   {
-    q: `${props.regionDong} 학교 중간·기말고사 직전 단기 ${props.subjectName} 족보 클리닉도 가능한가요?`,
-    a: `네, 시험 3~4주 전 학교별 기출 족보 풀이 및 서술형 배점 방어를 위한 ${props.grade} ${props.subjectName} 단기 속성 킬러 클리닉 프로그램도 상시 운영 중입니다.`
+    q: `${props.regionDong} 학교 중간·기말고사 직전 단기 ${props.shortSido} ${props.gradeShort} ${props.subjectName} 과외 족보 클리닉도 가능한가요?`,
+    a: `네, 시험 3~4주 전 학교별 기출 족보 풀이 및 서술형 배점 방어를 위한 ${props.regionDong} ${props.grade} ${props.subjectName} 과외 단기 속성 킬러 클리닉 프로그램도 상시 운영 중입니다.`
   },
   {
-    q: `${props.subjectName} 외에 다른 과목도 함께 상담받을 수 있나요?`,
-    a: `${props.subjectName} 집중 신청은 물론, 국영수 또는 수탐 복합 패키지로 맞춤 구성하여 전 과목 플래너 관리와 함께 시간표를 편성하실 수 있습니다.`
+    q: `${props.shortSido} ${props.gradeShort} ${props.subjectName} 과외 외에 다른 과목도 함께 상담받을 수 있나요?`,
+    a: `${props.subjectName} 집중 신청은 물론, 국영수 또는 수탐 복합 ${props.shortSido} ${props.gradeShort} 과외 패키지로 맞춤 구성하여 전 과목 플래너 관리와 함께 시간표를 편성하실 수 있습니다.`
   }
 ])
 </script>
@@ -146,6 +143,11 @@ const faqs = computed(() => [
   font-size: clamp(0.9rem, 2.2vw, 1.02rem);
   font-weight: 800;
   color: var(--text-color, #0f172a);
+  list-style: none;
+}
+
+.faq-question::-webkit-details-marker {
+  display: none;
 }
 
 .q-icon {
@@ -172,6 +174,11 @@ const faqs = computed(() => [
   font-size: 0.8rem;
   color: #94a3b8;
   flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+details[open] .toggle-icon {
+  transform: rotate(180deg);
 }
 
 .faq-answer {