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

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>