fix. AtomsButtonLauncher 컴포넌트 수정

2025-10-30 18:22:26 +09:00
parent 74ce5a0714
commit db9f3094fd
13 changed files with 218 additions and 92 deletions
--- a/layers/components/atoms/Button/Sns.vue
+++ b/layers/components/atoms/Button/Sns.vue
@@ -0,0 +1,139 @@
+<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>