greenwhale/app/pages/contact/faq.vue

<template>
  <main>
    <TopVisual :className="className" :title="title" :navigation="navigation" />
    <section class="notice--section">
      <div class="sub--container type2">
        <div class="title--wrap">
          <h2 class="title">FAQ</h2>
        </div>
        <div class="faq--wrap">
          <UAccordion :collapsible="false" :items="faqContent"></UAccordion>
        </div>
      </div>
    </section>
  </main>
</template>
<script setup>
  import { ref, onMounted } from "vue";
  import TopVisual from "~/components/topVisual.vue";

  const className = ref("contact");
  const title = ref("Contact");
  const navigation = ref([
    {
      name: "Contact",
      link: "/contact/faq",
      gnbList: [
        { name: "Company", link: "/company/intro" },
        { name: "Product", link: "/products/materials" },
        { name: "Technology", link: "/technology/facilities" },
        { name: "Media", link: "/media/news" },
        { name: "Contact", link: "/contact/notice" },
      ],
    },
    {
      name: "FAQ",
      link: "/contact/faq",
      gnbList: [
        { name: "공지사항", link: "/contact/notice" },
        { name: "FAQ", link: "/contact/faq" },
        { name: "고객센터", link: "/contact/support" },
        { name: "오시는길", link: "/contact/location" },
      ],
    },
  ]);

  const loading = ref(true);
  const faqContent = ref([]);

  // HTML 태그 제거 함수
  const stripHtmlTags = (html) => {
    if (!html) return "";
    const doc = new DOMParser().parseFromString(html, "text/html");
    return doc.body.textContent || "";
  };

  // API에서 FAQ 데이터 가져오기
  const fetchFaqList = async () => {
    try {
      loading.value = true;

      // 공지사항과 동일한 방식으로 호출
      const response = await $get(`/board_list/faq`, {
        page: 1,
        searchKind: "",
        searchKeyword: "",
      });

      // 백엔드가 JSON으로 응답하는지 확인
      if (response && typeof response === "object") {
        // JSON 응답인 경우
        if (response.success && response.list) {
          // console.log("받은 FAQ 데이터:", response.list);
          faqContent.value = response.list.map((item) => ({
            label: item.title,
            content: stripHtmlTags(item.contents),
          }));
          // console.log("변환된 FAQ 콘텐츠:", faqContent.value);
        } else {
          console.error("JSON 응답 형식이 올바르지 않습니다:", response);
          // 기본 더미 데이터 사용
          setDefaultFaqData();
        }
      } else if (typeof response === "string") {
        // HTML 응답인 경우 (백엔드에서 AJAX 감지 실패시)
        console.warn("HTML 응답을 받았습니다. AJAX 감지가 실패했을 수 있습니다.");
        console.log("HTML 내용:", response.substring(0, 200) + "...");
        // 기본 더미 데이터 사용
        setDefaultFaqData();
      } else {
        console.error("예상하지 못한 응답 형식:", typeof response, response);
        // 기본 더미 데이터 사용
        setDefaultFaqData();
      }
    } catch (error) {
      console.error("FAQ 데이터 로드 실패:", error);
      // 에러시 기본 더미 데이터 사용
      setDefaultFaqData();
    } finally {
      loading.value = false;
    }
  };

  // 기본 더미 데이터 설정
  const setDefaultFaqData = () => {
    faqContent.value = [
      {
        label: "바이오 플라스틱은 어떤 종류가 있어요?",
        content:
          "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다.",
      },
      {
        label: "생분해성 플라스틱이란 무엇인가요?",
        content:
          "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다.",
      },
      {
        label: "생분해성 플라스틱이 정말 친환경적인가요?",
        content:
          "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다.",
      },
      {
        label: "제품마다 생분해 되는 시간이 다른가요?",
        content:
          "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다.",
      },
      {
        label: "그린웨일글로벌 플라스틱은 어떻게 다르나요?",
        content:
          "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다.",
      },
      {
        label: "카사바란 무엇인가요?",
        content:
          "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다.",
      },
      {
        label: "정말 생분해되는지 어떻게 알 수 있나요?",
        content:
          "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다.",
      },
      {
        label: "물에 젖거나 가열하면 부패하나요?",
        content:
          "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다.",
      },
    ];
  };

  // 컴포넌트 마운트 시 데이터 로드
  onMounted(() => {
    fetchFaqList();
  });
</script>