web-temp/layers/components/blocks/slide/CenterFocus.vue

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

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

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

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

const splideIndex = defineModel<number>('index', { required: false })

// Splide 화살표 로직을 위한 composable 사용
const { addArrowClickListeners } = useSplideArrow()

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: 400,
    classes: {
      arrows: 'splide-arrows',
      arrow: 'splide-arrow',
      prev: 'arrow-prev',
      next: 'arrow-next',
      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': `${pc.width * pcScale}px`,
  }

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

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

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

  // 화살표 버튼 클릭 이벤트 리스너 추가
  nextTick(() => {
    addArrowClickListeners(splide, (direction, targetIndex) => {
      emit('arrowClick', direction, targetIndex)
    })
  })
}

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-focus ${props.class || ''}`" :style="style">
    <Splide
      :options="options"
      @splide:mounted="handleSplideMounted"
      @splide:move="handleMove"
    >
      <slot />
    </Splide>
  </div>
</template>

<style scoped>
.center-focus {
  @apply w-full;
}
.center-focus: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);
  transition: transform 0.6s ease-out;
  opacity: 0.3;
}
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone)) {
  width: var(--banner-width-mo-container);
}
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone)),
.center-focus:deep(.splide__slide.is-next),
.center-focus:deep(.splide__slide.is-prev) {
  opacity: 1;
}

.center-focus:deep(.splide__slide) .slide-inner {
  width: var(--banner-width-mo);
  height: var(--banner-height-mo);
  background-color: #191919;
  transition: all 0.6s ease-out;
}
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone))
  .slide-inner {
  width: var(--banner-width-mo-active);
  height: var(--banner-height-mo-active);
}

.center-focus:deep(.splide__slide) .slide-inner .inner-content {
  opacity: 0.5;
  transition: all 0.6s ease-out;
}
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone))
  .slide-inner
  .inner-content {
  opacity: 1;
}

/* PC 스타일 */
@media (min-width: 1024px) {
  .center-focus:deep(.splide__slide) {
    width: var(--banner-width-pc);
    height: var(--banner-height-pc-active);
    margin-right: var(--banner-gap-pc);
  }
  .center-focus:deep(.splide__slide) .slide-inner {
    width: var(--banner-width-pc);
    height: var(--banner-height-pc);
  }
  .center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone)) {
    width: var(--banner-width-pc-container);
  }
  .center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone))
    .slide-inner {
    width: var(--banner-width-pc-active);
    height: var(--banner-height-pc-active);
  }
  .center-focus:deep(.arrow-prev) {
    left: 28px;
  }
  .center-focus:deep(.arrow-next) {
    right: 28px;
  }
}
</style>