From 6b1b9885a05f15948f1a58afd141e3d39643ec82 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Wed, 5 Nov 2025 15:05:09 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20sns=20=EB=B2=84=ED=8A=BC=20=EB=8F=99?=
 =?UTF-8?q?=EC=9E=91=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/atoms/Button/Sns.vue       | 26 +++++---------------
 layers/components/blocks/slide/Thumbnail.vue | 19 +++++++++++---
 layers/components/widgets/Background.vue     |  2 +-
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/layers/components/atoms/Button/Sns.vue b/layers/components/atoms/Button/Sns.vue
index 747884a..3797bff 100644
--- a/layers/components/atoms/Button/Sns.vue
+++ b/layers/components/atoms/Button/Sns.vue
@@ -20,23 +20,11 @@ const snsList = computed(() => {
 })
 
 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 () => {
@@ -53,14 +41,12 @@ const handleCopy = async () => {
 </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 }">
+  <div v-if="Object.keys(snsList).length > 0" class="sns-container">
+    <button
+      class="btn-sns"
+      :style="{ backgroundColor: snsBackgroundColor }"
+      @click="handleMouseEnter"
+    >
       <AtomsIconsShareLine class="icon-share" />
       <span class="sr-only">sns</span>
     </button>
diff --git a/layers/components/blocks/slide/Thumbnail.vue b/layers/components/blocks/slide/Thumbnail.vue
index 1b80ebe..c52d13e 100644
--- a/layers/components/blocks/slide/Thumbnail.vue
+++ b/layers/components/blocks/slide/Thumbnail.vue
@@ -62,6 +62,20 @@ const thumbOptions = computed<Options>(() => ({
     prev: 'arrow-prev',
     next: 'arrow-next',
   },
+  breakpoints: {
+    [BREAKPOINTS.md - 1]: {
+      padding: {
+        left: 40,
+        right: 40,
+      },
+    },
+    [BREAKPOINTS.sm - 1]: {
+      padding: {
+        left: 20,
+        right: 20,
+      },
+    },
+  },
 }))
 
 const getThumbnailSrc = (item: PageDataTemplateComponentSet) => {
@@ -205,10 +219,7 @@ onBeforeUnmount(() => {
   @apply flex flex-col items-center;
 }
 .thumbnail-carousel.thumbnail-media .thumbnail-splide {
-  @apply w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-auto md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[112px];
-}
-.thumbnail-carousel.thumbnail-media .thumbnail-splide:deep(.splide__track) {
-  @apply !px-[20px] sm:!px-[40px] md:!px-[0];
+  @apply max-w-[calc(100%+40px)] mt-[20px] mx-[-20px] sm:max-w-[calc(100%+80px)] sm:mx-[-40px] md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[112px];
 }
 .thumbnail-carousel.thumbnail-media:deep(.arrow-prev) {
   @apply left-[48px];
diff --git a/layers/components/widgets/Background.vue b/layers/components/widgets/Background.vue
index c5e70a2..d0d4339 100644
--- a/layers/components/widgets/Background.vue
+++ b/layers/components/widgets/Background.vue
@@ -45,7 +45,7 @@ watch(videoSrc, () => {
 </script>
 
 <template>
-  <div class="absolute inset-0 w-full h-full">
+  <div class="overflow-hidden absolute inset-0 w-full h-full">
     <!-- 이미지 타입 -->
     <div
       v-if="isTypeImage(resourcesData?.resource_type) && imageSrc"