From ea0ac82aab52d8029bbc3756cd50e729f6165b02 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Wed, 26 Nov 2025 15:24:16 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20sns=20=EB=B0=B0=EA=B2=BD=20=ED=88=AC?=
 =?UTF-8?q?=EB=AA=85=EB=8F=84=20=EC=84=A4=EC=A0=95=EC=8B=9C=20=EA=B2=B9?=
 =?UTF-8?q?=EC=B3=90=EB=B3=B4=EC=9D=B4=EB=8A=94=20=EC=9D=B4=EC=8A=88=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/blocks/Button/Sns.vue | 28 +++++++++++++++----------
 layers/components/layouts/Main.vue      |  2 +-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/layers/components/blocks/Button/Sns.vue b/layers/components/blocks/Button/Sns.vue
index 91e87ea..4f9786e 100644
--- a/layers/components/blocks/Button/Sns.vue
+++ b/layers/components/blocks/Button/Sns.vue
@@ -43,17 +43,20 @@ const handleCopy = async () => {
 
 <template>
   <div v-if="Object.keys(snsList).length > 0" class="sns-container">
-    <AtomsButtonCircle
-      class="btn-sns"
-      sr-only="sns"
-      :style="{ backgroundColor: snsBackgroundColor }"
-      @click="handleMouseEnter"
-    >
-      <AtomsIconsShareLine class="icon-share" />
-    </AtomsButtonCircle>
+    <transition name="fade">
+      <AtomsButtonCircle
+        v-show="!showSnsList"
+        class="btn-sns"
+        sr-only="sns"
+        :style="{ backgroundColor: snsBackgroundColor }"
+        @click="handleMouseEnter"
+      >
+        <AtomsIconsShareLine class="icon-share" />
+      </AtomsButtonCircle>
+    </transition>
     <transition name="fade">
       <div
-        v-if="showSnsList"
+        v-show="showSnsList"
         class="sns-list"
         :style="{ backgroundColor: snsBackgroundColor }"
       >
@@ -96,13 +99,16 @@ const handleCopy = async () => {
 </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-[40px] md:h-[48px] pl-4 pr-3
+  @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 {
diff --git a/layers/components/layouts/Main.vue b/layers/components/layouts/Main.vue
index 8550e1d..28421ec 100644
--- a/layers/components/layouts/Main.vue
+++ b/layers/components/layouts/Main.vue
@@ -119,7 +119,7 @@ onMounted(() => {
   @apply relative pt-[48px] md:pt-[64px];
 }
 .utile-wrap {
-  @apply fixed flex flex-col z-[100]
+  @apply fixed flex flex-col items-end z-[100]
   bottom-[12px] right-[12px] gap-2 md:bottom-[40px] md:right-[40px] md:gap-3;
 }
 .utile-wrap.is-stop {