Company 메뉴 완료, 푸터 작업중

app/assets/scss/admin.scss

@@ -2457,7 +2457,7 @@ html {
   .dealer--category--wrap{
       display: flex;
       flex-direction: column;
-      gap: 16px;
+      //gap: 16px;
   }
   .dealer--region--item{
       border-bottom: 1px solid rgba(252, 252, 253, 0.1);
@@ -3536,7 +3536,7 @@ header{
 
 footer{
   width: 100%;
-  --one-footer-color-black: hsla(216, 26%, 1%, 1);
+  //--one-footer-color-black: hsla(216, 26%, 1%, 1);
   --one-footer-color-white: hsla(216, 33%, 99%, 1);
   --one-footer-neutral-5: hsla(216, 26%, 1%, 0.6);
   --one-footer-neutral-10: hsla(216, 17%, 26%, 1);

app/assets/scss/style.scss

@@ -30,6 +30,30 @@ body{
     font-weight: 400;
 }
 
+.ellipsis1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1; 
+    -webkit-box-orient: vertical;
+} 
+
+.ellipsis2 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; 
+    -webkit-box-orient: vertical;
+}
+
+.ellipsis3 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3; 
+    -webkit-box-orient: vertical;
+} 
+
 *{
     background-repeat: no-repeat;    
 }
@@ -65,6 +89,14 @@ main{
                 height: 800px;
             }
         }
+        &.h--430{
+            .img--wrap{
+                height: 430px;
+                img{
+                    object-position: 70% top;
+                }
+            }
+        }
         .img--wrap{
             overflow: hidden;
             height: 100vh;
@@ -89,6 +121,12 @@ main{
             >p{
                 font-size: 20px;
             }
+            .greeting--txt{
+                margin-top: 30px;
+                line-height: 1.7;
+                font-size: 14px;
+                height: 190px;
+            }
             &.color--white{
                 color: #fcfcfd;
             }
@@ -169,6 +207,94 @@ main{
                     }
                 }
             }
+            // 이벤트 게시판
+            .event--wrap{
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 40px 16px;
+                margin-bottom: 80px;
+                .event--card{
+                    display: flex;
+                    flex-direction: column;
+                    .img--wrap{
+                        margin-bottom: 24px;
+                        border-radius: 20px;
+                        overflow: hidden;
+                        img{
+                            width: 100%;
+                            aspect-ratio: 16 / 9;
+                            object-fit: cover;
+                        }
+                    }
+                    h3{
+                        font-size: 24px;
+                        margin-bottom: 24px;
+                    }
+                    a{
+                        display: flex;
+                        font-size: 16px;
+                        text-underline-offset: 7px;
+                        text-decoration: underline 1px rgb(252, 252, 253);
+                        align-items: center;
+                        color: rgb(252, 252, 253);
+                        .ico{
+                            width: 24px;
+                            height: 24px;
+                            background-image: url(/img/ico--arrow.svg);
+                        }
+                    }
+                }
+            }
+            // 뉴스 게시판
+            .news--wrap{
+                margin-bottom: 80px;
+                .news--table{
+                    width: 100%;
+                    table-layout: fixed;
+                    thead{
+                        tr{
+                            border-top: 2px solid #fff;
+                            border-bottom: 1px solid rgba(252, 252, 253, 0.7);
+                            th{
+                                padding: 20px 0;
+                                text-align: center;
+                            }
+                        }
+                    }
+                    tbody{
+                        tr{
+                            td{
+                                text-align: center;
+                                padding: 20px 0;
+                                font-size: 16px;
+                                white-space: nowrap;
+                            }
+                            cursor: pointer;
+                            transition: all 0.3s;
+                            &:hover{
+                                background-color: rgba(252, 252, 253, 0.3);
+                            }
+                            &:last-child{
+                                border-bottom: 1px solid rgba(252, 252, 253, 0.7);
+                            }
+                        }
+                    }
+                }
+            }
+            .view--wrap{
+                .title--wrap{
+                    >h2{
+                        font-size: 48px;
+                    }
+                    border-top: 1px solid rgba(252,252,253,0.7);
+                    border-bottom: 1px solid rgba(252,252,253,0.7);
+                }
+                .cont--wrap{
+                    padding: 70px 0;
+                    margin-bottom: 200px;
+                    border-bottom: 1px solid rgba(252,252,253,0.7);
+                }
+            }
             .ls--card--wrap{
                 .ls--card{
                     display: flex;
@@ -202,6 +328,95 @@ main{
                     }
                 }
             }
