168 lines
4.3 KiB
Vue
168 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import type { TrackingObject, ColorObject } from '#layers/types/api/common'
|
|
|
|
const showSnsList = ref(false)
|
|
|
|
const { locale, tm } = useI18n()
|
|
const gameDataStore = useGameDataStore()
|
|
const modalStore = useModalStore()
|
|
const { sendLog } = useAnalytics()
|
|
|
|
const { gameData, snsJson } = storeToRefs(gameDataStore)
|
|
const { handleOpenToast } = modalStore
|
|
|
|
const analytics = {
|
|
action_type: 'click',
|
|
click_sarea: 'SNS',
|
|
} as TrackingObject
|
|
|
|
const snsBackgroundColor = computed(() => {
|
|
const colorData = gameData.value?.comm_sns_bg_color_json
|
|
?.display as ColorObject
|
|
const colorCode = getColorCodeFromData(colorData, 'none')
|
|
return colorCode
|
|
})
|
|
|
|
const handleControlForce = (state: boolean) => {
|
|
showSnsList.value = state
|
|
}
|
|
|
|
const handleCopy = async () => {
|
|
if (!import.meta.client) return
|
|
|
|
try {
|
|
const url = window.location.href
|
|
await navigator.clipboard.writeText(url)
|
|
handleOpenToast({ contentText: tm('Alert_Copy_Complete') })
|
|
sendLog(locale.value, { ...analytics, click_item: 'URL복사' })
|
|
} catch (error) {
|
|
console.error('[handleCopy] Error:', error)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="Object.keys(snsJson).length > 0" class="sns-wrap">
|
|
<transition name="fade">
|
|
<AtomsButtonCircle
|
|
v-show="!showSnsList"
|
|
class="btn-more"
|
|
sr-only="sns"
|
|
:bg-color="snsBackgroundColor"
|
|
@click="handleControlForce(true)"
|
|
>
|
|
<AtomsIconsShareLine class="icon-share" />
|
|
</AtomsButtonCircle>
|
|
</transition>
|
|
<transition name="fade">
|
|
<div v-show="showSnsList" class="sns-list">
|
|
<template v-for="(item, key) in snsJson" :key="key">
|
|
<AtomsButtonCircle
|
|
v-if="item.use_yn === 1 && item.url"
|
|
type="link"
|
|
:to="item.url"
|
|
target="_blank"
|
|
:class="['btn-sns', key]"
|
|
:sr-only="key"
|
|
@click="sendLog(locale, { ...analytics, click_item: key })"
|
|
>
|
|
<img
|
|
width="100%"
|
|
height="100%"
|
|
:src="
|
|
formatPathHost(`/images/common/ic-v2-logo-${key}-fill.png`, {
|
|
imageType: 'public',
|
|
})
|
|
"
|
|
:alt="key"
|
|
/>
|
|
</AtomsButtonCircle>
|
|
</template>
|
|
<AtomsButtonCircle
|
|
class="btn-sns link"
|
|
sr-only="copy"
|
|
@click="handleCopy"
|
|
>
|
|
<img
|
|
width="100%"
|
|
height="100%"
|
|
:src="
|
|
formatPathHost('/images/common/ic-v2-community-link-line.png', {
|
|
imageType: 'public',
|
|
})
|
|
"
|
|
alt="copy"
|
|
/>
|
|
</AtomsButtonCircle>
|
|
<div class="close-container">
|
|
<button
|
|
type="button"
|
|
class="opacity-50 z-[1] hover:opacity-100"
|
|
@click="handleControlForce(false)"
|
|
>
|
|
<span class="sr-only">close</span>
|
|
<AtomsIconsCloseLine size="24" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sns-wrap {
|
|
@apply fixed bottom-3 left-3 h-[40px] md:bottom-8 md:left-8 md:h-[48px] z-[100];
|
|
}
|
|
|
|
.btn-more:hover .icon-share {
|
|
@apply fill-white;
|
|
}
|
|
.btn-sns {
|
|
@apply bg-center bg-no-repeat bg-[rgba(255,255,255,0.6)] after:hidden;
|
|
}
|
|
.btn-sns.kakao:hover {
|
|
@apply bg-[#FAE100];
|
|
}
|
|
.btn-sns.kakao:hover img {
|
|
filter: brightness(0) saturate(100%) invert(13%) sepia(2%) saturate(0%)
|
|
hue-rotate(0deg) brightness(100%) contrast(100%);
|
|
}
|
|
.btn-sns.tiktok:hover {
|
|
@apply bg-[#000];
|
|
}
|
|
.btn-sns.discord:hover {
|
|
@apply bg-[#000];
|
|
}
|
|
.btn-sns.twitter:hover {
|
|
@apply bg-[#000];
|
|
}
|
|
.btn-sns.youtube:hover {
|
|
@apply bg-[#FF0000];
|
|
}
|
|
.btn-sns.facebook:hover {
|
|
@apply bg-[#1977F2];
|
|
}
|
|
.btn-sns.instagram:hover {
|
|
@apply bg-[#000];
|
|
}
|
|
.btn-sns.link:hover {
|
|
@apply bg-[#000];
|
|
}
|
|
|
|
.sns-list {
|
|
@apply absolute bottom-0 left-0 flex items-center justify-center gap-4 rounded-full h-full pl-4 pr-3;
|
|
}
|
|
.sns-item {
|
|
@apply w-[24px] h-[24px] bg-center bg-cover bg-no-repeat opacity-50 z-[1]
|
|
hover:opacity-100;
|
|
}
|
|
.sns-item:hover {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
.close-container {
|
|
@apply relative flex pl-4
|
|
before:content-[''] before:absolute before:top-1/2 before:left-0 before:w-[1px] before:h-[20px] before:bg-[rgba(255,255,255,0.1)] before:translate-y-[-50%];
|
|
}
|
|
</style>
|