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

layers/templates/FxCoupon01/index.vue

@@ -15,6 +15,7 @@ import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 import type { ReqCouponList } from '#layers/types/api/couponData'
 
 interface Props {
+  id?: string
   components: PageDataTemplateComponents
   pageVerTmplSeq: number
   pageVerTmplNameEn: string
@@ -38,6 +39,7 @@ const { t, tm, locale }: any = useI18n({
 })
 
 // Composables
+const { sendLog } = useAnalytics()
 // const { isGameMaintenance, checkGameMaintenance } = useGetGameMaintenance()
 const { isWebInspection, getInspectionDataExternal } =
   useGetInspectionDataExternal()
@@ -72,17 +74,15 @@ const { couponNo, isSelectCharacter, selectCharacter } =
   storeToRefs(couponStore)
 const { updateCouponNo, updateSelectCharacter, isEmptyCouponNo } = couponStore
 
-// Data
-const backgroundData = computed(() =>
-  getComponentGroup(props.components, 'background')
-)
-
 // Refs
 const clientIp = ref('')
 const monthSelectList = ref<Array<number>>([1, 3, 6, 12])
 const isSelectCharacterModalOpen = ref(false)
 
 // Computed
+const backgroundData = computed(() =>
+  getComponentGroup(props.components, 'background')
+)
 const sortedCharacterList = computed(() => {
   return characterList.value
     .map(characterInfo => {
@@ -100,6 +100,15 @@ const sortedCharacterList = computed(() => {
 })
 
 // Functions
+const handleSendLog = (item: string) => {
+  const analytics = {
+    action_type: 'click',
+    click_item: item,
+    click_sarea: props.pageVerTmplNameEn,
+  }
+
+  sendLog(locale.value, analytics)
+}
 /**
  * @description 기본 Alert 모달 팝업 함수입니다.
  * @param text - 모달 내용
@@ -242,6 +251,8 @@ const validationCheckBefore = async () => {
  * @description FE 유효성 체크 후 캐릭터 선택 모달 팝업 노출합니다.
  */
 const handleCouponUse = async () => {
+  handleSendLog(t('Coupon_Registration', {}, { locale: 'ko' }))
+
   const validationCheckBeforeResult = await validationCheckBefore()
 
   if (validationCheckBeforeResult !== 0) {
@@ -272,6 +283,7 @@ const handleCouponUse = async () => {
  * @description 캐릭터 선택 후, 확인 버튼 클릭 시 쿠폰 등록 API 호출 함수입니다.
  */
 const handleCouponRegister = async () => {
+  handleSendLog('캐릭터 선택 완료')
   closeSelectCharacterModal()
 
   const validationCheckBeforeResult = await validationCheckBefore()
@@ -328,6 +340,7 @@ const handlePeriodSelect = (month: number) => {
 
   setCouponDate(newStartDate, 'start')
   setCouponDate(newEndDate, 'end')
+  handleSendLog(t(`Coupon_Month${month}`, {}, { locale: 'ko' }))
 }
 
 /**
@@ -338,6 +351,8 @@ const handlePeriodSearch = async () => {
     return
   }
 
+  handleSendLog(t('Coupon_Search', {}, { locale: 'ko' }))
+
   const accessToken = csrGetAccessToken()
   const validateTokenResult = await handleTokenValidation(accessToken || '')
   if (validateTokenResult === false) {
@@ -431,6 +446,8 @@ const goToCouponBox = () => {
  * @description 쿠폰 등록 내역의 사용하기 버튼의 클릭 이벤트 함수입니다.
  */
 const handleGoToCouponBox = async () => {
+  handleSendLog(t('Coupon_Item_Use', {}, { locale: 'ko' }))
+
   const accessToken = csrGetAccessToken()
   const validateTokenResult = await handleTokenValidation(accessToken || '')
 
@@ -485,6 +502,7 @@ onMounted(async () => {
 
 <template>
   <WidgetsFixMainTitle
+    :id="props.id"
     :title="tm('Coupon_Page_Title')"
     :resources-data="backgroundData"
   />
@@ -765,8 +783,8 @@ onMounted(async () => {
           class="relative flex flex-col items-center justify-center gap-[24px] w-full"
         >
           <p
-            class="relative flex items-start justify-center w-full text-center text-[#333333] text-[15px] font-[400] leading-[24px] tracking-[-0.45px]"
             v-dompurify-html="tm('Coupon_Alert_SelectCharacter')"
+            class="relative flex items-start justify-center w-full text-center text-[#333333] text-[15px] font-[400] leading-[24px] tracking-[-0.45px]"
           ></p>
 
           <AtomsSelect