35 lines
1.1 KiB
Vue
35 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { getResponsiveSrc, getResponsiveClass } from '#layers/utils/dataUtil'
|
|
import type { PageDataResourceGroup } from '#layers/types/api/pageData'
|
|
|
|
const props = defineProps<{ resourcesData: PageDataResourceGroup }>()
|
|
|
|
const bgStyles = getResponsiveSrc(props.resourcesData?.res_path, {
|
|
resourcesType: 'bg',
|
|
})
|
|
|
|
// YouTube 모달 스토어 사용
|
|
const modalStore = useModalStore()
|
|
|
|
// 비디오 플레이 버튼 클릭 핸들러
|
|
const handleVideoPlayClick = () => {
|
|
const youtubeUrl = props.resourcesData?.display?.text ?? ''
|
|
modalStore.handleOpenYoutube({ youtubeUrl })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
v-if="resourcesData && bgStyles"
|
|
class="relative group bg-cover bg-center bg-no-repeat w-[66px] h-[66px] sm:w-[100px] sm:h-[100px]"
|
|
:class="getResponsiveClass()"
|
|
:style="bgStyles"
|
|
@click="handleVideoPlayClick"
|
|
>
|
|
<span
|
|
class="absolute inset-0 m-[10px] bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300 ease-in-out rounded-[50%]"
|
|
/>
|
|
<span class="sr-only">videoPlay</span>
|
|
</button>
|
|
</template>
|