diff --git a/app/app.vue b/app/app.vue
index 06ea2f6..37d07de 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -120,7 +120,7 @@ if (serverGameData) {
   <!-- 공통 모달 컴포넌트 -->
   <BlocksModalYouTube
     :is-open="youtube.storeIsOpen"
-    :youtube-id="youtube.storeYoutubeId"
+    :youtube-url="youtube.storeYoutubeUrl"
     :class-name="youtube.storeClassName"
     @close-button-event="handleResetYoutube"
   />
diff --git a/layers/components/blocks/modal/YouTube.vue b/layers/components/blocks/modal/YouTube.vue
index 0feca07..14f0c1b 100644
--- a/layers/components/blocks/modal/YouTube.vue
+++ b/layers/components/blocks/modal/YouTube.vue
@@ -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) {
diff --git a/layers/components/widgets/VideoPlay.vue b/layers/components/widgets/VideoPlay.vue
index e4d714f..9902c6f 100644
--- a/layers/components/widgets/VideoPlay.vue
+++ b/layers/components/widgets/VideoPlay.vue
@@ -13,8 +13,8 @@ const modalStore = useModalStore()
 
 // 비디오 플레이 버튼 클릭 핸들러
 const handleVideoPlayClick = () => {
-  const youtubeId = props.resourcesData?.display?.text ?? ''
-  modalStore.handleOpenYoutube({ youtubeId })
+  const youtubeUrl = props.resourcesData?.display?.text ?? ''
+  modalStore.handleOpenYoutube({ youtubeUrl })
 }
 </script>
 
diff --git a/layers/stores/useModalStore.ts b/layers/stores/useModalStore.ts
index 6e25df9..b2d9528 100644
--- a/layers/stores/useModalStore.ts
+++ b/layers/stores/useModalStore.ts
@@ -1,20 +1,8 @@
 import { defineStore } from 'pinia'
-
-interface DialogParams {
-  isShowDimmed?: boolean
-  className?: string
-  isOutsideClose?: boolean
-  contentText: string
-  confirmButtonText?: string
-  cancelButtonText?: string
-  confirmButtonEvent?: () => void
-  cancelButtonEvent?: () => void
-  closeButtonEvent?: () => void
-}
-interface YoutubeParams {
-  youtubeId: string
-  className?: string
-}
+import type {
+  DialogParams,
+  YoutubeParams,
+} from '#layers/types/components/modal'
 
 const createModalState = () => ({
   storeIsOpen: ref(false),
@@ -110,20 +98,20 @@ export const useModalStore = defineStore('modalStore', () => {
   // youtube ------------------
   const youtube = {
     storeIsOpen: ref(false),
-    storeYoutubeId: ref(''),
+    storeYoutubeUrl: ref(''),
     storeClassName: ref(''),
   }
 
-  const handleOpenYoutube = ({ youtubeId, className = '' }: YoutubeParams) => {
+  const handleOpenYoutube = ({ youtubeUrl, className = '' }: YoutubeParams) => {
     youtube.storeIsOpen.value = true
-    youtube.storeYoutubeId.value = youtubeId
+    youtube.storeYoutubeUrl.value = youtubeUrl
     youtube.storeClassName.value = className
     scrollStore.controlScrollLock(true)
   }
 
   const handleResetYoutube = () => {
     youtube.storeIsOpen.value = false
-    youtube.storeYoutubeId.value = ''
+    youtube.storeYoutubeUrl.value = ''
     youtube.storeClassName.value = ''
     scrollStore.controlScrollLock(false)
   }
diff --git a/layers/types/api/pageData.ts b/layers/types/api/pageData.ts
index 149cf05..8b86731 100644
--- a/layers/types/api/pageData.ts
+++ b/layers/types/api/pageData.ts
@@ -74,6 +74,13 @@ export interface PageDataResourceGroup {
   }
   display?: {
     text: string
+    txt: string
+    color_code_btn?: string
+    color_name_btn?: string
+    color_code_txt?: string
+    color_name_txt?: string
+    color_code?: string
+    color_name?: string
   }
 }
 
diff --git a/layers/types/components/modal.ts b/layers/types/components/modal.ts
new file mode 100644
index 0000000..b806da0
--- /dev/null
+++ b/layers/types/components/modal.ts
@@ -0,0 +1,16 @@
+export interface DialogParams {
+  isShowDimmed?: boolean
+  className?: string
+  isOutsideClose?: boolean
+  contentText: string
+  confirmButtonText?: string
+  cancelButtonText?: string
+  confirmButtonEvent?: () => void
+  cancelButtonEvent?: () => void
+  closeButtonEvent?: () => void
+}
+
+export interface YoutubeParams {
+  youtubeUrl: string
+  className?: string
+}