audi/app/pages/company/serviceCenter.vue

<template>
  <main>
    <section class="visual--section">
      <div class="img--wrap">
        <picture>
          <img src="/img/company/img--about1.jpg" alt="" />
        </picture>
      </div>
      <div class="title--wrap color--white">
        <h2>Company</h2>
      </div>
    </section>
    <div class="detail--container">
      <section>
        <div class="desc--section full--type">
          <h3 class="big--title">SERVICE CENTER</h3>
        </div>
      </section>
      <div class="content--wrap">
        <div class="dealer--search--section">
          <div class="dealer--search--container">
            <!-- 전시장 -->
            <div class="dealer--category--wrap">
              <div
                v-for="(dealer, dIndex) in showrooms"
                :key="'dealer-' + dIndex"
                class="dealer--region--item"
              >
                <button
                  class="dealer--region--header"
                  @click="
                    openDealerPopup(
                      dealer.name,
                      '',
                      'showroom',
                      dealer.detailInfo
                    )
                  "
                >
                  <span class="dealer--region--name">{{ dealer.name }}</span>
                  <span class="dealer--toggle--icon">+</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

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

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

  // 팝업 상태 관리
  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 getDealerDetailInfo = (dealerName, region, category, infodata) => {
    // 카테고리별 전체 이름 구성
    let fullName = "";
    if (category === "showroom") {
      fullName = `아우디 ${dealerName}`;
    } else if (category === "service") {
      fullName = `아우디 서비스 ${dealerName}`;
    }

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

    return detailInfo;
  };

  // 서비스센터 데이터
  const showrooms = ref([
    {
      name: "Dongdaemoon",
      link: "#",
      detailInfo: {
        imgsrc: "/img/company/img--serviceCenter1.jpg",
        imgsrc2: "/img/company/img--serviceCenter2.jpg",
        fullName: "동대문 서비스 센터",
        desc: "기존 성수 서비스센터가 이전하여 서울 동대문 서비스센터로 새롭게 오픈했습니다. 총 연면적 2,874㎡ 규모의 현대적인 공간에는 다이렉트 접수, 고급스러운 고객 라운지, 8개의 워크베이와 최신 장비를 갖추고 숙련된 인증 정비사들이 빠르고 정확한 서비스를 제공합니다. 서울 동부권 핵심 거점에 위치해 강남·서초·송파 등 주요 지역에서 20분 내 접근 가능하며,신차 구매부터 차량 정비까지 원스톱 프리미엄 서비스를 제공합니다. 또한, 아우디 트윈컵 세계대회에서 2013년 종합 우승, 2015년 2위, 2016년 우승, 2021년 종합 2위, 2024년 종합 2위를 차지한 우수 인력이 차량을 신속하고 정밀하게 관리해드립니다.",
        strongDesc: "(고진모터스 정비부문 8년 연속 최우수상 수상)",
        address: "서울시 동대문구 천호대로 445",
        phone: "02-3425-0033",
        fax: "",
        add1: "정비시간",
        adddesc1: "평일 8시30 ~ 18:00 (평일 및 토요일 2 ,4 주)",
      },
    },
    {
      name: "Nonhyeon",
      link: "#",
      detailInfo: {
        imgsrc: "/img/company/img--serviceCenter3.jpg",
        imgsrc2: "/img/company/img--serviceCenter4.jpg",
        imgsrc3: "/img/company/img--serviceCenter5.jpg",
        imgsrc4: "/img/company/img--serviceCenter6.jpg",
        imgsrc5: "/img/company/img--serviceCenter7.jpg",
        fullName: "논현 서비스센터",
        desc: "저희 고진모터스는 2014년 12월 강남구 논현동에 아우디 논현 서비스센터를 오픈 하였습니다. 아우디 논현 서비스 센터는 연면적 932.1m²의 아우디 A/S서비스 전용 건물로 수리공간인 워크베이가 총 6개 설치되어 일일 50대의 차량정비가 가능한 경정비 센터 입니다. 차량 정비를 기다리는 동안 편안한 휴식 및 업무를 보실 수 있도록 쾌적한 고객 라운지도 마련되어 있사오니 정비가 필요하신 고객분들의 많은 이용 바랍니다. 감사합니다. 아울러 아우디 트윈컵 세계대회에서 2013년 종합 우승, 2015년 2위, 2016년 우승을 차지한 당사 우수 인력들이 고객님의 차량을 보다 신속하고 정확하게 관리해드릴 것을 약속합니다. 감사합니다.",
        strongDesc: "(고진모터스 정비부문 8년 연속 최우수상 수상)",
        address: "서울시 강남구 언주로 133길 14 (서울시 강남구 논현동 83-16)",
        phone: "02-540-3900",
        fax: "",
        add1: "정비시간",
        adddesc1: "평일 09:00 ~ 18:00 (토요일 및 공휴일 휴무)",
      },
    },
    {
      name: "Suwon",
      link: "#",
      detailInfo: {
        imgsrc: "/img/company/img--serviceCenter8.jpg",
        imgsrc2: "/img/company/img--serviceCenter9.jpg",
        imgsrc3: "/img/company/img--serviceCenter10.jpg",
        imgsrc4: "/img/company/img--serviceCenter11.jpg",
        imgsrc5: "/img/company/img--serviceCenter12.jpg",
        fullName: "수원 서비스센터",
        desc: "저희 고진모터스의 수원 아우디 서비스센터는 경기도 지역 고객님들께 좀 더 가깝고, 빠른 서비스를 편안히 제공하기 위해 2013년10월 용인시 기흥구 영덕동에 대폭 확장된 신규 서비스센터를 오픈 하였습니다. 일일 최고 70대 차량의 정비가 가능하며, 숙련된 전문 정비 인력과 첨단 정비 기기를 배치하여 언제나 고객님의 차량을 완벽하게 수리 할 수 있는 준비가 되어있습니다. 또한 두명의 테크니션이 한개의 워크베이에서 정비를 담당하는 아우디 트윈 서비스(Twin Service) 를 통하여 작업시간을 단축시켜 고객 대기 시간을 최소화하였습니다. 새로운 시설, 새로운 마음가짐으로 뭉쳐진 아우디 수원 서비스센터를 경험해 보십시오.",
        strongDesc: "(고진모터스 정비부문 8년 연속 최우수상 수상)",
        address: "경기도 용인시 기흥구 중부대로 194 (경기도 용인시 기흥구 영덕동 94-1)",
        phone: "031-634-0033",
        fax: "",
        add1: "정비시간",
        adddesc1: "평일 09:00 ~ 18:00 (토요일 및 공휴일 휴무)",
      },
    },
    {
      name: "Cheonan",
      link: "#",
      detailInfo: {
        imgsrc: "/img/company/img--serviceCenter13.jpg",
        imgsrc2: "/img/company/img--serviceCenter14.jpg",
        imgsrc3: "/img/company/img--serviceCenter15.jpg",
        imgsrc4: "/img/company/img--serviceCenter16.jpg",
        imgsrc5: "/img/company/img--serviceCenter17.jpg",
        imgsrc6: "/img/company/img--serviceCenter18.jpg",
        imgsrc7: "/img/company/img--serviceCenter19.jpg",
        fullName: "천안 서비스센터",
        desc: "고객님의 안전한 운행을 위하여 열정을 가지고 근무하는 고진 모터스 천안 서비스센터 입니다. 저희의 열정과 고객님의 만족감이 동반 성장 될 수 있도록 열심히 노력 하겠습니다. 방문해 주셔서 감사 드립니다.",
        strongDesc: "(고진모터스 정비부문 8년 연속 최우수상 수상)",
        address: "충청남도 천안시 서북구 쌍용대로 245 (충청남도 천안시 서북구 성정동 932)",
        phone: "041-563-5900",
        fax: "",
        add1: "정비시간",
        adddesc1: "평일 09:00 ~ 18:00 (토요일 및 공휴일 휴무)",
      },
    },
    {
      name: "Daejeon",
      link: "#",
      detailInfo: {
        imgsrc: "/img/company/img--serviceCenter20.jpg",
        imgsrc2: "/img/company/img--serviceCenter21.jpg",
        imgsrc3: "/img/company/img--serviceCenter22.jpg",
        imgsrc4: "/img/company/img--serviceCenter23.jpg",
        imgsrc5: "/img/company/img--serviceCenter24.jpg",
        fullName: "대전 서비스센터",
        desc: "'아우디 서비스 대전'은 연면적 7,168m2 규모로 지하 2층, 지상 4층 구조로 이루어져 있습니다. 넓은 면적에 워크베이를 최대 62개 보유함으로써 국내 아우디 서비스센터 중 최다 워크베이를 갖춰 신속 정확한 정비가 가능합니다. 두 명의 테크니션이 한 개의 워크베이에서 정비를 담당하는 아우디 트윈 서비스(Twin Service)시행으로 작업 시간을 단축시켜 고객 대기 시간을 최소화하였습니다. 아울러 아우디 트윈컵 세계대회에서 2013년 종합 우승, 2015년 2위, 2016년 우승을 차지한 당사 우수 인력들이 고객님의 차량을 보다 신속하고 정확하게 관리해드릴 것을 약속합니다. 감사합니다.",
        strongDesc: "(고진모터스 정비부문 8년 연속 최우수상 수상)",
        address: "대전시 대덕구 신탄진로 341 (대전시 대덕구 와동 288-8)",
        phone: "042-862-8802",
        fax: "",
        add1: "정비시간",
        adddesc1: "평일 09:00 ~ 18:00 (토요일 및 공휴일 휴무)",
      },
    },
    {
      name: "Cheongju",
      link: "#",
      detailInfo: {
        imgsrc: "/img/company/img--serviceCenter25.jpg",
        imgsrc2: "/img/company/img--serviceCenter26.jpg",
        imgsrc3: "/img/company/img--serviceCenter27.jpg",
        imgsrc4: "/img/company/img--serviceCenter28.jpg",
        imgsrc5: "/img/company/img--serviceCenter29.jpg",
        imgsrc6: "/img/company/img--serviceCenter30.jpg",
        fullName: "청주 서비스센터",
        desc: "고객님의 안전한 운행을 위하여 열정을 가지고 근무하는 고진 모터스 청주 서비스센터 입니다. 저희의 열정과 고객님의 만족감이 동반 성장 될 수 있도록 열심히 노력 하겠습니다. 방문해 주셔서 감사 드립니다.",
        strongDesc: "(고진모터스 정비부문 8년 연속 최우수상 수상)",
        address: "충청북도 청주시 서원구 남이면 가마리 146-5",
        phone: "043-285-8802",
        fax: "",
        add1: "정비시간",
        adddesc1: "평일 09:00 ~ 18:00 (토요일 및 공휴일 휴무)",
      },
    },
    {
      name: "Gwangju",
      link: "#",
      detailInfo: {
        imgsrc: "/img/company/img--serviceCenter31.jpg",
        imgsrc2: "/img/company/img--serviceCenter32.jpg",
        imgsrc3: "/img/company/img--serviceCenter33.jpg",
        imgsrc4: "/img/company/img--serviceCenter34.jpg",
        imgsrc5: "/img/company/img--serviceCenter35.jpg",
        fullName: "광주 서비스센터",
        desc: "고진 모터스 아우디 광주 서비스센터는 2014년 7월 광주시 남구 송하동에 새롭게 확장 이전하여 고객 분들을 모시게 되었습니다. 연면적 3,209㎡, 지상 4층 의 아우디 A/S서비스 전용 건물로 센터 내에는 수리공간인 워크베이가 총 21개 설치되어 있어 하루 최대 70대의 차량 정비가 가능하며 판금 및 도색이 가능한 최첨단 시설도 함께 구비하여 보다 정밀한 작업을 가능하도록 했습니다. 또한, 고객이 차량을 입고하면 서비스 어드바이저와 함께 차량의 외관은 물론 타이어와 차량 하부 상태까지 확인할 수 있는 1:1 맞춤형 서비스를 제공하며, 대기 고객을 위해 건물 2층에 DVD룸 등 다양한 편의 시설을 구비했습니다. 아울러 아우디 트윈컵 세계대회에서 2013년 우승, 2015년 2위, 2016년 우승을 차지한 당사 우수 인력들이 고객님의 차량을 보다 신속하고 정확하게 관리해드릴 것을 약속합니다. 숙련된 정비인력과 최첨단 장비 및 편안한 휴식 공간을 준비하고 고객님을 기다리고 있는 고진모터스 아우디 광주 서비스 센터에서 최고의 서비스를 경험해보십시오. 감사합니다.",
        strongDesc: "(고진모터스 정비부문 8년 연속 최우수상 수상)",
        address: "광주시 남구 송암로 24번 가길 18 (광주시 남구 송하동 257-4)",
        phone: "062-524-5959",
        fax: "",
        add1: "정비시간",
        adddesc1: "평일 09:00 ~ 18:00 (토요일 및 공휴일 휴무)",
      },
    },
    {
      name: "Suncheon",
      link: "#",
      detailInfo: {
        imgsrc: "/img/company/img--serviceCenter36.jpg",
        imgsrc2: "/img/company/img--serviceCenter37.jpg",
        imgsrc3: "/img/company/img--serviceCenter38.jpg",
        imgsrc4: "/img/company/img--serviceCenter39.jpg",
        imgsrc5: "/img/company/img--serviceCenter40.jpg",
        fullName: "순천 서비스센터",
        desc: "고객님의 안전한 운행을 위하여 열정을 가지고 근무하는 고진 모터스 순천 서비스센터 입니다. 저희의 열정과 고객님의 만족감이 동반 성장 될 수 있도록 열심히 노력 하겠습니다. 방문해 주셔서 감사 드립니다.",
        strongDesc: "(고진모터스 정비부문 8년 연속 최우수상 수상)",
        address: "전라남도 순천시 왕지5길 4 (전라남도 순천시 왕지동 849-3) 지하 1층",
        phone: "061-724-3500",
        fax: "",
        add1: "정비시간",
        adddesc1: "평일 09:00 ~ 18:00 (토요일 및 공휴일 휴무)",
      },
    },
    {
      name: "Mokpo",
      link: "#",
      detailInfo: {
        imgsrc: "/img/company/img--serviceCenter41.jpg",
        imgsrc2: "/img/company/img--serviceCenter42.jpg",
        imgsrc3: "/img/company/img--serviceCenter43.jpg",
        imgsrc4: "/img/company/img--serviceCenter44.jpg",
        fullName: "목포 서비스센터",
        desc: "2023년 1월 목포시 평화로에 오픈한 아우디 목포 서비스센터는 연면적 599.15 ㎡, 지상 2층의 아우디 A/S 서비스 전용 건물로 센터 내에는 워크베이가 총 4개가 설치되어 있어 일일 최대 20대의 정비가 가능합니다. 또한, 서비스 어드바이저와 함께 차량의 외관은 물론 타이어와 차량 하부 상태까지 확인할 수 있는 1:1 맞춤형 서비스를 제공하며, 프리미엄 서비스 라운지를 마련하여, 대기 시간 동안 쾌적한 환경과 수준 높은 서비스를 제공해드리고 있습니다. 숙력된 정비 인력과 최첨단 장비 및 편안한 휴식 공간을 준비하고 고객님을 기다리고 있는 고진모터스 아우디 목포 서비스센터에서 최고의 서비스를 경험해보십시오. 고객 만족을 위해 최선을 다할 것을 약속 드립니다. 감사합니다.",
        strongDesc: "(고진모터스 정비부문 8년 연속 최우수상 수상)",
        address: "전라남도 목포시 평화로 153번길 16",
        phone: "061-803-1677",
        fax: "",
        add1: "정비시간",
        adddesc1: "평일 09:00 ~ 18:00 (토요일 및 공휴일 휴무)",
      },
    },
  ]);
</script>