79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { getYouTubeUrl } from '@/layers/utils/youtubeUtil'
|
|
|
|
const modalStore = useModalStore()
|
|
const scrollStore = useScrollStore()
|
|
|
|
const { youtube } = modalStore
|
|
|
|
const youtubeUrl = computed(() => {
|
|
return getYouTubeUrl(youtube.storeYoutubeUrl)
|
|
})
|
|
|
|
const handleClose = () => {
|
|
youtube.storeIsOpen = false
|
|
scrollStore.controlScrollLock(false)
|
|
}
|
|
|
|
const handleKeydown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape' && youtube.storeIsOpen) {
|
|
handleClose()
|
|
}
|
|
}
|
|
|
|
const handleOutsideClick = () => {
|
|
if (youtube.storeIsOutsideClose) handleClose()
|
|
}
|
|
|
|
// 키보드 이벤트 리스너 등록/해제
|
|
onMounted(() => {
|
|
document.addEventListener('keydown', handleKeydown)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('keydown', handleKeydown)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="fade">
|
|
<div
|
|
v-if="youtube.storeIsOpen"
|
|
:class="['modal-wrap', 'dimmed', youtube.storeModalName]"
|
|
@click="handleOutsideClick"
|
|
>
|
|
<div
|
|
class="relative sm:m-5"
|
|
style="width: min(944px, 100%, calc((90vh - 2rem) * 16 / 9))"
|
|
@click.stop
|
|
>
|
|
<!-- 헤더 -->
|
|
<div class="flex justify-end mb-3 md:mb-4">
|
|
<button type="button" @click="handleClose">
|
|
<AtomsIconsCloseLine />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 유튜브 영상 컨테이너 -->
|
|
<div class="relative w-full aspect-video">
|
|
<iframe
|
|
v-if="youtubeUrl"
|
|
:src="youtubeUrl"
|
|
class="absolute top-0 left-0 w-full h-full"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|
allowfullscreen
|
|
title="YouTube video player"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.modal-wrap {
|
|
@apply overflow-hidden flex items-center justify-center;
|
|
}
|
|
</style>
|