fix. [PWT-158] 공식 영상 > 추천 영상 자동 롤링 기능 미동작

layers/components/atoms/icons/PlayRoundFill.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 34,
+  color: 'white',
+})
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 34 34"
+    :fill="color"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M22.4412 0.396022C18.8311 -0.132052 14.5442 -0.131919 10.9211 0.39589C5.43725 1.1996 1.21636 5.43636 0.397045 10.8959L0.396229 10.9015C0.130814 12.7143 0 14.6462 0 16.6667C0 18.6871 0.130974 20.6201 0.39639 22.4329C1.20078 27.9002 5.4251 32.118 10.9013 32.9366L10.9061 32.9373C12.7195 33.2026 14.6521 33.3333 16.6596 33.3333C18.6675 33.3333 20.5995 33.2025 22.4254 32.9376L22.4283 32.9372C27.8987 32.1331 32.1171 27.8959 32.9363 22.4374L32.9371 22.4318C33.2025 20.619 33.3333 18.6871 33.3333 16.6667C33.3333 14.6549 33.2175 12.7204 32.951 10.9004C32.1469 5.43487 27.9082 1.19961 22.4412 0.396022ZM12.6356 19.0484C12.6492 19.5508 12.6668 20.0466 12.6884 20.5353L12.6909 20.5931C12.7153 21.1384 12.7447 21.6749 12.7789 22.2019C12.8157 22.7749 13.3853 23.1257 13.8741 22.8724C14.7377 22.4241 15.6196 21.9407 16.52 21.4262C17.1668 21.052 17.8209 20.67 18.4787 20.2646C19.1365 19.8631 19.7796 19.4538 20.4043 19.0445C21.2716 18.4793 22.1095 17.9063 22.9069 17.3371C23.3589 17.0175 23.3589 16.3158 22.9069 15.9962C22.1095 15.4271 21.2753 14.858 20.4043 14.2889C19.7796 13.8796 19.1365 13.4742 18.4787 13.0688C17.8209 12.6634 17.1668 12.2775 16.52 11.9072C15.6233 11.3926 14.7377 10.9093 13.8741 10.461C13.3853 10.2076 12.8157 10.5584 12.7789 11.1314C12.7447 11.6585 12.7153 12.1949 12.6909 12.7403L12.6884 12.7981C12.6668 13.2867 12.6492 13.7825 12.6356 14.285C12.6136 15.0685 12.6025 15.8598 12.6025 16.6667C12.6025 17.4736 12.6136 18.2688 12.6356 19.0484Z"
+    />
+  </svg>
+</template>

layers/components/blocks/slide/CenterFocus.vue

@@ -8,6 +8,7 @@ interface Props {
   slideItemSize: SlideItemSize
   slideItemLength?: number
   autoplay?: boolean
+  interval?: number
   arrows?: boolean
   pagination?: boolean
   class?: string
@@ -15,6 +16,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   autoplay: false,
+  interval: 5000,
   arrows: true,
   pagination: true,
 })
