+ 스와이퍼 vertical 타입 수정

app/assets/scss/admin.scss

@@ -285,7 +285,7 @@
       padding: 40px;
       display: flex;
       flex-direction: column;
-      justify-content: center;      
+      justify-content: flex-end;      
       
       .controls--top {
         margin-bottom: 40px;
@@ -308,7 +308,7 @@
             .swiper-pagination-bullet {
               width: 24px;
               height: 24px;
-              // background: rgba(255, 255, 255, 0.1);              
+              background: transparent;                
               border-radius: 50%;
               color: rgba(255, 255, 255, 0.6);
               font-size: 14px;
@@ -319,9 +319,10 @@
               cursor: pointer;
               transition: all 0.3s ease;
               opacity: 1;
+              margin:0px;
               
               &:hover {
-                background:rgba(252,252,253,.3) ;
+                background:rgba(252,252,253,.3)!important;
                 color: rgba(255, 255, 255, 0.8);
               }
               
@@ -382,11 +383,12 @@
       
       .text--content {
         text-align: center;
+        height:60%;
         
         .text--slider {
           position: relative;
           overflow: hidden;
-          height: 120px; // 고정 높이로 레이아웃 안정성 확보
+          height:100%;
           
           .text--slide {
             position: absolute;
@@ -397,15 +399,19 @@
             transform: translateX(-100%);
             transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
             text-align: left;
+            visibility: hidden;
             
             &.active {
               opacity: 1;
               transform: translateX(0);
+              visibility: visible;
+              position: relative; // 활성 슬라이드는 relative로 높이 확보
             }
             
             // 이전 슬라이드는 오른쪽으로 사라짐
             &:not(.active) {
-              transform: translateX(100%);
+              transform: translateX(-100%);
+              position: absolute; // 비활성 슬라이드는 absolute로 겹침
             }
           }
         }
@@ -850,3 +856,29 @@
 }
 
 
+//자세히 보기
+.more--detail--href{  
+  display: inline-flex;    
+  align-items: center;   
+  position: relative;
+  letter-spacing: 0px;
+  font-weight: 400;  
+  font-size: 14px;    
+  min-height:24px;
+
+  &:after{
+    content:'';
+    display: block;
+    width:calc(100% - 24px);
+    height:1px;
+    background: rgb(252, 252, 253);
+    position: absolute;
+    bottom:0px;
+    left:0px;
+  }
+  .ico{
+      width: 24px;
+      height: 24px;
+      background-image: url(/img/ico--arrow.svg);
+  }
+}

app/components/block/SwiperBanner.vue

@@ -45,9 +45,21 @@
               class="text--slide"
               :class="{ active: index === currentSlide }"
             >
-              <h2 v-if="title" class="main--title">{{ getSlideTitle(index) }}</h2>
-              <h3 v-if="subtitle" class="sub--title">{{ getSlideSubtitle(index) }}</h3>
-              <h4 v-if="smalldesc" class="desc--title">{{ getSlideSmalldesc(index) }}</h4>
+              <h2 v-if="getSlideTitle(index)" class="main--title">
+                {{ getSlideTitle(index) }}
+              </h2>
+              <h3 v-if="getSlideSubtitle(index)" class="sub--title">
+                {{ getSlideSubtitle(index) }}
+              </h3>
+              <h4 v-if="getSlideSmalldesc(index)" class="desc--title">
+                {{ getSlideSmalldesc(index) }}
+              </h4>
+              <NuxtLink
+                v-if="getSlideMorelink(index)"
+                class="more--detail--href mt--20"
+                :to="getSlideMorelink(index)"
+                >자세히 보기 <i class="ico"></i
+              ></NuxtLink>
             </div>
           </div>
           <div v-if="notice" class="notice--text">
@@ -110,19 +122,23 @@
     },
     title: {
       type: String,
-      default: "Audi Exclusive",
+      default: "",
     },
     subtitle: {
       type: String,
-      default: "특별한 아우디 경험",
+      default: "",
     },
     smalldesc: {
       type: String,
       default: "",
     },
+    morelink: {
+      type: String,
+      default: "",
+    },
     notice: {
       type: String,
-      default: "* 모든 이미지는 참고용이며 실제와 다를 수 있습니다.",
+      default: "",
     },
     autoplay: {
       type: [Boolean, Object],
@@ -163,6 +179,10 @@
     return props.slides[index]?.smalldesc || props.smalldesc;
   };
 
+  const getSlideMorelink = (index) => {
+    return props.slides[index]?.morelink || props.morelink;
+  };
+
   onMounted(() => {
     // Swiper 인스턴스 초기화
     swiperInstance = new Swiper(swiperContainer.value, {

app/pages/exclusive/exclusive-order.vue

@@ -65,6 +65,38 @@
         :animation="true"
         :animationDelay="300"
       />
+
+      <SwiperBanner
+        :slides="bannerSlides3"
+        :autoplay="false"
+        :loop="false"
+        type="vertical"
+      />
+
+      <!-- 타이틀 비주얼 컴포넌트 -->
+      <TitleVisual
+        title="당신을 드러내는 색상"
+        description="차체 색상으로 첫인상을 남길 수 있는 기회는 단 한 번뿐입니다. Audi exclusive order의 다양한 색상 중에서 당신을 드러내는 외관 페인트 마감을 선택하세요. 아우디에서 테스트하고 승인한 맞춤형 페인트 마감은 아래와 같습니다. 원하는 차량에 원하는 색상을 적용할 수 있는지 확인하려면 아우디 파트너에게 문의해 주세요."
+        textAlign="left"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <SwiperBanner
+        :slides="bannerSlides4"
+        :autoplay="false"
+        :loop="false"
+        type="vertical"
+      />
+
+      <SwiperBanner
+        :slides="bannerSlides5"
+        :autoplay="false"
+        :loop="false"
+        class="mt--50"
+        type="vertical"
+      />
     </div>
   </main>
 </template>
@@ -144,4 +176,95 @@
       smalldesc: "",
     },
   ]);
+
+  const bannerSlides3 = ref([
+    {
+      image: "/img/exclusive/09_rs7_ae_2020_2428-L.jpg",
+      alt: "",
+      title: "",
+      subtitle:
+        "Ascari blue metallic 색상의 아우디 RS 7 Sportback. 연비(km/l) : 7.4 (에너지소비효율등급 5등급 / 복합), 6.2 (도심), 9.5 (고속도로), CO₂ 배출량(g/km): 239",
+      smalldesc: "",
+      morelink: "/",
+    },
+    {
+      image: "/img/exclusive/11_a8_ae_2021_3214_58435-L.jpg",
+      alt: "",
+      title: "",
+      subtitle: "Night Blue Pearl Effect의 아우디 A8.",
+      smalldesc: "",
+      morelink: "/",
+    },
+    {
+      image: "/img/exclusive/12_rs6_ae_2020_2426_55361-L.jpg",
+      alt: "",
+      title: "",
+      subtitle:
+        "Panther black crystall effect의 아우디 RS 6 Avant. 연비(km/l) : 7.0 (에너지소비효율등급 5등급/복합), 6.1 (도심), 8.6 (고속도로), CO₂ 배출량(g/km) : 250",
+      smalldesc: "",
+      morelink: "/",
+    },
+  ]);
+
+  const bannerSlides4 = ref([
+    {
+      image: "/img/exclusive/metallic.jpg",
+      alt: "",
+      title: "Metallic 페인트 마감:",
+      subtitle: "은은하게 반짝이는 우아함.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/pearleffect.jpg",
+      alt: "",
+      title: "Pearl effect 페인트 마감:",
+      subtitle: "빛나는 광채.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/uni.jpg",
+      alt: "",
+      title: "단일 페인트 마감: ",
+      subtitle: "심플한 아름다움.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/crystal.jpg",
+      alt: "",
+      title: "Crystall effect 페인트 마감: ",
+      subtitle: "숨이 멎을 듯 강렬한 럭셔리함. ",
+      smalldesc: "",
+    },
+  ]);
+
+  const bannerSlides5 = ref([
+    {
+      image: "/img/exclusive/metallic.jpg",
+      alt: "",
+      title: "Metallic 페인트 마감:",
+      subtitle: "은은하게 반짝이는 우아함.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/pearleffect.jpg",
+      alt: "",
+      title: "Pearl effect 페인트 마감:",
+      subtitle: "빛나는 광채.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/uni.jpg",
+      alt: "",
+      title: "단일 페인트 마감: ",
+      subtitle: "심플한 아름다움.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/crystal.jpg",
+      alt: "",
+      title: "Crystall effect 페인트 마감: ",
+      subtitle: "숨이 멎을 듯 강렬한 럭셔리함. ",
+      smalldesc: "",
+    },
+  ]);
 </script>