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

layers/components/widgets/FixSubTitle.vue

@@ -1,43 +1,20 @@
 <script setup lang="ts">
+import type { TrackingObject } from '#layers/types/api/common'
+
 interface Props {
   title: string
   description?: string
   link?: string
   target?: '_self' | '_blank'
+  linkAnalytics?: TrackingObject
 }
 
 const props = withDefaults(defineProps<Props>(), {
   target: '_blank',
 })
 
-const componentTag = computed((): string => {
-  switch (props.target) {
-    case '_self':
-      return 'AtomsLocaleLink'
-    case '_blank':
-      return 'a'
-    default:
-      return 'a'
-  }
-})
-
-const componentProps = computed(() => {
-  if (props.target === '_self') {
-    return {
-      to: props.link,
-    }
-  }
-
-  if (props.target === '_blank') {
-    return {
-      href: props.link,
-      target: props.target,
-      rel: 'noopener noreferrer',
-    }
-  }
-
-  return {}
-})
+const { locale } = useI18n()
+const { sendLog } = useAnalytics()
 </script>
 
 <template>
@@ -55,11 +32,12 @@ const componentProps = computed(() => {
       >
         {{ props.description }}
       </p>
-      <component
-        :is="componentTag"
+      <AtomsLocaleLink
         v-else-if="props.description && props.link"
-        v-bind="componentProps"
+        :to="props.link"
+        :target="props.target"
         class="relative flex items-center justify-center gap-[4px] w-auto h-auto text-[#3C75FF] text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[16px] md:leading-[24px] md:tracking-[-0.48px] before:content-[''] before:absolute before:z-[2] before:top-0 before:left-0 before:w-full before:h-full before:bg-[#FFFFFF] before:transition-opacity before:duration-300 before:ease-in-out before:opacity-0 hover:before:opacity-20"
+        @click="sendLog(locale, props.linkAnalytics)"
       >
         <span>{{ props.description }}</span>
         <AtomsIconsWebLinkLine
@@ -68,7 +46,7 @@ const componentProps = computed(() => {
           color="#3C75FF"
           class="icon"
         />
-      </component>
+      </AtomsLocaleLink>
     </div>
   </div>
 </template>