fix. sns 배경 투명도 설정시 겹쳐보이는 이슈 수정

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
+    <transition name="fade">
-      class="btn-sns"
+      <AtomsButtonCircle
-      sr-only="sns"
+        v-show="!showSnsList"
-      :style="{ backgroundColor: snsBackgroundColor }"
+        class="btn-sns"
-      @click="handleMouseEnter"
+        sr-only="sns"
-    >
+        :style="{ backgroundColor: snsBackgroundColor }"
-      <AtomsIconsShareLine class="icon-share" />
+        @click="handleMouseEnter"
-    </AtomsButtonCircle>
+      >
+        <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
+  @apply absolute bottom-0 right-0 flex items-center justify-center gap-4 rounded-full h-full pl-4 pr-3
-  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 {

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 {