feat. GR_DETAIL_01 템플릿 제작

layers/components/blocks/slide/Fade.vue

@@ -15,6 +15,8 @@ const props = withDefaults(defineProps<Props>(), {
   pagination: true,
 })
 
+const splideRef = ref()
+
 const options = computed((): ResponsiveOptions => {
   return {
     type: 'fade',
@@ -24,6 +26,8 @@ const options = computed((): ResponsiveOptions => {
     speed: 600,
     updateOnMove: true,
     autoplay: props.autoplay,
+    pauseOnHover: false,
+    pauseOnFocus: false,
     arrows: props.arrows,
     pagination: props.pagination,
     classes: {
@@ -36,10 +40,14 @@ const options = computed((): ResponsiveOptions => {
     },
   }
 })
+
+defineExpose({
+  splide: computed(() => splideRef.value?.splide),
+})
 </script>
 
 <template>
-  <Splide :options="options" class="h-full">
+  <Splide ref="splideRef" :options="options" class="h-full">
     <slot />
   </Splide>
 </template>

layers/components/blocks/slide/Thumbnail.vue

@@ -179,7 +179,7 @@ onBeforeUnmount(() => {
 }
 
 .thumbnail-splide {
-  @apply overflow-hidden flex justify-center w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-auto md:mx-0 md:px-[120px] md:mt-[28px];
+  @apply overflow-hidden flex justify-center w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:max-w-[100%] md:w-fit md:mx-auto md:px-[120px] md:mt-[28px];
 }
 .thumbnail-splide:deep(.splide__track) {
   @apply !px-[20px] sm:!px-[40px] md:!px-[0];