From 5646c2501b311936dc30780c4348b7e0e1b0a25a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chyeonggkim=E2=80=9D?=
 <“hyeonggkim@smilegate.com”>
Date: Wed, 1 Oct 2025 21:41:47 +0900
Subject: [PATCH] =?UTF-8?q?feat.=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B6=84?=
 =?UTF-8?q?=EC=84=9D=20=EB=A1=9C=EA=B7=B8=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/widgets/ButtonList.vue | 10 ++++-
 layers/components/widgets/VideoPlay.vue  |  5 ++-
 layers/composables/useAnalytics.ts       | 52 ++++++++++++++++++++----
 layers/middleware/pageData.global.ts     |  5 +--
 layers/templates/GrGallery02/index.vue   |  1 +
 layers/templates/GrGallery03/index.vue   |  1 +
 layers/templates/GrVisual01/index.vue    | 27 +++++++-----
 layers/templates/GrVisual02/index.vue    |  1 +
 layers/templates/GrVisual03/index.vue    |  1 +
 9 files changed, 78 insertions(+), 25 deletions(-)

diff --git a/layers/components/widgets/ButtonList.vue b/layers/components/widgets/ButtonList.vue
index f7ac19d..cd2da33 100644
--- a/layers/components/widgets/ButtonList.vue
+++ b/layers/components/widgets/ButtonList.vue
@@ -7,6 +7,7 @@ import type { ButtonType } from '#layers/types/components/button'
 
 interface ButtonListProps {
   resourcesData: PageDataResourceGroup[]
+  pageVerTmplSeq: number
 }
 
 const props = defineProps<ButtonListProps>()
@@ -51,7 +52,13 @@ const getButtonProps = (button: PageDataResourceGroup) => ({
   }),
   disabled: button.btn_info?.disabled,
   text: button.btn_info?.txt_btn_name,
+  tracking: button.tracking,
 })
+
+const { useAnalyticsLogDataDirect } = useAnalytics()
+// const logData = useAnalyticsLogDataDirect(props.resourcesData, props.pageVerTmplSeq)
+console.log("🚀 11111~ getButtonProps ~ props.resourcesData:", getButtonProps(props.resourcesData[0]))
+
 </script>
 
 <template>
