Explorar o código

+ 서비스 센터 작업

송용우 hai 1 mes
pai
achega
6abf3ef4bb
Modificáronse 79 ficheiros con 1684 adicións e 115 borrados
  1. 383 34
      app/assets/scss/admin.scss
  2. 204 0
      app/components/block/DealerPopup.vue
  3. 1097 81
      app/pages/serviceprogram/dealersearch.vue
  4. BIN=BIN
      public/img/service/aap_bundang.webp
  5. BIN=BIN
      public/img/service/aap_daejun.webp
  6. BIN=BIN
      public/img/service/aap_dongdaegu.webp
  7. BIN=BIN
      public/img/service/aap_dongdaq.webp
  8. BIN=BIN
      public/img/service/aap_gwanhju.webp
  9. BIN=BIN
      public/img/service/aap_jj.webp
  10. BIN=BIN
      public/img/service/aap_kayang.webp
  11. BIN=BIN
      public/img/service/aap_kimpo.webp
  12. BIN=BIN
      public/img/service/aap_seosuwon.webp
  13. BIN=BIN
      public/img/service/aap_wonju.webp
  14. BIN=BIN
      public/img/service/aap_yangsan.webp
  15. BIN=BIN
      public/img/service/ansung.webp
  16. BIN=BIN
      public/img/service/anyang.webp
  17. BIN=BIN
      public/img/service/bundang.webp
  18. BIN=BIN
      public/img/service/cheonan.webp
  19. BIN=BIN
      public/img/service/chwon.webp
  20. BIN=BIN
      public/img/service/conceptkh.webp
  21. BIN=BIN
      public/img/service/conceptsuwon.webp
  22. BIN=BIN
      public/img/service/daechi.webp
  23. BIN=BIN
      public/img/service/daegu.webp
  24. BIN=BIN
      public/img/service/dj.webp
  25. BIN=BIN
      public/img/service/dongdae.webp
  26. BIN=BIN
      public/img/service/dongtan.webp
  27. BIN=BIN
      public/img/service/dosan.webp
  28. BIN=BIN
      public/img/service/gumj.webp
  29. BIN=BIN
      public/img/service/gwangju.webp
  30. BIN=BIN
      public/img/service/hanam.webp
  31. BIN=BIN
      public/img/service/hund.webp
  32. BIN=BIN
      public/img/service/ilsan.webp
  33. BIN=BIN
      public/img/service/incheon.webp
  34. BIN=BIN
      public/img/service/jj.webp
  35. BIN=BIN
      public/img/service/kangseo.webp
  36. BIN=BIN
      public/img/service/mockpo.webp
  37. BIN=BIN
      public/img/service/namsan.webp
  38. BIN=BIN
      public/img/service/seodaegu.webp
  39. BIN=BIN
      public/img/service/seosuwon.webp
  40. BIN=BIN
      public/img/service/songdo.webp
  41. BIN=BIN
      public/img/service/songpa.webp
  42. BIN=BIN
      public/img/service/ss_anyang.webp
  43. BIN=BIN
      public/img/service/ss_bundang.webp
  44. BIN=BIN
      public/img/service/ss_changwon.webp
  45. BIN=BIN
      public/img/service/ss_cheonan.webp
  46. BIN=BIN
      public/img/service/ss_cheongju.webp
  47. BIN=BIN
      public/img/service/ss_daegu.webp
  48. BIN=BIN
      public/img/service/ss_dajeon.webp
  49. BIN=BIN
      public/img/service/ss_dongdaq.webp
  50. BIN=BIN
      public/img/service/ss_dongtan.webp
  51. BIN=BIN
      public/img/service/ss_gepo.webp
  52. BIN=BIN
      public/img/service/ss_gumj.webp
  53. BIN=BIN
      public/img/service/ss_gwangju.webp
  54. BIN=BIN
      public/img/service/ss_ilsan.webp
  55. BIN=BIN
      public/img/service/ss_incheon.webp
  56. BIN=BIN
      public/img/service/ss_jeonju.webp
  57. BIN=BIN
      public/img/service/ss_jinju.webp
  58. BIN=BIN
      public/img/service/ss_kangdong.webp
  59. BIN=BIN
      public/img/service/ss_kimpo.webp
  60. BIN=BIN
      public/img/service/ss_minlac.webp
  61. BIN=BIN
      public/img/service/ss_mockpo.webp
  62. BIN=BIN
      public/img/service/ss_namsan.webp
  63. BIN=BIN
      public/img/service/ss_nonhyun.webp
  64. BIN=BIN
      public/img/service/ss_pohang.webp
  65. BIN=BIN
      public/img/service/ss_seodaegu.webp
  66. BIN=BIN
      public/img/service/ss_seosuwon.webp
  67. BIN=BIN
      public/img/service/ss_songpa.webp
  68. BIN=BIN
      public/img/service/ss_sukchon.webp
  69. BIN=BIN
      public/img/service/ss_suncheon.webp
  70. BIN=BIN
      public/img/service/ss_susung.webp
  71. BIN=BIN
      public/img/service/ss_suwon.webp
  72. BIN=BIN
      public/img/service/ss_ulsan.webp
  73. BIN=BIN
      public/img/service/ss_wonju.webp
  74. BIN=BIN
      public/img/service/ss_yangsan.webp
  75. BIN=BIN
      public/img/service/suwon.webp
  76. BIN=BIN
      public/img/service/uijeong.webp
  77. BIN=BIN
      public/img/service/ulsan.webp
  78. BIN=BIN
      public/img/service/westsuwon.webp
  79. BIN=BIN
      public/img/service/wonju.webp

