129 lines
3.7 KiB
Vue
129 lines
3.7 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-container">
|
|
<transition name="fade">
|
|
<AtomsButtonCircle
|
|
v-show="!showSnsList"
|
|
class="btn-sns"
|
|
sr-only="sns"
|
|
:style="{ backgroundColor: snsBackgroundColor }"
|
|
@click="handleControlForce(true)"
|
|
>
|
|
<AtomsIconsShareLine class="icon-share" />
|
|
</AtomsButtonCircle>
|
|
</transition>
|
|
<transition name="fade">
|
|
<div
|
|
v-show="showSnsList"
|
|
class="sns-list"
|
|
:style="{ backgroundColor: snsBackgroundColor }"
|
|
>
|
|
<template v-for="(item, key) in snsJson" :key="key">
|
|
<a
|
|
v-if="item.use_yn === 1 && item.url"
|
|
:href="item.url"
|
|
target="_blank"
|
|
class="sns-item"
|
|
rel="noopener noreferrer"
|
|
:style="{
|
|
backgroundImage: `url(${formatPathHost(`/images/common/ic-v2-logo-${key}-fill.png`, { imageType: 'common' })})`,
|
|
}"
|
|
@click="sendLog(locale, { ...analytics, click_item: key })"
|
|
>
|
|
<span class="sr-only">{{ key }}</span>
|
|
</a>
|
|
</template>
|
|
<button
|
|
type="button"
|
|
class="sns-item"
|
|
:style="{
|
|
backgroundImage: `url(${formatPathHost('/images/common/ic-v2-community-link-line.png', { imageType: 'common' })})`,
|
|
}"
|
|
@click="handleCopy"
|
|
>
|
|
<span class="sr-only">copy</span>
|
|
</button>
|
|
<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-container {
|
|
@apply relative h-[40px] md:h-[48px];
|
|
}
|
|
|
|
.btn-sns:hover .icon-share {
|
|
@apply fill-white;
|
|
}
|
|
|
|
.sns-list {
|
|
@apply absolute bottom-0 right-0 flex items-center justify-center gap-4 rounded-full h-full pl-4 pr-3
|
|
before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.06)] before:rounded-full;
|
|
}
|
|
.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>
|