+            .sales--advisor--wrap{
+                padding: 60px 0;
+                .sales--team--wrap{
+                    h3{
+                        font-size: 20px;
+                        font-weight: 600;
+                        margin-bottom: 30px;
+                        margin-top: 60px;
+                    }
+                    &:first-child{
+                        h3{
+                            margin-top: 0;
+                        }
+                    }
+                    .advisor--list{
+                        >ul{
+                            display: flex;
+                            flex-wrap: wrap;
+                            >li{
+                                width: 25%;
+                                display: flex;
+                                flex-direction: column;
+                                align-items: center;
+                                position: relative;
+                                padding: 25px;
+                                border: 1px solid #555;
+                                background-color: rgba(219, 223, 230, 0.05);
+                                margin-left: -1px;
+                                margin-top: -1px;
+                                &.flag{
+                                    &::after{
+                                        content: '';
+                                        top: -10px;
+                                        left: 0;
+                                        display: inline-block;
+                                        position: absolute;
+                                        width: 53px;
+                                        background-image: url(/img/company/img--flag.jpg);
+                                        height: 54px;
+                                    }
+                                }
+                                .advisor--img{
+                                    width: 172px;
+                                    height: 210px;
+                                    img{
+                                        width: 100%;
+                                        height: 100%;
+                                        object-fit: cover;
+                                    }
+                                }
+                                .advisor--info{
+                                    text-align: center;
+                                    margin-top: 30px;
+                                    font-size: 16px;
+                                    font-weight: 400;
+                                    margin-bottom: 10px;
+                                }
+                                .btn--wrap{
+                                    display: flex;
+                                    gap: 6px;
+                                    >a{
+                                        --gradient-start: hsla(216, 20%, 17%, 1);
+                                        --gradient-end: hsla(216, 21%, 12%, 1);
+                                        transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
+                                        transition-duration: 250ms;
+                                        transition-property: --gradient-start, --gradient-end, box-shadow;
+                                        padding: 12px 16px;
+                                        font-size: 15px;
+                                        overflow: hidden;
+                                        border-radius: 20px;
+                                        border: none;
+                                        cursor: pointer;
+                                        box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
+                                        backdrop-filter: blur(40px);
+                                        background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
+                                        display: flex;
+                                        text-decoration: none;
+                                        &:hover{
+                                            --gradient-start: hsla(216, 18%, 21%, 1);
+                                            --gradient-end: hsla(216, 18%, 21%, 1);
+                                            box-shadow: rgb(42,57,64) 0px 0px 0px 1px inset;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
         .img--section{
             .img--wrap{
@@ -321,6 +536,33 @@ main{
                     }
                 }
             }
+            .ceo--box{
+                display: flex;
+                margin-top: 24px;
+                gap: 40px;
+                p{
+                    color: rgba(252, 252, 253, 0.7);
+                    font-size: 16px;
+                    width: 60%;
+                }
+                .ceo--img--wrap{
+                    width: 40%;
+                    display: flex;
+                    justify-content: flex-end;
+                    align-items: flex-end;
+                    .ceo--name{
+                        text-align: right;
+                        margin-right: 20px;
+                        padding-bottom: 55px;
+                        strong{
+                            font-size: 30px;
+                        }
+                    }
+                    .img--wrap{
+                        min-width: 243px;
+                    }
+                }
+            }
         }
         .img--desc--section{
             display: flex;
@@ -480,6 +722,54 @@ main{
         }
     }
 }
+
+footer{
+    .footer--info--wrap{
+        .sns--wrap{
+            display: flex;
+            justify-content: flex-end;
+            margin-bottom: 12px;
+            gap: 8px;
+            >a{
+                width: 48px;
+                height: 48px;
+                display: inline-block;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);
+                transition-duration: 250ms;
+                transition-property: color, box-shadow, border-color, background;
+                cursor: pointer;
+                box-sizing: border-box;
+                width: 48px;
+                height: 48px;
+                background: rgb(24, 29, 37);
+                color: rgb(252, 252, 253);
+                border: 1px solid rgb(44, 52, 63);
+            }
+        }
+        .copy--wrap{
+            border-top: 2px solid rgba(252,252,253,0.2);
+            font-size: 14px;
+            color: #fcfcfdb2;
+            .link--list{
+                display: flex;
+                flex-wrap: wrap;
+                >li{
+                    >a{
+
+                    }
+                }
+            }
+            >p{
+                margin-top: 24px;
+            }
+        }
+    }
+}
+
 .more--btn{
     display: flex;
     font-size: 16px;
@@ -533,3 +823,108 @@ main{
         font-size: 16px;
     }
 }
+
+// 페이지네이션
+.pagination--wrap{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    padding: 40px 0;
+    .pagination--btn{
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background-color: transparent;
+        border: 1px solid rgba(252, 252, 253, 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+        svg{
+            fill: rgba(252, 252, 253, 0.7);
+        }
+        &:hover:not(:disabled){
+            background-color: rgba(252, 252, 253, 0.1);
+            border-color: rgba(252, 252, 253, 0.5);
+        }
+        &:disabled{
+            opacity: 0.3;
+            cursor: not-allowed;
+        }
+    }
+    .pagination--numbers{
+        display: flex;
+        gap: 8px;
+        .pagination--number{
+            min-width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            background-color: transparent;
+            border: none;
+            color: rgba(252, 252, 253, 0.7);
+            font-size: 16px;
+            transition: all 0.3s;
+            &:hover{
+                background-color: rgba(252, 252, 253, 0.1);
+                color: rgba(252, 252, 253, 1);
+            }
+            &.active{
+                background-color: rgba(252, 252, 253, 1);
+                color: rgb(2, 2, 3);
+            }
+        }
+    }
+}
+
+.dealer--popup--overlay{
+    &.type2{
+        .dealer--popup--content{
+            padding: 0;
+            .dealer--thumb--wrap{
+                .swiper{
+                    height: 100%;
+                }
+                img{
+                    width: 100%;
+                    max-width: 100%;
+                    max-height: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                }
+                .swiper-button-next{
+                    width: 40px;
+                    height: 40px;
+                    background-image: url(../img/ico--arrow.svg);
+                    background-size: 100%;
+                    background-color: rgba(0, 0, 0, 0.6);
+                    right: 0;
+                    svg{
+                        display: none;
+                    }
+                }
+                .swiper-button-prev{
+                    background-image: url(../img/ico--arrow.svg);
+                    background-size: 100%;
+                    background-color: rgba(0, 0, 0, 0.6);
+                    left: 0;
+                    width: 40px;
+                    height: 40px;
+                    transform: rotate(180deg);
+                    svg{
+                        display: none;
+                    }
+                }
+            }
+            .dealer--infos--wrap{
+                padding-right: 0;
+                .info--label{
+                    &.desc--type{
+                        max-height: 200px;
+                        overflow-y: auto;
+                    }
+                }
+            }
+        }
+    }
+}

app/components/block/DealerPopup2.vue

@@ -0,0 +1,255 @@
+<template>
+  <Teleport to="body">
+    <Transition name="dealer--popup--fade">
+      <div
+        v-if="isOpen"
+        class="dealer--popup--overlay type2"
+        @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">
+              <!-- imgsrc2가 있으면 스와이퍼 사용 -->
+              <template v-if="dealerData.imgsrc2">
+                <Swiper
+                  :modules="[SwiperNavigation, SwiperPagination]"
+                  :navigation="true"
+                  :loop="true"
+                  :spaceBetween="0"
+                  :slidesPerView="1"
+                  class="dealer--swiper"
+                >
+                  <SwiperSlide v-for="(image, index) in dealerImages" :key="index">
+                    <img :src="image" :alt="`딜러 이미지 ${index + 1}`" />
+                  </SwiperSlide>
+                </Swiper>
+              </template>
+              <!-- imgsrc2가 없으면 단일 이미지 -->
+              <template v-else>
+                <img :src="dealerData.imgsrc" alt="딜러 이미지" />
+              </template>
+            </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.desc" class="dealer--info--section">
+                  <div class="info--label desc--type">{{ dealerData.desc }}
+                  </div>
+                </div>
+                <!-- 강조 문구 -->
+                <div v-if="dealerData.strongDesc"><b>{{ dealerData.strongDesc }}</b></div>
+                <!-- 주소 -->
+                <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.fax" class="dealer--info--section">
+                  <div class="info--label">Fax: {{ dealerData.fax }}</div>
+                </div>
+
+                <!-- A/S -->
+                <div v-if="dealerData.as" class="dealer--info--section">
+                  <div class="info--label">A/S: {{ dealerData.as }}</div>
+                </div>
+
+                <!-- 추가내용 -->
+                <div v-if="dealerData.add1" class="dealer--info--section ">
+                  <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, computed } from "vue";
+  import { Navigation as SwiperNavigation, Pagination as SwiperPagination } from "swiper/modules";
+  import { Swiper, SwiperSlide } from "swiper/vue";
+  import "swiper/css";
+  import "swiper/css/navigation";
+  import "swiper/css/pagination";
+
+  const props = defineProps({
+    isOpen: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    dealerData: {
+      type: Object,
+      default: null,
+    },
+  });
+
+  const emit = defineEmits(["close"]);
+
+  const popupRef = ref(null);
+
+  // 딜러 이미지 배열 생성 (imgsrc, imgsrc2, imgsrc3, ... 동적 처리)
+  const dealerImages = computed(() => {
+    if (!props.dealerData) return [];
+
+    const images = [];
+    let index = 1;
+
+    // imgsrc부터 시작
+    if (props.dealerData.imgsrc) {
+      images.push(props.dealerData.imgsrc);
+    }
+
+    // imgsrc2, imgsrc3, ... 숫자가 있는 이미지들 추가
+    while (props.dealerData[`imgsrc${index + 1}`]) {
+      images.push(props.dealerData[`imgsrc${index + 1}`]);
+      index++;
+    }
+
+    return images;
+  });
+
+  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>

app/components/block/LinkList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="inner--link--contents">
-    <ul>
+    <ul :class="{ 'p--0': pd === false }">
       <li v-for="(item, index) in links" :key="index">
         <NuxtLink :to="item.url" :target="item.target || '_self'" :class="item.class">
           <span v-if="item.frontIcon" v-html="item.frontIcon"></span>
@@ -54,6 +54,10 @@
         );
       },
     },
+    pd: {
+      type: Boolean,
+      default: true, // 기본값은 패딩 있음
+    },
   });
 
   // 링크 데이터 구조 예시:

app/components/footer.vue

