feat. 공통 로그 변경, 고정 템플릿 로그 추가

layers/templates/FxPreregist01/index.vue

@@ -12,6 +12,7 @@ interface Props {
 }
 
 const props = defineProps<Props>()
+provide('pageVerTmplNameEn', props.pageVerTmplNameEn)
 
 const runtimeConfig = useRuntimeConfig()
 const device = useDevice()
@@ -27,14 +28,15 @@ const resultGetMultilingual = await useGetMultilingual({
   baseApiUrl: dataResourcesUrl,
   fileName: multilingualFileName,
 })
-const { tm, locale }: any = useI18n({
+const { t, tm, locale }: any = useI18n({
   useScope: 'local',
   messages: Object(resultGetMultilingual?.value?.multilingual),
 })
 
-const { getOperateResources } = useOperateResources()
 const { gameData } = storeToRefs(gameDataStore)
 const { pageData } = storeToRefs(pageDataStore)
+const { getOperateResources } = useOperateResources()
+const { sendLog } = useAnalytics()
 
 // Constants
 const COLOR_INDEX = { BACKGROUND: 0, TEXT: 1 } as const
@@ -65,6 +67,10 @@ const preImgSnsData = computed(() =>
 const preDescriptionData = computed(() =>
   getComponentGroup(props.components, 'description')
 )
+const preregistSNS = computed(
+  () => getSupportedPlatforms('2', gameData?.value?.os_type) as Platform[]
+)
+
 // SNS Buttons
 const snsButtonsData = computed(() => {
   const buttons = getComponentGroupAry(props.components, 'imgSnsButton')
@@ -73,9 +79,9 @@ const snsButtonsData = computed(() => {
   if (!buttons?.length) return []
 
   return buttons.map((button, index) => ({
-    image: button,
-    link: links?.[index]?.display?.text ?? '',
     id: button.id ?? `sns-${index}`,
+    link: links?.[index]?.display?.text ?? '',
+    image: button,
   }))
 })
 
@@ -86,18 +92,15 @@ const buttonColors = computed(() => {
     'preregistButtonColor'
   )
 
-  if (!colorData?.length)
-    return { backgroundColor: undefined, textColor: undefined }
-
   return {
-    backgroundColor: getColorCode({
-      colorName: colorData[COLOR_INDEX.BACKGROUND]?.display?.color_name,
-      colorCode: colorData[COLOR_INDEX.BACKGROUND]?.display?.color_code,
-    }),
-    textColor: getColorCode({
-      colorName: colorData[COLOR_INDEX.TEXT]?.display?.color_name,
-      colorCode: colorData[COLOR_INDEX.TEXT]?.display?.color_code,
-    }),
+    backgroundColor: getColorCodeFromData(
+      colorData[COLOR_INDEX.BACKGROUND]?.display,
+      'none'
+    ),
+    textColor: getColorCodeFromData(
+      colorData[COLOR_INDEX.TEXT]?.display,
+      'none'
+    ),
   }
 })
 
@@ -214,9 +217,23 @@ const isRunButtonVisible = (marketType?: Platform): boolean => {
   }
 }
 
-// Handler
+const handleSendLog = (item: string) => {
+  const analytics = {
+    action_type: 'click',
+    click_item: item,
+    click_sarea: props.pageVerTmplNameEn,
+  }
+  sendLog(locale.value, analytics)
+}
+
 const handlePreregistClick = () => {
   preregistModalRef.value?.handleOpenPreregist()
+  handleSendLog(`STOVE_${t('Preregist_Btn_Preegist', {}, { locale: 'ko' })}`)
+}
+
+const handleSnsButtonClick = (btn: { id: string; link: string }) => {
+  csrGoExternalLink(btn.link)
+  handleSendLog(btn.id)
 }
 </script>
 
@@ -272,7 +289,12 @@ const handlePreregistClick = () => {
                 :key="btn.id"
                 class="w-[48px] h-[40px] md:w-[72px] md:h-[56px]"
               >
-                <a :href="btn.link" target="_blank" rel="noopener noreferrer">
+                <a
+                  :href="btn.link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  @click="handleSendLog(btn.id)"
+                >
                   <AtomsImg
                     :src="getResourceSrc(btn.image)"
                     :alt="btn.image?.display?.text"
@@ -293,16 +315,18 @@ const handlePreregistClick = () => {
             {{ tm('Preregist_Btn_Preegist') }}
           </BlocksButtonLauncher>
           <template v-if="gameData?.platform_type !== '1'">
-            <template
-              v-for="platform in getSupportedPlatforms('2', gameData?.os_type)"
-              :key="`preregist-${platform}`"
-            >
+            <template v-for="sns in preregistSNS" :key="`preregist-${sns}`">
               <BlocksButtonLauncher
-                v-if="isRunButtonVisible(platform as Platform)"
+                v-if="isRunButtonVisible(sns)"
                 type="duplication"
-                :platform="platform as Platform"
+                :platform="sns"
                 :background-color="buttonColors.backgroundColor"
                 :text-color="buttonColors.textColor"
+                @click="
+                  handleSendLog(
+                    `${sns}_${t('Preregist_Btn_Preegist', {}, { locale: 'ko' })}`
+                  )
+                "
               >
                 {{ tm('Preregist_Btn_Preegist') }}
               </BlocksButtonLauncher>