web-temp/layers/components/blocks/Sns.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"
        :background-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>