audi/app/pages/service/program/dealersearch.vue

<template>
  <main>
    <div class="detail--container--full">
      <!-- 풀사이즈 배너 텍스트 1줄용 -->
      <FullSizeBannerText1
        :imagePath="bannerImagePath"
        textLocation="top"
        :altText="altText"
        type="cover"
      />
      <template v-if="showShowrooms">
        <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"
                    >
                      <button
                        @click="
                          openDealerPopup(
                            dealer.name,
                            region.name,
                            'showroom',
                            dealer.detailInfo
                          )
                        "
                        class="dealer--link"
                      >
                        아우디 {{ dealer.name }}
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>

      <template v-if="showApprovedPlus">
        <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"
                    >
                      <button
                        @click="
                          openDealerPopup(
                            dealer.name,
                            region.name,
                            'approved',
                            dealer.detailInfo
                          )
                        "
                        class="dealer--link"
                      >
                        아우디 AAP {{ dealer.name }}
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>

      <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"
                  >
                    <button
                      @click="
                        openDealerPopup(
                          dealer.name,
                          region.name,
                          'service',
                          dealer.detailInfo
                        )
                      "
                      class="dealer--link"
                    >
                      아우디 서비스 {{ dealer.name }}
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 딜러 상세 정보 팝업 -->
    <DealerPopup
      :isOpen="isPopupOpen"
      :dealerData="selectedDealer"
      @close="closeDealerPopup"
    />
  </main>