@@ -38,6 +40,7 @@ const options = computed((): ResponsiveOptions => {
     arrows: props.arrows && isMultipleItems.value,
     pagination: props.pagination && isMultipleItems.value,
     autoplay: props.autoplay,
+    interval: props.interval,
     classes: {
       arrows: 'splide-arrows',
       arrow: 'splide-arrow',

layers/components/blocks/slide/CenterHighlight.vue

@@ -7,6 +7,7 @@ interface Props {
   slideItemSize: SlideItemSize
   slideItemLength?: number
   autoplay?: boolean
+  interval?: number
   arrows?: boolean
   pagination?: boolean
   class?: string
@@ -14,6 +15,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   autoplay: false,
+  interval: 5000,
   arrows: true,
   pagination: true,
 })
@@ -37,6 +39,7 @@ const options = computed((): ResponsiveOptions => {
     arrows: props.arrows && isMultipleItems.value,
     pagination: props.pagination && isMultipleItems.value,
     autoplay: props.autoplay,
+    interval: props.interval,
     classes: {
       arrows: 'splide-arrows',
       arrow: 'splide-arrow',

layers/components/blocks/slide/Default.vue

@@ -8,6 +8,7 @@ interface Props {
   slideItemLength?: number
   gap?: number
   autoplay?: boolean
+  interval?: number
   perPage?: number
   drag?: boolean
   arrows?: boolean
@@ -20,6 +21,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   gap: 0,
   autoplay: false,
+  interval: 5000,
   perPage: 1,
   drag: true,
   arrows: true,
@@ -49,6 +51,7 @@ const options = computed((): ResponsiveOptions => {
     easing: 'ease-in-out',
     updateOnMove: true,
     autoplay: props.autoplay,
+    interval: props.interval,
     drag: props.drag,
     arrows: props.arrows,
     pagination: props.pagination,

layers/components/blocks/slide/Fade.vue

@@ -8,6 +8,7 @@ import type { PageDataResourceGroups } from '#layers/types/api/pageData'
 interface Props {
   drag?: boolean
   autoplay?: boolean
+  interval?: number
   arrows?: boolean
   pagination?: boolean
   paginationData?: PageDataResourceGroups
@@ -16,6 +17,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   drag: true,
   autoplay: false,
+  interval: 5000,
   arrows: true,
   pagination: true,
 })
@@ -37,6 +39,7 @@ const options = computed((): ResponsiveOptions => {
     updateOnMove: true,
     drag: props.drag,
     autoplay: props.autoplay,
+    interval: props.interval,
     pauseOnHover: false,
     pauseOnFocus: false,
     arrows: props.arrows,

layers/templates/FxVideo01/index.vue

@@ -140,6 +140,8 @@ const handleLoadMoreRecent = () => {
         class="relative content-static bg-[#fff] rounded-[12px] md:rounded-[16px]"
       >
         <BlocksSlideFade
+          :autoplay="recommendedVideos.length > 1"
+          :interval="3000"
           :arrows="recommendedVideos.length > 1"
           :pagination="false"
           :drag="false"

layers/templates/GrDetail01/index.vue

@@ -46,7 +46,6 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
       v-if="slideData"
       ref="splideRef"
       :autoplay="true"
-      :interval="5000"
       :arrows="false"
       :pagination="false"
       class="h-full"

layers/templates/GrDetail02/index.vue

@@ -17,7 +17,9 @@ const slideData = computed(() => {
   return getComponentContainer(props.components, 'group_sets', { maxLength: 7 })
 })
 const thumbnailData = computed(() => {
-  return slideData.value.map(item => item.pagenaviThumbnail?.groups?.[0])
+  return slideData.value
+    .map(item => item?.pagenaviThumbnail?.groups?.[0])
+    .filter((group): group is NonNullable<typeof group> => group != null)
 })
 const paginationData = computed(() => {
   return getComponentGroupAry(props.components, 'pagination')

layers/templates/GrDetail03/index.vue

@@ -29,15 +29,17 @@ const slideData = computed(() => {
   })
 })
 const thumbnailData = computed(() => {
-  return slideData.value.map(item => item.pagenaviThumbnail?.groups?.[0])
+  return slideData.value
+    .map(item => item?.pagenaviThumbnail?.groups?.[0])
+    .filter((group): group is NonNullable<typeof group> => group != null)
 })
 const paginationData = computed(() => {
   return getComponentGroupAry(props.components, 'pagination')
 })
 
 const videoSrc = (item: PageDataTemplateComponent) => {
-  const src = getComponentGroup(item, 'video')?.res_path
-  return getCurrentSrc(src)
+  const videoData = getComponentGroup(item, 'video')
+  return getCurrentSrc(videoData)
 }
 
 const handleSplideMove = (_splide: SplideType, newIndex: number) => {