fix. GR_VISUAL_01 템플릿 수정

This commit is contained in:
clkim
2025-09-18 20:38:59 +09:00
parent 1667e0f22b
commit 792111f47b
6 changed files with 62 additions and 27 deletions

View File

@@ -35,8 +35,8 @@
<!-- 유튜브 영상 컨테이너 -->
<div class="relative w-full h-full">
<iframe
v-if="youtubeId"
:src="`https://www.youtube.com/embed/${youtubeId}?autoplay=1&rel=0`"
v-if="embedUrl"
:src="embedUrl"
class="absolute top-0 left-0 w-full h-full"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -52,7 +52,7 @@
<script setup lang="ts">
interface Props {
isOpen: boolean
youtubeId: string
youtubeUrl: string
title?: string
description?: string
closeOnBackdrop?: boolean
@@ -64,7 +64,7 @@ interface Emits {
const props = withDefaults(defineProps<Props>(), {
isOpen: false,
youtubeId: '',
youtubeUrl: '',
title: '',
description: '',
closeOnBackdrop: true,
@@ -72,6 +72,30 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits<Emits>()
// YouTube URL을 임베드 가능한 형태로 변환
const embedUrl = computed(() => {
if (!props.youtubeUrl) return ''
// YouTube Shorts URL 처리
if (props.youtubeUrl.includes('/shorts/')) {
const videoId = props.youtubeUrl.split('/shorts/')[1]?.split('?')[0]
return `https://www.youtube.com/embed/${videoId}`
}
// 일반 YouTube URL 처리
if (props.youtubeUrl.includes('youtube.com/watch?v=')) {
const videoId = props.youtubeUrl.split('v=')[1]?.split('&')[0]
return `https://www.youtube.com/embed/${videoId}`
}
// 이미 임베드 URL인 경우
if (props.youtubeUrl.includes('youtube.com/embed/')) {
return props.youtubeUrl
}
return props.youtubeUrl
})
// ESC 키로 모달 닫기
const handleKeydown = (event: KeyboardEvent) => {
if (event.key === 'Escape' && props.isOpen) {