feat. 일반 템플릿 로그 추가

layers/templates/GrDetail01/index.vue

@@ -9,10 +9,14 @@ import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 interface Props {
   components: PageDataTemplateComponents
   pageVerTmplSeq: number
+  pageVerTmplNameEn: string
 }
 
 const props = defineProps<Props>()
 
+const { locale } = useI18n()
+const { sendLog, useAnalyticsData } = useAnalytics()
+
 const splideRef = ref<SplideSlide | null>(null)
 const currentSlideIndex = ref<number | null>(null)
 
@@ -23,17 +27,24 @@ const paginationData = computed(() => {
   return getComponentGroupAry(props.components, 'pagination')
 })
 
-const goToSlide = (index: number) => {
+const goToSlide = (index: number, title: string) => {
   const splide = splideRef.value?.splide
+  const paginationAnalytics = {
+    action_type: 'click',
+    click_item: title,
+    click_sarea: props.pageVerTmplNameEn,
+  }
+
   if (splide) {
     splide.go(index)
+    sendLog(locale.value, useAnalyticsData(paginationAnalytics))
   }
 }
 </script>
 
 <template>
   <section class="section-standard">
-    <BlocksSlideFade
+    <WidgetsSlideFade
       v-if="slideData"
       ref="splideRef"
       v-model:index="currentSlideIndex"
@@ -66,7 +77,7 @@ const goToSlide = (index: number) => {
           />
         </div>
       </SplideSlide>
-    </BlocksSlideFade>
+    </WidgetsSlideFade>
     <div
       v-if="slideData && slideData.length > 1"
       class="splide-pagination"
@@ -88,7 +99,12 @@ const goToSlide = (index: number) => {
             'btn-pagination',
             { 'is-active': currentSlideIndex === index },
           ]"
-          @click="goToSlide(index)"
+          @click="
+            goToSlide(
+              index,
+              getComponentGroup(item, 'pagenaviTitle')?.display?.text || ''
+            )
+          "
         >
           <span class="item-bullet"></span>
           <span class="item-title">
@@ -105,7 +121,7 @@ const goToSlide = (index: number) => {
 
 <style scoped>
 .splide-pagination {
-  @apply overflow-hidden flex items-center justify-center absolute bottom-10 left-1/2 max-w-full -translate-x-1/2 z-[5] md:bottom-[96px];
+  @apply flex items-center justify-center absolute bottom-10 left-1/2 max-w-full -translate-x-1/2 z-[5] md:bottom-[96px];
 }
 .btn-pagination {
   @apply relative;
@@ -122,7 +138,7 @@ const goToSlide = (index: number) => {
   color: var(--pagination-disabled);
 }
 .progress-bar {
-  @apply relative w-[68px] h-[1px] overflow-hidden md:w-[184px];
+  @apply relative w-[62px] h-[1px] overflow-hidden xs:w-[68px] md:w-[184px];
   background-color: var(--pagination-disabled);
 }
 .progress-fill {