audi/app/components/block/FaqAccordion.vue

<template>
  <div class="faq--accordion--wrapper">
    <div class="faq--accordion--container">
      <div v-for="(item, index) in faqItems" :key="index" class="faq--accordion--item">
        <button
          class="faq--accordion--header"
          @click="toggleItem(index)"
          :class="{ active: activeIndex === index }"
        >
          <span class="faq--question">{{ item.question }}</span>
          <span class="faq--toggle--icon">{{ activeIndex === index ? "−" : "+" }}</span>
        </button>
        <div v-show="activeIndex === index" class="faq--accordion--content">
          <div
            class="faq--answer"
            v-html="item.answer"
            :style="{ 'white-space': item.preline == true ? 'pre-line' : 'normal' }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  // Props 정의
  const props = defineProps({
    faqItems: {
      type: Array,
      required: true,
      default: () => [],
      validator: (items) => {
        return items.every(
          (item) =>
            item.question &&
            item.answer &&
            typeof item.question === "string" &&
            typeof item.answer === "string"
        );
      },
    },
  });

  // 활성화된 아코디언 아이템 인덱스
  const activeIndex = ref(null);

  // 아코디언 토글 함수
  const toggleItem = (index) => {
    activeIndex.value = activeIndex.value === index ? null : index;
  };
</script>