From dcad642b5943bed1594559e05660ed20d5fa8416 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Fri, 16 Jan 2026 13:43:25 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20videoPlay,=20arrow=20=EB=B0=B0=EA=B2=BD?=
 =?UTF-8?q?=EC=83=89=EC=83=81=20=EC=96=B4=EB=93=9C=EB=AF=BC=20=EC=A7=80?=
 =?UTF-8?q?=EC=A0=95=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/atoms/Button/Play.vue       |  11 +++++--
 layers/components/blocks/Pagination.vue       |   2 +-
 layers/components/blocks/slide/Arrows.vue     |  17 +++++-----
 layers/components/widgets/VideoPlay.vue       |   5 +++
 layers/templates/FxVideo01/index.vue          |  29 +++++++-----------
 layers/templates/GrGallery01/index.vue        |   4 +++
 layers/types/api/pageData.ts                  |   4 ++-
 layers/utils/styleUtil.ts                     |   2 +-
 .../images/common/btn_system_arrow_next.png   | Bin 1543 -> 0 bytes
 .../images/common/btn_system_arrow_prev.png   | Bin 1530 -> 0 bytes
 10 files changed, 43 insertions(+), 31 deletions(-)
 delete mode 100644 public/images/common/btn_system_arrow_next.png
 delete mode 100644 public/images/common/btn_system_arrow_prev.png

diff --git a/layers/components/atoms/Button/Play.vue b/layers/components/atoms/Button/Play.vue
index b9a28a7..eedc27d 100644
--- a/layers/components/atoms/Button/Play.vue
+++ b/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;
 }
diff --git a/layers/components/blocks/Pagination.vue b/layers/components/blocks/Pagination.vue
index 8da3ef9..64e968b 100644
--- a/layers/components/blocks/Pagination.vue
+++ b/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)"
diff --git a/layers/components/blocks/slide/Arrows.vue b/layers/components/blocks/slide/Arrows.vue
index 5f06b6d..b96e7a9 100644
--- a/layers/components/blocks/slide/Arrows.vue
+++ b/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>
diff --git a/layers/components/widgets/VideoPlay.vue b/layers/components/widgets/VideoPlay.vue
index c43fbad..853d093 100644
--- a/layers/components/widgets/VideoPlay.vue
+++ b/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"
   />
diff --git a/layers/templates/FxVideo01/index.vue b/layers/templates/FxVideo01/index.vue
index ef58f35..7c4f505 100644
--- a/layers/templates/FxVideo01/index.vue
+++ b/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];
diff --git a/layers/templates/GrGallery01/index.vue b/layers/templates/GrGallery01/index.vue
index 6254af2..79daa77 100644
--- a/layers/templates/GrGallery01/index.vue
+++ b/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)"
             />
