web-temp/layers/components/widgets/BannerList.vue

<script setup lang="ts">
import { Splide, SplideSlide } from '@splidejs/vue-splide'
import type { Splide as SplideType } from '@splidejs/splide'
import type { ListOperateGroupItem } from '#layers/types/api/resourcesData'

interface BannerSizeItem {
  width: number
  height: number
  gap: number
}

interface BannerSize {
  mo: BannerSizeItem
  pc: BannerSizeItem
}

type BannerMode = 'auto' | 'fixed'

interface Props {
  bannerList: ListOperateGroupItem[]
  bannerMode?: BannerMode
  bannerSize?: BannerSize
  perPage?: number
  perMove?: number
  gap?: string
  arrows?: boolean
  pagination?: boolean
  breakpoints?: Record<number, { perPage: number; gap?: string }>
}

const props = withDefaults(defineProps<Props>(), {
  bannerMode: 'fixed',
  arrows: true,
  pagination: true,
})

// bannerSize를 CSS 변수로 변환
const bannerSizeStyle = computed(() => {
  if (!props.bannerSize) return {}

  const { mo, pc } = props.bannerSize
  const scaleFactor = 1.1429

  return {
    // 모바일 기본값
    '--banner-width-mo': `${mo.width}px`,
    '--banner-height-mo': `${mo.height}px`,
    '--banner-gap-mo': `${mo.gap}px`,
    // 모바일 확대값
    '--banner-width-mo-active': `${mo.width * scaleFactor}px`,
    '--banner-height-mo-active': `${mo.height * scaleFactor}px`,
    '--banner-width-mo-container': `${mo.width * scaleFactor + mo.gap}px`,

    // PC 기본값
    '--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 * scaleFactor}px`,
    '--banner-height-pc-active': `${pc.height * scaleFactor}px`,
    '--banner-width-pc-container': `${pc.width * scaleFactor + pc.gap * 4}px`,
    // PC arrow값
    '--banner-arrow-pc': `${(pc.width * scaleFactor) / 2 + (pc.gap * 3) / 2}px`,
  }
})

// Splide 옵션
const splideOptions = computed(() => {
  const baseOptions = {
    type: 'loop',
    updateOnMove: true,
    gap: props.gap,
    arrows: props.arrows,
    pagination: props.pagination,
    breakpoints: props.breakpoints,
    classes: {
      arrows: 'splide-arrows',
      arrow: 'splide-arrow',
      prev: 'arrow-prev',
      next: 'arrow-next',
      pagination: 'splide-pagination-bullets',
      page: 'splide-pagination-bullet',
    },
  }

  // bannerMode === 'auto'
  if (props.bannerMode === 'auto') {
    const options = {
      ...baseOptions,
      focus: 'center',
      autoWidth: true,
      autoHeight: true,
    }
    return options
  }

  const options = {
    ...baseOptions,
    perPage: props.perPage || 1,
    perMove: props.perMove || 1,
  }
  return options
})

// Splide 이벤트 핸들러
const handleSplideMounted = (splide: SplideType) => {
  splide.refresh()
}
</script>

<template>
  <div
    :class="`splide-carousel ${props.bannerMode ? `container-${props.bannerMode}` : ''}`"
    :style="bannerSizeStyle"
  >
    <Splide
      v-if="props.bannerList.length > 0"
      :options="splideOptions"
      class="splide-container"
      @splide:mounted="handleSplideMounted"
    >
      <SplideSlide
        v-for="banner in props.bannerList"
        :key="banner.seq"
        class="splide-banner"
      >
        <div class="banner-inner">
          <img
            :src="getResolvedHost(banner.img_path)"
            :alt="banner.title"
            class="banner-image"
            loading="lazy"
          />
          <div class="banner-overlay">
            <h3 v-if="banner.title" class="banner-title">
              {{ banner.title }}
            </h3>
            <p v-if="banner.option01" class="banner-description">
              {{ banner.option01 }}
            </p>
          </div>
          <a
            :href="banner.url"
            :target="banner.link_target"
            class="banner-link"
          />
        </div>
      </SplideSlide>
    </Splide>
  </div>
</template>

<style scoped>
.banner-inner {
  @apply overflow-hidden relative flex items-center justify-center h-full rounded-lg
         after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
         after:border after:border-white/10 after:rounded-lg;
}
.banner-image {
  @apply transition-transform duration-300 w-full h-full object-cover;
}
.banner-overlay {
  @apply absolute bottom-0 left-0 right-0 pt-[14px] px-[18px] pb-[16px] flex flex-col justify-end border-t border-white/10 bg-black/40 shadow-[0_-10px_10px_0_rgba(0,0,0,0.25)] backdrop-blur-[25px] md:pt-[20px] md:px-[26px] md:pb-[26px];
}
.banner-title {
  @apply text-[14px] leading-[20px] font-medium text-white md:text-lg md:leading-[26px];
}
.banner-description {
  @apply mt-[6px] text-[12px] leading-[18px] text-white/50 md:mt-1 md:text-[14px] md:leading-[24px];
}

/* bannerMode === 'auto' */
.container-auto {
  @apply w-full;
}
.banner-link {
  @apply absolute top-0 left-0 w-full h-full z-[5];
}
.container-auto .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);
}
.container-auto .splide__slide .banner-inner {
  width: var(--banner-width-mo);
  height: var(--banner-height-mo);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.container-auto .splide__slide.is-active {
  width: var(--banner-width-mo-container);
}
.container-auto .splide__slide.is-active .banner-inner {
  width: var(--banner-width-mo-active);
  height: var(--banner-height-mo-active);
}

/* PC 스타일 */
@media (min-width: 1024px) {
  .container-auto .splide__slide {
    width: var(--banner-width-pc);
    height: var(--banner-height-pc-active);
    margin-right: var(--banner-gap-pc);
  }

  .container-auto .splide__slide .banner-inner {
    width: var(--banner-width-pc);
    height: var(--banner-height-pc);
  }

  .container-auto .splide__slide.is-active {
    width: var(--banner-width-pc-container);
  }

  .container-auto .splide__slide.is-active .banner-inner {
    width: var(--banner-width-pc-active);
    height: var(--banner-height-pc-active);
  }
  .container-auto:deep(.splide-arrow) {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .container-auto:deep(.arrow-prev) {
    margin-left: calc(-1 * var(--banner-arrow-pc));
  }
  .container-auto:deep(.arrow-next) {
    margin-left: var(--banner-arrow-pc);
  }
}
</style>