greenwhale/app/pages/contact/faq.vue

<template>
  <div>
    <topVisual />
    <div class="sub-content">
      <div class="container">
        <h2 class="sub-title">자주 묻는 질문</h2>
        <div class="faq-list">
          <div v-for="(item, index) in faqItems" :key="index" class="faq-item">
            <div class="faq-question" @click="toggleAnswer(index)">
              <span class="q-mark">Q</span>
              <span class="question-text">{{ item.question }}</span>
              <span class="toggle-icon" :class="{ active: openIndex === index }">▼</span>
            </div>
            <div v-if="openIndex === index" class="faq-answer">
              <span class="a-mark">A</span>
              <span class="answer-text">{{ item.answer }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import topVisual from '~/components/topVisual.vue';

const openIndex = ref(null);

const faqItems = [
  {
    question: '그린웨일글로벌의 주요 제품은 무엇인가요?',
    answer: '친환경 소재와 지속 가능한 솔루션을 제공합니다.'
  },
  {
    question: '제품 문의는 어떻게 하나요?',
    answer: '고객지원 페이지의 문의 양식을 통해 문의하실 수 있습니다.'
  },
  {
    question: '기술 지원을 받을 수 있나요?',
    answer: '네, 전문 기술진이 상담 및 지원을 제공합니다.'
  }
];

const toggleAnswer = (index) => {
  openIndex.value = openIndex.value === index ? null : index;
};
</script>

<style scoped>
.faq-list {
  padding: 40px 0;
}
.faq-item {
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 0;
}
.faq-question {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 10px 0;
}
.q-mark, .a-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #00a651;
  color: white;
  border-radius: 50%;
  margin-right: 15px;
  font-weight: bold;
}
.a-mark {
  background: #666;
}
.question-text {
  flex: 1;
  font-size: 18px;
  font-weight: 500;
}
.toggle-icon {
  transition: transform 0.3s;
}
.toggle-icon.active {
  transform: rotate(180deg);
}
.faq-answer {
  display: flex;
  align-items: flex-start;
  padding: 20px 0;
  background: #f8f8f8;
  margin-top: 10px;
  padding: 20px;
  border-radius: 4px;
}
.answer-text {
  flex: 1;
  font-size: 16px;
  line-height: 1.6;
}
</style>