feat. i18n 설정

layers/templates/GrVisual01/index.vue

@@ -1,9 +1,30 @@
 <script setup lang="ts">
+import YouTubeModal from "#layers/components/molecules/modal/YouTubeModal.vue";
+
 interface Props {
   components: Record<string, any>;
 }
 
 const props = defineProps<Props>();
+console.log("components:", props.components);
+
+// YouTube 모달 상태 관리
+const isYouTubeModalOpen = ref(false);
+const youtubeVideoId = ref("");
+
+// 비디오 플레이 버튼 클릭 핸들러
+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 = "";
+};
 </script>
 
 <template>
@@ -22,6 +43,15 @@ const props = defineProps<Props>();
     <TemplatesVideoPlay
       v-if="props.components.videoPlay"
       :component-data="props.components.videoPlay"
+      @click="handleVideoPlayClick"
     />
   </div>
+
+  <!-- YouTube 모달 -->
+  <YouTubeModal
+    :is-open="isYouTubeModalOpen"
+    :youtube-id="youtubeVideoId"
+    @close="handleCloseModal"
+    @update:is-open="isYouTubeModalOpen = $event"
+  />
 </template>