From 924c63ec4c3e89e6b4ab8de16a243de58e7aea16 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Thu, 20 Nov 2025 10:27:06 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20=EB=B9=84=EB=94=94=EC=98=A4=20=EC=9C=A0?=
 =?UTF-8?q?=ED=8A=9C=EB=B8=8C=20=ED=8C=9D=EC=97=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/templates/FxVideo01/index.vue | 12 +++++++++---
 layers/utils/styleUtil.ts            |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/layers/templates/FxVideo01/index.vue b/layers/templates/FxVideo01/index.vue
index 4da1f5c..aaf4e8b 100644
--- a/layers/templates/FxVideo01/index.vue
+++ b/layers/templates/FxVideo01/index.vue
@@ -19,6 +19,7 @@ interface Props {
 const props = defineProps<Props>()
 
 const pageDataStore = usePageDataStore()
+const modalStore = useModalStore()
 const breakpoints = useResponsiveBreakpoints()
 const { getOperateResources } = useOperateResources()
 
@@ -111,6 +112,10 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
   currentRecommendedIndex.value = newIndex + 1
 }
 
+const handleVideoClick = (url: string) => {
+  modalStore.handleOpenYoutube({ youtubeUrl: url })
+}
+
 const handleLoadMoreRecent = () => {
   if (hasMore.value) {
     currentRecentPage.value++
@@ -144,7 +149,7 @@ const handleLoadMoreRecent = () => {
             v-for="(item, index) in recommendedVideos"
             :key="`recommended-${item.url}-${index}`"
           >
-            <SplideSlide>
+            <SplideSlide @click="handleVideoClick(item.url)">
               <div
                 class="overflow-hidden aspect-[16/9] flex-shrink-0 w-full rounded-[4px] sm:w-[60.3%] sm:rounded-[8px] md:w-[56%] lg:w-[710px] lg:rounded-[12px]"
               >
@@ -189,7 +194,8 @@ 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"
+            class="p-3 rounded-[12px] bg-white md:p-4 md:rounded-[16px] lg:p-5 cursor-pointer"
+            @click="handleVideoClick(item.url)"
           >
             <div
               class="overflow-hidden aspect-[16/9] w-full rounded-[4px] sm:rounded-[8px] lg:rounded-[12px]"
@@ -256,7 +262,7 @@ const handleLoadMoreRecent = () => {
   lg:left-[850px];
 }
 .splide__slide {
-  @apply flex flex-col p-3 gap-4 sm:flex-row sm:gap-6 md:gap-10 md:p-4 lg:gap-[60px] lg:p-5;
+  @apply flex flex-col p-3 gap-4 sm:flex-row sm:gap-6 md:gap-10 md:p-4 lg:gap-[60px] lg:p-5 cursor-pointer;
 }
 .splide-pagination {
   @apply absolute bottom-[28px] left-[80px] right-[80px] text-center font-[500] text-[16px] leading-[24px] tracking-[-0.48px] text-[#999] 
diff --git a/layers/utils/styleUtil.ts b/layers/utils/styleUtil.ts
index e770844..5cc9f39 100644
--- a/layers/utils/styleUtil.ts
+++ b/layers/utils/styleUtil.ts
@@ -156,7 +156,7 @@ export const getPaginationClass = (
  */
 export const getMediaImgSrc = (
   resourceGroups: PageDataResourceGroup,
-  quality
+  quality?
 ): string => {
   if (!resourceGroups) return ''