feat. videoPlay 컴포넌트 제작

layers/components/widgets/VideoPlay.vue

@@ -8,41 +8,24 @@ const bgStyles = getResponsiveSrc(props.resourcesData?.res_path, {
   resourcesType: 'bg',
 })
 
-// YouTube 모달 상태 관리
-const isYouTubeModalOpen = ref(false)
-const youtubeVideoId = ref('')
+// YouTube 모달 스토어 사용
+const modalStore = useModalStore()
 
 // 비디오 플레이 버튼 클릭 핸들러
 const handleVideoPlayClick = () => {
-  // TODO: 실제 YouTube 비디오 ID를 설정해야 합니다
-  // 예시: 'dQw4w9WgXcQ' (Rick Astley - Never Gonna Give You Up)
-  youtubeVideoId.value = 'UKVsZYHxYTc' // 임시로 설정
-  isYouTubeModalOpen.value = true
-}
-
-// 모달 닫기 핸들러
-const handleCloseModal = () => {
-  isYouTubeModalOpen.value = false
-  youtubeVideoId.value = ''
+  const youtubeId = props.resourcesData?.display?.text ?? ''
+  modalStore.handleOpenYoutube({ youtubeId })
 }
 </script>
 
 <template>
   <button
-    v-if="resourcesData"
+    v-if="resourcesData && bgStyles"
     class="bg-cover bg-center bg-no-repeat w-[66px] h-[66px] lg:w-[100px] lg:h-[100px]"
-    :class="getResponsiveClass"
+    :class="getResponsiveClass()"
     :style="bgStyles"
     @click="handleVideoPlayClick"
   >
     <span class="sr-only">videoPlay</span>
   </button>
-
-  <!-- YouTube 모달 -->
-  <BlocksModalYouTube
-    :is-open="isYouTubeModalOpen"
-    :youtube-id="youtubeVideoId"
-    @close="handleCloseModal"
-    @update:is-open="(value: boolean) => (isYouTubeModalOpen = value)"
-  />
 </template>