audi/app/pages/serviceprogram/dealersearch.vue

<template>
  <main>
    <div class="detail--container--full">
      <!-- 풀사이즈 배너 텍스트 1줄용 -->
      <FullSizeBannerText1
        :imagePath="bannerImagePath"
        textLocation="top"
        altText="전시장/AAP 전시장/AS센터"
        type="cover"
      />
      <TitleVisual
        title="전시장"
        description="원하시는 지역의 아우디 전시장 위치 및 연락처를 안내해 드립니다."
        textAlign="left"
        type="middle"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />

      <!-- 딜러 검색 드롭다운 섹션 -->
      <div class="dealer--search--section">
        <div class="dealer--search--container">
          <!-- 전시장 -->
          <div class="dealer--category--wrap">
            <div
              v-for="(region, index) in showrooms"
              :key="'showroom-' + index"
              class="dealer--region--item"
            >
              <button
                class="dealer--region--header"
                @click="toggleRegion('showroom', index)"
                :class="{ active: activeRegions.showroom === index }"
              >
                <span class="dealer--region--name">{{ region.name }}</span>
                <span class="dealer--toggle--icon">{{
                  activeRegions.showroom === index ? "−" : "+"
                }}</span>
              </button>
              <div
                v-show="activeRegions.showroom === index"
                class="dealer--list--content"
              >
                <ul class="dealer--list">
                  <li
                    v-for="(dealer, dIndex) in region.dealers"
                    :key="'dealer-' + dIndex"
                  >
                    <a :href="dealer.link" class="dealer--link"
                      >아우디 {{ dealer.name }}</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <TitleVisual
        title="Audi Approved :plus"
        description="원하시는 지역의 아우디 공식 인증 중고차(AAP) 위치 및 연락처를 안내해 드립니다."
        textAlign="left"
        type="middle"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />
      <div class="dealer--search--section">
        <div class="dealer--search--container">
          <!-- Audi Approved :plus -->
          <div class="dealer--category--wrap">
            <div
              v-for="(region, index) in approvedPlus"
              :key="'approved-' + index"
              class="dealer--region--item"
            >
              <button
                class="dealer--region--header"
                @click="toggleRegion('approved', index)"
                :class="{ active: activeRegions.approved === index }"
              >
                <span class="dealer--region--name">{{ region.name }}</span>
                <span class="dealer--toggle--icon">{{
                  activeRegions.approved === index ? "−" : "+"
                }}</span>
              </button>
              <div
                v-show="activeRegions.approved === index"
                class="dealer--list--content"
              >
                <ul class="dealer--list">
                  <li
                    v-for="(dealer, dIndex) in region.dealers"
                    :key="'dealer-' + dIndex"
                  >
                    <a :href="dealer.link" class="dealer--link"
                      >아우디 AAP {{ dealer.name }}</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <TitleVisual
        title="서비스센터"
        description="원하시는 지역의 아우디 서비스 센터 위치 및 연락처를 안내해드립니다.<br/>24시간 긴급출동 서비스 센터: 080-767-2834"
        textAlign="left"
        type="middle"
        theme="dark"
        :animation="true"
        :animationDelay="300"
      />
      <div class="dealer--search--section">
        <div class="dealer--search--container">
          <!-- 서비스센터 -->
          <div class="dealer--category--wrap">
            <div
              v-for="(region, index) in serviceCenters"
              :key="'service-' + index"
              class="dealer--region--item"
            >
              <button
                class="dealer--region--header"
                @click="toggleRegion('service', index)"
                :class="{ active: activeRegions.service === index }"
              >
                <span class="dealer--region--name">{{ region.name }}</span>
                <span class="dealer--toggle--icon">{{
                  activeRegions.service === index ? "−" : "+"
                }}</span>
              </button>
              <div v-show="activeRegions.service === index" class="dealer--list--content">
                <ul class="dealer--list">
                  <li
                    v-for="(dealer, dIndex) in region.dealers"
                    :key="'dealer-' + dIndex"
                  >
                    <a :href="dealer.link" class="dealer--link"
                      >아우디 서비스 {{ dealer.name }}</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup>
  // 컴포넌트 import
  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
  import TitleVisual from "~/components/block/TitleVisual.vue";

  const bannerImagePath = ref("/img/service/program/banner_1920X1080.avif");

  // 딜러 검색 드롭다운 상태 (지역별)
  const activeRegions = ref({
    showroom: null,
    approved: null,
    service: null,
  });

  // 지역 토글 함수
  const toggleRegion = (category, index) => {
    activeRegions.value[category] =
      activeRegions.value[category] === index ? null : index;
  };

  // 전시장 데이터
  const showrooms = ref([
    {
      name: "서울",
      dealers: [
        { name: "강서", link: "#" },
        { name: "남산", link: "#" },
        { name: "대치", link: "#" },
        { name: "도산대로", link: "#" },
        { name: "동대문", link: "#" },
        { name: "송파대로", link: "#" },
      ],
    },
    {
      name: "인천/경기",
      dealers: [
        { name: "동탄", link: "#" },
        { name: "분당", link: "#" },
        { name: "서수원", link: "#" },
        { name: "송도", link: "#" },
        { name: "수원", link: "#" },
        { name: "컨셉스토어 스타필드 수원", link: "#" },
        { name: "스타필드 안성", link: "#" },
        { name: "스타필드 하남", link: "#" },
        { name: "안양", link: "#" },
        { name: "의정부", link: "#" },
        { name: "인천", link: "#" },
        { name: "일산", link: "#" },
      ],
    },
    {
      name: "충청/대전",
      dealers: [
        { name: "대전", link: "#" },
        { name: "천안", link: "#" },
      ],
    },
    {
      name: "전북/전주",
      dealers: [{ name: "전주", link: "#" }],
    },
    {
      name: "전남/광주",
      dealers: [
        { name: "광주", link: "#" },
        { name: "목포", link: "#" },
      ],
    },
    {
      name: "경북/대구",
      dealers: [
        { name: "대구", link: "#" },
        { name: "서대구", link: "#" },
      ],
    },
    {
      name: "부산",
      dealers: [
        { name: "금정", link: "#" },
        { name: "해운대", link: "#" },
      ],
    },
    {
      name: "경남/울산",
      dealers: [
        { name: "울산", link: "#" },
        { name: "창원", link: "#" },
        { name: "컨셉스토어 김해", link: "#" },
      ],
    },
    {
      name: "강원/원주",
      dealers: [{ name: "원주", link: "#" }],
    },
  ]);

  // Audi Approved :plus 데이터
  const approvedPlus = ref([
    {
      name: "서울",
      dealers: [
        { name: "동대문", link: "#" },
        { name: "가양", link: "#" },
      ],
    },
    {
      name: "인천/경기",
      dealers: [
        { name: "김포", link: "#" },
        { name: "분당", link: "#" },
        { name: "서수원", link: "#" },
      ],
    },
    {
      name: "충청/대전",
      dealers: [{ name: "대전", link: "#" }],
    },
    {
      name: "전남/광주",
      dealers: [{ name: "광주", link: "#" }],
    },
    {
      name: "전북/전주",
      dealers: [{ name: "전주", link: "#" }],
    },
    {
      name: "경북/대구",
      dealers: [{ name: "동대구", link: "#" }],
    },
    {
      name: "경남/울산",
      dealers: [{ name: "양산", link: "#" }],
    },
    {
      name: "강원/원주",
      dealers: [{ name: "원주", link: "#" }],
    },
  ]);

  // 서비스센터 데이터
  const serviceCenters = ref([
    {
      name: "서울",
      dealers: [
        { name: "개포", link: "#" },
        { name: "김포공항", link: "#" },
        { name: "남산", link: "#" },
        { name: "논현", link: "#" },
        { name: "송파대로", link: "#" },
        { name: "석촌", link: "#" },
        { name: "동대문", link: "#" },
      ],
    },
    {
      name: "인천/경기",
      dealers: [
        { name: "강동", link: "#" },
        { name: "동탄", link: "#" },
        { name: "분당", link: "#" },
        { name: "서수원", link: "#" },
        { name: "수원", link: "#" },
        { name: "안양", link: "#" },
        { name: "인천", link: "#" },
        { name: "일산", link: "#" },
      ],
    },
    {
      name: "충청/대전",
      dealers: [
        { name: "대전", link: "#" },
        { name: "천안", link: "#" },
        { name: "청주", link: "#" },
      ],
    },
    {
      name: "전북/전주",
      dealers: [{ name: "전주", link: "#" }],
    },
    {
      name: "전남/광주",
      dealers: [
        { name: "광주", link: "#" },
        { name: "목포", link: "#" },
        { name: "순천", link: "#" },
      ],
    },
    {
      name: "경북/대구",
      dealers: [
        { name: "대구", link: "#" },
        { name: "서대구", link: "#" },
        { name: "수성", link: "#" },
        { name: "포항", link: "#" },
      ],
    },
    {
      name: "부산",
      dealers: [
        { name: "금정", link: "#" },
        { name: "민락", link: "#" },
      ],
    },
    {
      name: "경남/울산",
      dealers: [
        { name: "양산", link: "#" },
        { name: "진주", link: "#" },
        { name: "창원", link: "#" },
        { name: "울산", link: "#" },
      ],
    },
    {
      name: "강원/원주",
      dealers: [{ name: "원주", link: "#" }],
    },
  ]);
</script>