Merge branch 'feature/20250206_all' of https://git.sginfra.net/sgp-web-d/web-template-fe into feature/20250206_all

layers/templates/FxDownload01/index.vue

@@ -424,7 +424,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
                 <img
                   :src="
                     formatPathHost(
-                      `/images/common/grades_driver/Type-${driver.driverCode}.svg`,
+                      `/images/common/download_driver/Type-${driver.driverCode}.svg`,
                       { imageType: 'common' }
                     )
                   "

layers/templates/FxPreregist01/index.vue

@@ -247,7 +247,7 @@ const handlePreregistClick = () => {
           :resources-data="preSubTitleData"
           class="title-sm mt-2"
         />
-        <div class="flex flex-col gap-4 mt-8 sm:flex-row">
+        <div v-motion-stagger class="flex flex-col gap-4 mt-8 sm:flex-row">
           <div
             v-if="preImgPreregistdData"
             class="max-w-[336px] md:max-w-[446px]"
@@ -295,7 +295,10 @@ const handlePreregistClick = () => {
             </ul>
           </div>
         </div>
-        <div class="flex gap-3 justify-center flex-wrap mt-8 md:gap-2.5">
+        <div
+          v-motion-stagger
+          class="flex gap-3 justify-center flex-wrap mt-8 md:gap-2.5"
+        >
           <BlocksButtonLauncher
             type="duplication"
             platform="stove"
@@ -355,6 +358,7 @@ const handlePreregistClick = () => {
         />
         <div
           v-if="rewardImages.length"
+          v-motion-stagger
           class="overflow-hidden w-[calc(100%+40px)] min-h-[228px] mt-6 mx-[-20px] sm:w-[calc(100%+80px)] sm:mx-[-40px] md:w-full md:min-h-[281px] md:mt-8 md:mx-auto"
         >
           <ClientOnly>

layers/templates/FxVideo01/index.vue

@@ -50,20 +50,15 @@ const analytics = {
   action_type: 'click',
   click_sarea: props.pageVerTmplNameEn,
 } as TrackingObject
-const arrowsData: PageDataResourceGroups = [
-  {
-    tracking: {
-      ...analytics,
-      click_item: '1. 컨텐츠 리스트 - 네비게이션(좌)',
-    },
+const arrowsData: PageDataResourceGroups = ['좌', '우'].map(direction => ({
+  display: {
+    color_code: '#383838',
   },
-  {
-    tracking: {
-      ...analytics,
-      click_item: '1. 컨텐츠 리스트 - 네비게이션(우)',
-    },
+  tracking: {
+    ...analytics,
+    click_item: `1. 컨텐츠 리스트 - 네비게이션(${direction})`,
   },
-]
+}))
 
 const recommendHover = ref(false)
 
@@ -291,21 +286,19 @@ const handleLoadMoreRecent = () => {
 .splide {
   @apply pb-[68px] sm:pb-[0];
 }
-.splide:deep(.splide__arrows) {
-  @apply block;
-}
+
 .splide:deep(.splide__arrows) .splide-arrow {
-  @apply block top-[unset] bottom-[20px] translate-y-0 bg-cover bg-center bg-no-repeat
+  @apply top-[unset] bottom-[20px] translate-y-0 bg-cover bg-center bg-no-repeat
   sm:bottom-[24px] md:bottom-[36px] lg:bottom-[60px];
 }
 .splide:deep(.splide__arrows) .splide__arrow--prev {
-  @apply left-[20px] bg-[image:url('/images/common/btn_system_arrow_prev.png')]
+  @apply left-[20px]
   sm:left-[calc(60.3%+21px)] 
   md:left-[calc(56%+39px)] 
   lg:left-[790px];
 }
 .splide:deep(.splide__arrows) .splide__arrow--next {
-  @apply right-[20px] bg-[image:url('/images/common/btn_system_arrow_next.png')]
+  @apply right-[20px] 
   sm:right-[28px] 
   md:right-[unset] md:left-[calc(56%+99px)]
   lg:left-[850px];

layers/templates/GrBoard01/index.vue

@@ -124,6 +124,7 @@ const getArticleUrl = (articleId: string) => {
       <ClientOnly>
         <WidgetsSlideDefault
           v-if="slideLength > 0"
+          v-motion-stagger
           v-bind="splideOptions"
           :slide-item-length="slideLength"
           :arrows-data="arrowsData"

layers/templates/GrContents01/index.vue

@@ -44,7 +44,7 @@ const buttonListData = computed(() => {
         :resources-data="subTitleData"
         class="title-sm max-w-[944px] mt-2"
       />
-      <div v-if="imgListData" class="img-container">
+      <div v-if="imgListData" v-motion-stagger class="img-container">
         <div v-for="(item, index) in imgListData" :key="index" class="img-item">
           <AtomsImg
             v-if="getResourceSrc(item)"
@@ -71,9 +71,9 @@ const buttonListData = computed(() => {
 
 <style scoped>
 .img-container {
-  @apply flex flex-col items-center justify-center gap-4 box-content mx-auto mt-[32px]
-  w-[440px]
-  md:w-[944px];
+  @apply flex flex-col items-center justify-center gap-4 box-content mx-auto mt-[32px] w-full
+  max-w-[440px]
+  md:max-w-[944px];
 }
 .img-item {
   @apply w-full;

layers/templates/GrDetail03/index.vue

@@ -91,6 +91,7 @@ const getVideoSrc = (item: PageDataTemplateComponent) => {
           />
           <AtomsVideo
             v-if="hasComponentGroup(item, 'video')"
+            v-motion-stagger
             :src="getVideoSrc(item)"
             :play="currentSlideIndex === index"
             class="aspect-[16/10] w-[258px] mt-8 md:w-[496px] md:mt-10"

layers/templates/GrGallery01/index.vue

@@ -40,6 +40,9 @@ const arrowsData = computed(() => {
 const paginationData = computed(() => {
   return getComponentGroupAry(props.components, 'pagination')
 })
+const videoPlayData = computed(() => {
+  return getComponentGroup(props.components, 'videoPlay')
+})
 
 const getVideoPlayTracking = (item: string) => {
   return {
@@ -89,6 +92,7 @@ onBeforeUnmount(() => {
         class="title-md max-w-[944px]"
       />
       <WidgetsSlideThumbnail
+        v-motion-stagger
         :thumbnail-data="slideData"
         :pagination-data="paginationData"
         :drag="false"
@@ -115,6 +119,7 @@ onBeforeUnmount(() => {
             <AtomsButtonPlay
               v-if="playingSlideIndex !== index"
               class="btn-play"
+              :bg-color="getColorCodeFromData(videoPlayData?.display, 'none')"
               :tracking="getVideoPlayTracking(item?.group_label)"
               @click="handleVideoClick(index)"
             />

layers/templates/GrGallery02/index.vue

@@ -70,6 +70,7 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
       />
       <WidgetsSlideCenterFocus
         v-if="slideData"
+        v-motion-stagger
         :slide-item-size="slideItemSize"
         :slide-item-length="slideData?.length"
         :arrows-data="arrowsData"

layers/templates/GrGallery03/index.vue

@@ -80,6 +80,7 @@ const handleSplideMove = (
       />
       <WidgetsSlideCenterHighlight
         v-if="slideData"
+        v-motion-stagger
         :slide-item-size="slideItemSize"
         :slide-item-length="slideData?.length"
         :arrows-data="arrowsData"

layers/templates/GrVisual02/index.vue

@@ -101,6 +101,7 @@ const slideItemSize = {
       <WidgetsVideoPlay v-if="videoPlayData" :resources-data="videoPlayData" />
       <WidgetsSlideCenterHighlight
         v-if="slideData && slideData.length > 0"
+        v-motion-stagger
         :slide-item-size="slideItemSize"
         :slide-item-length="slideData.length"
         :arrows-data="arrowsData"