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

2025-09-24 14:27:52 +09:00
parent c0c7c40001
commit cf15589fd0
10 changed files with 323 additions and 239 deletions
--- a/layers/components/blocks/slide/CenterHighlight.vue
+++ b/layers/components/blocks/slide/CenterHighlight.vue
@@ -0,0 +1,119 @@
+<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
+  autoplay?: boolean | string
+  arrows?: boolean
+  pagination?: boolean
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  autoplay: false,
+  arrows: true,
+  pagination: true,
+})
+
+const options = computed((): ResponsiveOptions => {
+  return {
+    type: 'loop',
+    focus: 'center',
+    autoWidth: true,
+    autoHeight: true,
+    speed: 400,
+    updateOnMove: true,
+    arrows: props.arrows,
+    pagination: props.pagination,
+    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 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`,
+  }
+})
+
+const handleSplideMounted = (splide: SplideType) => {
+  splide.refresh()
+}
+</script>
+
+<template>
+  <div :class="`center-highlight ${props.class || ''}`" :style="style">
+    <Splide :options="options" @splide:mounted="handleSplideMounted">
+      <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.is-active) {
+  width: var(--banner-width-mo-container);
+}
+
+/* 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.is-active) {
+    width: var(--banner-width-pc-container);
+  }
+  .center-highlight:deep(.splide-arrow) {
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .center-highlight:deep(.arrow-prev) {
+    margin-left: calc(-1 * var(--banner-arrow-pc));
+  }
+  .center-highlight:deep(.arrow-next) {
+    margin-left: var(--banner-arrow-pc);
+  }
+}
+</style>