fix. videoPlay, arrow 배경색상 어드민 지정 적용

layers/components/atoms/Button/Play.vue

@@ -2,6 +2,7 @@
 import type { TrackingObject } from '#layers/types/api/common'
 
 interface Props {
+  bgColor?: string
   tracking: TrackingObject
 }
 
@@ -16,7 +17,11 @@ const handlePlayClick = () => {
 </script>
 
 <template>
-  <button class="btn-play" @click="handlePlayClick">
+  <button
+    class="btn-play"
+    :style="{ backgroundColor: props.bgColor }"
+    @click="handlePlayClick"
+  >
     <AtomsIconsArrowRightFill />
     <span class="sr-only">Play</span>
   </button>
@@ -24,8 +29,8 @@ const handlePlayClick = () => {
 
 <style scoped>
 .btn-play {
-  @apply relative flex items-center justify-center w-[60px] h-[60px] bg-[image:var(--video-play)] bg-cover bg-center bg-no-repeat md:w-[80px] md:h-[80px]
-  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.05)] before:rounded-full
+  @apply relative flex items-center justify-center rounded-full w-[60px] h-[60px] md:w-[80px] md:h-[80px]
+  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.5)] before:rounded-full
   after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-[50%] after:opacity-0 after:transition-opacity after:duration-300 after:ease-in-out
   hover:after:opacity-10;
 }

layers/components/blocks/Pagination.vue

@@ -105,7 +105,7 @@ const handlePagination = (page: number) => {
             :class="[
               '!w-full !h-full p-0 rounded-full text-center text-[14px] font-[500] leading-[24px] tracking-[-0.42px]',
               page === currentPage
-                ? '!bg-[#C7AE8B] !text-white cursor-default'
+                ? '!bg-[var(--primary)] !text-white cursor-default'
                 : '',
             ]"
             @click="handlePagination(page)"

layers/components/blocks/slide/Arrows.vue

@@ -10,9 +10,12 @@ const props = defineProps<Props>()
 const { locale } = useI18n()
 const { sendLog } = useAnalytics()
 
-const arrowBgColor = computed(() => {
-  return getColorCodeFromData(props.arrowsData?.[0]?.display, 'none')
-})
+const getArrowBgColor = (direction: 'prev' | 'next') => {
+  return getColorCodeFromData(
+    props.arrowsData?.[direction === 'prev' ? 0 : 1]?.display,
+    'none'
+  )
+}
 
 const handleArrowClick = (direction: 'prev' | 'next') => {
   if (props.arrowsData) {
@@ -27,18 +30,18 @@ const handleArrowClick = (direction: 'prev' | 'next') => {
     <AtomsButtonCircle
       sr-only="Previous"
       class="splide-arrow splide__arrow--prev"
-      :style="{ backgroundColor: arrowBgColor }"
+      :style="{ backgroundColor: getArrowBgColor('prev') }"
       @click="handleArrowClick('prev')"
     >
-      <AtomsIconsArrowRightLine />
+      <AtomsIconsArrowRightLine color="#ffffff" />
     </AtomsButtonCircle>
     <AtomsButtonCircle
       sr-only="Next"
       class="splide-arrow splide__arrow--next"
-      :style="{ backgroundColor: arrowBgColor }"
+      :style="{ backgroundColor: getArrowBgColor('next') }"
       @click="handleArrowClick('next')"
     >
-      <AtomsIconsArrowRightLine />
+      <AtomsIconsArrowRightLine color="#ffffff" />
     </AtomsButtonCircle>
   </div>
 </template>

layers/components/widgets/VideoPlay.vue

@@ -7,6 +7,10 @@ const props = defineProps<{
 
 const modalStore = useModalStore()
 
+const bgColor = computed(() => {
+  return getColorCodeFromData(props.resourcesData.display, 'none')
+})
+
 // 비디오 플레이 버튼 클릭 핸들러
 const handleVideoPlayClick = () => {
   const youtubeUrl = props.resourcesData?.display?.text ?? ''
@@ -18,6 +22,7 @@ const handleVideoPlayClick = () => {
 
 <template>
   <AtomsButtonPlay
+    :bg-color="bgColor"
     :tracking="props.resourcesData.tracking"
     @click="handleVideoPlayClick"
   />

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)
 
@@ -289,21 +284,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)"
             />

layers/types/api/pageData.ts

@@ -91,7 +91,9 @@ export interface PageDataResourceGroupBtnInfo extends ColorObject {
 
 // 리소스 그룹 타입
 export interface PageDataResourceGroupDisplay extends ColorObject {
-  text: string
+  text?: string
+  color_code?: string
+  color_name?: string
 }
 
 export interface PageDataResourceGroup {

layers/utils/styleUtil.ts

@@ -31,7 +31,7 @@ const getColorCode = ({
  * @returns 색상 값
  */
 export const getColorCodeFromData = (
-  data: ColorObject,
+  data: ColorObject | undefined,
   type: 'btn' | 'txt' | 'none' = 'txt'
 ) => {
   const suffixMap: Record<'btn' | 'txt' | 'none', string> = {