49 lines
1.4 KiB
Vue
49 lines
1.4 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 isYouTubeModalOpen = ref(false)
|
|
const youtubeVideoId = ref('')
|
|
|
|
// 비디오 플레이 버튼 클릭 핸들러
|
|
const handleVideoPlayClick = () => {
|
|
// TODO: 실제 YouTube 비디오 ID를 설정해야 합니다
|
|
// 예시: 'dQw4w9WgXcQ' (Rick Astley - Never Gonna Give You Up)
|
|
youtubeVideoId.value = 'UKVsZYHxYTc' // 임시로 설정
|
|
isYouTubeModalOpen.value = true
|
|
}
|
|
|
|
// 모달 닫기 핸들러
|
|
const handleCloseModal = () => {
|
|
isYouTubeModalOpen.value = false
|
|
youtubeVideoId.value = ''
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
v-if="resourcesData"
|
|
class="bg-cover bg-center bg-no-repeat w-[66px] h-[66px] lg:w-[100px] lg:h-[100px]"
|
|
:class="getResponsiveClass"
|
|
:style="bgStyles"
|
|
@click="handleVideoPlayClick"
|
|
>
|
|
<span class="sr-only">videoPlay</span>
|
|
</button>
|
|
|
|
<!-- YouTube 모달 -->
|
|
<BlocksModalYouTube
|
|
:is-open="isYouTubeModalOpen"
|
|
:youtube-id="youtubeVideoId"
|
|
@close="handleCloseModal"
|
|
@update:is-open="(value: boolean) => (isYouTubeModalOpen = value)"
|
|
/>
|
|
</template>
|