feat. GR_DETAIL_02 템플릿 제작

layers/components/blocks/slide/Thumbnail.vue

@@ -1,34 +1,31 @@
 <script setup lang="ts">
 import { Splide, SplideSlide } from '@splidejs/vue-splide'
-import { getComponentGroup, isTypeVideo } from '#layers/utils/dataUtil'
-import {
-  getMediaSrc,
-  getYouTubeEmbedUrl,
-  getMediaImgSrc,
-} from '#layers/utils/youtube'
 import type { Splide as SplideType, Options } from '@splidejs/splide'
-import type {
+import type { PageDataTemplateComponentSet } from '#layers/types/api/pageData'
-  PageDataTemplateComponentSet,
-  PageDataResourceGroup,
-} from '#layers/types/api/pageData'
 
 interface Props {
   slideData: PageDataTemplateComponentSet[]
-  videoPlay?: PageDataResourceGroup
+  variant?: 'default' | 'media'
-  arrows?: boolean
+  drag?: boolean
-  pagination?: boolean
-  class?: string
-  style?: Record<string, string>
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  drag: true,
+})
 
 let mainInst: SplideType | null = null
 let thumbsInst: SplideType | null = null
 
+defineExpose({
+  mainInst: computed(() => mainInst),
+  thumbsInst: computed(() => thumbsInst),
+})
+
+const breakpoints = useResponsiveBreakpointsReliable()
+
 const mainRef = ref<InstanceType<typeof Splide> | null>(null)
 const thumbsRef = ref<InstanceType<typeof Splide> | null>(null)
