fix. slideThumbnail 컴포넌트 수정

layers/components/blocks/slide/Thumbnail.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
 import { Splide, SplideSlide } from '@splidejs/vue-splide'
 import type { Splide as SplideType, Options } from '@splidejs/splide'
-import type { PageDataTemplateComponentSet } from '#layers/types/api/pageData'
+import type {
+  PageDataTemplateComponentSet,
+  PageDataResourceGroups,
+} from '#layers/types/api/pageData'
 
 interface Props {
   slideData: PageDataTemplateComponentSet[]
+  paginationData?: PageDataResourceGroups
   variant?: 'default' | 'media'
   drag?: boolean
 }
@@ -102,6 +106,7 @@ onBeforeUnmount(() => {
       ref="thumbsRef"
       :options="thumbOptions"
       class="thumbnail-splide"
+      :style="getPaginationClass(paginationData, { type: 'thumbnail' })"
     >
       <SplideSlide
         v-for="(item, index) in props.slideData"
@@ -129,12 +134,19 @@ onBeforeUnmount(() => {
 }
 .thumbnail-slide {
   @apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] md:mr-[16px]
-  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
-  after:border after:border-white/60 after:rounded-[4px];
+  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:border after:rounded-[4px];
+  background-color: var(--pagination-disabled);
 }
 .thumbnail-slide:hover,
 .thumbnail-slide.is-active {
-  @apply after:border-[var(--primary)];
+  background-color: var(--pagination-active);
+}
+.thumbnail-slide::after {
+  border-color: var(--pagination-disabled);
+}
+.thumbnail-slide:hover::after,
+.thumbnail-slide.is-active::after {
+  border-color: var(--pagination-active);
 }
 
 /* 기본 버전 스타일 */
@@ -153,14 +165,15 @@ onBeforeUnmount(() => {
   @apply right-0;
 }
 .thumbnail-carousel.thumbnail-default .thumbnail-slide {
-  @apply aspect-[1/1] w-[8px] bg-red-500 md:w-[80px] md:bg-transparent
+  @apply aspect-[1/1] w-[8px] md:w-[80px]
   after:hidden md:after:block;
 }
-.thumbnail-carousel.thumbnail-default .thumbnail-slide.is-active {
-  @apply bg-blue-500 md:bg-transparent;
+.thumbnail-carousel.thumbnail-default .thumbnail-slide:hover img,
+.thumbnail-carousel.thumbnail-default .thumbnail-slide.is-active img {
+  @apply md:grayscale-0 md:opacity-100;
 }
 .thumbnail-carousel.thumbnail-default .thumbnail-slide img {
-  @apply hidden md:block;
+  @apply hidden md:block md:grayscale md:opacity-60;
 }
 
 /* 미디어 버전 스타일 */