+ 383 - 34
app/assets/scss/admin.scss

@@ -1649,40 +1649,7 @@
       gap: 16px;
       flex-wrap: wrap;
       
-      .default--round--btn {
-        flex-direction: column;
-        -webkit-box-align: center;
-        align-items: center;
-        -webkit-box-pack: center;
-        justify-content: center;
-        transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
-        transition-duration: 250ms;
-        border-radius: 999px;
-        cursor: pointer;
-        display: inline-flex;
-        border: 0px;      
-        letter-spacing: 0px;
-        font-weight: 400;
-        text-decoration: none;
-        font-size: 14px;
-        line-height: 20px;
-        font-stretch: 105%;
-        padding: 12px 24px;
-        min-height: 48px;      
-        background-color: rgb(24, 29, 37);
-        color: rgb(252, 252, 253);
-        box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
-        transition-property: color, box-shadow, background-color;
-        
-        &:hover {
-          background: rgba(44,52,63);                 
-          box-shadow: rgba(219,223,230, .2) 0px 0px 0px 1px inset;
-        }
-        
-        &:active {
-          transform: translateY(0);
-        }
-      }
+      
     }
     
     @media (max-width: 768px) {
@@ -1896,6 +1863,354 @@
 }
 
 
+
+// 딜러 검색 페이지 스타일
+.dealer--search--section{
+  padding: 64px 96px;
+  .dealer--search--container{      
+      margin: 0 auto;
+  }
+  .dealer--category--wrap{
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+  }
+  .dealer--region--item{
+      border-bottom: 1px solid rgba(252, 252, 253, 0.1);
+  }
+  .dealer--region--header{
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 24px 0;
+      background: transparent;
+      border: none;
+      color: #fcfcfd;
+      font-size: 24px;
+      font-family: 'AudiType';
+      font-weight: 400;
+      transition: all 0.3s;
+      &:hover{
+          color: rgba(252, 252, 253, 0.7);
+      }
+      &.active{
+          color: #fcfcfd;
+      }
+  }
+  .dealer--region--name{
+      font-size: 24px;
+  }
+  .dealer--toggle--icon{
+      font-size: 32px;
+      line-height: 1;
+      font-weight: 300;
+  }
+  .dealer--list--content{
+      padding-bottom: 24px;
+  }
+  .dealer--list{
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      >li{
+          list-style: none;
+      }
+  }
+  .dealer--link{
+      display: inline-block;
+      color: rgba(252, 252, 253, 0.7);
+      font-size: 16px;
+      text-decoration: underline;
+      text-underline-offset: 4px;
+      transition: all 0.3s;
+      background: transparent;
+      border: none;
+      font-family: 'AudiType';
+      font-weight: 400;
+      padding: 0;
+      cursor: pointer;
+      &:hover{
+          color: #fcfcfd;
+      }
+  }
+}
+
+// 딜러 팝업 스타일
+.dealer--popup--overlay{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(2, 2, 3, 0.85);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  padding: 20px;
+}
+
+.dealer--popup--container{
+  position: relative;
+  background-color: #1a1d23;
+  border-radius: 20px;
+  max-width: 1024px;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
+  &::-webkit-scrollbar{
+      width: 8px;
+  }
+  &::-webkit-scrollbar-track{
+      background: transparent;
+  }
+  &::-webkit-scrollbar-thumb{
+      background: rgba(252, 252, 253, 0.2);
+      border-radius: 4px;
+      &:hover{
+          background: rgba(252, 252, 253, 0.3);
+      }
+  }
+  
+  @media (min-width: 320px) {    
+    padding: 16px;
+  }
+  @media (min-width: 375px) {    
+    padding: 28px;    
+  }
+  
+  @media (min-width: 768px) {  
+    padding: 48px;    
+  }
+  @media (min-width: 1024px) {
+    padding: 56px;
+  }
+
+  @media (min-width: 1440px) {    
+    padding: 64px;    
+  }
+}
+
+.dealer--popup--close{
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  width: 40px;
+  height: 40px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  transition: all 0.3s;
+  &:hover{
+      background-color: rgba(252, 252, 253, 0.1);
+  }
+  .close--icon{
+      width: 24px;
+      height: 24px;
+      position: relative;
+      &::before,
+      &::after{
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 20px;
+          height: 2px;
+          background-color: #fcfcfd;
+      }
+      &::before{
+          transform: translate(-50%, -50%) rotate(45deg);
+      }
+      &::after{
+          transform: translate(-50%, -50%) rotate(-45deg);
+      }
+  }
+}
+
+.dealer--popup--content{  
+  margin: auto;
+  max-width: var(--max-content-width);
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas:"media" "textarea";
+  padding: var(--spacing-relative-xl) var(--spacing-relative-md);
+
+
+  @media (min-width: 1024px) {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: "media textarea";    
+  }
+  
+  @media (min-width: 1440px) {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: "media textarea";    
+  }
+
+
+
+  .dealer--thumb--wrap{
+    border-radius: 20px;
+    overflow: hidden;
+  }
+
+  .dealer--infos--wrap{
+    grid-area: textarea;
+    align-self: center;
+
+    @media screen and (min-width: 320px) {    
+      padding-block-start: var(--spacing-relative-lg);    
+    }
+    
+    @media screen and (min-width: 1024px) {      
+      display: flex;
+      flex-direction: column;
+      -webkit-box-pack: center;
+      justify-content: center;
+      align-items: flex-start;
+      padding-inline-start: var(--spacing-relative-2xl);
+      padding-inline-end: var(--spacing-relative-2xl);
+      padding-block-start: 0px;      
+    }
+  
+  
+  }
+}
+
+.dealer--popup--header{      
+  .dealer--name{
+    margin: 0px;
+    color: rgb(252, 252, 253);
+    font-family: AudiType, sans-serif;
+    letter-spacing: 0px;
+    font-weight: 400;
+    text-decoration: none;
+    font-size: 24px;
+    line-height: 36px;
+    font-stretch: 130%;
+    
+    @media (min-width: 1024px) {  
+      font-size: 28px;
+      line-height: 40px;  
+    }
+    
+    @media (min-width: 1440px) {  
+      font-size: 32px;
+      line-height: 44px;  
+    }    
+    
+    @media (min-width: 1920px) {  
+      font-size: 36px;
+      line-height: 52px;  
+    }
+  
+  
+  }
+  .dealer--type{
+      display: inline-block;
+      font-size: 14px;
+      color: rgba(252, 252, 253, 0.7);
+      padding: 4px 12px;
+      background-color: rgba(252, 252, 253, 0.1);
+      border-radius: 100px;
+  }
+}
+
+.dealer--popup--body{
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-top:8px;
+}
+
+.dealer--info--section{
+  display: flex;
+  flex-direction: column;
+  gap: 8px;  
+  .info--label{
+    margin: 0px;
+    color: rgba(252, 252, 253, 0.7);
+    font-family: AudiType, sans-serif;
+    letter-spacing: 0px;
+    font-weight: 400;
+    text-decoration: none;
+    font-size: 16px;
+    line-height: 24px;
+    font-stretch: 105%;
+    a{
+      word-break: break-all;
+    }
+  }  
+  .phone--link,
+  .email--link,
+  .website--link{
+      color: #fcfcfd;
+      text-decoration: underline;
+      text-underline-offset: 4px;
+      transition: all 0.3s;
+      &:hover{
+          color: rgba(252, 252, 253, 0.7);
+      }
+  }
+  .business--hours--item{
+      line-height: 1.8;
+  }
+}
+
+.dealer--popup--footer{
+  margin-top: 40px;
+  padding-top: 24px;
+  border-top: 1px solid rgba(252, 252, 253, 0.1);
+  display: flex;
+  justify-content: center;
+}
+
+.dealer--popup--empty{
+  padding: 80px 48px;
+  text-align: center;
+  >p{
+      font-size: 16px;
+      color: rgba(252, 252, 253, 0.7);
+  }
+}
+
+// 팝업 페이드 애니메이션
+.dealer--popup--fade-enter-active,
+.dealer--popup--fade-leave-active{
+  transition: opacity 0.3s ease;
+  .dealer--popup--container{
+      transition: transform 0.3s ease, opacity 0.3s ease;
+  }
+}
+
+.dealer--popup--fade-enter-from,
+.dealer--popup--fade-leave-to{
+  opacity: 0;
+  .dealer--popup--container{
+      transform: scale(0.95);
+      opacity: 0;
+  }
+}
+
+.dealer--popup--fade-enter-to,
+.dealer--popup--fade-leave-from{
+  opacity: 1;
+  .dealer--popup--container{
+      transform: scale(1);
+      opacity: 1;
+  }
+}
+
+
+
+
 /*=================================================
 |버튼 리스트 css
 |START
@@ -1935,6 +2250,40 @@
 }
 
 
+.default--round--btn {
+  flex-direction: column;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
+  transition-duration: 250ms;
+  border-radius: 999px;
+  cursor: pointer;
+  display: inline-flex;
+  border: 0px;      
+  letter-spacing: 0px;
+  font-weight: 400;
+  text-decoration: none;
+  font-size: 14px;
+  line-height: 20px;
+  font-stretch: 105%;
+  padding: 12px 24px;
+  min-height: 48px;      
+  background-color: rgb(24, 29, 37);
+  color: rgb(252, 252, 253);
+  box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
+  transition-property: color, box-shadow, background-color;
+  
+  &:hover {
+    background: rgba(44,52,63);                 
+    box-shadow: rgba(219,223,230, .2) 0px 0px 0px 1px inset;
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
 
 /*=================================================
 |버튼 리스트 css

+ 204 - 0
app/components/block/DealerPopup.vue

@@ -0,0 +1,204 @@
+<template>
+  <Teleport to="body">
+    <Transition name="dealer--popup--fade">
+      <div
+        v-if="isOpen"
+        class="dealer--popup--overlay"
+        @click.self="handleClose"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="dealerData ? 'dealer-name' : undefined"
+      >
+        <div class="dealer--popup--container" ref="popupRef">
+          <!-- 닫기 버튼 -->
+          <button
+            class="dealer--popup--close"
+            @click="handleClose"
+            aria-label="팝업 닫기"
+          >
+            <span class="close--icon"></span>
+          </button>
+
+          <!-- 팝업 내용 -->
+          <div v-if="dealerData" class="dealer--popup--content">
+            <div class="dealer--thumb--wrap">
+              <img :src="dealerData.imgsrc" />
+            </div>
+            <div class="dealer--infos--wrap">
+              <!-- 헤더 -->
+              <div class="dealer--popup--header">
+                <h2 id="dealer-name" class="dealer--name">
+                  {{ dealerData.fullName }}
+                </h2>
+              </div>
+
+              <!-- 정보 섹션 -->
+              <div class="dealer--popup--body">
+                <!-- 주소 -->
+                <div v-if="dealerData.address" class="dealer--info--section">
+                  <div class="info--label">주소: {{ dealerData.address }}</div>
+                </div>
+
+                <!-- 전화번호 -->
+                <div v-if="dealerData.phone" class="dealer--info--section">
+                  <div class="info--label">Tel: {{ dealerData.phone }}</div>
+                </div>
+
+                <!-- 이메일 -->
+                <div v-if="dealerData.email" class="dealer--info--section">
+                  <div class="info--label">
+                    E-mail:
+                    <a :href="`mailto:${dealerData.email}`" class="email--link">
+                      {{ dealerData.email }}
+                    </a>
+                  </div>
+                </div>
+
+                <!-- 추가내용 -->
+                <div v-if="dealerData.add1" class="dealer--info--section mt--20">
+                  <div class="info--label">
+                    {{ dealerData.add1 }}: {{ dealerData.adddesc1 }}
+                  </div>
+                </div>
+
+                <!-- 추가내용 -->
+                <div v-if="dealerData.add2" class="dealer--info--section">
+                  <div class="info--label">
+                    {{ dealerData.add2 }}: {{ dealerData.adddesc2 }}
+                  </div>
+                </div>
+
+                <!-- 추가내용 -->
+                <div v-if="dealerData.add3" class="dealer--info--section">
+                  <div class="info--label">
+                    {{ dealerData.add3 }}: {{ dealerData.adddesc3 }}
+                  </div>
+                </div>
+
+                <!-- 추가내용 -->
+                <div v-if="dealerData.addtext" class="dealer--info--section">
+                  <div class="info--label">
+                    {{ dealerData.addtext }}
+                  </div>
+                </div>
+
+                <!-- 웹사이트 -->
+                <div v-if="dealerData.website" class="dealer--info--section">
+                  <div class="info--label">
+                    <NuxtLink
+                      :to="dealerData.website"
+                      target="_blank"
+                      class="light--gray--btn mt--20 ft--14"
+                    >
+                      {{ dealerData.websitetitle }}
+                    </NuxtLink>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 데이터가 없을 때 -->
+          <div v-else class="dealer--popup--empty">
+            <p>딜러 정보를 불러올 수 없습니다.</p>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+  import { ref, watch, onMounted, onUnmounted } from "vue";
+
+  const props = defineProps({
+    isOpen: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    dealerData: {
+      type: Object,
+      default: null,
+    },
+  });
+
+  const emit = defineEmits(["close"]);
+
+  const popupRef = ref(null);
+
+  const handleClose = () => {
+    emit("close");
+  };
+
+  // ESC 키로 팝업 닫기
+  const handleEscKey = (event) => {
+    if (event.key === "Escape" && props.isOpen) {
+      handleClose();
+    }
+  };
+
+  // body 스크롤 제어
+  const toggleBodyScroll = (disable) => {
+    if (disable) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+  };
+
+  // 포커스 트랩
+  const handleFocusTrap = (event) => {
+    if (!props.isOpen || !popupRef.value) return;
+
+    const focusableElements = popupRef.value.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (event.key === "Tab") {
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  };
+
+  // isOpen 상태 감지
+  watch(
+    () => props.isOpen,
+    (newValue) => {
+      toggleBodyScroll(newValue);
+
+      if (newValue) {
+        // 팝업이 열릴 때 첫 번째 포커스 가능한 요소에 포커스
+        setTimeout(() => {
+          if (popupRef.value) {
+            const firstFocusable = popupRef.value.querySelector(
+              'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            );
+            if (firstFocusable) {
+              firstFocusable.focus();
+            }
+          }
+        }, 100);
+      }
+    }
+  );
+
+  onMounted(() => {
+    document.addEventListener("keydown", handleEscKey);
+    document.addEventListener("keydown", handleFocusTrap);
+  });
+
+  onUnmounted(() => {
+    document.removeEventListener("keydown", handleEscKey);
+    document.removeEventListener("keydown", handleFocusTrap);
+    toggleBodyScroll(false);
+  });
+</script>

+ 1097 - 81
app/pages/serviceprogram/dealersearch.vue

@@ -47,9 +47,19 @@
                     v-for="(dealer, dIndex) in region.dealers"
                     :key="'dealer-' + dIndex"
                   >
-                    <a :href="dealer.link" class="dealer--link"
-                      >아우디 {{ dealer.name }}</a
+                    <button
+                      @click="
+                        openDealerPopup(
+                          dealer.name,
+                          region.name,
+                          'showroom',
+                          dealer.detailInfo
+                        )
+                      "
+                      class="dealer--link"
                     >
+                      아우디 {{ dealer.name }}
+                    </button>
                   </li>
                 </ul>
               </div>
@@ -95,9 +105,19 @@
                     v-for="(dealer, dIndex) in region.dealers"
                     :key="'dealer-' + dIndex"
                   >
-                    <a :href="dealer.link" class="dealer--link"
-                      >아우디 AAP {{ dealer.name }}</a
+                    <button
+                      @click="
+                        openDealerPopup(
+                          dealer.name,
+                          region.name,
+                          'approved',
+                          dealer.detailInfo
+                        )
+                      "
+                      class="dealer--link"
                     >
+                      아우디 AAP {{ dealer.name }}
+                    </button>
                   </li>
                 </ul>
               </div>
@@ -140,9 +160,19 @@
                     v-for="(dealer, dIndex) in region.dealers"
                     :key="'dealer-' + dIndex"
                   >
-                    <a :href="dealer.link" class="dealer--link"
-                      >아우디 서비스 {{ dealer.name }}</a
+                    <button
+                      @click="
+                        openDealerPopup(
+                          dealer.name,
+                          region.name,
+                          'service',
+                          dealer.detailInfo
+                        )
+                      "
+                      class="dealer--link"
                     >
+                      아우디 서비스 {{ dealer.name }}
+                    </button>
                   </li>
                 </ul>
               </div>
@@ -151,6 +181,13 @@
         </div>
       </div>
     </div>
+
+    <!-- 딜러 상세 정보 팝업 -->
+    <DealerPopup
+      :isOpen="isPopupOpen"
+      :dealerData="selectedDealer"
+      @close="closeDealerPopup"
+    />
   </main>
 </template>
 
@@ -158,9 +195,49 @@
   // 컴포넌트 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");
 
+  // 팝업 상태 관리
+  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 === "approved") {
+      fullName = `아우디 AAP ${dealerName}`;
+    } else if (category === "service") {
+      fullName = `아우디 서비스 ${dealerName}`;
+    }
+
+    // 실제 딜러 상세 정보 (예시 데이터)
+    // 실제 프로젝트에서는 API나 데이터베이스에서 가져와야 합니다
+    let detailInfo = infodata;
+
+    return detailInfo;
+  };
+
   // 딜러 검색 드롭다운 상태 (지역별)
   const activeRegions = ref({
     showroom: null,
@@ -179,74 +256,468 @@
     {
       name: "서울",
       dealers: [
-        { name: "강서", link: "#" },
-        { name: "남산", link: "#" },
-        { name: "대치", link: "#" },
-        { name: "도산대로", link: "#" },
-        { name: "동대문", link: "#" },
-        { name: "송파대로", link: "#" },
+        {
+          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: "#" },
-        { name: "분당", link: "#" },
-        { name: "서수원", link: "#" },
-        { name: "송도", link: "#" },
-        { name: "수원", link: "#" },
-        { name: "컨셉스토어 스타필드 수원", link: "#" },
-        { name: "스타필드 안성", link: "#" },
-        { name: "스타필드 하남", link: "#" },
-        { name: "안양", link: "#" },
-        { name: "의정부", link: "#" },
-        { name: "인천", link: "#" },
-        { name: "일산", link: "#" },
+        {
+          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: "#" },
-        { name: "천안", link: "#" },
+        {
+          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: "#" }],
+      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: "#" },
-        { name: "목포", link: "#" },
+        {
+          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: "#" },
-        { name: "서대구", link: "#" },
+        {
+          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: "#" },
-        { name: "해운대", link: "#" },
+        {
+          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: "#" },
-        { name: "창원", link: "#" },
-        { name: "컨셉스토어 김해", link: "#" },
+        {
+          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: "#" }],
+      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: "한서모터스",
+          },
+        },
+      ],
     },
   ]);
 
@@ -255,41 +726,185 @@
     {
       name: "서울",
       dealers: [
-        { name: "동대문", link: "#" },
-        { name: "가양", link: "#" },
+        {
+          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: "#" },
-        { name: "분당", link: "#" },
-        { name: "서수원", link: "#" },
+        {
+          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: "#" }],
+      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: "#" }],
+      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: "#" }],
+      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: "#" }],
+      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: "#" }],
+      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: "#" }],
+      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: "한서모터스",
+          },
+        },
+      ],
     },
   ]);
 
@@ -298,76 +913,477 @@
     {
       name: "서울",
       dealers: [
-        { name: "개포", link: "#" },
-        { name: "김포공항", link: "#" },
-        { name: "남산", link: "#" },
-        { name: "논현", link: "#" },
-        { name: "송파대로", link: "#" },
-        { name: "석촌", link: "#" },
-        { name: "동대문", link: "#" },
+        {
+          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: "#" },
-        { name: "동탄", link: "#" },
-        { name: "분당", link: "#" },
-        { name: "서수원", link: "#" },
-        { name: "수원", link: "#" },
-        { name: "안양", link: "#" },
-        { name: "인천", link: "#" },
-        { name: "일산", link: "#" },
+        {
+          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: "#" },
-        { name: "천안", link: "#" },
-        { name: "청주", link: "#" },
+        {
+          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: "#" }],
+      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: "#" },
-        { name: "목포", link: "#" },
-        { name: "순천", link: "#" },
+        {
+          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: "#" },
-        { name: "서대구", link: "#" },
-        { name: "수성", link: "#" },
-        { name: "포항", link: "#" },
+        {
+          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: "#" },
-        { name: "민락", link: "#" },
+        {
+          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: "#" },
-        { name: "진주", link: "#" },
-        { name: "창원", link: "#" },
-        { name: "울산", link: "#" },
+        {
+          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: "#" }],
+      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>

BIN=BIN
public/img/service/aap_bundang.webp


BIN=BIN
public/img/service/aap_daejun.webp


BIN=BIN
public/img/service/aap_dongdaegu.webp


BIN=BIN
public/img/service/aap_dongdaq.webp


BIN=BIN
public/img/service/aap_gwanhju.webp


BIN=BIN
public/img/service/aap_jj.webp


BIN=BIN
public/img/service/aap_kayang.webp


BIN=BIN
public/img/service/aap_kimpo.webp


BIN=BIN
public/img/service/aap_seosuwon.webp


BIN=BIN
public/img/service/aap_wonju.webp


BIN=BIN
public/img/service/aap_yangsan.webp


BIN=BIN
public/img/service/ansung.webp


BIN=BIN
public/img/service/anyang.webp


BIN=BIN
public/img/service/bundang.webp


BIN=BIN
public/img/service/cheonan.webp


BIN=BIN
public/img/service/chwon.webp


BIN=BIN
public/img/service/conceptkh.webp


BIN=BIN
public/img/service/conceptsuwon.webp


BIN=BIN
public/img/service/daechi.webp


BIN=BIN
public/img/service/daegu.webp


BIN=BIN
public/img/service/dj.webp


BIN=BIN
public/img/service/dongdae.webp


BIN=BIN
public/img/service/dongtan.webp


BIN=BIN
public/img/service/dosan.webp


BIN=BIN
public/img/service/gumj.webp


BIN=BIN
public/img/service/gwangju.webp


BIN=BIN
public/img/service/hanam.webp


BIN=BIN
public/img/service/hund.webp


BIN=BIN
public/img/service/ilsan.webp


BIN=BIN
public/img/service/incheon.webp


BIN=BIN
public/img/service/jj.webp


BIN=BIN
public/img/service/kangseo.webp


BIN=BIN
public/img/service/mockpo.webp


BIN=BIN
public/img/service/namsan.webp


BIN=BIN
public/img/service/seodaegu.webp


BIN=BIN
public/img/service/seosuwon.webp


BIN=BIN
public/img/service/songdo.webp


BIN=BIN
public/img/service/songpa.webp


BIN=BIN
public/img/service/ss_anyang.webp


BIN=BIN
public/img/service/ss_bundang.webp


BIN=BIN
public/img/service/ss_changwon.webp


BIN=BIN
public/img/service/ss_cheonan.webp


BIN=BIN
public/img/service/ss_cheongju.webp


BIN=BIN
public/img/service/ss_daegu.webp


BIN=BIN
public/img/service/ss_dajeon.webp


BIN=BIN
public/img/service/ss_dongdaq.webp


BIN=BIN
public/img/service/ss_dongtan.webp


BIN=BIN
public/img/service/ss_gepo.webp


BIN=BIN
public/img/service/ss_gumj.webp


BIN=BIN
public/img/service/ss_gwangju.webp


BIN=BIN
public/img/service/ss_ilsan.webp


BIN=BIN
public/img/service/ss_incheon.webp


BIN=BIN
public/img/service/ss_jeonju.webp


BIN=BIN
public/img/service/ss_jinju.webp


BIN=BIN
public/img/service/ss_kangdong.webp


BIN=BIN
public/img/service/ss_kimpo.webp


BIN=BIN
public/img/service/ss_minlac.webp


BIN=BIN
public/img/service/ss_mockpo.webp


BIN=BIN
public/img/service/ss_namsan.webp


BIN=BIN
public/img/service/ss_nonhyun.webp


BIN=BIN
public/img/service/ss_pohang.webp


BIN=BIN
public/img/service/ss_seodaegu.webp


BIN=BIN
public/img/service/ss_seosuwon.webp


BIN=BIN
public/img/service/ss_songpa.webp


BIN=BIN
public/img/service/ss_sukchon.webp


BIN=BIN
public/img/service/ss_suncheon.webp


BIN=BIN
public/img/service/ss_susung.webp


BIN=BIN
public/img/service/ss_suwon.webp


BIN=BIN
public/img/service/ss_ulsan.webp


BIN=BIN
public/img/service/ss_wonju.webp


BIN=BIN
public/img/service/ss_yangsan.webp


BIN=BIN
public/img/service/suwon.webp


BIN=BIN
public/img/service/uijeong.webp


BIN=BIN
public/img/service/ulsan.webp


BIN=BIN
public/img/service/westsuwon.webp


BIN=BIN
public/img/service/wonju.webp