58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import YouTubeModal from "#layers/components/molecules/modal/YouTubeModal.vue";
|
|
|
|
interface Props {
|
|
components: Record<string, any>;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
console.log("components:", props.components);
|
|
|
|
// 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>
|
|
<div
|
|
class="relative flex flex-col items-center justify-center h-[640px] lg:h-[1000px] gap-4"
|
|
>
|
|
<TemplatesMainTitle
|
|
v-if="props.components.mainTitle"
|
|
:component-data="props.components.mainTitle"
|
|
class="w-[355px] lg:w-[944px]"
|
|
/>
|
|
<TemplatesDescription
|
|
v-if="props.components.description"
|
|
:component-data="props.components.description"
|
|
/>
|
|
<TemplatesVideoPlay
|
|
v-if="props.components.videoPlay"
|
|
:component-data="props.components.videoPlay"
|
|
@click="handleVideoPlayClick"
|
|
/>
|
|
</div>
|
|
|
|
<!-- YouTube 모달 -->
|
|
<YouTubeModal
|
|
:is-open="isYouTubeModalOpen"
|
|
:youtube-id="youtubeVideoId"
|
|
@close="handleCloseModal"
|
|
@update:is-open="isYouTubeModalOpen = $event"
|
|
/>
|
|
</template>
|