Fix. GR_VISUAL 템플릿 컴포넌트 정리

layers/components/blocks/slide/Fade.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { Splide } from '@splidejs/vue-splide'
+import type { ResponsiveOptions } from '@splidejs/splide'
+
+interface Props {
+  autoplay?: boolean | string
+  arrows?: boolean
+  pagination?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  autoplay: false,
+  arrows: true,
+  pagination: true,
+})
+
+// 페이드 슬라이드 옵션
+const fadeOptions = computed((): ResponsiveOptions => {
+  return {
+    type: 'fade',
+    rewind: true,
+    perPage: 1,
+    perMove: 1,
+    speed: 600,
+    updateOnMove: true,
+    autoplay: props.autoplay,
+    arrows: props.arrows,
+    pagination: props.pagination,
+    classes: {
+      arrows: 'splide-arrows type-full',
+      arrow: 'splide-arrow',
+      prev: 'arrow-prev',
+      next: 'arrow-next',
+      pagination: 'splide-pagination-bullets type-full',
+      page: 'splide-pagination-bullet',
+    },
+  }
+})
+</script>
+
+<template>
+  <Splide :options="fadeOptions" class="h-full">
+    <slot />
+  </Splide>
+</template>
+
+<style scoped>
+.splide:deep(.splide__track) {
+  @apply h-full;
+}
+</style>