feat: 슬라이드 화살표 클릭 로그 추가 및 관련 로직 개선

layers/components/blocks/CardNews.vue

@@ -10,12 +10,28 @@ interface Props {
 }
 
 const props = defineProps<Props>()
+const {locale} = useI18n()
+const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
+
+const handleLinkClick = (title) => {
+  const trackingData = {
+    tracking: {
+      click_item: title,
+      action_type: 'click',
+      click_sarea: ''
+    }
+  }
+  sendLog(locale.value, useAnalyticsLogDataDirect(trackingData, 1))
+}
+
+
 </script>
 
 <template>
   <div
     v-if="props.title || props.description"
     :class="`card-news ${props.class || ''}`"
+    @click="handleLinkClick(props.title)"
   >
     <img
       :src="props.imgPath"

layers/components/blocks/slide/CenterFocus.vue

@@ -2,6 +2,7 @@
 import { Splide } from '@splidejs/vue-splide'
 import type { Splide as SplideType, ResponsiveOptions } from '@splidejs/splide'
 import type { SlideItemSize } from '#layers/types/components/slide'
+import { useSplideArrow } from '#layers/composables/useSplideArrow'
 
 interface Props {
   slideItemSize: SlideItemSize
@@ -20,6 +21,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['mounted', 'move', 'moved', 'arrowClick'])
 
+// Splide 화살표 로직을 위한 composable 사용
+const { addArrowClickListeners } = useSplideArrow()
+
 const isMultipleItems = computed(() => {
   return props.slideItemLength > 1
 })
@@ -85,7 +89,9 @@ const handleSplideMounted = (splide: SplideType) => {
   
   // 화살표 버튼 클릭 이벤트 리스너 추가
   nextTick(() => {
-    addArrowClickListeners(splide)
+    addArrowClickListeners(splide, (direction, targetIndex) => {
+      emit('arrowClick', direction, targetIndex)
+    })
   })
 }
 
@@ -107,34 +113,6 @@ const handleMoved = (
   emit('moved', splide, newIndex, oldIndex, destIndex)
 }
 
-const handleArrowClick = (direction: 'prev' | 'next', splide: SplideType) => {
-  const currentIndex = splide.index
-  const totalSlides = splide.length
-  
-  // 이동할 슬라이드 인덱스 계산
-  let targetIndex: number
-  if (direction === 'next') {
-    targetIndex = currentIndex + 1 >= totalSlides ? 0 : currentIndex + 1
-  } else {
-    targetIndex = currentIndex - 1 < 0 ? totalSlides - 1 : currentIndex - 1
-  }
-  
-  emit('arrowClick', direction, targetIndex)
-}
-
-// 화살표 버튼에 클릭 이벤트 리스너 추가
-const addArrowClickListeners = (splide: SplideType) => {
-  const prevArrow = splide.root.querySelector('.arrow-prev')
-  const nextArrow = splide.root.querySelector('.arrow-next')
-  
-  if (prevArrow) {
-    prevArrow.addEventListener('click', () => handleArrowClick('prev', splide))
-  }
-  
-  if (nextArrow) {
-    nextArrow.addEventListener('click', () => handleArrowClick('next', splide))
-  }
-}
 
 
 </script>

layers/components/blocks/slide/CenterHighlight.vue

@@ -18,7 +18,10 @@ const props = withDefaults(defineProps<Props>(), {
   pagination: true,
 })
 
