feat. 데이터 구조 변경에 따른 수정

layers/templates/GrVisual01/index.vue

@@ -6,7 +6,6 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-console.log("components:", props.components);
 
 // YouTube 모달 상태 관리
 const isYouTubeModalOpen = ref(false);
@@ -28,24 +27,30 @@ const handleCloseModal = () => {
 </script>
 
 <template>
-  <div
-    class="relative flex flex-col items-center justify-center h-[640px] lg:h-[1000px] gap-4"
-  >
-    <TemplatesMainTitle
-      v-if="props.components.mainTitle"
-      :component-data="props.components.mainTitle"
-      class="w-[355px] lg:w-[944px]"
+  <section class="relative h-[640px] lg:h-[1000px]">
+    <TemplatesBackground
+      v-if="props.components?.background"
+      :component-data="props.components?.background"
     />
-    <TemplatesDescription
-      v-if="props.components.description"
-      :component-data="props.components.description"
-    />
-    <TemplatesVideoPlay
-      v-if="props.components.videoPlay"
-      :component-data="props.components.videoPlay"
-      @click="handleVideoPlayClick"
-    />
-  </div>
+    <div
+      class="relative h-full flex flex-col items-center justify-center gap-4"
+    >
+      <TemplatesMainTitle
+        v-if="props.components.mainTitle"
+        :component-data="props.components.mainTitle"
+        class="w-[355px] lg:w-[944px]"
+      />
+      <TemplatesDescription
+        v-if="props.components.description"
+        :component-data="props.components.description"
+      />
+      <TemplatesVideoPlay
+        v-if="props.components.videoPlay"
+        :component-data="props.components.videoPlay"
+        @click="handleVideoPlayClick"
+      />
+    </div>
+  </section>
 
   <!-- YouTube 모달 -->
   <YouTubeModal

layers/templates/GrVisual02/index.vue

@@ -7,7 +7,5 @@ const props = defineProps<Props>();
 </script>
 
 <template>
-  <div
-    class="relative flex flex-col items-center justify-center h-[640px] lg:h-[1000px] gap-4"
-  ></div>
+  <section class="template-section"></section>
 </template>

layers/templates/GrVisual03/index.vue

@@ -4,10 +4,34 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+
+console.log("components:", props.components);
 </script>
 
 <template>
-  <div
-    class="relative flex flex-col items-center justify-center h-[640px] lg:h-[1000px] gap-4"
-  ></div>
+  <section class="relative h-[640px] lg:h-[1000px]">
+    <TemplatesBackground
+      v-if="props.components?.background"
+      :component-data="props.components?.background"
+    />
+    <div
+      class="relative h-full flex flex-col items-center justify-center gap-4"
+    >
+      <TemplatesSubTitle
+        v-if="props.components.subTitle"
+        :component-data="props.components.subTitle"
+        class="text-[24px] font-[500] text-[#ffffff] leading-[34px]"
+      />
+      <TemplatesMainTitle
+        v-if="props.components.mainTitle"
+        :component-data="props.components.mainTitle"
+        class="text-[50px] font-[700] text-[#c7a28b] leading-[70px]"
+      />
+      <TemplatesDescription
+        v-if="props.components.cardDescription"
+        :component-data="props.components.cardDescription"
+        class="text-[20px] font-[500] text-white/70 leading-[30px]"
+      />
+    </div>
+  </section>
 </template>