fix. sns 버튼 동작 수정

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"
+  <div v-if="Object.keys(snsList).length > 0" class="sns-container">
+    <button
+      class="btn-sns"
+      :style="{ backgroundColor: snsBackgroundColor }"
       @click="handleMouseEnter"
     >
-    <button class="btn-sns" :style="{ backgroundColor: snsBackgroundColor }">
       <AtomsIconsShareLine class="icon-share" />
       <span class="sr-only">sns</span>
     </button>

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];

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"