-const emit = defineEmits(['mounted', 'move', 'moved'])
+const emit = defineEmits(['mounted', 'move', 'moved', 'arrowClick'])
+
+// Splide 화살표 로직을 위한 composable 사용
+const { addArrowClickListeners } = useSplideArrow()
 
 const isMultipleItems = computed(() => {
   return props.slideItemLength > 1
@@ -85,6 +88,13 @@ const style = computed(() => {
 const handleSplideMounted = (splide: SplideType) => {
   emit('mounted', splide)
   splide.refresh()
+  
+  // 화살표 버튼 클릭 이벤트 리스너 추가
+  nextTick(() => {
+    addArrowClickListeners(splide, (direction, targetIndex) => {
+      emit('arrowClick', direction, targetIndex)
+    })
+  })
 }
 
 const handleMove = (

layers/components/blocks/slide/Fade.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Splide } from '@splidejs/vue-splide'
 import type { Splide as SplideType, ResponsiveOptions } from '@splidejs/splide'
+import { useSplideArrow } from '#layers/composables/useSplideArrow'
 
 interface Props {
   autoplay?: boolean | string
@@ -18,6 +19,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['mounted', 'move', 'moved', 'arrowClick'])
 
+// Splide 화살표 로직을 위한 composable 사용
+const { addArrowClickListeners } = useSplideArrow()
+
 const options = computed((): ResponsiveOptions => {
   return {
     type: 'fade',
@@ -47,7 +51,9 @@ const handleSplideMounted = (splide: SplideType) => {
   
   // 화살표 버튼 클릭 이벤트 리스너 추가
   nextTick(() => {
-    addArrowClickListeners(splide)
+    addArrowClickListeners(splide, (direction, targetIndex) => {
+      emit('arrowClick', direction, targetIndex)
+    })
   })
 }
 
@@ -69,34 +75,6 @@ const handleMoved = (
   emit('moved', splide, newIndex, oldIndex, destIndex)
 }
 
-const handleArrowClick = (direction: 'prev' | 'next', splide: SplideType) => {
-  const currentIndex = splide.index
-  const totalSlides = splide.length
-  
-  // 이동할 슬라이드 인덱스 계산
-  let targetIndex: number
-  if (direction === 'next') {
-    targetIndex = currentIndex + 1 >= totalSlides ? 0 : currentIndex + 1
-  } else {
-    targetIndex = currentIndex - 1 < 0 ? totalSlides - 1 : currentIndex - 1
-  }
-  
-  emit('arrowClick', direction, targetIndex)
-}
-
-// 화살표 버튼에 클릭 이벤트 리스너 추가
-const addArrowClickListeners = (splide: SplideType) => {
-  const prevArrow = splide.root.querySelector('.arrow-prev')
-  const nextArrow = splide.root.querySelector('.arrow-next')
-  
-  if (prevArrow) {
-    prevArrow.addEventListener('click', () => handleArrowClick('prev', splide))
-  }
-  
-  if (nextArrow) {
-    nextArrow.addEventListener('click', () => handleArrowClick('next', splide))
-  }
-}
 </script>
 
 <template>

layers/components/blocks/slide/Thumbnail.vue

@@ -11,6 +11,7 @@ import type {
   PageDataTemplateComponentSet,
   PageDataResourceGroup,
 } from '#layers/types/api/pageData'
+import { useSplideArrow } from '#layers/composables/useSplideArrow'
 
 interface Props {
   slideData: PageDataTemplateComponentSet[]
@@ -27,6 +28,9 @@ const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
 
 const emit = defineEmits(['arrowClick'])
 
+// Splide 화살표 로직을 위한 composable 사용
+const { addArrowClickListeners } = useSplideArrow()
+
 
 let mainInst: SplideType | null = null
 let thumbsInst: SplideType | null = null
@@ -107,34 +111,6 @@ const stopVideo = () => {
   playingSlideIndex.value = null
 }
 
-const handleArrowClick = (direction: 'prev' | 'next', splide: SplideType) => {
-  const currentIndex = splide.index
-  const totalSlides = splide.length
-  
-  // 이동할 슬라이드 인덱스 계산
-  let targetIndex: number
-  if (direction === 'next') {
-    targetIndex = currentIndex + 1 >= totalSlides ? 0 : currentIndex + 1
-  } else {
-    targetIndex = currentIndex - 1 < 0 ? totalSlides - 1 : currentIndex - 1
-  }
-  
-  emit('arrowClick', direction, targetIndex)
-}
-
-// 화살표 버튼에 클릭 이벤트 리스너 추가
-const addArrowClickListeners = (splide: SplideType) => {
-  const prevArrow = splide.root.querySelector('.arrow-prev')
-  const nextArrow = splide.root.querySelector('.arrow-next')
-  
-  if (prevArrow) {
-    prevArrow.addEventListener('click', () => handleArrowClick('prev', splide))
-  }
-  
-  if (nextArrow) {
-    nextArrow.addEventListener('click', () => handleArrowClick('next', splide))
-  }
-}
 
 onMounted(() => {
   mainInst = mainRef.value?.splide ?? null
@@ -146,7 +122,9 @@ onMounted(() => {
     
     // 썸네일 슬라이드의 화살표 버튼에 이벤트 리스너 추가
     nextTick(() => {
-      addArrowClickListeners(thumbsInst)
+      addArrowClickListeners(thumbsInst, (direction, targetIndex) => {
+        emit('arrowClick', direction, targetIndex)
+      })
     })
   }
 })

layers/components/widgets/VideoPlay.vue

@@ -5,22 +5,25 @@ const props = defineProps<{
   resourcesData: PageDataResourceGroup
   pageVerTmplSeq: number
 }>()
-const { useAnalyticsLogDataDirect } = useAnalytics()
-const logData = useAnalyticsLogDataDirect(props.resourcesData, props.pageVerTmplSeq)
 
 // YouTube 모달 스토어 사용
 const modalStore = useModalStore()
 
+const {locale} = useI18n()
+const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
+
+
 // 비디오 플레이 버튼 클릭 핸들러
 const handleVideoPlayClick = () => {
   const youtubeUrl = props.resourcesData?.display?.text ?? ''
   modalStore.handleOpenYoutube({ youtubeUrl })
+
+  sendLog(locale.value, useAnalyticsLogDataDirect(props.resourcesData, props.pageVerTmplSeq))
 }
 </script>
 
 <template>
   <AtomsButtonPlay
-    v-analytics="logData"
     :resources-data="resourcesData"
     @click="handleVideoPlayClick"
   />