</template>

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

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

  // URL 쿼리 파라미터 가져오기
  const route = useRoute();
  const filterParam = computed(() => route.query.filter);

  // filter=as일 때 전시장과 AAP 숨김
  const showShowrooms = computed(() => filterParam.value !== "as");
  const showApprovedPlus = computed(() => filterParam.value !== "as");

  // 팝업 상태 관리
  const isPopupOpen = ref(false);
  const selectedDealer = ref(null);

  // 딜러 클릭 핸들러
  const openDealerPopup = (dealerName, region, category, infodata) => {
    // 상세 딜러 정보 구성
    const dealerInfo = getDealerDetailInfo(dealerName, region, category, infodata);
    selectedDealer.value = dealerInfo;
    isPopupOpen.value = true;
  };

  // 팝업 닫기 핸들러
  const closeDealerPopup = () => {
    isPopupOpen.value = false;
    setTimeout(() => {
      selectedDealer.value = null;
    }, 300);
  };

  const altText = computed(() =>
    filterParam.value !== "as" ? "전시장/AAP 전시장/AS센터" : "AS센터"
  );

  // 딜러 상세 정보 가져오기 함수
  const getDealerDetailInfo = (dealerName, region, category, infodata) => {
    // 카테고리별 전체 이름 구성
    let fullName = "";
    if (category === "showroom") {
      fullName = `아우디 ${dealerName}`;
    } else if (category === "approved") {
      fullName = `아우디 AAP ${dealerName}`;
    } else if (category === "service") {
      fullName = `아우디 서비스 ${dealerName}`;
    }

    // 실제 딜러 상세 정보 (예시 데이터)
    // 실제 프로젝트에서는 API나 데이터베이스에서 가져와야 합니다
    let detailInfo = infodata;

    return detailInfo;
  };

  // 딜러 검색 드롭다운 상태 (지역별)
  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: "#",
          detailInfo: {
            imgsrc: "/img/service/kangseo.webp",
            fullName: "아우디 강서",
            address: "서울시 강서구 공항대로 105",
            phone: "02-3662-2588",
            email: "info@bayernauto.kr",
            website: "https://www.bayernauto.kr",
            websitetitle: "바이에른오토",
          },
        },
        {
          name: "남산",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/namsan.webp",
            fullName: "아우디 남산",
            address: "서울시 중구 동호로 211",
            phone: "02-797-1468",
            email: "webmaster@teianmotors.com",
            website: "https://www.teianmotors.com/",
            websitetitle: "태안모터스",
          },
        },
        {
          name: "대치",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/daechi.webp",
            fullName: "아우디 대치",
            address: "서울 강남구 대치동 1006",
            phone: "02-564-1468",
            email: "info@bayernauto.kr",
            website: "webmaster@teianmotors.com",
            websitetitle: "태안모터스",
          },
        },
        {
          name: "도산대로",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/dosan.webp",
            fullName: "아우디 도산대로",
            address: "서울시 강남구 도산대로 306",
            phone: "02-516-2468",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            add1: "충전기 설치 수량",
            adddesc1: "1대",
            add2: "충전소 운영 시간",
            adddesc2: "09:00~21:00",
            websitetitle: "고진모터스",
          },
        },
        {
          name: "동대문",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/dongdae.webp",
            fullName: "아우디 동대문",
            address: "서울시 동대문구 천호대로 445",
            phone: "02-2247-2460",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
        {
          name: "송파대로",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/songpa.webp",
            fullName: "아우디 송파대로",
            address: "서울시 송파구 충민로 2길 8",
            phone: "02-3434-9100",
            // email: "info@bayernauto.kr",
            website: "https://www.kolonauto.com",
            websitetitle: "코오롱아우토",
          },
        },
      ],
    },
    {
      name: "인천/경기",
      dealers: [
        {
          name: "동탄",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/dongtan.webp",
            fullName: "아우디 동탄",
            address: "경기도 화성시 동탄순환대로 763",
            phone: "031-263-0000",
            email: "audi@webonmotors.com",
            website: "https://webonmotors.co.kr/",
            websitetitle: "위본모터스",
          },
        },
        {
          name: "분당",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/bundang.webp",
            fullName: "아우디 분당",
            address: "경기도 성남시 분당구 새마을로 31",
            phone: "031-743-0000",
            email: "audi@webonmotors.com",
            website: "https://webonmotors.co.kr/",
            websitetitle: "위본모터스",
          },
        },
        {
          name: "서수원",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/seosuwon.webp",
            fullName: "아우디 서수원",
            address: "경기 수원시 권선구 권선로 308-5 도이치 오토월드 105 ~ 106호 (1층)",
            phone: "031-5174-0901",
            email: "info@bayernauto.kr",
            website: "https://www.bayernauto.kr",
            websitetitle: "바이에른오토",
          },
        },
        {
          name: "송도",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/songdo.webp",
            fullName: "아우디 송도",
            address: "인천광역시 연수구 센트럴로 232",
            phone: "032-832-1466",
            email: "webmaster@teianmotors.com",
            website: "https://www.teianmotors.com",
            websitetitle: "태안모터스",
          },
        },
        {
          name: "수원",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/suwon.webp",
            fullName: "아우디 수원",
            address: "경기도 수원시 영통구 중부대로 412",
            phone: "02-241-0033",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
        {
          name: "컨셉스토어 스타필드 수원",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/conceptsuwon.webp",
            fullName: "아우디 컨셉스토어 스타필드 수원",
            address: "경기 수원시 장안구 수성로 175 스타필드 수원1층 (1300호)",
            phone: "031-690-1191",
            email: "info@bayernauto.kr",
            website: "https://www.bayernauto.kr",
            websitetitle: "바이에른오토",
          },
        },
        {
          name: "스타필드 안성",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ansung.webp",
            fullName: "아우디 스타필드 안성",
            address: "경기 안성시 공도읍 서동대로 3930-39 / 스타필드 안성 1층",
            phone: "031-647-4028",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
        {
          name: "스타필드 하남",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/hanam.webp",
            fullName: "아우디 스타필드 하남",
            address: "경기도 하남시 미사대로 750 스타필드 하남 2층",
            phone: "031-827-9100",
            // email: "info@bayernauto.kr",
            website: "https://www.kolonauto.com",
            websitetitle: "코오롱아우토",
          },
        },
        {
          name: "안양",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/anyang.webp",
            fullName: "아우디 안양",
            address: "경기도 안양시 동안구 벌말로 87",
            phone: "031-422-0000",
            email: "audi@webonmotors.com",
            website: "https://webonmotors.co.kr/",
            websitetitle: "위본모터스",
          },
        },
        {
          name: "의정부",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/uijeong.webp",
            fullName: "아우디 의정부",
            address: "경기 의정부시 동일로 113",
            phone: "031-876-2553",
            email: "info@bayernauto.kr",
            website: "https://www.bayernauto.kr",
            websitetitle: "바이에른오토",
          },
        },
        {
          name: "인천",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/incheon.webp",
            fullName: "아우디 인천",
            address: "인천광역시 남동구 인주대로 679",
            phone: "032-465-1468",
            email: "webmaster@teianmotors.com",
            website: "https://www.teianmotors.com",
            websitetitle: "태안모터스",
          },
        },
        {
          name: "일산",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ilsan.webp",
            fullName: "아우디 일산",
            address: "경기도 고양시 일산동구 중앙로 1019",
            phone: "031-905-1468",
            email: "webmaster@teianmotors.com",
            website: "https://www.teianmotors.com",
            websitetitle: "태안모터스",
          },
        },
      ],
    },
    {
      name: "충청/대전",
      dealers: [
        {
          name: "대전",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/dj.webp",
            fullName: "아우디 대전",
            address: "대전광역시 대덕구 한밭대로 1108",
            phone: "042-863-8787",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
        {
          name: "천안",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/cheonan.webp",
            fullName: "아우디 천안",
            address:
              "충청남도 천안시 서북구 쌍용대로 245 (충청남도 천안시 서북구 성정동 932)",
            phone: "041-567-3111",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
      ],
    },
    {
      name: "전북/전주",
      dealers: [
        {
          name: "전주",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/jj.webp",
            fullName: "아우디 전주",
            address: "전라북도 전주시 완산구 쑥고개로 372",
            phone: "063-915-0000",
            email: "joongsan@jsautogroup.co.kr",
            website: "https://jjsmotors.co.kr",
            websitetitle: "중산모터스",
          },
        },
      ],
    },
    {
      name: "전남/광주",
      dealers: [
        {
          name: "광주",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/gwangju.webp",
            fullName: "아우디 광주",
            address: "광주광역시 서구 무진대로 955",
            phone: "062-525-8777",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
        {
          name: "목포",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/mockpo.webp",
            fullName: "아우디 목포",
            address: "전라남도 목포시 평화로 87",
            phone: "061-284-1677",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
      ],
    },
    {
      name: "경북/대구",
      dealers: [
        {
          name: "대구",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/daegu.webp",
            fullName: "아우디 대구",
            address: "대구광역시 수성구 들안로 185",
            phone: "053-744-7070",
            email: "hyaudihr@hyaudi.co.kr",
            website: "http://www.hyaudi.co.kr",
            websitetitle: "한영모터스",
          },
        },
        {
          name: "서대구",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/seodaegu.webp",
            fullName: "아우디 서대구",
            address: "대구광역시 달서구 와룡로 170",
            phone: "053-760-9100",
            // email: "info@bayernauto.kr",
            website: "https://www.kolonauto.com",
            websitetitle: "코오롱아우토",
          },
        },
      ],
    },
    {
      name: "부산",
      dealers: [
        {
          name: "금정",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/gumj.webp",
            fullName: "아우디 금정",
            address: "부산광역시 금정구 중앙대로 1661",
            phone: "051-582-0000",
            email: "audi@ironauto.net",
            website: "https://www.ironauto.net",
            websitetitle: "아이언오토",
          },
        },
        {
          name: "해운대",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/hund.webp",
            fullName: "아우디 해운대",
            address: "부산광역시 해운대구 센텀 4로 15 신세계 센텀시티몰 1층",
            phone: "051-747-7000",
            add1: "전기차 충전소 영업시간",
            adddesc1: "10:30~20:00",
            add2: "충전기 수량",
            adddesc2: "1대",
            addtext: "*전시장 운영시간은 신세계 센텀시티몰과 동일합니다.",
            email: "audi@ironauto.net",
            website: "https://www.ironauto.net",
            websitetitle: "아이언오토",
          },
        },
      ],
    },
    {
      name: "경남/울산",
      dealers: [
        {
          name: "울산",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ulsan.webp",
            fullName: "아우디 울산",
            address: "울산광역시 남구 돋질로 356",
            phone: "052-268-3000",
            add1: "전기차 충전소 영업시간",
            adddesc1: "8:30~20:00",
            add2: "충전기 수량",
            adddesc2: "2대",
            email: "audi@ironauto.net",
            website: "https://www.ironauto.net",
            websitetitle: "아이언오토",
          },
        },
        {
          name: "창원",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/chwon.webp",
            fullName: "아우디 창원",
            address: "경상남도 창원시 마산합포구 서성로 11",
            phone: "055-241-5000",
            add1: "전기차 충전소 영업시간",
            adddesc1: "8:30~20:00",
            add2: "충전기 수량",
            adddesc2: "1대",
            email: "audi@ironauto.net",
            website: "https://www.ironauto.net",
            websitetitle: "아이언오토",
          },
        },
        {
          name: "컨셉스토어 김해",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/conceptkh.webp",
            fullName: "아우디 컨셉스토어 김해",
            address: "경남 김해시 김해대로 2232 (신세계백화점 김해점 1층)",
            phone: "055-272-1188",
            email: "audi@ironauto.net",
            website: "https://www.ironauto.net",
            websitetitle: "아이언오토",
          },
        },
      ],
    },
    {
      name: "강원/원주",
      dealers: [
        {
          name: "원주",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/wonju.webp",
            fullName: "아우디 원주",
            address: "강원도 원주시 치악로 1316",
            phone: "033-766-7786",
            // email: "info@bayernauto.kr",
            website: "https://www.hanseomotors.co.kr",
            websitetitle: "한서모터스",
          },
        },
      ],
    },
  ]);

  // Audi Approved :plus 데이터
  const approvedPlus = ref([
    {
      name: "서울",
      dealers: [
        {
          name: "동대문",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/aap_dongdaq.webp",
            fullName: "아우디 AAP 동대문",
            address: "서울시 성동구 자동차시장1길96 카서울닷컴 2층  ",
            phone: "02-6494-2620",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
        {
          name: "가양",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/aap_kayang.webp",
            fullName: "아우디 AAP 가양",
            address: "서울시 강서구 양천로 390 강서오토플렉스 1층 전시장 ",
            phone: "02-6443-8468",
            email: "webmaster@teianmotors.com",
            website: "https://www.teianmotors.com",
            websitetitle: "태안모터스",
          },
        },
      ],
    },
    {
      name: "인천/경기",
      dealers: [
        {
          name: "김포",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/aap_kimpo.webp",
            fullName: "아우디 AAP 김포",
            address: "경기도 김포시 고촌읍 아라육로 152번길 45 김포국민차매매단지 1층 ",
            phone: "031-812-9100",
            // email: "info@bayernauto.kr",
            website: "https://www.kolonauto.com",
            websitetitle: "코오롱아우토",
          },
        },
        {
          name: "분당",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/aap_bundang.webp",
            fullName: "아우디 AAP 분당",
            address: "경기도 성남시 분당구 새마을로 31,2층(서현동 197-1)",
            phone: "031-711-8181 ",
            email: "audi@webonmotors.com",
            website: "https://webonmotors.co.kr/",
            websitetitle: "위본모터스",
          },
        },
        {
          name: "서수원",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/aap_seosuwon.webp",
            fullName: "아우디 AAP 서수원",
            address: "경기도 수원시 권선구 권선로 308-5(고색동,도이치오토월드),110B호 ",
            phone: "031-5174-0909",
            email: "info@bayernauto.kr",
            website: "https://www.bayernauto.kr",
            websitetitle: "바이에른오토",
          },
        },
      ],
    },
    {
      name: "충청/대전",
      dealers: [
        {
          name: "대전",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/aap_daejun.webp",
            fullName: "아우디 AAP 대전",
            address: "대전광역시 유성구 유성대로 510,101호(복용동,대전오토월드)",
            phone: "042-719-8237",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
      ],
    },
    {
      name: "전남/광주",
      dealers: [
        {
          name: "광주",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/aap_gwanhju.webp",
            fullName: "아우디 AAP 광주",
            address: "광주광역시 서구 회재유통길 78,2층 234호(매월동,앰플러스 B동) ",
            phone: "062-716-8237",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
      ],
    },
    {
      name: "전북/전주",
      dealers: [
        {
          name: "전주",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/app_jj.webp",
            fullName: "아우디 AAP 전주",
            address: "전북 완주군 이서면 콩쥐팥쥐로 964(이서면 은교리 750-8)",
            phone: "063-290-0088",
            email: "joongsan@jsautogroup.co.kr",
            website: "https://jjsmotors.co.kr",
            websitetitle: "중산모터스",
          },
        },
      ],
    },
    {
      name: "경북/대구",
      dealers: [
        {
          name: "동대구",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/aap_dongdaegu.webp",
            fullName: "아우디 AAP 동대구",
            address: "대구광역시 동구 반야월로 263(동호동 더카 3층)301호 ",
            phone: "053-755-7070",
            email: "hyaudihr@hyaudi.co.kr",
            website: "http://www.hyaudi.co.kr",
            websitetitle: "한영모터스",
          },
        },
      ],
    },
    {
      name: "경남/울산",
      dealers: [
        {
          name: "양산",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/aap_yangsan.webp",
            fullName: "아우디 AAP 양산",
            address: "경남 양산시 상북면 양산대로 1222 ",
            phone: "055-375-6555",
            email: "audi@ironauto.net",
            website: "https://www.ironauto.net",
            websitetitle: "아이언오토",
          },
        },
      ],
    },
    {
      name: "강원/원주",
      dealers: [
        {
          name: "원주",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/aap_wonju.webp",
            fullName: "아우디 AAP 원주",
            address: "강원특별자치도 원주시 치악로 1221-7,3층",
            phone: "033-900-0700",
            // email: "info@bayernauto.kr",
            website: "https://www.hanseomotors.co.kr",
            websitetitle: "한서모터스",
          },
        },
      ],
    },
  ]);

  // 서비스센터 데이터
  const serviceCenters = ref([
    {
      name: "서울",
      dealers: [
        {
          name: "개포",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_gepo.webp",
            fullName: "아우디 서비스 강서",
            address: "서울시 강남구 논현로 18길 9",
            phone: "02-573-1463",
            email: "webmaster@teianmotors.com",
            website: "https://www.teianmotors.com/",
            websitetitle: "태안모터스",
          },
        },
        {
          name: "김포공항",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_kimpo.webp",
            fullName: "아우디 서비스 김포공항",
            address: "서울 강서구 하늘길 38 롯데몰 김포공항점 P1",
            phone: "02-6116-3240",
            email: "info@bayernauto.kr",
            website: "https://www.bayernauto.kr",
            websitetitle: "바이에른오토",
          },
        },
        {
          name: "남산",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_namsan.webp",
            fullName: "아우디 서비스 남산",
            address: "서울 중구 동호로 211",
            phone: "02-798-1468",
            email: "webmaster@teianmotors.com",
            website: "https://www.teianmotors.com/",
            websitetitle: "태안모터스",
          },
        },
        {
          name: "논현",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_nonhyun.webp",
            fullName: "아우디 서비스 논현",
            address: "서울시 강남구 언주로 133길 14",
            phone: "02-540-3900",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
        {
          name: "송파대로",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_songpa.webp",
            fullName: "아우디 서비스 송파대로",
            address: "서울특별시 송파구 충민로 2길 8",
            phone: "02-2185-0200",
            email: "kolonauto@kolon.com",
            website: "https://www.kolonauto.com",
            websitetitle: "코오롱아우토",
          },
        },
        {
          name: "석촌",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_sukchon.webp",
            fullName: "아우디 서비스 석촌",
            address: "서울특별시 송파구 삼학사로 26",
            phone: "02-424-1463",
            email: "webmaster@teianmotors.com",
            website: "https://www.teianmotors.com/",
            websitetitle: "태안모터스",
          },
        },
        {
          name: "동대문",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_dongdaq.webp",
            fullName: "아우디 서비스 동대문",
            address: "서울특별시 동대문구 천호대로 445",
            phone: "02-3425-0033",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
      ],
    },
    {
      name: "인천/경기",
      dealers: [
        {
          name: "강동",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_kangdong.webp",
            fullName: "아우디 서비스 강동",
            address: "경기도 하남시 미사강변중앙로 33",
            phone: "031-793-0200",
            email: "kolonauto@kolon.com",
            website: "https://www.kolonauto.com",
            websitetitle: "코오롱아우토",
          },
        },
        {
          name: "동탄",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_dongtan.webp",
            fullName: "아우디 서비스 동탄",
            address: "경기도 화성시 동탄순환대로 763",
            phone: "031-5183-3000",
            email: "audi@webonmotors.com",
            website: "https://webonmotors.co.kr/",
            websitetitle: "위본모터스",
          },
        },
        {
          name: "분당",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_bundang.webp",
            fullName: "아우디 서비스 분당",
            address: "경기도 성남시 분당구 새마을로 31",
            phone: "031-715-8255",
            email: "audi@webonmotors.com",
            website: "https://webonmotors.co.kr/",
            websitetitle: "위본모터스",
          },
        },
        {
          name: "서수원",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_seosuwon.webp",
            fullName: "아우디 서비스 서수원",
            address: "경기도 수원시 권선구 권선로 308-5 지하1층 아우디 서비스센터",
            phone: "031-8067-7119",
            email: "info@bayernauto.kr",
            website: "https://www.bayernauto.kr",
            websitetitle: "바이에른오토",
          },
        },
        {
          name: "수원",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_suwon.webp",
            fullName: "아우디 서비스 수원",
            address: "경기도 용인시 기흥구 중부대로 194",
            phone: "031-634-0033",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
        {
          name: "안양",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_anyang.webp",
            fullName: "아우디 서비스 안양",
            address: "경기도 안양시 동안구 벌말로 87",
            phone: "031-5183-3030",
            email: "audi@webonmotors.com",
            website: "https://webonmotors.co.kr/",
            websitetitle: "위본모터스",
          },
        },
        {
          name: "인천",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_incheon.webp",
            fullName: "아우디 서비스 인천",
            address: "인천광역시 남동구 논현고잔로 128번길 66",
            phone: "032-433-1463",
            email: "webmaster@teianmotors.com",
            website: "https://www.teianmotors.com",
            websitetitle: "태안모터스",
          },
        },
        {
          name: "일산",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_ilsan.webp",
            fullName: "아우디 서비스 일산",
            address: "경기도 고양시 일산서구 송파로 131",
            phone: "031-905-1463",
            email: "webmaster@teianmotors.com",
            website: "https://www.teianmotors.com",
            websitetitle: "태안모터스",
          },
        },
      ],
    },
    {
      name: "충청/대전",
      dealers: [
        {
          name: "대전",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_dajeon.webp",
            fullName: "아우디 서비스 대전",
            address: "대전광역시 대덕구 신탄진로 341",
            phone: "042-862-8802",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
        {
          name: "천안",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_cheonan.webp",
            fullName: "아우디 서비스 천안",
            address:
              "충청남도 천안시 서북구 쌍용대로 245 (충청남도 천안시 서북구 성정동 932)",
            phone: "041-563-5900",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
        {
          name: "청주",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_cheongju.webp",
            fullName: "아우디 서비스 청주",
            address: "충북 청주시 서원구 남이면 2순환로 1675",
            phone: "043-285-8802",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
      ],
    },
    {
      name: "전북/전주",
      dealers: [
        {
          name: "전주",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_jeonju.webp",
            fullName: "아우디 서비스 전주",
            address: "전라북도 완주군 콩쥐팥쥐로 964",
            phone: "063-290-0000",
            email: "joongsan@jsautogroup.co.kr",
            website: "https://jjsmotors.co.kr",
            websitetitle: "중산모터스",
          },
        },
      ],
    },
    {
      name: "전남/광주",
      dealers: [
        {
          name: "광주",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_gwangju.webp",
            fullName: "아우디 서비스 광주",
            address: "광주광역시 남구 송암로 24번가길 18",
            phone: "062-524-5959",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
        {
          name: "목포",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_mockpo.webp",
            fullName: "아우디 서비스 목포",
            address: "전라남도 목포시 옥암동 1091-16",
            phone: "061-803-1677",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
        {
          name: "순천",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_suncheon.webp",
            fullName: "아우디 서비스 순천",
            address: "전라남도 순천시 왕지5길 4",
            phone: "061-724-3500",
            email: "gojin@gojin.com",
            website: "https://www.gojin.com/",
            websitetitle: "고진모터스",
          },
        },
      ],
    },
    {
      name: "경북/대구",
      dealers: [
        {
          name: "대구",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_daegu.webp",
            fullName: "아우디 서비스 대구",
            address: "대구광역시 서구 서대구로 63길 5",
            phone: "053-350-8900",
            email: "hyaudihr@hyaudi.co.kr",
            website: "http://www.hyaudi.co.kr",
            websitetitle: "한영모터스",
          },
        },
        {
          name: "서대구",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_seodaegu.webp",
            fullName: "아우디 서비스 서대구",
            address: "대구광역시 달서구 와룡로 170",
            phone: "053-780-0200",
            email: "kolonauto@kolon.com",
            website: "https://www.kolonauto.com",
            websitetitle: "코오롱아우토",
          },
        },
        {
          name: "수성",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_susung.webp",
            fullName: "아우디 서비스 수성",
            address: "대구광역시 수성구 수성로 247",
            phone: "053-255-8900",
            email: "hyaudihr@hyaudi.co.kr",
            website: "http://www.hyaudi.co.kr",
            websitetitle: "한영모터스",
          },
        },
        {
          name: "포항",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_pohang.webp",
            fullName: "아우디 서비스 포항",
            address: "경상북도 포항시 남구 연일중앙로 59",
            phone: "054-283-3006",
            email: "hyas@hyaudi.co.kr",
            website: "http://www.hyaudi.co.kr",
            websitetitle: "한영모터스",
          },
        },
      ],
    },
    {
      name: "부산",
      dealers: [
        {
          name: "금정",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_gumj.webp",
            fullName: "아우디 서비스 금정",
            address: "부산시 금정구 중앙대로 1661",
            phone: "051-512-0008",
            email: "audi@ironauto.net",
            website: "https://www.ironauto.net",
            websitetitle: "아이언오토",
          },
        },
        {
          name: "민락",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_minlac.webp",
            fullName: "아우디 서비스 민락",
            address: "부산광역시 수영구 무학로 60",
            phone: "051-759-4900",
            email: "audi@ironauto.net",
            website: "https://www.ironauto.net",
            websitetitle: "아이언오토",
          },
        },
      ],
    },
    {
      name: "경남/울산",
      dealers: [
        {
          name: "양산",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_yangsan.webp",
            fullName: "아우디 서비스 양산",
            address: "경상남도 양산시 양산대로 1222",
            phone: "055-375-7400",
            email: "audi@ironauto.net",
            website: "https://www.ironauto.net",
            websitetitle: "아이언오토",
          },
        },
        {
          name: "진주",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_jinju.webp",
            fullName: "아우디 서비스 진주",
            address: "경남 진주시 천수로 294-1 (신안동)",
            phone: "055-746-5500",
            email: "audi@ironauto.net",
            website: "https://www.ironauto.net",
            websitetitle: "아이언오토",
          },
        },
        {
          name: "창원",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_changwon.webp",
            fullName: "아우디 서비스 창원",
            address: "경상남도 창원시 마산합포구 서성로 11",
            phone: "055-241-2200",
            email: "audi@ironauto.net",
            website: "https://www.ironauto.net",
            websitetitle: "아이언오토",
          },
        },
        {
          name: "울산",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_ulsan.webp",
            fullName: "아우디 서비스 울산",
            address: "울산광역시 남구 돋질로 356",
            phone: "052-268-3003",
            email: "audi@ironauto.net",
            website: "https://www.ironauto.net",
            websitetitle: "아이언오토",
          },
        },
      ],
    },
    {
      name: "강원/원주",
      dealers: [
        {
          name: "원주",
          link: "#",
          detailInfo: {
            imgsrc: "/img/service/ss_wonju.webp",
            fullName: "아우디 서비스 원주",
            address: "강원도 원주시 치악로 1221-7",
            phone: "033-764-8787",
            //email: "info@bayernauto.kr",
            website: "https://www.hanseomotors.co.kr",
            websitetitle: "한서모터스",
          },
        },
      ],
    },
  ]);
</script>