fix. sns 수정

layers/components/blocks/Sns.vue

@@ -42,11 +42,11 @@ const handleCopy = async () => {
 </script>
 
 <template>
-  <div v-if="Object.keys(snsJson).length > 0" class="sns-container">
+  <div v-if="Object.keys(snsJson).length > 0" class="sns-wrap">
     <transition name="fade">
       <AtomsButtonCircle
         v-show="!showSnsList"
-        class="btn-sns"
+        class="btn-more"
         sr-only="sns"
         :style="{ backgroundColor: snsBackgroundColor }"
         @click="handleControlForce(true)"
@@ -55,36 +55,45 @@ const handleCopy = async () => {
       </AtomsButtonCircle>
     </transition>
     <transition name="fade">
-      <div
-        v-show="showSnsList"
-        class="sns-list"
-        :style="{ backgroundColor: snsBackgroundColor }"
-      >
+      <div v-show="showSnsList" class="sns-list">
         <template v-for="(item, key) in snsJson" :key="key">
-          <a
+          <AtomsButtonCircle
             v-if="item.use_yn === 1 && item.url"
-            :href="item.url"
+            type="link"
+            :to="item.url"
             target="_blank"
-            class="sns-item"
-            rel="noopener noreferrer"
-            :style="{
-              backgroundImage: `url(${formatPathHost(`/images/common/ic-v2-logo-${key}-fill.png`, { imageType: 'common' })})`,
-            }"
+            :class="['btn-sns', key]"
+            :sr-only="key"
             @click="sendLog(locale, { ...analytics, click_item: key })"
           >
-            <span class="sr-only">{{ key }}</span>
-          </a>
+            <img
+              width="100%"
+              height="100%"
+              :src="
+                formatPathHost(`/images/common/ic-v2-logo-${key}-fill.png`, {
+                  imageType: 'common',
+                })
+              "
+              :alt="key"
+            />
+          </AtomsButtonCircle>
         </template>
-        <button
-          type="button"
-          class="sns-item"
-          :style="{
-            backgroundImage: `url(${formatPathHost('/images/common/ic-v2-community-link-line.png', { imageType: 'common' })})`,
-          }"
+        <AtomsButtonCircle
+          class="btn-sns link"
+          sr-only="copy"
           @click="handleCopy"
         >
-          <span class="sr-only">copy</span>
-        </button>
+          <img
+            width="100%"
+            height="100%"
+            :src="
+              formatPathHost('/images/common/ic-v2-community-link-line.png', {
+                imageType: 'common',
+              })
+            "
+            alt="copy"
+          />
+        </AtomsButtonCircle>
         <div class="close-container">
           <button
             type="button"
@@ -101,17 +110,47 @@ const handleCopy = async () => {
 </template>
 
 <style scoped>
-.sns-container {
-  @apply relative h-[40px] md:h-[48px];
+.sns-wrap {
+  @apply fixed bottom-3 left-3 h-[40px] md:bottom-8 md:left-8 md:h-[48px] z-[100];
 }
 
-.btn-sns:hover .icon-share {
+.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 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;
+  @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]

layers/components/layouts/EventNavigation.vue

@@ -60,12 +60,12 @@ onMounted(async () => {
 <template>
   <div
     v-if="Object.keys(eventNavigationList).length > 1"
-    class="event-navigation"
+    class="navigation-wrap"
     :class="{
       'is-closed': !isEventNavigationOpen,
     }"
   >
-    <div class="navigation-wrapper">
+    <div class="navigation-container">
       <AtomsButtonCircle
         sr-only="event navigation control"
         class="btn-control"
@@ -106,13 +106,17 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.empty-game + main .event-navigation {
+.empty-game + main .navigation-wrap {
   @apply mt-[var(--scroll-position,48px)];
 }
-.event-navigation {
-  @apply fixed top-0 left-0 bottom-0 mt-[calc(var(--scroll-position,48px)+48px)] md:mt-[calc(var(--scroll-position,64px)+64px)] z-[100] transition-transform duration-300 ease-in-out;
+.sns-wrap ~ .navigation-wrap {
+  @apply pb-[78px];
 }
-.navigation-wrapper {
+
+.navigation-wrap {
+  @apply fixed top-0 left-0 bottom-0 mt-[calc(var(--scroll-position,48px)+48px)] md:mt-[calc(var(--scroll-position,64px)+64px)] z-[90] transition-transform duration-300 ease-in-out;
+}
+.navigation-container {
   @apply relative h-full p-3 sm:p-5 sm:pr-3
   md:p-8 md:pt-6 md:pr-4;
 }
@@ -137,13 +141,13 @@ onMounted(async () => {
   @apply translate-x-[3px];
 }
 
-.event-navigation.is-closed {
+.navigation-wrap.is-closed {
   @apply translate-x-[calc(-100%+20px)] sm:translate-x-[calc(-100%+40px)];
 }
-.event-navigation.is-closed .btn-control {
+.navigation-wrap.is-closed .btn-control {
   @apply rotate-0;
 }
-.event-navigation.is-closed .navigation-list {
+.navigation-wrap.is-closed .navigation-list {
   @apply pointer-events-none opacity-0;
 }
 

layers/layouts/promotion.vue

@@ -3,9 +3,9 @@
 <template>
   <LayoutsHeader />
   <main class="main-promotion relative">
-    <BlocksButtonHome />
-    <LayoutsEventNavigation />
     <slot />
+    <LayoutsEventNavigation />
+    <BlocksButtonHome />
   </main>
   <LayoutsFooter />
 </template>