+ 타이틀 비쥬얼 Ref 타입으로 설정하여 고유 인자값으로 적용 (에니메이션 동시발생 방지)

app/components/block/TitleVisual.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="title--visual" :data-theme="theme">
+  <section class="title--visual" :data-theme="theme" ref="titleVisualRef">
     <div class="title--visual--wrapper">
       <div
         class="title--visual--content"
@@ -55,6 +55,7 @@
   import { onMounted, ref } from "vue";
 
   const isVisible = ref(false);
+  const titleVisualRef = ref(null);
 
   onMounted(() => {
     if (props.animation) {
@@ -75,15 +76,15 @@
         }
       );
 
-      const element = document.querySelector(".title--visual");
-      if (element) {
-        observer.observe(element);
+      // ref를 통해 현재 컴포넌트 요소만 선택
+      if (titleVisualRef.value) {
+        observer.observe(titleVisualRef.value);
       }
 
       // cleanup
       return () => {
-        if (element) {
-          observer.unobserve(element);
+        if (titleVisualRef.value) {
+          observer.unobserve(titleVisualRef.value);
         }
       };
     } else {

app/pages/exclusive/exclusive-order.vue

@@ -48,6 +48,23 @@
         :animation="true"
         :animationDelay="300"
       />
+
+      <SwiperBanner
+        :slides="bannerSlides2"
+        notice=""
+        :autoplay="{ delay: 0 }"
+        :loop="false"
+      />
+
+      <!-- 타이틀 비주얼 컴포넌트 -->
+      <TitleVisual
+        title="당신만의 색상을 선택하세요"
+        description=""
+        textAlign="left"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
     </div>
   </main>
 </template>
@@ -100,4 +117,31 @@
       smalldesc: "유럽인증",
     },
   ]);
+
+  const bannerSlides2 = ref([
+    {
+      image: "/img/exclusive/06_AQUA_151004_7823-S-L.jpg",
+      alt: "개성이 담긴 색상",
+      title: "개성이 담긴 색상",
+      subtitle:
+        "선택하는 색상은 결합제, 용제, 다양한 첨가제뿐만 아니라 유기 및 무기 안료의 혼합으로 이루어집니다. 유기 안료는 색상의 휘도와 선명도를 제공하고 무기 안료는 마감재의 내후성을 보장합니다. 메탈 소판(metal platelet)을 추가하면 메탈릭 페인트 마감의 매혹적인 이펙트가 나타납니다.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/07_AU140766_large-S-L.jpg",
+      alt: "차체에 페인트를 적용하는 방법",
+      title: "차체에 페인트를 적용하는 방법",
+      subtitle:
+        "아우디의 페인트 마감은 4겹으로 구성되지만 한 겹의 두께는 사람의 머리카락보다 굵지 않습니다. 먼저 부식을 방지하는 프라이머를 본체에 도포합니다. 이 단계에서 전체 차량이 딥 탱크를 통해 회전하여 안으로 들어간 모든 부분의 모든 면을 페인트로 코팅합니다. 그런 다음, 본체를 180°C에서 45분 동안 건조시킵니다.",
+      smalldesc: "",
+    },
+    {
+      image: "/img/exclusive/08_AU140767_large-S-L.jpg",
+      alt: "이후 공정",
+      title: "이후 공정",
+      subtitle:
+        "두 번째 단계는 필러 레이어라고 합니다. 필러 레이어는 표면의 요철을 매끄럽게 하고 주행 중 날아오는 돌이나 모래로 마감이 갈라지는 것을 방지하는 데 필요한 탄성을 제공합니다. 세 번째 레이어는 컬러 페인트 마감입니다. 빠르게 회전하는 분무기로 아우디 표면에 이 베이스 마감을 적용합니다. 네 번째 단계에서는 투명한 바니시 보호층을 추가한 후 140°C에서 30분 동안 경화시켜야 합니다.",
+      smalldesc: "",
+    },
+  ]);
 </script>