fix. [PWT-157] 공식 영상 > 추쳔 영상 컨텐츠 1개 상태에서 인디케이터 노출 오류

This commit is contained in:
clkim
2025-12-02 11:08:57 +09:00
parent b8a722fcb2
commit 7dcd02ab6e

View File

@@ -145,40 +145,39 @@ const handleLoadMoreRecent = () => {
:drag="false"
@move="handleSplideMove"
>
<template
<SplideSlide
v-for="(item, index) in recommendedVideos"
:key="`recommended-${item.url}-${index}`"
@click="handleVideoClick(item.url)"
>
<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]"
<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]"
>
<img
:src="getYouTubeThumbnail(item.url, 'maxres')"
:alt="item.title || 'Video thumbnail'"
loading="lazy"
decoding="async"
class="w-full h-full object-cover"
/>
</div>
<div
class="w-full mx-[8px] pb-[20px] border-b border-[rgba(0,0,0,0.08)] 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]"
>
<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]"
>
<img
:src="getYouTubeThumbnail(item.url, 'maxres')"
:alt="item.title || 'Video thumbnail'"
loading="lazy"
decoding="async"
class="w-full h-full object-cover"
/>
</div>
<div
class="w-full mx-[8px] pb-[20px] border-b border-[rgba(0,0,0,0.08)] 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]"
{{ item.title || '' }}
</h4>
<p
class="mt-2 text-[14px] leading-[24px] tracking-[-0.42px] text-[#999] sm:mt-3.5 md:mt-4 md:text-[18px] md:font-[500] md:leading-[26px] md:tracking-[-0.54px] lg:mt-5 lg:text-[20px] lg:leading-[30px] lg:tracking-[-0.6px]"
>
<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]"
>
{{ item.title || '' }}
</h4>
<p
class="mt-2 text-[14px] leading-[24px] tracking-[-0.42px] text-[#999] sm:mt-3.5 md:mt-4 md:text-[18px] md:font-[500] md:leading-[26px] md:tracking-[-0.54px] lg:mt-5 lg:text-[20px] lg:leading-[30px] lg:tracking-[-0.6px]"
>
{{ globalDateFormat(item.reg_dt, locale) }}
</p>
</div>
</SplideSlide>
</template>
{{ globalDateFormat(item.reg_dt, locale) }}
</p>
</div>
</SplideSlide>
</BlocksSlideFade>
<div class="splide-pagination">
<div v-if="recommendedVideos.length > 1" class="splide-pagination">
<span class="font-[700] text-[#1F1F1F]">
{{ currentRecommendedIndex }}
</span>