317 lines
11 KiB
Vue
317 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { SplideSlide } from '@splidejs/vue-splide'
|
|
import { globalDateFormat } from '@seed-next/date'
|
|
import {
|
|
getComponentGroup,
|
|
getComponentContainer,
|
|
} from '#layers/utils/dataUtil'
|
|
import { getYouTubeThumbnail } from '#layers/utils/youtubeUtil'
|
|
import type { TrackingObject } from '#layers/types/api/common'
|
|
import type {
|
|
PageDataTemplateComponents,
|
|
PageDataResourceGroups,
|
|
} from '#layers/types/api/pageData'
|
|
import type { OperateGroupItem } from '#layers/types/api/operateResources'
|
|
|
|
interface Props {
|
|
id?: string
|
|
components: PageDataTemplateComponents
|
|
pageVerTmplSeq: number
|
|
pageVerTmplNameEn: string
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const pageDataStore = usePageDataStore()
|
|
const modalStore = useModalStore()
|
|
const breakpoints = useResponsiveBreakpoints()
|
|
const { getOperateResources } = useOperateResources()
|
|
const { sendLog } = useAnalytics()
|
|
|
|
const { pageData } = storeToRefs(pageDataStore)
|
|
|
|
// Configuration
|
|
const runtimeConfig = useRuntimeConfig()
|
|
const dataResourcesUrl = runtimeConfig.public.dataResourcesUrl
|
|
const multilingualFileName = 'STOVE_PUBTEMPLATE_homepage_brand_video.json'
|
|
|
|
// Multilingual
|
|
const resultGetMultilingual = await useGetMultilingual({
|
|
baseApiUrl: dataResourcesUrl,
|
|
fileName: multilingualFileName,
|
|
})
|
|
|
|
const { tm, t, locale } = useI18n({
|
|
useScope: 'local',
|
|
messages: Object(resultGetMultilingual?.value?.multilingual),
|
|
})
|
|
|
|
const analytics = {
|
|
action_type: 'click',
|
|
click_sarea: props.pageVerTmplNameEn,
|
|
} as TrackingObject
|
|
const arrowsData: PageDataResourceGroups = ['좌', '우'].map(direction => ({
|
|
display: {
|
|
color_code: '#383838',
|
|
},
|
|
tracking: {
|
|
...analytics,
|
|
click_item: `1. 컨텐츠 리스트 - 네비게이션(${direction})`,
|
|
},
|
|
}))
|
|
|
|
const recommendHover = ref(false)
|
|
|
|
const backgroundData = computed(() =>
|
|
getComponentGroup(props.components, 'background')
|
|
)
|
|
const officialUrlData = computed(
|
|
() => getComponentGroup(props.components, 'officialUrl')?.display?.text ?? ''
|
|
)
|
|
|
|
const { data: slideData } = await useAsyncData(
|
|
`fx-video-01-resources-${pageData.value?.page_seq}-${pageData.value?.page_ver}-${props.pageVerTmplSeq}`,
|
|
async () => {
|
|
if (!pageData.value?.page_seq || !pageData.value?.page_ver) {
|
|
return []
|
|
}
|
|
|
|
const operateGroupList = await getOperateResources({
|
|
pageSeq: pageData.value.page_seq,
|
|
pageVer: pageData.value.page_ver,
|
|
pageVerTmplSeq: props.pageVerTmplSeq,
|
|
langCode: locale.value,
|
|
})
|
|
|
|
const mediaList = getComponentContainer(operateGroupList, 'mediaList', {
|
|
isGroup: true,
|
|
}) as OperateGroupItem[]
|
|
|
|
return mediaList ?? []
|
|
},
|
|
{
|
|
default: () => [],
|
|
server: false,
|
|
}
|
|
)
|
|
|
|
const VIDEO_TYPE = {
|
|
RECOMMENDED: 1,
|
|
RECENT: 0,
|
|
} as const
|
|
const ITEMS_PER_PAGE = {
|
|
MOBILE: 8,
|
|
DESKTOP: 12,
|
|
} as const
|
|
|
|
const currentRecommendedIndex = ref<number | null>(null)
|
|
const currentRecentPage = ref(1)
|
|
|
|
// 추천 영상 (option01 === 1)
|
|
const recommendedVideos = computed(
|
|
() =>
|
|
slideData.value?.filter(item => item.option01 === VIDEO_TYPE.RECOMMENDED) ||
|
|
[]
|
|
)
|
|
// 최근 영상 (option01 === 0)
|
|
const recentVideos = computed(
|
|
() =>
|
|
slideData.value?.filter(item => item.option01 === VIDEO_TYPE.RECENT) || []
|
|
)
|
|
// 페이지당 보여줄 개수 (PC: 12개, Mobile: 8개)
|
|
const itemsPerPage = computed(() =>
|
|
breakpoints.value.isMobile ? ITEMS_PER_PAGE.MOBILE : ITEMS_PER_PAGE.DESKTOP
|
|
)
|
|
const visibleVideos = computed(() => {
|
|
const endIndex = currentRecentPage.value * itemsPerPage.value
|
|
return recentVideos.value.slice(0, endIndex)
|
|
})
|
|
const hasMore = computed(
|
|
() => visibleVideos.value.length < recentVideos.value.length
|
|
)
|
|
|
|
const handleVideoClick = (item: OperateGroupItem) => {
|
|
modalStore.handleOpenYoutube({ youtubeUrl: item.url })
|
|
sendLog(locale.value, { ...analytics, click_item: item.title })
|
|
}
|
|
|
|
const handleLoadMoreRecent = () => {
|
|
if (hasMore.value) {
|
|
currentRecentPage.value++
|
|
|
|
sendLog(locale.value, {
|
|
...analytics,
|
|
click_item: t('Text_More', {}, { locale: 'ko' }),
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<WidgetsFixMainTitle
|
|
:id="props.id"
|
|
:title="tm('Video_Page_Title')"
|
|
:resources-data="backgroundData"
|
|
/>
|
|
<div class="section-container static">
|
|
<section class="section-static">
|
|
<WidgetsFixSubTitle
|
|
:title="tm('Video_Section_Recommendation_Title')"
|
|
:description="tm('Video_Page_Link')"
|
|
:link="officialUrlData"
|
|
:link-analytics="{
|
|
...analytics,
|
|
click_item: t('Video_Page_Link', {}, { locale: 'ko' }),
|
|
}"
|
|
/>
|
|
<div
|
|
class="relative content-static bg-[#fff] rounded-[12px] md:rounded-[16px]"
|
|
>
|
|
<WidgetsSlideFade
|
|
v-model:index="currentRecommendedIndex"
|
|
:autoplay="recommendedVideos.length > 1"
|
|
:interval="3000"
|
|
:arrows="recommendedVideos.length > 1"
|
|
:arrows-data="arrowsData"
|
|
:pagination="false"
|
|
:drag="false"
|
|
>
|
|
<SplideSlide
|
|
v-for="(item, index) in recommendedVideos"
|
|
:key="`recommended-${item.url}-${index}`"
|
|
>
|
|
<div
|
|
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)"
|
|
>
|
|
<img
|
|
:src="getYouTubeThumbnail(item.url, 'maxres')"
|
|
:alt="item.title || 'Video thumbnail'"
|
|
loading="lazy"
|
|
decoding="async"
|
|
: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]"
|
|
/>
|
|
</div>
|
|
<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)"
|
|
@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]"
|
|
>
|
|
{{ 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>
|
|
</WidgetsSlideFade>
|
|
<div v-if="recommendedVideos.length > 1" class="splide-pagination">
|
|
<span class="font-[700] text-[#1F1F1F]">
|
|
{{ currentRecommendedIndex + 1 }}
|
|
</span>
|
|
/
|
|
<span>{{ recommendedVideos.length }}</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="section-static">
|
|
<WidgetsFixSubTitle :title="tm('Video_Section_Recent_Title')" />
|
|
<div class="content-static">
|
|
<ul class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
|
|
<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 group cursor-pointer"
|
|
@click="handleVideoClick(item)"
|
|
>
|
|
<div
|
|
class="overflow-hidden relative aspect-[16/9] w-full rounded-[4px] sm:rounded-[8px] lg:rounded-[12px]"
|
|
>
|
|
<img
|
|
:src="getYouTubeThumbnail(item.url)"
|
|
:alt="item.title || 'Video thumbnail'"
|
|
loading="lazy"
|
|
decoding="async"
|
|
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]"
|
|
/>
|
|
</div>
|
|
<div class="p-2 pt-5 md:p-3 md:pt-5">
|
|
<h4
|
|
class="h-[48px] text-[16px] font-[700] leading-[24px] tracking-[-0.48px] text-[#1F1F1F] line-clamp-2 md:h-[52px] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px]"
|
|
>
|
|
{{ item.title || '' }}
|
|
</h4>
|
|
<p
|
|
class="mt-2 text-[14px] leading-[24px] tracking-[-0.42px] text-[#999] md:text-[16px] md:leading-[26px] md:tracking-[-0.48px]"
|
|
>
|
|
{{ globalDateFormat(item.reg_dt, locale) }}
|
|
</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div v-if="hasMore" class="mt-[40px] flex justify-center md:mt-[80px]">
|
|
<AtomsButton
|
|
type="action"
|
|
button-size="size-small md:size-medium"
|
|
background-color="#383838"
|
|
text-color="#FFFFFF"
|
|
@click="handleLoadMoreRecent"
|
|
>
|
|
{{ tm('Text_More') }}
|
|
</AtomsButton>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.splide {
|
|
@apply pb-[68px] sm:pb-[0];
|
|
}
|
|
|
|
.splide:deep(.splide__arrows) .splide-arrow {
|
|
@apply top-[unset] bottom-[20px] translate-y-0 bg-cover bg-center bg-no-repeat
|
|
sm:bottom-[24px] md:bottom-[36px] lg:bottom-[60px];
|
|
}
|
|
.splide:deep(.splide__arrows) .splide__arrow--prev {
|
|
@apply left-[20px]
|
|
sm:left-[calc(60.3%+21px)]
|
|
md:left-[calc(56%+39px)]
|
|
lg:left-[790px];
|
|
}
|
|
.splide:deep(.splide__arrows) .splide__arrow--next {
|
|
@apply right-[20px]
|
|
sm:right-[28px]
|
|
md:right-[unset] md:left-[calc(56%+99px)]
|
|
lg:left-[850px];
|
|
}
|
|
.splide__slide {
|
|
@apply flex flex-col items-start p-3 gap-4 sm:flex-row sm:gap-6 md:gap-10 md:p-4 lg:gap-[60px] lg:p-5;
|
|
}
|
|
.splide-pagination {
|
|
@apply absolute bottom-[28px] left-[80px] right-[80px] text-center font-[500] text-[16px] leading-[24px] tracking-[-0.48px] text-[#999]
|
|
sm:bottom-[32px] sm:left-[calc(60.3%+73px)] sm:right-[80px]
|
|
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>
|