Merge branch 'all'

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/Fade.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Splide } from '@splidejs/vue-splide'
-import type { ResponsiveOptions } from '@splidejs/splide'
+import type { Splide as SplideType, ResponsiveOptions } from '@splidejs/splide'
 
 interface Props {
   autoplay?: boolean | string
@@ -15,6 +15,8 @@ const props = withDefaults(defineProps<Props>(), {
   pagination: true,
 })
 
+const emit = defineEmits(['mounted', 'move', 'moved', 'arrowClick'])
+
 const splideRef = ref()
 
 const options = computed((): ResponsiveOptions => {
@@ -44,10 +46,74 @@ const options = computed((): ResponsiveOptions => {
 defineExpose({
   splide: computed(() => splideRef.value?.splide),
 })
+
+const handleSplideMounted = (splide: SplideType) => {
+  emit('mounted', splide)
+  splide.refresh()
+
+  // 화살표 버튼 클릭 이벤트 리스너 추가
+  nextTick(() => {
+    addArrowClickListeners(splide)
+  })
+}
+
+const handleMove = (
+  splide: SplideType,
+  newIndex: number,
+  oldIndex: number,
+  destIndex: number
+) => {
+  emit('move', splide, newIndex, oldIndex, destIndex)
+}
+
+const handleMoved = (
+  splide: SplideType,
+  newIndex: number,
+  oldIndex: number,
+  destIndex: number
+) => {
+  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>
-  <Splide ref="splideRef" :options="options" class="h-full">
+  <Splide
+    ref="splideRef"
+    :options="options"
+    class="h-full"
+    @splide:mounted="handleSplideMounted"
+    @splide:move="handleMove"
+    @splide:moved="handleMoved"
+  >
     <slot />
   </Splide>
 </template>

layers/components/widgets/ButtonList.vue

@@ -7,12 +7,12 @@ import type { ButtonType } from '#layers/types/components/button'
 
 interface ButtonListProps {
   resourcesData: PageDataResourceGroup[]
+  pageVerTmplSeq: number
 }
 
 const props = defineProps<ButtonListProps>()
 
 const { gameData } = useGameDataStore()
-
 const BUTTON_TYPE_MAP = {
   URL: {
     _self: 'internal' as const,
@@ -54,7 +54,12 @@ const getButtonBackgroundImage = (
   return ''
 }
 
-const handleButtonClick = (btnInfo: PageDataResourceGroupBtnInfo) => {
+const { locale } = useI18n()
+const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
+
+const handleButtonClick = (btnInfo: PageDataResourceGroupBtnInfo, index: any) => {
+  sendLog(locale.value, useAnalyticsLogDataDirect(props.resourcesData[index], props.pageVerTmplSeq))
+
   const marketType = btnInfo?.detail?.market_type
   if (marketType) {
     const url = gameData?.market[marketType]?.url
@@ -93,9 +98,9 @@ const handleButtonClick = (btnInfo: PageDataResourceGroupBtnInfo) => {
       :style="{
         backgroundImage: `url(${getButtonBackgroundImage(button.btn_info)})`,
       }"
-      @click="handleButtonClick(button.btn_info)"
+      @click="handleButtonClick(button.btn_info, index)"
     >
-      {{ button.btn_info?.txt_btn_name }}
+    {{ button.btn_info?.txt_btn_name }}
     </AtomsButton>
   </div>
 </template>

layers/components/widgets/VideoPlay.vue

@@ -5,8 +5,8 @@ const props = defineProps<{
   resourcesData: PageDataResourceGroup
   pageVerTmplSeq: number
 }>()
-const { useAnalyticsLogData } = useAnalytics()
-const logData = useAnalyticsLogData(props.resourcesData, props.pageVerTmplSeq)
+const { useAnalyticsLogDataDirect } = useAnalytics()
+const logData = useAnalyticsLogDataDirect(props.resourcesData, props.pageVerTmplSeq)
 
 // YouTube 모달 스토어 사용
 const modalStore = useModalStore()
@@ -20,6 +20,7 @@ const handleVideoPlayClick = () => {
 
 <template>
   <AtomsButtonPlay
+    v-analytics="logData"
     :resources-data="resourcesData"
     @click="handleVideoPlayClick"
   />