diff --git a/layers/types/api/pageData.ts b/layers/types/api/pageData.ts
index e466311..43bd0e7 100644
--- a/layers/types/api/pageData.ts
+++ b/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 {
diff --git a/layers/utils/styleUtil.ts b/layers/utils/styleUtil.ts
index 3d6ea9f..b523c65 100644
--- a/layers/utils/styleUtil.ts
+++ b/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> = {
diff --git a/public/images/common/btn_system_arrow_next.png b/public/images/common/btn_system_arrow_next.png
deleted file mode 100644
index 9782f76f018398caa5be99ef2a86ca73478dbdf8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1543
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

diff --git a/public/images/common/btn_system_arrow_prev.png b/public/images/common/btn_system_arrow_prev.png
deleted file mode 100644
index 68cc5cb712ed13e1b3d6dd1bc7b8f3e6f9f8d1d5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1530
zcmV<W1qJ$vP)<h;3K|Lk000e1NJLTq002+`002-31^@s6juG;$00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1&>KYK~#7F?VUYL
z<46>MU+fd4-0e;x;k*(^+p$NJq%#H5b+8rJEeM(u1xt6`Zo0b)DCj^7-F3Hg*Ik5!
zNGO2oR-&0Ah`RzUCnN|Gf_-mxoJ|}%CXSt%N&HEc^TUt*<#}fO;(1PiL~PrBc6WDY
zKRi5GsZ?qLU$Vpk4QtNh<KvZK7>w5Vl-B>?@0_O7>C;lFbOn+~K@TBewOZ{J?)VG}
zm<5-lu#iand#AYGJ3Ku62tA}H0`vL2jjJ~#4R`Vx#0W(w{tuG4TP~MN5Hqm}6w$VV
zJM=bgX>DM*6j9_3#6;u*6%pr#;kInx;k^zK6RE&Lp)iZ$)*zy`Ee04w9FdU-#5T^t
z)dyT`&;V*9@q=DPkqo-Tgf7YDax1v{12^g==)+6g-uX->^Ix@EJ%ug^9f4vD_m0{+
z&=}nQ^-86(3Lyz4kPcb=1pmZ;{tEg4F^+s4=8*1KplI*@26a1%urOSvI+fUwz&@7e
zz@S5kPZl@;@*Eg+An{282S}a+gC|Nf;0aKN0fQrt;GHCmG=hFGP#~UNto2K8+X=MK
zx3{<Nf_|>;KpGF-d0hPl0}4iAKAX+{kAv;9@6Y(XLG2!X3MUFB1f+obe}x`?^lJ}&
z4`E6Q47xl5J&=PBe(!q<q(c|w%|e2MO_?UIH~b<nu<;x;=!o>{m0JXg?1}{mZY)d`
zw<Jzl1mdBqb#^6A(9McF3Y!FqVT%O`o=}J4jzV_?CT(8;6ork?>jK4Bj}|1fg`!Zn
z;xtC!8_<Bs$w|IQrtYdPP+TdXG)qfMu(`R(m$|t)kOhsAoz8>{q(P$UXB{MOadEN!
ze0+QyWFa~eo?tP=3p1cFZh6<&*RZ|44Ki`g)C}=N*>shcyyfL(xVX3gnK(h05|?6p
z1_kkxcXoCLDv(a6pBv7xtQxAzBW`YPY(vFtvkvkI(=;tZwf0XJc?1UE1a%@mfFkH5
zPrxHkiSeI?@(9bI3%o%xn#$uyk3gN}0YxB4gpvXp%i~BD=mw7lzUYLR$z<MxB<OUE
zggNP{p`js|o}PwEr2?0im!JbAa30sv+QH-FV{IkUm+mBxa{N*|5?v+YK>8C2jBLtP
zH|Qu4x0ef?!pBOS&S@yIWR8rC(6w+sfg<Q65w~;K9336~9v}Y<3Zaq2-_5bHv48LH
z?|%iw&_N<5R98*LSWWg&#t)Sx(){FugM$rzg=#jNeSxbyD2S>Oahv|CR;znlAVy#f
zSM#7KUJ_~9-`@vWU>2)*et!Omp9@pn0a1%US+=&en!d_BIXMAY&>6_l(Gf2#P(O3e
z=kq(D!Q~xJ6jD@5WT#v%FVKVU8eaqr1WFd?u<JZ%${po$xzEXk<$*Aaz8B7urhFjP
z6@Y{wij7a21Y&2hu6k!88Ro9H&?Jy503}iAkC&U4ls-ive4VYB&<yh`o6;gsL}BO}
z0)0%;>&13+<!FAe4GFwV3P#^+ulL%0E4PqzC|_%FQH>eD_kE|k;)(JV<_hodp)$!<
z8DRAN(yoYE+xfyYPZl#Z&q2{lP25ngi}Kpemk#`5eRz2IJ=Il#0fY7#+r7YPZ-D}-
zSEiygFjzwyCiXdyr0hv645BW3;*b>HX(cKB^bH0fN<Vdcb(Z)CQ~lJjh<)i;9{*kF
zf<mD{*_##67#gb3NF!`1<*qNrqe<F2R`?Kgsf*p#RgJ6!C<<KDVaBJRgv&w{B|sy+
z98{DHpjq!0s0pJ?Q<TNJW4WFd+s3z|ZL~lEL~-s7%5_FvHa^x1l4VC^oZ=jMSqh#y
zo0+5(e3yt~-84gfBEpG|)VA&6-}~6>yE{moQ{dd)fkZmD!=MNix5sctDr;Et+hNe{
gF>nl5l6gCfFE&=~xLJvRJ^%m!07*qoM6N<$f_LD({r~^~