-const playingSlideIndex = ref<number | null>(null)
 
 const mainOptions = computed<Options>(() => ({
   type: 'fade',
@@ -38,7 +35,7 @@ const mainOptions = computed<Options>(() => ({
   speed: 600,
   arrows: false,
   pagination: false,
-  drag: false,
+  drag: props.drag,
 }))
 
 const thumbOptions = computed<Options>(() => ({
@@ -59,37 +56,23 @@ const thumbOptions = computed<Options>(() => ({
   },
 }))
 
-const getMediaComponent = (item: PageDataTemplateComponentSet) => {
+const getThumbnailSrc = (item: PageDataTemplateComponentSet) => {
-  return getComponentGroup(item, 'media')
+  if (props.variant === 'media') {
-}
+    const mediaComponent = getComponentGroup(item, 'media')
-
-const getMediaImgSrcFromItem = (item: PageDataTemplateComponentSet) => {
-  const mediaComponent = getMediaComponent(item)
     return mediaComponent ? getMediaImgSrc(mediaComponent) : ''
-}
+  }
 
-const getYouTubeEmbedUrlFromMedia = (item: PageDataTemplateComponentSet) => {
+  const pagenaviThumbnailComponent = getComponentGroup(
-  const mediaComponent = getMediaComponent(item)
+    item,
-  if (!mediaComponent) return ''
+    'pagenaviThumbnail'
-  const mediaSrc = getMediaSrc(mediaComponent)
+  )
-  return mediaSrc ? getYouTubeEmbedUrl(mediaSrc, true) : ''
+  const pagenaviThumbnailSrc = getResponsiveSrc(
-}
+    pagenaviThumbnailComponent?.res_path
+  )
 
-const isPassVideo = (item: PageDataTemplateComponentSet, index: number) => {
+  return breakpoints.value.isMobile
-  const mediaComponent = getMediaComponent(item)
+    ? pagenaviThumbnailSrc?.mobileSrc
-  const isNotPlaying = index !== playingSlideIndex.value
+    : pagenaviThumbnailSrc?.pcSrc || ''
-  const isVideoType =
-    mediaComponent && isTypeVideo(mediaComponent?.resource_type)
-
-  return isVideoType && isNotPlaying
-}
-
-const handleVideoClick = (index: number) => {
-  playingSlideIndex.value = index
-}
-
-const stopVideo = () => {
-  playingSlideIndex.value = null
 }
 
 onMounted(() => {
@@ -98,7 +81,6 @@ onMounted(() => {
 
   if (mainInst && thumbsInst) {
     mainInst.sync(thumbsInst)
-    mainInst.on('moved', stopVideo)
   }
 })
 
@@ -109,46 +91,25 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div :class="`thumbnail-carousel ${props.class || ''}`" :style="props.style">
+  <div :class="['thumbnail-carousel', $attrs?.class, `thumbnail-${variant}`]">
     <!-- 메인 슬라이드 -->
     <Splide ref="mainRef" :options="mainOptions" class="main-splide">
-      <SplideSlide
+      <slot />
-        v-for="(item, index) in props.slideData"
-        :key="item.set_order || index"
-        class="main-slide"
-      >
-        <img
-          :src="getMediaImgSrcFromItem(item)"
-          alt="main image"
-          class="slide-image"
-          :class="{ 'opacity-0': playingSlideIndex === index }"
-        />
-        <AtomsButtonPlay
-          v-if="isPassVideo(item, index)"
-          :resources-data="videoPlay"
-          class="btn-play"
-          @click="handleVideoClick(index)"
-        />
-        <iframe
-          v-if="playingSlideIndex === index"
-          :src="getYouTubeEmbedUrlFromMedia(item)"
-          class="video-iframe"
-          frameborder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowfullscreen
-        />
-      </SplideSlide>
     </Splide>
-
     <!-- 썸네일 슬라이드 -->
-    <Splide ref="thumbsRef" :options="thumbOptions" class="thumbnail-splide">
+    <Splide
+      v-if="props.slideData.length > 0"
+      ref="thumbsRef"
+      :options="thumbOptions"
+      class="thumbnail-splide"
+    >
       <SplideSlide
         v-for="(item, index) in props.slideData"
         :key="item.set_order || index"
         class="thumbnail-slide"
       >
         <img
-          :src="getMediaImgSrcFromItem(item)"
+          :src="getThumbnailSrc(item)"
           alt="thumbnail image"
           class="slide-image"
         />
@@ -159,33 +120,15 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .thumbnail-carousel {
-  @apply w-full md:max-w-[944px];
 }
-
+.thumbnail-carousel:deep(img) {
-.main-splide {
-  @apply overflow-hidden mx-auto rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];
-}
-.main-slide {
-  @apply relative aspect-[16/9];
-}
-.slide-image {
   @apply w-full h-full object-cover;
 }
-.btn-play {
-  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
-}
-.video-iframe {
-  @apply absolute top-0 left-0 w-full h-full;
-}
-
 .thumbnail-splide {
-  @apply overflow-hidden flex justify-center w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:max-w-[100%] md:w-fit md:mx-auto md:px-[120px] md:mt-[28px];
+  @apply overflow-hidden flex justify-center;
-}
-.thumbnail-splide:deep(.splide__track) {
-  @apply !px-[20px] sm:!px-[40px] md:!px-[0];
 }
 .thumbnail-slide {
-  @apply overflow-hidden relative w-[92px] h-[52px] mr-[12px] !border-none rounded-[4px] md:w-[128px] md:h-[72px] md:mr-[16px]
+  @apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] md:mr-[16px]
   after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
   after:border after:border-white/60 after:rounded-[4px];
 }
@@ -193,10 +136,47 @@ onBeforeUnmount(() => {
 .thumbnail-slide.is-active {
   @apply after:border-[var(--primary)];
 }
-.thumbnail-splide:deep(.arrow-prev) {
+
+/* 기본 버전 스타일 */
+.thumbnail-carousel.thumbnail-default,
+.thumbnail-carousel.thumbnail-default .main-splide,
+.thumbnail-carousel.thumbnail-default .main-splide:deep(.splide__track) {
+  @apply h-full;
+}
+.thumbnail-carousel.thumbnail-default .thumbnail-splide {
+  @apply absolute bottom-[32px] left-1/2 -translate-x-1/2 md:bottom-[48px] md:px-[72px];
+}
+.thumbnail-carousel.thumbnail-default:deep(.arrow-prev) {
+  @apply left-0;
+}
+.thumbnail-carousel.thumbnail-default:deep(.arrow-next) {
+  @apply right-0;
+}
+.thumbnail-carousel.thumbnail-default .thumbnail-slide {
+  @apply aspect-[1/1] w-[8px] bg-red-500 md:w-[80px] md:bg-transparent
+  after:hidden md:after:block;
+}
+.thumbnail-carousel.thumbnail-default .thumbnail-slide.is-active {
+  @apply bg-blue-500 md:bg-transparent;
+}
+.thumbnail-carousel.thumbnail-default .thumbnail-slide img {
+  @apply hidden md:block;
+}
+
+/* 미디어 버전 스타일 */
+.thumbnail-carousel.thumbnail-media .thumbnail-splide {
+  @apply w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-fit md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[120px];
+}
+.thumbnail-carousel.thumbnail-media .thumbnail-splide:deep(.splide__track) {
+  @apply !px-[20px] sm:!px-[40px] md:!px-[0];
+}
+.thumbnail-carousel.thumbnail-media:deep(.arrow-prev) {
   @apply left-[48px];
 }
-.thumbnail-splide:deep(.arrow-next) {
+.thumbnail-carousel.thumbnail-media:deep(.arrow-next) {
   @apply right-[48px];
 }
+.thumbnail-carousel.thumbnail-media .thumbnail-slide {
+  @apply aspect-[16/9] w-[92px] md:w-[128px];
+}
 </style>

layers/composables/useTemplateRegistry.ts

@@ -5,6 +5,7 @@ import GrGallery01 from '#layers/templates/GrGallery01/index.vue'
 import GrGallery02 from '#layers/templates/GrGallery02/index.vue'
 import GrGallery03 from '#layers/templates/GrGallery03/index.vue'
 import GrDetail01 from '#layers/templates/GrDetail01/index.vue'
+import GrDetail02 from '#layers/templates/GrDetail02/index.vue'
 
 const templateRegistry = {
   GR_VISUAL_01: { component: GrVisual01 },
@@ -15,7 +16,7 @@ const templateRegistry = {
   GR_GALLERY_03: { component: GrGallery03 },
   // GR_BOARD_01: { component: GrBoard01 },
   GR_DETAIL_01: { component: GrDetail01 },
-  // GR_DETAIL_02: { component: GrDetail02 },
+  GR_DETAIL_02: { component: GrDetail02 },
   // GR_DETAIL_03: { component: GrDetail03 },
   // GR_CONTENTS_01: { component: GrContents01 },
 } as const

layers/templates/GrDetail02/index.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { SplideSlide } from '@splidejs/vue-splide'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+
+interface Props {
+  components: PageDataTemplateComponents
+  pageVerTmplSeq: string
+}
+
+const props = defineProps<Props>()
+
+const slideData = computed(() => {
+  return getComponentContainer(props.components, 'group_sets', { maxLength: 7 })
+})
+</script>
+
+<template>
+  <section class="section-container relative">
+    <BlocksSlideThumbnail ref="slideThumbnailRef" :slide-data="slideData">
+      <SplideSlide v-for="(item, index) in slideData" :key="index">
+        <WidgetsBackground
+          v-if="hasComponentGroup(item, 'background')"
+          :resources-data="getComponentGroup(item, 'background')"
+        />
+        <div class="section-content">
+          <WidgetsMainTitle
+            v-if="hasComponentGroup(item, 'mainTitle')"
+            :resources-data="getComponentGroup(item, 'mainTitle')"
+            class="title-md"
+          />
+          <WidgetsSubTitle
+            v-if="hasComponentGroup(item, 'subTitle')"
+            :resources-data="getComponentGroup(item, 'subTitle')"
+            class="title-sm mt-0.5 md:mt-1"
+          />
+          <WidgetsDescription
+            v-if="hasComponentGroup(item, 'description')"
+            :resources-data="getComponentGroup(item, 'description')"
+            class="description-lg mt-4 md:mt-6"
+          />
+        </div>
+      </SplideSlide>
+    </BlocksSlideThumbnail>
+  </section>
+</template>

layers/templates/GrGallery01/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import {
+import { SplideSlide } from '@splidejs/vue-splide'
-  getComponentContainer,
+import type {
-  getComponentGroup,
+  PageDataTemplateComponents,
-} from '#layers/utils/dataUtil'
+  PageDataTemplateComponentSet,
-import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+} from '#layers/types/api/pageData'
 
 interface Props {
   components: PageDataTemplateComponents
@@ -12,6 +12,9 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const slideThumbnailRef = ref<any>(null)
+const playingSlideIndex = ref<number | null>(null)
+
 const backgroundData = computed(() =>
   getComponentGroup(props.components, 'background')
 )
@@ -21,13 +24,55 @@ const mainTitleData = computed(() =>
 const slideData = computed(() =>
   getComponentContainer(props.components, 'group_sets')
 )
-const videoPlayData = computed(() =>
+const _videoPlayData = computed(() =>
   getComponentGroup(props.components, 'videoPlay')
 )
+
+const getMediaComponent = (item: PageDataTemplateComponentSet) => {
+  return getComponentGroup(item, 'media')
+}
+
+const getMediaImgSrcFromItem = (item: PageDataTemplateComponentSet) => {
+  const mediaComponent = getMediaComponent(item)
+  return mediaComponent ? getMediaImgSrc(mediaComponent) : ''
+}
+
+const getYouTubeEmbedUrlFromMedia = (item: PageDataTemplateComponentSet) => {
+  const mediaComponent = getMediaComponent(item)
+  if (!mediaComponent) return ''
+  const mediaSrc = getMediaSrc(mediaComponent)
+  return mediaSrc ? getYouTubeEmbedUrl(mediaSrc, true) : ''
+}
+
+const isPassVideo = (item: PageDataTemplateComponentSet, index: number) => {
+  const mediaComponent = getMediaComponent(item)
+  const isNotPlaying = index !== playingSlideIndex.value
+  const isVideoType =
+    mediaComponent && isTypeVideo(mediaComponent?.resource_type)
+
+  return isVideoType && isNotPlaying
+}
+
+const handleVideoClick = (index: number) => {
+  playingSlideIndex.value = index
+}
+
+const stopVideo = () => {
+  playingSlideIndex.value = null
+}
+
+onMounted(() => {
+  nextTick(() => {
+    const mainInst = slideThumbnailRef.value?.mainInst
+    if (mainInst) {
+      mainInst.on('moved', stopVideo)
+    }
+  })
+})
 </script>
 
 <template>
-  <section class="section-container">
+  <section class="section-container min-h-[700px]">
     <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
     <div class="section-content">
       <WidgetsMainTitle
@@ -36,10 +81,56 @@ const videoPlayData = computed(() =>
         class="title-sm"
       />
       <BlocksSlideThumbnail
+        ref="slideThumbnailRef"
         :slide-data="slideData"
-        :video-play="videoPlayData"
+        variant="media"
+        :drag="false"
         class="mt-[24px] md:mt-[32px]"
+      >
+        <SplideSlide
+          v-for="(item, index) in slideData"
+          :key="item.set_order || index"
+          class="main-slide"
+        >
+          <img
+            :src="getMediaImgSrcFromItem(item)"
+            alt="main image"
+            class="slide-image"
+            :class="{ 'opacity-0': playingSlideIndex === index }"
           />
+          <AtomsButtonPlay
+            v-if="isPassVideo(item, index)"
+            class="btn-play"
+            @click="handleVideoClick(index)"
+          />
+          <iframe
+            v-if="playingSlideIndex === index"
+            :src="getYouTubeEmbedUrlFromMedia(item)"
+            class="video-iframe"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          />
+        </SplideSlide>
+      </BlocksSlideThumbnail>
     </div>
   </section>
 </template>
+
+<style scoped>
+.thumbnail-carousel {
+  @apply w-full md:max-w-[944px];
+}
+.thumbnail-carousel:deep(.main-splide) {
+  @apply overflow-hidden rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];
+}
+.main-slide {
+  @apply relative aspect-[16/9];
+}
+.btn-play {
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+.video-iframe {
+  @apply absolute top-0 left-0 w-full h-full object-cover;
+}
+</style>