fix. [SWV-865] 영상재생 버튼 개선

Made-with: Cursor

layers/components/atoms/Button/Circle.vue

@@ -3,7 +3,7 @@ interface props {
   type?: 'button' | 'link'
   to?: string
   target?: '_self' | '_blank'
-  bgColor?: string
+  backgroundColor?: string
   srOnly?: string
 }
 
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<props>(), {
   type: 'button',
   to: '',
   target: '_self',
-  bgColor: '',
+  backgroundColor: '',
   srOnly: '',
 })
 
@@ -34,8 +34,8 @@ const componentProps = computed(() => {
 
 const buttonStyle = computed(() => {
   const style: Record<string, string> = {}
-  if (props.bgColor) {
-    style.backgroundColor = props.bgColor
+  if (props.backgroundColor) {
+    style.backgroundColor = props.backgroundColor
   }
   return style
 })

layers/components/atoms/Button/Play.vue

@@ -2,27 +2,33 @@
 import type { TrackingObject } from '#layers/types/api/common'
 
 interface Props {
-  bgColor?: string
+  category?: 'system' | 'image'
+  backgroundColor?: string
   tracking: TrackingObject
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), { category: 'system' })
 
 const { locale } = useI18n()
 const { sendLog } = useAnalytics()
 
-const handlePlayClick = () => {
-  sendLog(locale.value, props.tracking)
-}
+const buttonClasses = computed(() => [
+  'btn-play',
+  props.category === 'system' ? 'play-icon' : 'play-image',
+])
+
+const buttonStyle = computed(() =>
+  props.category === 'system' && props.backgroundColor
+    ? { backgroundColor: props.backgroundColor }
+    : {}
+)
+
+const onClick = () => sendLog(locale.value, props.tracking)
 </script>
 
 <template>
-  <button
-    class="btn-play"
-    :style="{ backgroundColor: props.bgColor }"
-    @click="handlePlayClick"
-  >
-    <span class="icon">
+  <button :class="buttonClasses" :style="buttonStyle" @click="onClick">
+    <span v-if="props.category === 'system'" class="icon">
       <AtomsIconsArrowRightFill />
     </span>
     <span class="sr-only">Play</span>
@@ -31,15 +37,35 @@ const handlePlayClick = () => {
 
 <style scoped>
 .btn-play {
-  @apply relative flex items-center justify-center rounded-full w-[60px] h-[60px] md:w-[80px] md:h-[80px]
+  @apply relative flex items-center justify-center;
+}
+
+.play-icon {
+  @apply w-[60px] h-[60px] md:w-[80px] md:h-[80px] rounded-full
   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;
 }
-.btn-play:hover .icon {
+.play-icon:hover .icon {
   @apply scale-[1.08];
 }
 .icon {
   @apply transition-transform duration-300 ease-spring;
 }
+
+.play-image {
+  @apply w-[69px] h-[69px] md:w-[110px] md:h-[110px];
+}
+.play-image::before {
+  @apply content-[''] absolute inset-0 z-0 bg-no-repeat bg-center bg-cover bg-[url(/images/common/btn_play/btn_default.png)] transition-opacity duration-300 ease-out;
+}
+.play-image::after {
+  @apply content-[''] absolute inset-0 z-0 bg-no-repeat bg-center bg-cover bg-[url(/images/common/btn_play/btn_hover.png)] opacity-0 transition-opacity duration-300 ease-out;
+}
+.play-image:hover::before {
+  @apply opacity-0;
+}
+.play-image:hover::after {
+  @apply opacity-100;
+}
 </style>

layers/components/blocks/Button/Home.vue

@@ -17,7 +17,7 @@ const analytics = {
     type="link"
     to="/home"
     class="btn-home"
-    bg-color="rgb(0 0 0 / 0.2)"
+    background-color="rgb(0 0 0 / 0.2)"
     @click="sendLog(locale, analytics)"
   >
     <AtomsIconsHomeFill />

layers/components/blocks/Button/ScrollTop.vue

@@ -34,7 +34,7 @@ const handleScrollToTop = () => {
       v-show="showBtn"
       class="btn-top"
       sr-only="top"
-      :bg-color="backgroundColor"
+      :background-color="backgroundColor"
       @click="handleScrollToTop"
     >
       <AtomsIconsArrowControlTopLine />

layers/components/blocks/Button/SlideArrows.vue

@@ -32,7 +32,7 @@ const handleArrowClick = (direction: 'prev' | 'next') => {
     <AtomsButtonCircle
       sr-only="Previous"
       class="splide-arrow splide__arrow--prev"
-      :bg-color="getArrowBgColor('prev')"
+      :background-color="getArrowBgColor('prev')"
       @click="handleArrowClick('prev')"
     >
       <AtomsIconsArrowRightLine color="#ffffff" />
@@ -40,7 +40,7 @@ const handleArrowClick = (direction: 'prev' | 'next') => {
     <AtomsButtonCircle
       sr-only="Next"
       class="splide-arrow splide__arrow--next"
-      :bg-color="getArrowBgColor('next')"
+      :background-color="getArrowBgColor('next')"
       @click="handleArrowClick('next')"
     >
       <AtomsIconsArrowRightLine color="#ffffff" />

layers/components/blocks/Sns.vue

@@ -48,7 +48,7 @@ const handleCopy = async () => {
         v-show="!showSnsList"
         class="btn-more"
         sr-only="sns"
-        :bg-color="snsBackgroundColor"
+        :background-color="snsBackgroundColor"
         @click="handleControlForce(true)"
       >
         <AtomsIconsShareLine class="icon-share" />

layers/components/layouts/EventNavigation.vue

@@ -72,7 +72,7 @@ onMounted(async () => {
       <AtomsButtonCircle
         sr-only="event navigation control"
         class="btn-control"
-        bg-color="rgb(0 0 0 / 0.2)"
+        background-color="rgb(0 0 0 / 0.2)"
         @click="toggleEventNavigation"
       >
         <AtomsIconsArrowRightLine color="#ffffff" />

layers/components/widgets/VideoPlay.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
-const props = defineProps<{
+interface Props {
+  category?: 'system' | 'image'
   resourcesData: PageDataResourceGroup
-}>()
+}
+
+const props = defineProps<Props>()
 
 const modalStore = useModalStore()
 
-const bgColor = computed(() => {
+const backgroundColor = computed(() => {
   return getColorCodeFromData(props.resourcesData.display, 'none')
 })
 
@@ -23,7 +26,8 @@ const handleVideoPlayClick = () => {
 <template>
   <AtomsButtonPlay
     v-motion-stagger
-    :bg-color="bgColor"
+    :category="props.category"
+    :background-color="backgroundColor"
     :tracking="props.resourcesData.tracking"
     @click="handleVideoPlayClick"
   />

layers/templates/GrGallery01/index.vue

@@ -119,7 +119,10 @@ onBeforeUnmount(() => {
             <AtomsButtonPlay
               v-if="playingSlideIndex !== index"
               class="btn-play"
-              :bg-color="getColorCodeFromData(videoPlayData?.display, 'none')"
+              variant="videoPlay"
+              :background-color="
+                getColorCodeFromData(videoPlayData?.display, 'none')
+              "
               :tracking="getVideoPlayTracking(item?.group_label)"
               @click="handleVideoClick(index)"
             />

layers/templates/GrVisual01/index.vue

@@ -22,6 +22,10 @@ const descriptionData = computed(() =>
 const videoPlayData = computed(() =>
   getComponentGroup(props.components, 'videoPlay')
 )
+// [TODO] api 수정 후 사용
+// const videoPlayData = computed(() =>
+//   getComponentGroup(props.components, 'videoPlayImg')
+// )
 const buttonListData = computed(() =>
   getComponentGroupAry(props.components, 'buttonList')
 )
@@ -32,7 +36,7 @@ const buttonListData = computed(() =>
     <WidgetsBackground
       v-if="backgroundData"
       :resources-data="backgroundData"
-      gradient="h-[342px] bg-[linear-gradient(180deg,rgba(16,13,15,0)_0%,#100D0F_90%)] md:h-[720px]"
+      gradient="h-[208px] bg-[linear-gradient(180deg,rgba(16,13,15,0)_0%,#100D0F_90%)] md:h-[350px]"
     />
     <div class="content-standard gap-4 md:gap-5">
       <WidgetsMainTitle
@@ -45,7 +49,11 @@ const buttonListData = computed(() =>
         :resources-data="descriptionData"
         class="w-full max-w-[355px] md:max-w-[944px]"
       />
-      <WidgetsVideoPlay v-if="videoPlayData" :resources-data="videoPlayData" />
+      <WidgetsVideoPlay
+        v-if="videoPlayData"
+        category="image"
+        :resources-data="videoPlayData"
+      />
       <WidgetsButtonList
         v-if="buttonListData"
         :resources-data="buttonListData"

layers/templates/GrVisual02/index.vue

@@ -34,8 +34,12 @@ const descriptionData = computed(() =>
   getComponentGroup(props.components, 'description')
 )
 const videoPlayData = computed(() =>
-  getComponentGroup(props.components, 'videoPlay')
+  getComponentGroup(props.components, 'videoPlayImg')
 )
+// [TODO] api 수정 후 사용
+// const videoPlayData = computed(() =>
+//   getComponentGroup(props.components, 'videoPlayImg')
+// )
 const arrowsData = computed(() =>
   getComponentGroupAry(props.components, 'arrow')
 )
@@ -99,7 +103,11 @@ const slideItemSize = {
         :resources-data="descriptionData"
         class="w-full max-w-[355px] mx-[20px] sm:mx-[40px] md:max-w-[944px]"
       />
-      <WidgetsVideoPlay v-if="videoPlayData" :resources-data="videoPlayData" />
+      <WidgetsVideoPlay
+        v-if="videoPlayData"
+        category="image"
+        :resources-data="videoPlayData"
+      />
       <WidgetsSlideCenterHighlight
         v-if="slideData && slideData.length > 0"
         v-motion-stagger