feat. GR_GALLERY_02 템플릿 제작

layers/components/blocks/slide/CenterFocus.vue

@@ -0,0 +1,167 @@
+<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'
+
+interface Props {
+  slideItemSize: SlideItemSize
+  slideItemLength?: number
+  autoplay?: boolean | string
+  arrows?: boolean
+  pagination?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  autoplay: false,
+  arrows: true,
+  pagination: true,
+})
+
+const emit = defineEmits(['mounted', 'move', 'moved'])
+
+const isMultipleItems = computed(() => {
+  return props.slideItemLength > 1
+})
+
+const options = computed((): ResponsiveOptions => {
+  return {
+    type: isMultipleItems.value ? 'loop' : 'slide',
+    focus: 'center',
+    autoWidth: true,
+    autoHeight: true,
+    speed: 400,
+    updateOnMove: true,
+    arrows: props.arrows && isMultipleItems.value,
+    pagination: props.pagination && isMultipleItems.value,
+    autoplay: props.autoplay,
+    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()
+}
+
+const handleMove = (
+  splide: SplideType,
+  newIndex: number,
+  oldIndex: number,
+  destIndex: number
+) => {
+  emit('move', splide, newIndex, oldIndex, destIndex)
+}
+
+const handleMoved = (
+  splide: SplideType,
+  newIndex: number,
+  oldIndex: number,
+  destIndex: number
+) => {
+  emit('moved', splide, newIndex, oldIndex, destIndex)
+}
+</script>
+
+<template>
+  <div :class="`center-highlight ${props.class || ''}`" :style="style">
+    <Splide
+      :options="options"
+      @splide:mounted="handleSplideMounted"
+      @splide:move="handleMove"
+      @splide:moved="handleMoved"
+    >
+      <slot />
+    </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);
+}
+.center-highlight:deep(.splide__slide.is-active) {
+  width: var(--banner-width-mo-container);
+}
+.center-highlight:deep(.splide__slide.is-active) .slide-inner {
+  width: var(--banner-width-mo-active);
+  height: var(--banner-height-mo-active);
+  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* 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) {
+    width: var(--banner-width-pc-container);
+  }
+  .center-highlight:deep(.splide__slide.is-active) .slide-inner {
+    width: var(--banner-width-pc-active);
+    height: var(--banner-height-pc-active);
+  }
+  .center-highlight:deep(.arrow-prev) {
+    left: 28px;
+  }
+  .center-highlight:deep(.arrow-next) {
+    right: 28px;
+  }
+}
+</style>

layers/components/blocks/slide/CenterHighlight.vue

@@ -50,28 +50,35 @@ const style = computed(() => {
   if (!props.slideItemSize) return {}
 
   const { mo, pc } = props.slideItemSize
-  const scaleFactor = 1.1429
+  const moScale = mo?.scale || 1.1429
+  const pcScale = pc?.scale || 1.1429
 
-  return {
-    // 모바일 기본값
+  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 * scaleFactor}px`,
-    '--banner-height-mo-active': `${mo.height * scaleFactor}px`,
-    '--banner-width-mo-container': `${mo.width * scaleFactor + 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`,
+  }
 
-    // PC 기본값
+  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 * 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`,
+    '--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,
   }
 })
 
@@ -125,7 +132,6 @@ const handleMoved = (
 .center-highlight:deep(.splide__slide) .slide-inner {
   width: var(--banner-width-mo);
   height: var(--banner-height-mo);
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 .center-highlight:deep(.splide__slide.is-active) {
   width: var(--banner-width-mo-container);
@@ -133,6 +139,7 @@ const handleMoved = (
 .center-highlight:deep(.splide__slide.is-active) .slide-inner {
   width: var(--banner-width-mo-active);
   height: var(--banner-height-mo-active);
+  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* PC 스타일 */

layers/components/blocks/slide/Thumbnail.vue

@@ -4,7 +4,7 @@ import type { Splide as SplideType, Options } from '@splidejs/splide'
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 interface Props {
-  slideItemList: { media: any; set_order: number }[]
+  slideData: { media: any; set_order: number }[]
   videoPlay?: PageDataResourceGroup
   arrows?: boolean
   pagination?: boolean
@@ -76,7 +76,7 @@ onBeforeUnmount(() => {
     <!-- 메인 슬라이드 -->
     <Splide ref="mainRef" :options="mainOptions" class="main-splide">
       <SplideSlide
-        v-for="(item, index) in props.slideItemList"
+        v-for="(item, index) in props.slideData"
         :key="item.set_order || index"
         class="main-slide"
       >
@@ -108,7 +108,7 @@ onBeforeUnmount(() => {
     <!-- 썸네일 슬라이드 -->
     <Splide ref="thumbsRef" :options="thumbOptions" class="thumbnail-splide">
       <SplideSlide
-        v-for="(item, index) in props.slideItemList"
+        v-for="(item, index) in props.slideData"
         :key="item.set_order || index"
         class="thumbnail-slide"
       >