From cebe9427d7e219f3c9af503240192771b703c425 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chyeonggkim=E2=80=9D?=
 <“hyeonggkim@smilegate.com”>
Date: Fri, 17 Oct 2025 09:50:02 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20visual03=20=EB=A1=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/blocks/slide/Fade.vue  | 71 +++++++++++++++++++++++-
 layers/components/widgets/ButtonList.vue |  3 -
 layers/components/widgets/VideoPlay.vue  |  2 +-
 layers/composables/useAnalytics.ts       | 37 +-----------
 layers/templates/GrVisual03/index.vue    | 16 ++++++
 layers/types/api/pageData.ts             |  7 +++
 6 files changed, 95 insertions(+), 41 deletions(-)

diff --git a/layers/components/blocks/slide/Fade.vue b/layers/components/blocks/slide/Fade.vue
index a1479d6..3a2c6bb 100644
--- a/layers/components/blocks/slide/Fade.vue
+++ b/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,9 @@ const props = withDefaults(defineProps<Props>(), {
   pagination: true,
 })
 
+
+const emit = defineEmits(['mounted', 'move', 'moved', 'arrowClick'])
+
 const options = computed((): ResponsiveOptions => {
   return {
     type: 'fade',
@@ -36,10 +39,74 @@ const options = computed((): ResponsiveOptions => {
     },
   }
 })
+
+
+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 :options="options" class="h-full">
+  <Splide 
+    :options="options" 
+    class="h-full"
+    @splide:mounted="handleSplideMounted"
+    @splide:move="handleMove"
+    @splide:moved="handleMoved"
+  >
     <slot />
   </Splide>
 </template>
diff --git a/layers/components/widgets/ButtonList.vue b/layers/components/widgets/ButtonList.vue
index b17b27e..9af2a25 100644
--- a/layers/components/widgets/ButtonList.vue
+++ b/layers/components/widgets/ButtonList.vue
@@ -56,9 +56,6 @@ const getButtonProps = (button: PageDataResourceGroup) => ({
 })
 
 const { useAnalyticsLogDataDirect } = useAnalytics()
-// const logData = useAnalyticsLogDataDirect(props.resourcesData, props.pageVerTmplSeq)
-console.log("🚀 11111~ getButtonProps ~ props.resourcesData:", getButtonProps(props.resourcesData[0]))
-
 </script>
 
 <template>
diff --git a/layers/components/widgets/VideoPlay.vue b/layers/components/widgets/VideoPlay.vue
index c96ee32..dea3bca 100644
--- a/layers/components/widgets/VideoPlay.vue
+++ b/layers/components/widgets/VideoPlay.vue
@@ -6,7 +6,7 @@ const props = defineProps<{
   pageVerTmplSeq: number
 }>()
 const { useAnalyticsLogDataDirect } = useAnalytics()
-const logData = useAnalyticsLogDataDirect(props.resourcesData, props.pageVerTmplSeq)
+const logData = useAnalyticsLogDataDirect(props.resourcesData.tracking, props.pageVerTmplSeq)
 
 // YouTube 모달 스토어 사용
 const modalStore = useModalStore()
diff --git a/layers/composables/useAnalytics.ts b/layers/composables/useAnalytics.ts
index 2a0d796..56a9896 100644
--- a/layers/composables/useAnalytics.ts
+++ b/layers/composables/useAnalytics.ts
@@ -27,10 +27,7 @@ export const useAnalyticsLogData = (
     return ref({} as AnalyticsDetailType)
   }
 
-  const pageDataTrack = (
-    typeof resourcesData.tracking === 'object' ? resourcesData.tracking : {}
-  ) as AnalyticsLogDataTracking
-  console.log('🚀 ~ useAnalyticsLogData ~ pageDataTrack:', pageData)
+  const pageDataTrack = (typeof resourcesData.tracking === 'object' ? resourcesData.tracking : {}) as AnalyticsLogDataTracking
 
   const logData = ref({
     actionType: pageDataTrack?.action_type,
@@ -51,7 +48,6 @@ export const useAnalyticsLogData = (
   return logData
 }
 
-<<<<<<< HEAD
 /**
  * 페이지 데이터와 템플릿 정보를 기반으로 분석용 로그 데이터를 생성하는 composable (직접 객체 반환)
  * @param resourcesData 페이지 리소스 데이터
@@ -69,7 +65,7 @@ export const useAnalyticsLogDataDirect = (
     return {} as AnalyticsDetailType
   }
 
-  const pageDataTrack = (typeof resourcesData.tracking === 'object' ? resourcesData.tracking : {}) as AnalyticsLogDataTracking
+  const pageDataTrack = (typeof resourcesData === 'object' ? resourcesData : {}) as AnalyticsLogDataTracking
 
   const logData = {
     actionType: pageDataTrack?.action_type,
@@ -90,8 +86,6 @@ export const useAnalyticsLogDataDirect = (
 }
 
 
-=======
->>>>>>> feature/20250910-all
 // target에 {XX1, XX2}와 같은 형태가 포함되어 있을 경우 options.clickItem으로부터 값 추출하여 세팅
 const findValueFromOption = (target: string, { options = {} }: any) => {
   if (target.includes('{') && target.includes('}')) {
@@ -122,10 +116,6 @@ const findValueFromOption = (target: string, { options = {} }: any) => {
  * @param {object} options
  */
 const sendGA = (analytics: AnalyticsDetailType, { options = {} }: any) => {
-<<<<<<< HEAD
-=======
-  console.log('🚀 ~ 1111 sendGA ~ analytics:', analytics)
->>>>>>> feature/20250910-all
   try {
     const { gtag } = useGtag()
 
@@ -153,15 +143,10 @@ const sendGA = (analytics: AnalyticsDetailType, { options = {} }: any) => {
  * @param {string} mcode
  * @param {object} options
  */
-<<<<<<< HEAD
-const sendSA = (analytics: AnalyticsDetailType, { mcode = '', options: _options = {} }: any) => {
-  console.log("🚀 ~44444 sendSA ~ analytics:", analytics)
-=======
 const sendSA = (
   analytics: AnalyticsDetailType,
   { mcode = '', options = {} }: any
 ) => {
->>>>>>> feature/20250910-all
   const gameDataStore = useGameDataStore()
   const { gameData } = storeToRefs(gameDataStore)
 
@@ -179,13 +164,9 @@ const sendSA = (
     const viewArea = analytics.viewArea || ''
     const viewType = analytics.viewType || ''
     const clickArea = analytics.clickArea || ''
-<<<<<<< HEAD
-    const clickSarea = findValueFromOption(analytics.clickSarea || '', { _options })
-=======
     const clickSarea = findValueFromOption(analytics.clickSarea || '', {
       options,
     })
->>>>>>> feature/20250910-all
     const eventLocale = analytics.eventLocale || ''
 
     const identityInfo: IdentityInfo = {
@@ -214,13 +195,8 @@ const sendSA = (
         view_info: {
           game_no: gameNo,
           lang_cd: eventLocale,
-<<<<<<< HEAD
-          ..._options?.viewInfo
-        }
-=======
           ...options?.viewInfo,
         },
->>>>>>> feature/20250910-all
       }
     } else if (actionType === 'click') {
       actionParam = {
@@ -230,13 +206,8 @@ const sendSA = (
           click_item: analytics.clickItem,
           game_no: gameNo,
           lang_cd: eventLocale,
-<<<<<<< HEAD
-          ..._options?.clickItem
-        }
-=======
           ...options?.clickItem,
         },
->>>>>>> feature/20250910-all
       }
     }
 
@@ -275,11 +246,7 @@ const sendSA = (
  * @param {AnalyticsDetailType} analytics
  */
 const sendLog = (locale: string, analytics: AnalyticsDetailType) => {
-<<<<<<< HEAD
-console.log("🚀 ~33333 sendLog ~ analytics:", analytics)
-=======
   console.log('🚀 ~ sendLog ~ analytics:', analytics)
->>>>>>> feature/20250910-all
 
   // 언어 코드 대문자 변환
   analytics.eventLocale = locale.toUpperCase()
diff --git a/layers/templates/GrVisual03/index.vue b/layers/templates/GrVisual03/index.vue
index 01ababc..895a491 100644
--- a/layers/templates/GrVisual03/index.vue
+++ b/layers/templates/GrVisual03/index.vue
@@ -11,7 +11,22 @@ interface Props {
   pageVerTmplSeq: string
 }
 
+const {locale} = useI18n()
+
 const props = defineProps<Props>()
+
+const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
+const onArrowClick = (direction, targetIndex) => {
+  
+  // tracking 데이터 복사 및 click_item 수정
+  const modifiedTracking = {
+    ...props.components.arrow.groups[targetIndex].tracking,
+    click_item: props.components.arrow.groups[targetIndex].tracking.click_item + `_slide${targetIndex}`
+  }
+
+  sendLog(locale.value, useAnalyticsLogDataDirect(new Proxy(modifiedTracking, {}), Number(props.pageVerTmplSeq)))
+
+}
 </script>
 
 <template>
@@ -21,6 +36,7 @@ const props = defineProps<Props>()
       :arrows="true"
       :pagination="true"
       class="h-full"
+      @arrow-click="onArrowClick"
     >
       <SplideSlide
         v-for="(item, index) in props.components.group_sets"
diff --git a/layers/types/api/pageData.ts b/layers/types/api/pageData.ts
index b0dcbc1..19f6e56 100644
--- a/layers/types/api/pageData.ts
+++ b/layers/types/api/pageData.ts
@@ -1,3 +1,10 @@
+// Tracking 타입
+export interface PageDataTracking {
+  click_item: string
+  action_type: string
+  click_sarea: string
+}
+
 // API 요청 파라미터 타입
 export interface PageDataRequest {
   game_alias: string