feat.[SWV-812] 공통 리소스 이미지 관리 방식 변경(videoPlay, Arrow)

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/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/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 {
@@ -115,6 +118,7 @@ onBeforeUnmount(() => {
             <AtomsButtonPlay
               v-if="playingSlideIndex !== index"
               class="btn-play"
+              :bg-color="getColorCodeFromData(videoPlayData?.display, 'none')"
               :tracking="getVideoPlayTracking(item?.group_label)"
               @click="handleVideoClick(index)"
             />