fix. 스토리북 대응 수정

layers/components/widgets/slide/Thumbnail.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { Splide, SplideTrack, SplideSlide } from '@splidejs/vue-splide'
+import { BREAKPOINTS } from '#layers/composables/useBreakpoints'
+import { getPaginationClass } from '#layers/utils/styleUtil'
 import type { Splide as SplideType, Options } from '@splidejs/splide'
 import type {
   PageDataResourceGroups,
@@ -176,7 +178,7 @@ onBeforeUnmount(() => {
           <AtomsImg
             :src="getThumbnailSrc(item)"
             alt="thumbnail image"
-            class="slide-image"
+            class="slide-thumbnail"
           />
         </SplideSlide>
       </SplideTrack>
@@ -189,6 +191,7 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+.thumbnail-carousel:deep(picture),
 .thumbnail-carousel:deep(img) {
   @apply w-full h-full object-cover;
 }
@@ -213,14 +216,11 @@ onBeforeUnmount(() => {
 .thumbnail-slide.is-active::after {
   @apply border-[var(--pagination-active)];
 }
-.thumbnail-slide:hover picture,
-.thumbnail-slide:hover img,
-.thumbnail-slide.is-active picture,
-.thumbnail-slide.is-active img {
+.thumbnail-slide:hover .slide-thumbnail,
+.thumbnail-slide.is-active .slide-thumbnail {
   @apply opacity-100;
 }
-.thumbnail-slide picture,
-.thumbnail-slide img {
+.slide-thumbnail {
   @apply opacity-50 transition-opacity duration-200 ease-in-out;
 }
 
@@ -243,11 +243,13 @@ onBeforeUnmount(() => {
   @apply aspect-[1/1] w-[8px] md:w-[80px] backdrop-blur-[15px]
   after:hidden md:after:block;
 }
-.thumbnail-carousel.thumbnail-default .thumbnail-slide:hover picture,
-.thumbnail-carousel.thumbnail-default .thumbnail-slide.is-active picture {
+.thumbnail-carousel.thumbnail-default .thumbnail-slide:hover .slide-thumbnail,
+.thumbnail-carousel.thumbnail-default
+  .thumbnail-slide.is-active
+  .slide-thumbnail {
   @apply md:grayscale-0;
 }
-.thumbnail-carousel.thumbnail-default .thumbnail-slide picture {
+.thumbnail-carousel.thumbnail-default .thumbnail-slide .slide-thumbnail {
   @apply hidden md:block md:grayscale;
 }