feat: 버튼 로그 추가

layers/components/blocks/slide/CenterFocus.vue

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
   pagination: true,
 })
 
-const emit = defineEmits(['mounted', 'move', 'moved'])
+const emit = defineEmits(['mounted', 'move', 'moved', 'arrowClick'])
 
 const isMultipleItems = computed(() => {
   return props.slideItemLength > 1
@@ -82,6 +82,11 @@ const style = computed(() => {
 const handleSplideMounted = (splide: SplideType) => {
   emit('mounted', splide)
   splide.refresh()
+  
+  // 화살표 버튼 클릭 이벤트 리스너 추가
+  nextTick(() => {
+    addArrowClickListeners(splide)
+  })
 }
 
 const handleMove = (
@@ -101,6 +106,37 @@ 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

@@ -21,7 +21,12 @@ interface Props {
   style?: Record<string, string>
 }
 
+const {locale} = useI18n()
 const props = defineProps<Props>()
+const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
+
+const emit = defineEmits(['arrowClick'])
+
 
 let mainInst: SplideType | null = null
 let thumbsInst: SplideType | null = null
@@ -86,12 +91,51 @@ const isPassVideo = (item: PageDataTemplateComponentSet, index: number) => {
 
 const handleVideoClick = (index: number) => {
   playingSlideIndex.value = index
+  
+  // tracking 데이터 수정
+  const modifiedTracking = {
+    ...props.videoPlay.tracking,
+    click_item: props.videoPlay.tracking.click_item + `_${index}`
+  }
+  const trackingData = {
+    tracking: modifiedTracking
+  };
+  sendLog(locale.value, useAnalyticsLogDataDirect(trackingData, 1))
 }
 
 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
   thumbsInst = thumbsRef.value?.splide ?? null
@@ -99,6 +143,11 @@ onMounted(() => {
   if (mainInst && thumbsInst) {
     mainInst.sync(thumbsInst)
     mainInst.on('moved', stopVideo)
+    
+    // 썸네일 슬라이드의 화살표 버튼에 이벤트 리스너 추가
+    nextTick(() => {
+      addArrowClickListeners(thumbsInst)
+    })
   }
 })
 
@@ -117,6 +166,7 @@ onBeforeUnmount(() => {
         :key="item.set_order || index"
         class="main-slide"
       >
+      {{ item }}
         <img
           :src="getMediaImgSrcFromItem(item)"
           alt="main image"