From 73adfc9769d198d67912bffc443d66b5c01a1989 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Wed, 3 Dec 2025 12:30:57 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20[=EB=94=94=EC=9E=90=EC=9D=B8QA]=20?=
 =?UTF-8?q?=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=20hover=20=ED=9A=A8=EA=B3=BC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/blocks/CardNews.vue | 15 +++++++++++++--
 layers/templates/FxVideo01/index.vue  | 18 ++++++++++++++----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/layers/components/blocks/CardNews.vue b/layers/components/blocks/CardNews.vue
index 813dcd8..5cc6959 100644
--- a/layers/components/blocks/CardNews.vue
+++ b/layers/components/blocks/CardNews.vue
@@ -33,7 +33,14 @@ const handleLinkClick = (title: string) => {
 </script>
 
 <template>
-  <div :class="['card-news', { 'no-image': isNoImage }, props.class]">
+  <div
+    :class="[
+      'card-news',
+      { 'no-image': isNoImage },
+      { 'is-clickable': props.url },
+      props.class,
+    ]"
+  >
     <img
       v-if="props.imgPath"
       :src="props.imgPath"
@@ -68,6 +75,10 @@ const handleLinkClick = (title: string) => {
   after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
   after:border after:border-white/10 after:rounded-lg;
 }
+.card-news.is-clickable:hover .card-image,
+.card-news.is-clickable:hover .card-stove {
+  @apply scale-110;
+}
 .card-image {
   @apply transition-transform duration-300 w-full h-full object-cover;
 }
@@ -85,7 +96,7 @@ const handleLinkClick = (title: string) => {
 }
 
 .card-stove {
-  @apply relative w-full h-full bg-[#333333];
+  @apply relative w-full h-full bg-[#333333] transition-transform duration-300;
 }
 .card-stove svg {
   @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
diff --git a/layers/templates/FxVideo01/index.vue b/layers/templates/FxVideo01/index.vue
index fec4743..7fe6822 100644
--- a/layers/templates/FxVideo01/index.vue
+++ b/layers/templates/FxVideo01/index.vue
@@ -41,6 +41,8 @@ const { tm, locale } = useI18n({
   messages: Object(resultGetMultilingual?.value?.multilingual),
 })
 
+const recommendHover = ref(false)
+
 const backgroundData = computed(() =>
   getComponentGroup(props.components, 'background')
 )
@@ -152,7 +154,7 @@ const handleLoadMoreRecent = () => {
             :key="`recommended-${item.url}-${index}`"
           >
             <div
-              class="overflow-hidden relative aspect-[16/9] flex-shrink-0 w-full rounded-[4px] cursor-pointer sm:w-[60.3%] sm:rounded-[8px] md:w-[56%] lg:w-[710px] lg:rounded-[12px]"
+              class="overflow-hidden relative aspect-[16/9] flex-shrink-0 w-full rounded-[4px] cursor-pointer group sm:w-[60.3%] sm:rounded-[8px] md:w-[56%] lg:w-[710px] lg:rounded-[12px]"
               @click="handleVideoClick(item.url)"
             >
               <img
@@ -160,7 +162,10 @@ const handleLoadMoreRecent = () => {
                 :alt="item.title || 'Video thumbnail'"
                 loading="lazy"
                 decoding="async"
-                class="w-full h-full object-cover"
+                :class="[
+                  'w-full h-full object-cover group-hover:scale-110 transition-transform duration-300',
+                  { 'is-hover': recommendHover },
+                ]"
               />
               <AtomsIconsPlayRoundFill
                 class="drop-shadow-[0_0_6px_rgba(0,0,0,0.25)] absolute bottom-[14px] right-[14px] w-[20px] h-[20px] sm:bottom-[18px] sm:right-[18px] md:bottom-[23px] md:right-[23px] md:w-[33px] md:h-[33px]"
@@ -169,6 +174,8 @@ const handleLoadMoreRecent = () => {
             <div
               class="w-full mx-[8px] pb-[20px] border-b border-[rgba(0,0,0,0.08)] cursor-pointer sm:mx-[0] sm:pt-[12px] sm:pr-[16px] sm:pb-[0] sm:border-none md:pt-[20px] md:pr-[28px] lg:pt-[40px] lg:pr-[48px]"
               @click="handleVideoClick(item.url)"
+              @mouseenter="recommendHover = true"
+              @mouseleave="recommendHover = false"
             >
               <h4
                 class="h-[52px] text-[18px] font-[700] leading-[26px] tracking-[-0.54px] text-[#1F1F1F] line-clamp-2 sm:h-[auto] sm:text-[20px] sm:leading-[30px] sm:tracking-[-0.6px] sm:line-clamp-3 md:text-[32px] md:leading-[44px] md:tracking-[-0.96px]"
@@ -199,7 +206,7 @@ const handleLoadMoreRecent = () => {
           <li
             v-for="(item, index) in visibleVideos"
             :key="`recent-${item.url}-${index}`"
-            class="p-3 rounded-[12px] bg-white md:p-4 md:rounded-[16px] lg:p-5 cursor-pointer"
+            class="p-3 rounded-[12px] bg-white md:p-4 md:rounded-[16px] lg:p-5 group cursor-pointer"
             @click="handleVideoClick(item.url)"
           >
             <div
@@ -210,7 +217,7 @@ const handleLoadMoreRecent = () => {
                 :alt="item.title || 'Video thumbnail'"
                 loading="lazy"
                 decoding="async"
-                class="w-full h-full object-cover"
+                class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
               />
               <AtomsIconsPlayRoundFill
                 class="drop-shadow-[0_0_6px_rgba(0,0,0,0.25)] absolute bottom-[14px] right-[14px] w-[20px] h-[20px]"
@@ -278,4 +285,7 @@ const handleLoadMoreRecent = () => {
   md:bottom-[47px] md:left-[calc(56%+167px)] md:right-[unset] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px]
   lg:bottom-[71px] lg:left-[918px];
 }
+.is-hover {
+  @apply scale-110;
+}
 </style>