@@ -23,8 +23,8 @@
                 <NuxtLink to="/aboutaudi/audi-brand-2023">아우디 브랜드 소개</NuxtLink>
               </li>
               <li><NuxtLink to="/aboutaudi">아우디 브랜드 히스토리</NuxtLink></li>
-              <li><NuxtLink to="/aboutaudi/quattor">quattro 시스템</NuxtLink></li>
-              <li><NuxtLink to="/aboutaudi/aude_connect">Audi Connect</NuxtLink></li>
+              <li><NuxtLink to="/aboutaudi/quattro">quattro 시스템</NuxtLink></li>
+              <li><NuxtLink to="/aboutaudi/audi_connect">Audi Connect</NuxtLink></li>
               <li>
                 <NuxtLink to="/aboutaudi/morepossibilities">More possibilities</NuxtLink>
               </li>
@@ -113,28 +113,40 @@
             <li>
                 <h2>Company</h2>
                 <ul>
-                    <li><NuxtLink to="/">About Gojin Motors</NuxtLink></li>
-                    <li><NuxtLink to="/">CEO</NuxtLink></li>
-                    <li><NuxtLink to="/">History</NuxtLink></li>
-                    <li><NuxtLink to="/">IR</NuxtLink></li>
-                    <li><NuxtLink to="/">Showroom</NuxtLink></li>
-                    <li><NuxtLink to="/">Service Center</NuxtLink></li>
-                    <li><NuxtLink to="/">Career</NuxtLink></li>
-                    <li><NuxtLink to="/">Sales Advisor</NuxtLink></li>
-                    <li><NuxtLink to="/">견적요청</NuxtLink></li>
-                    <li><NuxtLink to="/">시승요청</NuxtLink></li>
-                    <li><NuxtLink to="/">e-카탈로그</NuxtLink></li>
-                    <li><NuxtLink to="/">Event</NuxtLink></li>
-                    <li><NuxtLink to="/">Audi News</NuxtLink></li>
+                    <li><NuxtLink to="/company/about">About Gojin Motors</NuxtLink></li>
+                    <li><NuxtLink to="/company/ceo">CEO</NuxtLink></li>
+                    <li><NuxtLink to="/company/history">History</NuxtLink></li>
+                    <li><NuxtLink to="/company/ir">IR</NuxtLink></li>
+                    <li><NuxtLink to="/company/showroom">Showroom</NuxtLink></li>
+                    <li><NuxtLink to="/company/serviceCenter">Service Center</NuxtLink></li>
+                    <li><NuxtLink to="/company/career">Career</NuxtLink></li>
+                    <li><NuxtLink to="/company/salesAdvisor">Sales Advisor</NuxtLink></li>
+                    <li><NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" target="_blank">견적요청</NuxtLink></li>
+                    <li><NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" target="_blank">시승요청</NuxtLink></li>
+                    <li><NuxtLink to="/company/event">Event</NuxtLink></li>
+                    <li><NuxtLink to="/company/news">Audi News</NuxtLink></li>
                 </ul>
             </li>
             <li>
-                <h2>Used Car(AAP)</h2>
-                <li><NuxtLink to="/">Used Car(AAP)</NuxtLink></li>
+              <h2>Used Car(AAP)</h2>
+              <ul>
+                <li><NuxtLink to="http://www.audiusedcar.co.kr/index.php" target="_blank">Used Car(AAP)</NuxtLink></li>
+              </ul>
             </li>
         </ul>
       </div>
-      <div class="footer--menu--wrap">뿌터</div>
+      <div class="footer--info--wrap">
+        <div class="sns--wrap">
+          <NuxtLink to="https://www.facebook.com/audikorea.kr" target="_blank"></NuxtLink>
+        </div>
+        <div class="copy--wrap">
+          <p>© 2025 Gojin Motors. All rights reserved</p>
+          <ul class="link--list">
+            <li><NuxtLink to="">개인정보 처리방침</NuxtLink></li>
+          </ul>
+          <p>본 웹사이트에서 제공되는 정보는 실제 판매 차량과 다를 수 있습니다</p>
+        </div>
+      </div>
     </div>
   </footer>
 </template>

app/pages/company/career.vue

@@ -0,0 +1,71 @@
+<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 class="desc--section full--type">
+        <h3 class="big--title">Career</h3>
+        <h4 class="mt--24">
+          01. 인재상
+        </h4>
+        <p class="mt--24">
+          1. 온화한 미소와 섬세한 배려로 고객을 편안하게 모시며 고객의 입장에서 생각하고,고객만족,고객감동을 이끌수 있는 성실한 인재<br />2. 투철한 주인정신의 Mind로 적극적,긍정적인 사고를 하며 신뢰할 수 있는 인재<br />3. 급격한 변화의 흐름에 유연하게 대처하며 미래를 예측 대비하는 창의적인 인재<br />4. 원가의식이 철저하며 Service mind가 충만한 정직한 인재
+        </p>
+        <h4 class="mt--24">
+          02. 채용제도
+        </h4>
+        <p class="mt--24">
+          고진에서는 연중 수시로 신입사원과 경력사원을 모집하고 있습니다.<br />신규인력 필요시 모집부문, 자격요건, 접수기한 등에 대한 내용은 별도로 공지할 예정입니다.<br />당사에 입사하고자 하시는 분은 수시로 당사의 홈페이지를 방문하셔서 채용정보를 확인해 주시기 바랍니다.<br /><br />여러분께서 작성하신 지원서는 향후 해당부문의 모집이 있을시 우선적으로 검토됩니다.<br />그러나, 회사의 인력운영계획상 채용여부, 인원이 결정되므로 본인의 희망하는 채용기회가 주어지지 않을 수도 있습니다.<br /><br />입사지원서 등록 및 등록 이후 절차는 다음과 같습니다.<br />지원서 다운로드 → 작성 → 채용담당자에게 이메일(recruit@sgsautogroup.com) 송부 → 보관 → 채용
+        </p>
+        <h4 class="mt--24">
+          03. 복리후생
+        </h4>
+        <p class="mt--24">
+          모집부문 : 영업<br><br>
+          <b>01. 법정복리후생</b><br>
+          국민연금,건강보험,고용보험,산재보험 가입<br><br />
+          <b>02. 학자금 지원</b><br />중,고,대학교에 재학중인 임직원 자녀 학비 지원<br /><br /><b>
+            03. 휴가제도
+          </b><br />주40시간 근무제 시행. 유급휴가, 연차휴가, 경조휴가 등<br /><br />
+          <b>04. 건강검진</b><br />매년 정기건강검진 및 종합검진, 특수검진 등<br /><br />
+          <b>
+            05. 포상제도
+          </b><br />장기근속자 및 성과 우수자에 대한 포상<br /><br />
+          <b>
+            06. 동호회 지원
+          </b><br />사내동호회 구성 및 활동 지원을 통한 여가 생활 보장<br /><br />
+          <b>
+            07. 휴양시설
+          </b><br />동계, 하계 휴양소 운영. 콘도회원권 사원 이용 후원<br /><br />
+          <b>
+            08. 출산비 지원
+          </b><br />본인 및 배우자 출산시 출산비 지원<br /><br />
+          <b>09. 직원 선물</b><br />설날, 근로자의 날, 추석 선물 지원<br /><br />
+          <b>
+            10. 상조회 운영
+          </b><br />직원의 애,경사 발생시 지원
+        </p>
+      </section>
+      <blockLinkList class="" :links="reservationLinks" />
+    </div>
+  </main>
+</template>
+<script setup>
+const reservationLinks = ref([
+    {
+      text: "입사 지원서 다운로드",
+      url: "/img/company/recruit.zip",
+      target: "_blank",
+      showIcon: false,
+      class: "pl--0",
+    },
+  ]);
+</script>

