140 lines
3.9 KiB
Vue
140 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
const showSnsList = ref(false)
|
|
const isForceClosed = ref(false)
|
|
|
|
const { gameData } = useGameDataStore()
|
|
|
|
const snsBackgroundColor = computed(() => {
|
|
const colorData = gameData?.comm_sns_bg_color_json?.display
|
|
const colorCode = getColorCode({
|
|
colorName: colorData?.color_name,
|
|
colorCode: colorData?.color_code,
|
|
})
|
|
return colorCode
|
|
})
|
|
const snsList = computed(() => {
|
|
return gameData?.sns_json
|
|
})
|
|
|
|
const handleMouseEnter = () => {
|
|
if (isForceClosed.value) return
|
|
showSnsList.value = true
|
|
}
|
|
|
|
const handleMouseLeave = () => {
|
|
if (isForceClosed.value) return
|
|
showSnsList.value = false
|
|
}
|
|
|
|
const handleForceClose = () => {
|
|
isForceClosed.value = true
|
|
showSnsList.value = false
|
|
|
|
// 일정 시간 뒤 다시 hover 가능하도록 초기화
|
|
setTimeout(() => {
|
|
isForceClosed.value = false
|
|
}, 500)
|
|
}
|
|
|
|
const handleCopy = async () => {
|
|
if (!import.meta.client) return
|
|
|
|
try {
|
|
const url = window.location.href
|
|
await navigator.clipboard.writeText(url)
|
|
console.log('✅ 복사 성공:', url)
|
|
} catch (err) {
|
|
console.error('❌ 복사 실패:', err)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="Object.keys(snsList).length > 0"
|
|
class="sns-container"
|
|
@mouseenter="handleMouseEnter"
|
|
@mouseleave="handleMouseLeave"
|
|
@click="handleMouseEnter"
|
|
>
|
|
<button class="btn-sns" :style="{ backgroundColor: snsBackgroundColor }">
|
|
<AtomsIconsShareLine class="icon-share" />
|
|
<span class="sr-only">sns</span>
|
|
</button>
|
|
<transition name="fade">
|
|
<div
|
|
v-if="showSnsList"
|
|
class="sns-list"
|
|
:style="{ backgroundColor: snsBackgroundColor }"
|
|
>
|
|
<template v-for="(item, key) in snsList" :key="key">
|
|
<a
|
|
v-if="item?.url"
|
|
:href="item?.url"
|
|
target="_blank"
|
|
class="sns-item"
|
|
:style="{
|
|
backgroundImage: `url(/images/common/ic-v2-logo-${key}-fill.svg)`,
|
|
}"
|
|
>
|
|
<span class="sr-only">{{ key }}</span>
|
|
</a>
|
|
</template>
|
|
<button
|
|
type="button"
|
|
class="sns-item"
|
|
:style="{
|
|
backgroundImage: `url(/images/common/ic-v2-community-link-line.svg)`,
|
|
}"
|
|
@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="handleForceClose"
|
|
>
|
|
<span class="sr-only">close</span>
|
|
<AtomsIconsCloseLine size="24" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.btn-sns {
|
|
@apply relative rounded-full flex items-center justify-center
|
|
w-[40px] h-[40px] md:w-[48px] md:h-[48px]
|
|
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
|
|
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-full after:opacity-0 after:transition-all after:duration-300 after:ease-in-out;
|
|
}
|
|
.btn-sns:hover {
|
|
@apply after:opacity-10;
|
|
}
|
|
.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-[40px] md:h-[48px] 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>
|