fix. 폴더 구조 변경

layers/components/templates/GrVisual01/index.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import YouTubeModal from '#layers/components/molecules/modal/YouTubeModal.vue'
+
+interface Props {
+  components: Record<string, any>
+}
+
+const props = defineProps<Props>()
+
+// 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>
+  <section class="relative h-[640px] lg:h-[1000px]">
+    <WidgetsBackground
+      v-if="props.components?.background"
+      :component-data="props.components?.background"
+      gradient-class="bg-gradient-to-b from-[#100d0f]/0 to-[#100d0f]"
+    />
+    <div
+      class="relative h-full flex flex-col items-center justify-center gap-4"
+    >
+      <WidgetsMainTitle
+        v-if="props.components.mainTitle"
+        :component-data="props.components.mainTitle"
+        class="w-[355px] lg:w-[944px]"
+      />
+      <WidgetsDescription
+        v-if="props.components.description"
+        :component-data="props.components.description"
+      />
+      <WidgetsVideoPlay
+        v-if="props.components.videoPlay"
+        :component-data="props.components.videoPlay"
+        @click="handleVideoPlayClick"
+      />
+    </div>
+  </section>
+
+  <!-- YouTube 모달 -->
+  <YouTubeModal
+    :is-open="isYouTubeModalOpen"
+    :youtube-id="youtubeVideoId"
+    @close="handleCloseModal"
+    @update:is-open="(value: boolean) => (isYouTubeModalOpen = value)"
+  />
+</template>

layers/components/templates/GrVisual02/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+interface Props {
+  components: Record<string, any>
+}
+
+const _props = defineProps<Props>()
+</script>
+
+<template>
+  <section class="template-section" />
+</template>

layers/components/templates/GrVisual03/index.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+interface Props {
+  components: Record<string, any>
+}
+
+const props = defineProps<Props>()
+
+console.log('components:', props.components)
+</script>
+
+<template>
+  <section class="relative h-[640px] lg:h-[1000px]">
+    <WidgetsBackground
+      v-if="props.components?.cardBackground"
+      :component-data="props.components?.cardBackground"
+      :group-sets="true"
+    />
+    <div
+      class="relative h-full flex flex-col items-center justify-center gap-4"
+    >
+      <WidgetsSubTitle
+        v-if="props.components.cardSubTitle"
+        :component-data="props.components.cardSubTitle"
+        :group-sets="true"
+        class="text-[24px] font-[500] text-[#ffffff] leading-[34px]"
+      />
+      <WidgetsMainTitle
+        v-if="props.components.cardMainTitle"
+        :component-data="props.components.cardMainTitle"
+        :group-sets="true"
+        class="text-[50px] font-[700] text-[#c7a28b] leading-[70px]"
+      />
+      <WidgetsDescription
+        v-if="props.components.cardDescription"
+        :component-data="props.components.cardDescription"
+        :group-sets="true"
+        class="text-[20px] font-[500] text-white/70 leading-[30px]"
+      />
+      <WidgetsButtonList
+        v-if="props.components.cardButtonList"
+        :component-data="props.components.cardButtonList"
+        :group-sets="true"
+      />
+    </div>
+  </section>
+</template>