app/pages/company/ceo.vue

@@ -0,0 +1,35 @@
+<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 class="desc--section full--type ceo--type pb--200">
+        <h3 class="big--title">CEO</h3>
+        <h4 class="mt--24">
+          아우디 고진모터스 홈페이지를 방문해 주셔서 감사합니다.
+        </h4>
+        <div class="ceo--box">
+          <p class="">
+            저희 고진모터스는 2000년도에 설립되어 현재까지, 100년을 넘어선 세계적인 프레스티지 브랜드 아우디 차량의 수입 및 판매를 시작한 국내 최초 아우디 공식딜러로서 &lt;기술을 통한 진보>라는 슬로건과 함께 국내 아우디 최고 리딩 딜러로 성장해왔으며 현재 도산대로, 동대문, 수원, 스타필드 안성, 천안, 대전, 광주, 목포, 8곳에 전시장과 성수, 논현, 삼성, 수원, 천안, 대전, 청주, 광주, 목포, 순천 10곳에 서비스시설을 갖추고 한국을 대표하는 수입자동차 전문기업으로 성장하였습니다.<br><br>고진모터스는 이러한 성장에 만족하지 않고, 고객님의 생활에 프리미엄과 행복을 더하고자 세일즈 뿐만 아니라 After Sales Service의 품질과 역량 강화에 더욱 집중할 것이며, 고객님과 만나는 현장에서 최선을 다하고자 끊임없이 노력할 것을 약속 드립니다.<br><br>고객님의 사랑과 관심 감사 드리며, 앞으로도 아우디 고진모터스의 미래에 큰 힘이 되어주시기를 부탁 드립니다.
+          </p>
+          <div class="ceo--img--wrap">
+            <p class="ceo--name">
+              고진모터스 대표이사 <strong>장인우</strong>
+            </p>
+            <div class="img--wrap">
+              <img src="/img/company/img--ceo1.jpg" alt="">
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </main>
+</template>

app/pages/company/event.vue

