web-temp/layers/components/widgets/slide/CenterHighlight.vue

<script setup lang="ts">
import { Splide, SplideTrack } from '@splidejs/vue-splide'
import type { Splide as SplideType, ResponsiveOptions } from '@splidejs/splide'
import type { SlideItemSize } from '#layers/types/components/slide'
import type { PageDataResourceGroups } from '#layers/types/api/pageData'

interface Props {
  slideItemSize: SlideItemSize
  slideItemLength?: number
  autoplay?: boolean
  interval?: number
  arrows?: boolean
  arrowsData?: PageDataResourceGroups
  pagination?: boolean
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  autoplay: false,
  interval: 5000,
  arrows: true,
  pagination: true,
})

const emit = defineEmits(['mounted', 'move'])

const splideIndex = defineModel<number>('index', { required: false })
const isMultipleItems = computed(() => (props.slideItemLength ?? 0) > 1)

const options = computed((): ResponsiveOptions => {
  return {
    type: isMultipleItems.value ? 'loop' : 'slide',
    focus: 'center',
    autoWidth: true,
    autoHeight: true,
    speed: 600,
    easing: 'ease-in-out',
    updateOnMove: true,
    arrows: props.arrows && isMultipleItems.value,
    pagination: props.pagination && isMultipleItems.value,
    autoplay: props.autoplay,
    interval: props.interval,
    flickPower: 300,
    classes: {
      pagination: 'splide-pagination-bullets',
      page: 'splide-pagination-bullet',
    },
  }
})

const style = computed(() => {
  if (!props.slideItemSize) return {}

  const { mo, pc } = props.slideItemSize
  const moScale = mo?.scale || 1.1429
  const pcScale = pc?.scale || 1.1429

  const moSize = {
    '--banner-width-mo': `${mo.width}px`,
    '--banner-height-mo': `${mo.height}px`,
    '--banner-gap-mo': `${mo.gap}px`,
    // 모바일 확대값
    '--banner-width-mo-active': `${mo.width * moScale}px`,
    '--banner-height-mo-active': `${mo.height * moScale}px`,
    '--banner-width-mo-container': `${mo.width * moScale + mo.gap}px`,
  }

  const pcSize = {
    '--banner-width-pc': `${pc.width}px`,
    '--banner-height-pc': `${pc.height}px`,
    '--banner-gap-pc': `${pc.gap}px`,
    // PC 확대값
    '--banner-width-pc-active': `${pc.width * pcScale}px`,
    '--banner-height-pc-active': `${pc.height * pcScale}px`,
    '--banner-width-pc-container': props.arrows
      ? `${pc.width * pcScale + pc.gap * 4}px`
      : `${pc.width * pcScale}px`,
    '--banner-arrow-pc': `${(pc.width * pcScale) / 2 + (pc.gap * 3) / 2}px`,
  }

  return {
    ...moSize,
    ...pcSize,
  }
})

const handleSplideMounted = (splide: SplideType) => {
  emit('mounted', splide)
  splide.refresh()

  if (splideIndex.value !== undefined) {
    splideIndex.value = splide.index
  }
}

const handleMove = (
  splide: SplideType,
  newIndex: number,
  oldIndex: number,
  destIndex: number
) => {
  emit('move', splide, newIndex, oldIndex, destIndex)

  if (splideIndex.value !== undefined) {
    splideIndex.value = newIndex
  }
}
</script>

<template>
  <div :class="`center-highlight ${props.class || ''}`" :style="style">
    <Splide
      :options="options"
      :has-track="false"
      @splide:mounted="handleSplideMounted"
      @splide:move="handleMove"
    >
      <SplideTrack>
        <slot />
      </SplideTrack>
      <BlocksButtonSlideArrows
        v-if="props.arrows"
        :arrows-data="props.arrowsData"
      />
    </Splide>
  </div>
</template>

<style scoped>
.center-highlight {
  @apply w-full;
}
.center-highlight:deep(.splide__slide) {
  @apply flex items-center justify-center;
  width: var(--banner-width-mo);
  height: var(--banner-height-mo-active);
  margin-right: var(--banner-gap-mo);
}
.center-highlight:deep(.splide__slide) .slide-inner {
  width: var(--banner-width-mo);
  height: var(--banner-height-mo);
  transition: all 0.6s ease-out;
}
.center-highlight:deep(.splide__slide.is-active:not(.splide__slide--clone)) {
  width: var(--banner-width-mo-container);
}
.center-highlight:deep(.splide__slide.is-active:not(.splide__slide--clone))
  .slide-inner {
  width: var(--banner-width-mo-active);
  height: var(--banner-height-mo-active);
}

/* PC 스타일 */
@media (min-width: 1024px) {
  .center-highlight:deep(.splide__slide) {
    width: var(--banner-width-pc);
    height: var(--banner-height-pc-active);
    margin-right: var(--banner-gap-pc);
  }
  .center-highlight:deep(.splide__slide) .slide-inner {
    width: var(--banner-width-pc);
    height: var(--banner-height-pc);
  }
  .center-highlight:deep(.splide__slide.is-active:not(.splide__slide--clone)) {
    width: var(--banner-width-pc-container);
  }
  .center-highlight:deep(.splide__slide.is-active:not(.splide__slide--clone))
    .slide-inner {
    width: var(--banner-width-pc-active);
    height: var(--banner-height-pc-active);
  }
  .center-highlight:deep(.splide-arrow) {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .center-highlight:deep(.splide__arrow--prev) {
    margin-left: calc(-1 * var(--banner-arrow-pc));
  }
  .center-highlight:deep(.splide__arrow--next) {
    margin-left: var(--banner-arrow-pc);
  }
}
</style>