fix. 비디오 유튜브 팝업 추가

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] 

layers/utils/styleUtil.ts

@@ -156,7 +156,7 @@ export const getPaginationClass = (
  */
 export const getMediaImgSrc = (
   resourceGroups: PageDataResourceGroup,
-  quality
+  quality?
 ): string => {
   if (!resourceGroups) return ''