From 3e190aa93caba0500f1501acabfc11f9e3ed8e50 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Tue, 2 Dec 2025 19:06:11 +0900
Subject: [PATCH] =?UTF-8?q?fix.=20[PWT-121]=20=EA=B3=B5=ED=86=B5=20>=20?=
 =?UTF-8?q?=EC=95=A1=EC=85=98=20=EB=B2=84=ED=8A=BC=20=EC=98=81=EC=83=81=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=B2=84=ED=8A=BC=20=EC=9E=90=EB=8F=99=20?=
 =?UTF-8?q?=EC=9E=AC=EC=83=9D=20=EC=98=A4=EB=A5=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/blocks/modal/YouTube.vue | 10 ++---
 layers/templates/GrGallery01/index.vue     |  3 +-
 layers/utils/youtubeUtil.ts                | 43 ++++++++++++++++------
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/layers/components/blocks/modal/YouTube.vue b/layers/components/blocks/modal/YouTube.vue
index 343abe7..9a0c1db 100644
--- a/layers/components/blocks/modal/YouTube.vue
+++ b/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"
diff --git a/layers/templates/GrGallery01/index.vue b/layers/templates/GrGallery01/index.vue
index d50a95e..1b5ef30 100644
--- a/layers/templates/GrGallery01/index.vue
+++ b/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"
diff --git a/layers/utils/youtubeUtil.ts b/layers/utils/youtubeUtil.ts
index 9c0ef64..eb2b445 100644
--- a/layers/utils/youtubeUtil.ts
+++ b/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
+  }
 }
 
 /**