fix. [PWT-121] 공통 > 액션 버튼 영상 타입 버튼 자동 재생 오류

layers/components/blocks/modal/YouTube.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { getYouTubeEmbedUrl } from '@/layers/utils/youtubeUtil'
+import { getYouTubeUrl } from '@/layers/utils/youtubeUtil'
 
 const modalStore = useModalStore()
 const scrollStore = useScrollStore()
 
 const { youtube } = modalStore
 
-const embedUrl = computed(() => {
-  return getYouTubeEmbedUrl(youtube.storeYoutubeUrl)
+const youtubeUrl = computed(() => {
+  return getYouTubeUrl(youtube.storeYoutubeUrl)
 })
 
 const handleClose = () => {
@@ -60,8 +60,8 @@ onUnmounted(() => {
         <!-- 유튜브 영상 컨테이너 -->
         <div class="relative w-full h-full">
           <iframe
-            v-if="embedUrl"
-            :src="embedUrl"
+            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"

layers/templates/GrGallery01/index.vue

@@ -6,6 +6,7 @@ import {
   getComponentGroup,
   isTypeVideo,
 } from '#layers/utils/dataUtil'
+import { getYouTubeUrl, getYouTubeThumbnail } from '#layers/utils/youtubeUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {
@@ -133,7 +134,7 @@ onBeforeUnmount(() => {
             <transition name="fade">
               <iframe
                 v-if="playingSlideIndex === index"
-                :src="getYouTubeEmbedUrl(item.display?.text, true)"
+                :src="getYouTubeUrl(item.display?.text)"
                 class="video-iframe"
                 frameborder="0"
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

layers/utils/youtubeUtil.ts

@@ -30,27 +30,48 @@ export const getYouTubeId = (url: string): string => {
 }
 
 /**
- * 유튜브 임베드 URL을 생성합니다.
+ * 유튜브 URL을 반환합니다.
  * @param url - 유튜브 URL
  * @param autoplay - 자동재생 여부
  * @param rel - 관련 비디오 표시 여부
  * @returns 임베드 URL
  */
-/** [TODO] 임베드 형태로 넘어오도록 데이터 수정 후 이부분 사용 필요 없음 */
-export const getYouTubeEmbedUrl = (
+export const getYouTubeUrl = (
   url: string,
-  autoplay: boolean = false,
+  autoplay: boolean = true,
   rel: boolean = false
 ): string => {
-  const videoId = getYouTubeId(url)
-  if (!videoId) return ''
+  if (!url) return ''
 
-  const params = new URLSearchParams()
-  if (autoplay) params.append('autoplay', '1')
-  if (!rel) params.append('rel', '0')
+  try {
+    const urlObj = new URL(url)
+    const params = new URLSearchParams(urlObj.searchParams)
 
-  const queryString = params.toString()
-  return `https://www.youtube.com/embed/${videoId}${queryString ? `?${queryString}` : ''}`
+    // 기본 파라미터 보장
+    if (!params.has('autoplay')) {
+      params.set('autoplay', autoplay ? '1' : '0')
+    }
+    if (!params.has('rel')) {
+      params.set('rel', rel ? '1' : '0')
+    }
+
+    const baseUrl = (() => {
+      const isEmbedUrl = urlObj.pathname.startsWith('/embed/')
+      if (isEmbedUrl) {
+        return `${urlObj.origin}${urlObj.pathname}`
+      }
+
+      // 일반 URL이면 id 추출 후 embed URL로 변환
+      const youtubeId = getYouTubeId(url)
+      if (!youtubeId) return ''
+      return `https://www.youtube.com/embed/${youtubeId}`
+    })()
+
+    const queryString = params.toString()
+    return queryString ? `${baseUrl}?${queryString}` : baseUrl
+  } catch {
+    return url
+  }
 }
 
 /**