@@ -63,9 +70,10 @@ const getButtonProps = (button: PageDataResourceGroup) => ({
       v-for="(button, index) in props.resourcesData"
       :key="`${button.group_code}-${index}`"
       v-bind="getButtonProps(button)"
+      v-analytics="useAnalyticsLogDataDirect(getButtonProps(button), props.pageVerTmplSeq)"
       class="size-extra-small md:size-medium"
     >
-      {{ button.btn_info?.txt_btn_name }}
+    {{ button.btn_info?.txt_btn_name }}
     </AtomsButton>
   </div>
 </template>
diff --git a/layers/components/widgets/VideoPlay.vue b/layers/components/widgets/VideoPlay.vue
index 3aca1a5..c96ee32 100644
--- a/layers/components/widgets/VideoPlay.vue
+++ b/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"
   />
diff --git a/layers/composables/useAnalytics.ts b/layers/composables/useAnalytics.ts
index ffc1333..d7a6326 100644
--- a/layers/composables/useAnalytics.ts
+++ b/layers/composables/useAnalytics.ts
@@ -25,7 +25,6 @@ export const useAnalyticsLogData = (
   }
 
   const pageDataTrack = (typeof resourcesData.tracking === 'object' ? resourcesData.tracking : {}) as AnalyticsLogDataTracking
-  console.log("🚀 ~ useAnalyticsLogData ~ pageDataTrack:", pageData)
 
   const logData = ref({
     actionType: pageDataTrack?.action_type,
@@ -45,6 +44,43 @@ export const useAnalyticsLogData = (
   return logData
 }
 
+/**
+ * 페이지 데이터와 템플릿 정보를 기반으로 분석용 로그 데이터를 생성하는 composable (직접 객체 반환)
+ * @param resourcesData 페이지 리소스 데이터
+ * @param pageVerTmplSeq 템플릿 시퀀스 번호
+ * @returns 분석용 로그 데이터 객체 (ref 없이)
+ */
+export const useAnalyticsLogDataDirect = (
+  resourcesData: PageDataResourceGroup,
+  pageVerTmplSeq: number
+) => {
+  const store = usePageDataStore()
+  const pageData = store.pageData
+
+  if (!pageData) {
+    return {} as AnalyticsDetailType
+  }
+
+  const pageDataTrack = (typeof resourcesData.tracking === 'object' ? resourcesData.tracking : {}) as AnalyticsLogDataTracking
+
+  const logData = {
+    actionType: pageDataTrack?.action_type,
+    // logSourceType:pageDataTrack.logSourceType,
+    // viewArea:pageDataTrack.viewArea,
+    // viewType:pageDataTrack.viewType,
+    clickArea:pageData.page_name_en,
+    clickSarea: pageData.templates[pageVerTmplSeq].page_ver_tmpl_name_en,
+    clickItem: `${pageData.templates[pageVerTmplSeq].page_ver_tmpl_name}_${pageDataTrack?.click_item}`,
+    event: pageData.page_name,
+    eventCategory: `${pageData.page_name}_${pageDataTrack?.click_item}`,
+    template_code: pageData.templates[pageVerTmplSeq].template_code,
+    page_ver_tmpl_name: pageData.templates[pageVerTmplSeq].page_ver_tmpl_name,
+    page_ver_tmpl_name_en: pageData.templates[pageVerTmplSeq].page_ver_tmpl_name_en,
+  } as unknown as AnalyticsDetailType
+
+  return logData
+}
+
 
 // target에 {XX1, XX2}와 같은 형태가 포함되어 있을 경우 options.clickItem으로부터 값 추출하여 세팅
 const findValueFromOption = (target: string, { options = {} }: any) => {
@@ -70,7 +106,6 @@ const findValueFromOption = (target: string, { options = {} }: any) => {
  * @param {object} options
  */
 const sendGA = (analytics: AnalyticsDetailType, { options = {} }: any) => {
-  console.log("🚀 ~ 1111 sendGA ~ analytics:", analytics)
   try {
     const { gtag } = useGtag()
 
@@ -98,7 +133,8 @@ const sendGA = (analytics: AnalyticsDetailType, { options = {} }: any) => {
  * @param {string} mcode
  * @param {object} options
  */
-const sendSA = (analytics: AnalyticsDetailType, { mcode = '', options = {} }: any) => {
+const sendSA = (analytics: AnalyticsDetailType, { mcode = '', options: _options = {} }: any) => {
+  console.log("🚀 ~44444 sendSA ~ analytics:", analytics)
   const gameDataStore = useGameDataStore()
   const { gameData } = storeToRefs(gameDataStore)
 
@@ -116,7 +152,7 @@ const sendSA = (analytics: AnalyticsDetailType, { mcode = '', options = {} }: an
     const viewArea = analytics.viewArea || ''
     const viewType = analytics.viewType || ''
     const clickArea = analytics.clickArea || ''
-    const clickSarea = findValueFromOption(analytics.clickSarea || '', { options })
+    const clickSarea = findValueFromOption(analytics.clickSarea || '', { _options })
     const eventLocale = analytics.eventLocale || ''
 
     const identityInfo: IdentityInfo = {
@@ -145,7 +181,7 @@ const sendSA = (analytics: AnalyticsDetailType, { mcode = '', options = {} }: an
         view_info: {
           game_no: gameNo,
           lang_cd: eventLocale,
-          ...options?.viewInfo
+          ..._options?.viewInfo
         }
       }
     } else if (actionType === 'click') {
@@ -156,7 +192,7 @@ const sendSA = (analytics: AnalyticsDetailType, { mcode = '', options = {} }: an
           click_item: analytics.clickItem,
           game_no: gameNo,
           lang_cd: eventLocale,
-          ...options?.clickItem
+          ..._options?.clickItem
         }
       }
     }
@@ -196,7 +232,7 @@ const sendSA = (analytics: AnalyticsDetailType, { mcode = '', options = {} }: an
  * @param {AnalyticsDetailType} analytics
  */
 const sendLog = (locale: string, analytics: AnalyticsDetailType) => {
-console.log("🚀 ~ sendLog ~ analytics:", analytics)
+console.log("🚀 ~33333 sendLog ~ analytics:", analytics)
 
  
   // 언어 코드 대문자 변환
@@ -313,5 +349,5 @@ const sendMarketingScript = ({
 }
 
 export default () => {
-  return { sendGA, sendSA, sendLog, sendMarketingScript, useAnalyticsLogData }
+  return { sendGA, sendSA, sendLog, sendMarketingScript, useAnalyticsLogData, useAnalyticsLogDataDirect }
 }
diff --git a/layers/middleware/pageData.global.ts b/layers/middleware/pageData.global.ts
index 70b4c0f..56522a0 100644
--- a/layers/middleware/pageData.global.ts
+++ b/layers/middleware/pageData.global.ts
@@ -17,7 +17,6 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
 
   try {
     const pageUrl = getPathAfterLanguage(to.path)
-    console.log('🚀 ~ pageUrl:', pageUrl)
 
     // pageUrl이 빈값이거나 null이면 /brand로 리다이렉트
     if (!pageUrl || pageUrl === '' || pageUrl === '/') {
@@ -30,7 +29,7 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
       page_url: pageUrl,
       _t: Date.now().toString(), // 캐시 무효화를 위한 타임스탬프
     }
-    console.log('🚀 ~ queryParams:', queryParams)
+    // console.log('🚀 ~ queryParams:', queryParams)
 
     const response = (await commonFetch('GET', apiUrl, {
       query: queryParams,
@@ -39,7 +38,7 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
 
     if (response?.code === 0 && 'value' in response) {
       store.setPageData(response.value)
-      console.log('🚀 ~ cleanData:', response.value)
+      // console.log('🚀 ~ cleanData:', response.value)
     } else {
       store.clearPageData()
     }
diff --git a/layers/templates/GrGallery02/index.vue b/layers/templates/GrGallery02/index.vue
index 26a1534..4469306 100644
--- a/layers/templates/GrGallery02/index.vue
+++ b/layers/templates/GrGallery02/index.vue
@@ -85,6 +85,7 @@ const handleChange = (
       <WidgetsButtonList
         v-if="buttonListData"
         :resources-data="buttonListData"
+        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
         class="mt-[40px] md:mt-[56px]"
       />
     </div>
diff --git a/layers/templates/GrGallery03/index.vue b/layers/templates/GrGallery03/index.vue
index 0aecd5d..0e0bf42 100644
--- a/layers/templates/GrGallery03/index.vue
+++ b/layers/templates/GrGallery03/index.vue
@@ -102,6 +102,7 @@ const handleChange = (
       <WidgetsButtonList
         v-if="buttonListData"
         :resources-data="buttonListData"
+        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
         class="mt-[32px]"
       />
     </div>
diff --git a/layers/templates/GrVisual01/index.vue b/layers/templates/GrVisual01/index.vue
index c5dec9a..9ad39d2 100644
--- a/layers/templates/GrVisual01/index.vue
+++ b/layers/templates/GrVisual01/index.vue
@@ -43,17 +43,22 @@ const buttonListData = computed(() =>
         :resources-data="descriptionData"
         class="w-[355px] md:w-[944px]"
       />
-      <WidgetsVideoPlay
-        v-if="videoPlayData"
-        :resources-data="videoPlayData"
-        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
-      />
-      <WidgetsButtonList
-        v-if="buttonListData.length > 0"
-        :resources-data="buttonListData"
-        button-type="market"
-        class="mt-[22px] md:mt-[52px]"
-      />
+      <client-only>
+        <WidgetsVideoPlay
+          v-if="videoPlayData"
+          :resources-data="videoPlayData"
+          :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
+        />
+      </client-only>
+      <client-only>
+        <WidgetsButtonList
+          v-if="buttonListData.length > 0"
+          :resources-data="buttonListData"
+          :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
+          button-type="market"
+          class="mt-[22px] md:mt-[52px]"
+        />
+      </client-only>
     </div>
   </section>
 </template>
diff --git a/layers/templates/GrVisual02/index.vue b/layers/templates/GrVisual02/index.vue
index 6c76e19..00b40d0 100644
--- a/layers/templates/GrVisual02/index.vue
+++ b/layers/templates/GrVisual02/index.vue
@@ -105,6 +105,7 @@ const slideItemSize = {
       <WidgetsButtonList
         v-if="buttonListData.length > 0"
         :resources-data="buttonListData"
+        :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
         class="mt-[48px] md:mt-[72px]"
       />
       <BlocksSlideCenterHighlight
diff --git a/layers/templates/GrVisual03/index.vue b/layers/templates/GrVisual03/index.vue
index c902c8f..01ababc 100644
--- a/layers/templates/GrVisual03/index.vue
+++ b/layers/templates/GrVisual03/index.vue
@@ -49,6 +49,7 @@ const props = defineProps<Props>()
           <WidgetsButtonList
             v-if="hasComponentGroup(item, 'buttonList')"
             :resources-data="getComponentGroupAry(item, 'buttonList')"
+            :page-ver-tmpl-seq="Number(props.pageVerTmplSeq)"
             class="mt-[28px] md:mt-[52px]"
           />
         </div>