@@ -0,0 +1,178 @@
+<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">EVENT</h3>
+          </div>
+        </section>
+        <div class="content--wrap">
+          <div class="event--wrap">
+            <!-- 현재 페이지의 이벤트만 표시 -->
+            <div
+              v-for="event in paginatedEvents"
+              :key="event.id"
+              class="event--card"
+            >
+              <div class="img--wrap">
+                <img :src="event.image" :alt="event.title">
+              </div>
+              <h3 class="ellipsis2">{{ event.title }}</h3>
+              <NuxtLink :to="event.link">자세히 알아보기 <i class="ico"></i></NuxtLink>
+            </div>
+          </div>
+
+          <!-- 페이지네이션 -->
+          <div class="pagination--wrap">
+            <button
+              class="pagination--btn prev"
+              @click="goToPage(currentPage - 1)"
+              :disabled="currentPage === 1"
+            >
+              <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
+                <use href="/img/ico--back--s.svg#main"></use>
+              </svg>
+            </button>
+
+            <div class="pagination--numbers">
+              <button
+                v-for="page in displayPages"
+                :key="page"
+                class="pagination--number"
+                :class="{ active: page === currentPage }"
+                @click="goToPage(page)"
+              >
+                {{ page }}
+              </button>
+            </div>
+
+            <button
+              class="pagination--btn next"
+              @click="goToPage(currentPage + 1)"
+              :disabled="currentPage === totalPages"
+            >
+              <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
+                <use href="/img/ico--forward--s.svg#main"></use>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </main>
+</template>
+
+<script setup>
+  const events = ref([
+    {
+      id: 1,
+      title: 'Evolution x Vision: 아우디의 빠트로 드라이브',
+      image: '/img/stories/technology/img--tech1.jpg',
+      link: '/company/view'
+    },
+    {
+      id: 2,
+      title: 'Evolution x Vision: 아우디의 까트로 드라이브',
+      image: '/img/stories/technology/img--tech1.jpg',
+      link: '/company/view'
+    },
+    {
+      id: 1,
+      title: 'Evolution x Vision: 아우디의 염트로 드라이브',
+      image: '/img/stories/technology/img--tech1.jpg',
+      link: '/company/view'
+    },
+    {
+      id: 1,
+      title: 'Evolution x Vision: 아우디의 콰트로 드라이브',
+      image: '/img/stories/technology/img--tech1.jpg',
+      link: '/company/view'
+    },
+    {
+      id: 1,
+      title: 'Evolution x Vision: 아우디의 콰트로 드라이브',
+      image: '/img/stories/technology/img--tech1.jpg',
+      link: '/company/view'
+    },
+    {
+      id: 1,
+      title: 'Evolution x Vision: 아우디의 콰트로 드라이브',
+      image: '/img/stories/technology/img--tech1.jpg',
+      link: '/company/view'
+    },
+    {
+      id: 1,
+      title: 'Evolution x Vision: 아우디의 콰트로 드라이브',
+      image: '/img/stories/technology/img--tech1.jpg',
+      link: '/company/view'
+    },
+    {
+      id: 1,
+      title: 'Evolution x Vision: 아우디의 콰트로 드라이브',
+      image: '/img/stories/technology/img--tech1.jpg',
+      link: '/company/view'
+    },
+    {
+      id: 1,
+      title: 'Evolution x Vision: 아우디의 콰트로 드라이브',
+      image: '/img/stories/technology/img--tech1.jpg',
+      link: '/company/view'
+    },
+    {
+      id: 1,
+      title: 'Evolution x Vision: 아우디의 콰트로 드라이브',
+      image: '/img/stories/technology/img--tech1.jpg',
+      link: '/company/view'
+    },
+  ]);
+
+  const currentPage = ref(1);
+  const itemsPerPage = 9;
+
+  // 전체 페이지 수 계산
+  const totalPages = computed(() => {
+    return Math.ceil(events.value.length / itemsPerPage);
+  });
+
+  // 현재 페이지에 표시할 이벤트
+  const paginatedEvents = computed(() => {
+    const start = (currentPage.value - 1) * itemsPerPage;
+    const end = start + itemsPerPage;
+    return events.value.slice(start, end);
+  });
+
+  // 표시할 페이지 번호 (최대 5개)
+  const displayPages = computed(() => {
+    const pages = [];
+    const maxDisplay = 5;
+    let startPage = Math.max(1, currentPage.value - 2);
+    let endPage = Math.min(totalPages.value, startPage + maxDisplay - 1);
+
+    if (endPage - startPage < maxDisplay - 1) {
+      startPage = Math.max(1, endPage - maxDisplay + 1);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return pages;
+  });
+
+  // 페이지 이동
+  const goToPage = (page) => {
+    if (page >= 1 && page <= totalPages.value) {
+      currentPage.value = page;
+      // 페이지 이동 시 스크롤 최상단으로
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+</script>

app/pages/company/history.vue

@@ -0,0 +1,67 @@
+<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 class="desc--section full--type pb--200">
+        <h3 class="big--title">History</h3>
+        <h4 class="mt--24">
+          2025
+        </h4>
+        <p class="mt--24">
+          08.25- 동대문 서비스 센터 오픈 [서울시 동대문구 천호대로 445]<br>04.14- 청주 서비스 센터 확장 이전 [청주시 서원구 남이면 가마리 146-5]
+        </p>
+        <h4 class="mt--24">
+          2023
+        </h4>
+        <p class="mt--24">
+          09.08 - 스타필드 안성전시장 오픈 [경기 안성시 공도읍 서동대로 3930-39 / 스타필드 안성 1층]<br>01.05 - 목포 서비스센터 오픈[전라남도 목포시 평화로 153번길 16]
+        </p>
+        <h4 class="mt--24">2022</h4>
+        <p class="mt--24">07.18 - 동대문 전시장 확장 이전 [서울시 동대문구 천호대로 445]<br>11.14 - 목포 전시장 리뉴얼 오픈</p>
+        <h4 class="mt--24">2019</h4>
+        <p class="mt--24">12.01 - 천안 전시장 확장 이전 [충청남도 천안시 서북구 쌍용대로 245]<br>12.01 - 천안 서비스 센터 확장 이전 [충청남도 천안시 서북구 쌍용대로 245]</p>
+        <h4 class="mt--24">2018</h4>
+        <p class="mt--24">12.28 - LPGA 박성현 프로 후원 연장 계약 체결</p>
+        <h4 class="mt--24">2017</h4>
+        <p class="mt--24">03.27 - 아우디 도산대로 전시장(구 청담 전시장)이전 [서울특별시 강남구 도산대로 306]</p>
+        <h4 class="mt--24">2016</h4>
+        <p class="mt--24">01.12 - 삼성 서비스센터 오픈 [서울특별시 강남구 삼성로 541]<br>03.14 - 목포 전시장 오픈 [전라남도 목포시 평화로 87]<br>05.17 - 아우디 평택전시장 오픈 [경기도 안성시 공도읍 서동대로 3924]<br>09.09 - 대전서비스 센터 확장이전</p>
+        <h4 class="mt--24">2015</h4>
+        <p class="mt--24">10.06 - 미아 전시장 오픈 [서울특별시 강북구 도봉로 94]</p>
+        <h4 class="mt--24">2014</h4>
+        <p class="mt--24">03.10 - 광주 전시장 확장 이전 [광주광역시 서구 광천동 무진대로 955]<br>07.25 - 광주 서비스센터 확장 이전 [광주광역시 남구 송암로 24번 가길 18]<br>12.26 - 논현 서비스센터 오픈 [서울특별시 강남구 언주로 133길 14]</p>
+        <h4 class="mt--24">2013</h4>
+        <p class="mt--24">
+          07.29 - 동대문 전시장 오픈 [서울특별시 성동구 천호대로 454]<br>10.16 - 수원 서비스 센터 확장 이전 [경기도 용인시 기흥구 중부대로 194]<br>11.01 - 천안, 청주, 순천 전시장 오픈<br><span class="pl--75">천안지점 [충청남도 천안시 동남구 만남로 64]</span><br><span class="pl--75">청주지점 [충청북도 청주시 서원구 2순환로 1803]</span><br><span class="pl--75">순천지점 [전라남도 순천시 왕지5길 4]</span>
+        </p>
+        <h4 class="mt--24">2010</h4>
+        <p class="mt--24">12.15 - 대전 전시장 및 서비스센터 건물 신축 개점 [대전광역시 대덕구 중리동 한밭대로 1108]</p>
+        <h4 class="mt--24">2009</h4>
+        <p class="mt--24">01.12 - 정관 개정 (사업목적에 중고차 매매업 추가)<br>09.01 - 양재 중고차전시장 양수(양도자-제이제이인터내셔날)</p>
+        <h4 class="mt--24">2008</h4>
+        <p class="mt--24">01.04 - 수원전시장 개점 (Audi, QS) (수원시 원천동 소재)<br>09.01 - 대전전시장 개점 (Audi, QS) (대전시 유성구 원촌동 소재)<br>11.13 - 원주 한서모터스와 Sub-Dealer 계약 체결</p>
+        <h4 class="mt--24">2007</h4>
+        <p class="mt--24">04.01 - 광주서비스센터 설립(Audi) (광주시 신안동 소재)<br>12.01 - 임시 대치전시장(Audi) 개점</p>
+        <h4 class="mt--24">2006</h4>
+        <p class="mt--24">01.01 - 강남전시장 확장 이전(Audi) / 본점 소재지 변경(신사동 629-35 -> 청담동 92-9)<br>11.06 - 수원전시장 개점(VW, QS) (용인시 신갈동 소재)</p>
+        <h4 class="mt--24">2004</h4>
+        <p class="mt--24">05.27 - 성수동 서비스 센터 오픈</p>
+        <h4 class="mt--24">2003</h4>
+        <p class="mt--24">01.17 - 수원전시장 개점(Audi)<br>02.27 - 대치전시장 개점(Audi. VW. Qs)</p>
+        <h4 class="mt--24">2001</h4>
+        <p class="mt--24">03.20 - 고진모터스㈜ 서비스센터 설립(용답동)</p>
+        <h4 class="mt--24">2000</h4>
+        <p class="mt--24">02.01 - 고진모터스(주) 설립<br>02.01 - 사업목적 : 자동차 무역업, 정비업, 대여사업, 보험대리 및 중개업 스포츠 레저사업<br>02.01 - 강남전시장 개점(Audi, VW)</p>
+      </section>
+    </div>
+  </main>
+</template>

app/pages/company/ir.vue

@@ -0,0 +1,219 @@
+<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">IR</h3>
+          </div>
+        </section>
+        <div class="content--wrap">
+          <div class="news--wrap">
+            <table class="news--table">
+              <colgroup>
+                <col style="width:5%">
+                <col style="width:60%">
+                <col style="width:10%">
+                <col style="width:5%">
+              </colgroup>
+              <thead>
+                <tr>
+                  <th v-for="column in columns" :key="column.key">
+                    {{ column.label }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="news in paginatedNews" :key="news.id" @click="goToNews(news)">
+                  <td>{{ news.id }}</td>
+                  <td class="ellipsis1">{{ news.title }}{{ news.title }}{{ news.title }}{{ news.title }}{{ news.title }}{{ news.title }}{{ news.title }}</td>
+                  <td>{{ news.date }}</td>
+                  <td>{{ news.views }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- 페이지네이션 -->
+          <div class="pagination--wrap">
+            <button
+              class="pagination--btn prev"
+              @click="goToPage(currentPage - 1)"
+              :disabled="currentPage === 1"
+            >
+              <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
+                <use href="/img/ico--back--s.svg#main"></use>
+              </svg>
+            </button>
+
+            <div class="pagination--numbers">
+              <button
+                v-for="page in displayPages"
+                :key="page"
+                class="pagination--number"
+                :class="{ active: page === currentPage }"
+                @click="goToPage(page)"
+              >
+                {{ page }}
+              </button>
+            </div>
+
+            <button
+              class="pagination--btn next"
+              @click="goToPage(currentPage + 1)"
+              :disabled="currentPage === totalPages"
+            >
+              <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
+                <use href="/img/ico--forward--s.svg#main"></use>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </main>
+</template>
+
+<script setup>
+  // 테이블 컬럼 정의
+  const columns = [
+    { key: 'id', label: '번호' },
+    { key: 'title', label: '제목' },
+    { key: 'date', label: '등록일' },
+    { key: 'views', label: '조회수' }
+  ];
+
+  // 뉴스 데이터
+  const newsData = ref([
+    {
+      id: 1,
+      title: '아우디 신형 e-tron GT 출시 소식',
+      date: '2025-01-15',
+      views: 1234,
+      link: '/company/view'
+    },
+    {
+      id: 2,
+      title: '아우디 콰트로 45주년 기념 이벤트',
+      date: '2025-01-14',
+      views: 987,
+      link: '/company/view'
+    },
+    {
+      id: 3,
+      title: '아우디 전기차 라인업 확대',
+      date: '2025-01-13',
+      views: 2156,
+      link: '/company/view'
+    },
+    {
+      id: 4,
+      title: 'Audi Sport 신규 모델 발표',
+      date: '2025-01-12',
+      views: 1543,
+      link: '/company/view'
+    },
+    {
+      id: 5,
+      title: '아우디 지속가능성 이니셔티브',
+      date: '2025-01-11',
+      views: 876,
+      link: '/company/view'
+    },
+    {
+      id: 6,
+      title: '아우디 커넥트 서비스 업데이트',
+      date: '2025-01-10',
+      views: 1098,
+      link: '/company/view'
+    },
+    {
+      id: 7,
+      title: '아우디 디자인 어워드 수상',
+      date: '2025-01-09',
+      views: 765,
+      link: '/company/view'
+    },
+    {
+      id: 8,
+      title: '아우디 자율주행 기술 발전',
+      date: '2025-01-08',
+      views: 1876,
+      link: '/company/view'
+    },
+    {
+      id: 9,
+      title: '아우디 RS 시리즈 신규 출시',
+      date: '2025-01-07',
+      views: 2341,
+      link: '/company/view'
+    },
+    {
+      id: 10,
+      title: '아우디 프리미엄 서비스 소개',
+      date: '2025-01-06',
+      views: 654,
+      link: '/company/view0'
+    },
+    {
+      id: 11,
+      title: '아우디 e-tron 배터리 기술 혁신',
+      date: '2025-01-05',
+      views: 1432,
+      link: '/company/view1'
+    },
+  ]);
+
+  const currentPage = ref(1);
+  const itemsPerPage = 10;
+
+  // 전체 페이지 수 계산
+  const totalPages = computed(() => {
+    return Math.ceil(newsData.value.length / itemsPerPage);
+  });
+
+  // 현재 페이지에 표시할 뉴스
+  const paginatedNews = computed(() => {
+    const start = (currentPage.value - 1) * itemsPerPage;
+    const end = start + itemsPerPage;
+    return newsData.value.slice(start, end);
+  });
+
+  // 표시할 페이지 번호 (최대 5개)
+  const displayPages = computed(() => {
+    const pages = [];
+    const maxDisplay = 5;
+    let startPage = Math.max(1, currentPage.value - 2);
+    let endPage = Math.min(totalPages.value, startPage + maxDisplay - 1);
+
+    if (endPage - startPage < maxDisplay - 1) {
+      startPage = Math.max(1, endPage - maxDisplay + 1);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return pages;
+  });
+
+  // 페이지 이동
+  const goToPage = (page) => {
+    if (page >= 1 && page <= totalPages.value) {
+      currentPage.value = page;
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
+  // 뉴스 클릭 시 이동
+  const goToNews = (row) => {
+    navigateTo(row.link);
+  };
+</script>

app/pages/company/news.vue

@@ -0,0 +1,219 @@
+<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">NEWS</h3>
+          </div>
+        </section>
+        <div class="content--wrap">
+          <div class="news--wrap">
+            <table class="news--table">
+              <colgroup>
+                <col style="width:5%">
+                <col style="width:60%">
+                <col style="width:10%">
+                <col style="width:5%">
+              </colgroup>
+              <thead>
+                <tr>
+                  <th v-for="column in columns" :key="column.key">
+                    {{ column.label }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="news in paginatedNews" :key="news.id" @click="goToNews(news)">
+                  <td>{{ news.id }}</td>
+                  <td class="ellipsis1">{{ news.title }}{{ news.title }}{{ news.title }}{{ news.title }}{{ news.title }}{{ news.title }}{{ news.title }}</td>
+                  <td>{{ news.date }}</td>
+                  <td>{{ news.views }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- 페이지네이션 -->
+          <div class="pagination--wrap">
+            <button
+              class="pagination--btn prev"
+              @click="goToPage(currentPage - 1)"
+              :disabled="currentPage === 1"
+            >
+              <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
+                <use href="/img/ico--back--s.svg#main"></use>
+              </svg>
+            </button>
+
+            <div class="pagination--numbers">
+              <button
+                v-for="page in displayPages"
+                :key="page"
+                class="pagination--number"
+                :class="{ active: page === currentPage }"
+                @click="goToPage(page)"
+              >
+                {{ page }}
+              </button>
+            </div>
+
+            <button
+              class="pagination--btn next"
+              @click="goToPage(currentPage + 1)"
+              :disabled="currentPage === totalPages"
+            >
+              <svg fill="none" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
+                <use href="/img/ico--forward--s.svg#main"></use>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </main>
+</template>
+
+<script setup>
+  // 테이블 컬럼 정의
+  const columns = [
+    { key: 'id', label: '번호' },
+    { key: 'title', label: '제목' },
+    { key: 'date', label: '등록일' },
+    { key: 'views', label: '조회수' }
+  ];
+
+  // 뉴스 데이터
+  const newsData = ref([
+    {
+      id: 1,
+      title: '아우디 신형 e-tron GT 출시 소식',
+      date: '2025-01-15',
+      views: 1234,
+      link: '/company/view'
+    },
+    {
+      id: 2,
+      title: '아우디 콰트로 45주년 기념 이벤트',
+      date: '2025-01-14',
+      views: 987,
+      link: '/company/view'
+    },
+    {
+      id: 3,
+      title: '아우디 전기차 라인업 확대',
+      date: '2025-01-13',
+      views: 2156,
+      link: '/company/view'
+    },
+    {
+      id: 4,
+      title: 'Audi Sport 신규 모델 발표',
+      date: '2025-01-12',
+      views: 1543,
+      link: '/company/view'
+    },
+    {
+      id: 5,
+      title: '아우디 지속가능성 이니셔티브',
+      date: '2025-01-11',
+      views: 876,
+      link: '/company/view'
+    },
+    {
+      id: 6,
+      title: '아우디 커넥트 서비스 업데이트',
+      date: '2025-01-10',
+      views: 1098,
+      link: '/company/view'
+    },
+    {
+      id: 7,
+      title: '아우디 디자인 어워드 수상',
+      date: '2025-01-09',
+      views: 765,
+      link: '/company/view'
+    },
+    {
+      id: 8,
+      title: '아우디 자율주행 기술 발전',
+      date: '2025-01-08',
+      views: 1876,
+      link: '/company/view'
+    },
+    {
+      id: 9,
+      title: '아우디 RS 시리즈 신규 출시',
+      date: '2025-01-07',
+      views: 2341,
+      link: '/company/view'
+    },
+    {
+      id: 10,
+      title: '아우디 프리미엄 서비스 소개',
+      date: '2025-01-06',
+      views: 654,
+      link: '/company/view0'
+    },
+    {
+      id: 11,
+      title: '아우디 e-tron 배터리 기술 혁신',
+      date: '2025-01-05',
+      views: 1432,
+      link: '/company/view1'
+    },
+  ]);
+
+  const currentPage = ref(1);
+  const itemsPerPage = 10;
+
+  // 전체 페이지 수 계산
+  const totalPages = computed(() => {
+    return Math.ceil(newsData.value.length / itemsPerPage);
+  });
+
+  // 현재 페이지에 표시할 뉴스
+  const paginatedNews = computed(() => {
+    const start = (currentPage.value - 1) * itemsPerPage;
+    const end = start + itemsPerPage;
+    return newsData.value.slice(start, end);
+  });
+
+  // 표시할 페이지 번호 (최대 5개)
+  const displayPages = computed(() => {
+    const pages = [];
+    const maxDisplay = 5;
+    let startPage = Math.max(1, currentPage.value - 2);
+    let endPage = Math.min(totalPages.value, startPage + maxDisplay - 1);
+
+    if (endPage - startPage < maxDisplay - 1) {
+      startPage = Math.max(1, endPage - maxDisplay + 1);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return pages;
+  });
+
+  // 페이지 이동
+  const goToPage = (page) => {
+    if (page >= 1 && page <= totalPages.value) {
+      currentPage.value = page;
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
+  // 뉴스 클릭 시 이동
+  const goToNews = (row) => {
+    navigateTo(row.link);
+  };
+</script>

app/pages/company/salesAdvisor.vue

@@ -0,0 +1,81 @@
+<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">SALES ADVISOR</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"
+              >
+                <NuxtLink
+                  :to="dealer.link"
+                  class="dealer--region--header"
+                >
+                  <span class="dealer--region--name">{{ dealer.name }}</span>
+                  <span class="dealer--toggle--icon">+</span>
+                </NuxtLink>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 전시장 데이터
+  const showrooms = ref([
+    {
+      name: "Dosandaero",
+      link: "/company/salesAdvisorList",
+    },
+    {
+      name: "Dongdaemoon",
+      link: "/company/salesAdvisorList",
+    },
+    {
+      name: "Suwon",
+      link: "/company/salesAdvisorList",
+    },
+    {
+      name: "Starfield Anseong",
+      link: "/company/salesAdvisorList",
+    },
+    {
+      name: "Cheonan",
+      link: "/company/salesAdvisorList",
+    },
+    {
+      name: "Daejeon",
+      link: "/company/salesAdvisorList",
+    },
+    {
+      name: "Gwangju",
+      link: "/company/salesAdvisorList",
+    },
+    {
+      name: "Mokpo",
+      link: "/company/salesAdvisorList",
+    },
+  ]);
+</script>

app/pages/company/salesAdvisorList.vue

@@ -0,0 +1,294 @@
+<template>
+  <main>
+    <section class="visual--section h--430">
+      <div class="img--wrap">
+        <picture>
+          <img src="/img/company/img--sales1.jpg" alt="" />
+        </picture>
+      </div>
+      <div class="title--wrap color--white">
+        <h2>SALES ADVISOR</h2>
+        <p class="greeting--txt">안녕하십니까?<br>아우디 고진모터스 도산대로 조영승 지점장입니다.<br>한국 아우디의 역사와 함께 해온 고진모터스 도산대로 아우디 전시장을 방문하여 주셔서 대단히 감사드립니다.<br>최고의 전통에 걸맞는 마음자세와 열정으로 고객 한분한분 최고의 만족을 얻으실 수 있도록 최선을 다하겠습니다.<br />감사합니다.</p>
+        <p class=""><b>도산대로 영업지점장 : 조영승</b></p>
+      </div>
+    </section>
+    <div class="detail--container">
+      <div class="content--wrap">
+        <div class="sales--advisor--wrap">
+          <div class="sales--team--wrap">
+            <h3>도산대로지점 1팀</h3>
+            <div class="advisor--list">
+              <ul>
+                <!-- flag : 인증사원 마크 -->
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+                    <div class="sales--team--wrap">
+            <h3>도산대로지점 1팀</h3>
+            <div class="advisor--list">
+              <ul>
+                <!-- flag : 인증사원 마크 -->
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+                    <div class="sales--team--wrap">
+            <h3>도산대로지점 1팀</h3>
+            <div class="advisor--list">
+              <ul>
+                <!-- flag : 인증사원 마크 -->
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+                <li class="flag">
+                  <div class="advisor--img">
+                    <img src="/img/company/img--showroom1.jpg" alt="">
+                  </div>
+                  <div class="advisor--info">
+                    <p>이종민 팀장</p>
+                    <p>jm@interscope.co.kr</p>
+                    <p>010-2311-1231</p>
+                  </div>
+                  <div class="btn--wrap">
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" href="_blank">견적신청</NuxtLink>
+                    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" href="_blank">시승신청</NuxtLink>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 전시장 데이터
+  const showrooms = ref([
+    {
+      name: "Dosandaero",
+      link: "#",
+    },
+    {
+      name: "Dongdaemoon",
+      link: "#",
+    },
+    {
+      name: "Suwon",
+      link: "#",
+    },
+    {
+      name: "Starfield Anseong",
+      link: "#",
+    },
+    {
+      name: "Cheonan",
+      link: "#",
+    },
+    {
+      name: "Daejeon",
+      link: "#",
+    },
+    {
+      name: "Gwangju",
+      link: "#",
+    },
+    {
+      name: "Mokpo",
+      link: "#",
+    },
+  ]);
+</script>

app/pages/company/serviceCenter.vue

@@ -0,0 +1,273 @@
+<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>

app/pages/company/showroom.vue

@@ -0,0 +1,710 @@
+<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">SHOWROOM</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: "Dosandaero",
+      link: "#",
+      detailInfo: {
+        imgsrc: "/img/company/img--showroom1.jpg",
+        fullName: "도산대로 전시장",
+        desc: "수입차량의 중심 도산대로에 2017년 확장 이전한 아우디 도산대로 전시장은 서울 지역의 메가 딜러로 당당히 자리매김 하였습니다. 고객 여러분을 위하여 최선을 다하여 일할 친절하고 성실한 직원들이 여러분을 맞이하여 한 차원 높은 수입차 문화를 영위하실 수 있을 것이며, 365일 고객님께서 원하시는 모든 차량에 대한 문의와 시승이 가능합니다. 아우디의 명성과 가치를 누리시길 원하신다면 아우디 도산대로 전시장을 방문해주십시오. 고객 만족을 위해 최선을 다할 것을 약속 드립니다. 감사합니다.",
+        address: "서울시 강남구 도산대로 306",
+        phone: "02-516-2468",
+        fax: "02-514-7748",
+        add1: "영업시간",
+        adddesc1: "09:00~20:00 (연중무휴)",
+        website: "https://www.gojin.com/",
+        websitetitle: "Sales Advisor >",
+      },
+    },
+    {
+      name: "Dongdaemoon",
+      link: "#",
+      detailInfo: {
+        imgsrc: "/img/company/img--showroom2.jpg",
+        fullName: "동대문 전시장",
+        desc: "2013년 7월 서울시 장한평에 오픈한 아우디 동대문 전시장은, 2022년 7월 기존 전시장 맞은편 위치로 새롭게 확장 이전하였습니다. 총면적 4,347.17m2 규모로 새 단장한 ‘아우디 동대문 전시장’은 11대 이상을 전시할 수 있으며, 전시 공간 외에도 고객 프라이빗 라운지에는 DRM (Digital Retail Module)이 준비되어 있어, 차량 상담 시 원하는 차량의 색상, 외부, 내부 옵션 등을 3D로 시현해 볼 수 있습니다. 또한 주차공간의 전기차 충전기를 설치하여, 전기차 고객의 편의를 높이며 아우디 만의 프리미엄 서비스를 제공하고자 합니다. 동대문 전시장을 통해 서울 강북권 고객들께 차별화된 서비스와 만족을 드리도록 노력하겠습니다. 감사합니다.",
+        address: "서울시 동대문구 천호대로 445",
+        phone: "02-2247-2460",
+        fax: "02-2247-3271",
+        add1: "영업시간",
+        adddesc1: "09:00~20:00 (연중무휴)",
+        website: "https://www.gojin.com/",
+        websitetitle: "Sales Advisor >",
+      },
+    },
+    {
+      name: "Suwon",
+      link: "#",
+      detailInfo: {
+        imgsrc: "/img/company/img--showroom3.jpg",
+        fullName: "수원 전시장",
+        desc: "아우디 수원 전시장은 534.42m²(160평)으로 수원 지역 최대 규모를 자랑합니다. 고급스러운 차량 전시 공간과 함께 커피와 음료가 제공되는 미니BAR, 방문 고객 전용 라운지가 마련되어 있어 여유롭고 편리한 최고의 서비스를 받으실 수 있습니다. 또한, 지하1층에 마련되어 있던 서비스 센터가 2013년 10월 확장 이전하여 경기, 수도권 지역의 고객들에게 더 편리하고 신속한 서비스를 제공 드리게 되었습니다. 앞으로도 고객의 입장에서 생각하고 다가가는 아우디 수원 전시장이 되겠습니다.",
+        address: "경기도 수원시 영통구 중부대로 412 서진빌딩 1층 (경기도 수원시 영통구 원천동 194-1 서진빌딩 1층)",
+        phone: "031-241-0033",
+        fax: "031-241-3838",
+        add1: "영업시간",
+        adddesc1: "09:00~20:00 (연중무휴)",
+        website: "https://www.gojin.com/",
+        websitetitle: "Sales Advisor >",
+      },
+    },
+    {
+      name: "Starfield Anseong",
+      link: "#",
+      detailInfo: {
+        imgsrc: "/img/company/img--showroom4.jpg",
+        fullName: "안성 전시장",
+        desc: "고객 접점 확대를 위해 도입한 ‘시티몰 컨셉’의 전시장으로 경기 남부권 최대 규모 쇼핑테마 파크- 스타필드 안성 쇼핑몰 내 1층에 위치하여 고객 접근성이 높으며, 총 4대의 최신 아우디 모델 전시가 가능한 규모의 공간과 최신 디지털 기술이 접목되어 다양한 미디어 콘텐츠도 경험 기회를 제공하겠습니다. 감사합니다.",
+        address: "경기 안성시 공도읍 서동대로 3930-39 / 스타필드 안성 1층",
+        phone: "031-647-4028",
+        add1: "영업시간",
+        adddesc1: "10:00~22:00 (연중무휴)",
+        website: "https://www.gojin.com/",
+        websitetitle: "Sales Advisor >",
+      },
+    },
+    {
+      name: "Cheonan",
+      link: "#",
+      detailInfo: {
+        imgsrc: "/img/company/img--showroom5.jpg",
+        fullName: "천안 전시장",
+        desc: "2019년 12월 아우디 천안 전시장이 확장 이전 오픈 하였습니다. 더욱 넓어진 공간에서, 쾌적하고 차별화 된 서비스를 고객님들께 제공할 것을 약속 드립니다. 감사합니다.",
+        address: "충청남도 천안시 서북구 쌍용대로 245 (충청남도 천안시 서북구 성정동 932)",
+        phone: "041-567-3111",
+        fax: "041-553-0222",
+        add1: "영업시간",
+        adddesc1: "09:00~20:00 (연중무휴)",
+        website: "https://www.gojin.com/",
+        websitetitle: "Sales Advisor >",
+      },
+    },
+    {
+      name: "Daejeon",
+      link: "#",
+      detailInfo: {
+        imgsrc: "/img/company/img--showroom6.jpg",
+        fullName: "대전 전시장",
+        desc: "아우디 대전 전시장은 연면적 약 2,638m2(798평) 5층 규모로 '아우디 터미널' 컨셉이 적용된 충청도 지역의 교두보 역할을 하고 있는 전시장입니다. 구매 상담은 물론 시승 상담까지 고객님이 원하시는 모든 것을 해결해 드릴 최고의 세일즈 컨설턴트들이 고객님을 기다리고 있습니다. 여유롭고 차별화 된 서비스로 최선을 다하겠습니다. 감사합니다.",
+        address: "대전시 대덕구 한밭대로 1108 (대전시 대덕구 중리동 230-2)",
+        phone: "042-863-8787",
+        fax: "042-863-1991",
+        add1: "영업시간",
+        adddesc1: "09:00~20:00 (연중무휴)",
+        website: "https://www.gojin.com/",
+        websitetitle: "Sales Advisor >",
+      },
+    },
+    {
+      name: "Gwangju",
+      link: "#",
+      detailInfo: {
+        imgsrc: "/img/company/img--showroom7.jpg",
+        fullName: "광주 전시장",
+        desc: "아우디 광주 전시장은 2006년 5월 고진모터스가 개장한 광주,전남지역 최초의 아우디 전시장으로서 2014년 현 위치로 확장 이전을 통하여 광주지역 최대규모, 최첨단 시설을 갖추게 되었습니다. 연면적 약 700여 평 규모의 전시장에는 17여 대의 아우디 차량이 전시되며, 최고의 서비스와 전문성을 갖춘 세일즈 컨설턴트들이 고객님들을 맞이 할 것입니다. 고객의 입장에서 생각하는 아우디 광주 전시장에서 차량 상담을 원하시면 언제든지 연락 주시기 바랍니다. 전국적인 판매 및 서비스 네트워크를 갖춘 고진모터스만의 노하우를 바탕으로 앞으로도 아우디 광주 전시장만의 차별화 된 프리미엄 서비스로 최고의 고객 만족을 만들어 가겠습니다. 감사합니다.",
+        address: "광주시 서구 무진대로 955 (광주시 서구 광천동 32-1)",
+        phone: "062-525-8777",
+        fax: "062-525-9778",
+        as: "062-524-5959",
+        add1: "영업시간",
+        adddesc1: "09:00~20:00 (연중무휴)",
+        website: "https://www.gojin.com/",
+        websitetitle: "Sales Advisor >",
+      },
+    },
+    {
+      name: "Mokpo",
+      link: "#",
+      detailInfo: {
+        imgsrc: "/img/company/img--showroom8.jpg",
+        fullName: "목포 전시장",
+        desc: "2016년 3월 전남 서남해안의 중심 목포 평화광장에 아우디 전시장이 오픈 되었습니다. 프리미엄 브랜드에 어울리는 전시공간과 바다경관이 함께하는 안락한 공간이 준비 되어있습니다. 목포지점에서 차별화된 세일즈 컨설턴트로부터 최고의 상담과 서비스를 경험하세요. 감사합니다.",
+        address: "전라남도 목포시 평화로 87 (전라남도 목포시 상동 1143-4)",
+        phone: "061-284-1677",
+        fax: "061-284-3677",
+        add1: "영업시간",
+        adddesc1: "09:00~20:00 (연중무휴)",
+        website: "https://www.gojin.com/",
+        websitetitle: "Sales Advisor >",
+      },
+    },
+  ]);
+
+  // 서비스센터 데이터
+  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>

app/pages/company/view.vue

@@ -0,0 +1,43 @@
+<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">EVENT</h3>
+          </div>
+        </section>
+        <div class="content--wrap">
+          <div class="view--wrap">
+            <div class="title--wrap">
+              <h2>Chuseok holiday event</h2>
+              <p>2025-10-02</p>
+            </div>
+            <div class="cont--wrap">
+              <img src="/img/company/img--event--sample.jpg" alt="">
+              <blockLinkList :pd="false" class="" :links="reservationLinks" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+</template>
+<script setup>
+const reservationLinks = ref([
+  {
+    text: "결산공고(2019)_고진모터스.xlsx",
+    url: "/",
+    target: "_blank",
+    class: "pl--0",
+  }
+]);
+</script>

audi.code-workspace

@@ -0,0 +1,10 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {
+		"typescript.tsdk": "node_modules\\typescript\\lib"
+	}
+}