feat. GR_VISUAL_01 컴포넌트 제작

layers/templates/GrVisual01/index.vue

@@ -7,28 +7,36 @@ const props = defineProps<Props>()
 </script>
 
 <template>
-  <section class="relative h-[640px] lg:h-[1000px]">
+  <section class="relative h-[640px] md:h-[1000px]">
     <WidgetsBackground
       v-if="props.components?.background"
       :resources-data="props.components?.background.groups[0]"
-      gradient-class="bg-gradient-to-b from-[#100d0f]/0 to-[#100d0f]"
+      :gradient="true"
     />
     <div
-      class="relative h-full flex flex-col items-center justify-center gap-4"
+      class="relative h-full flex flex-col items-center justify-center gap-4 md:gap-5"
     >
       <WidgetsMainTitle
-        v-if="props.components.mainTitle"
+        v-if="props.components.mainTitle && props.components.mainTitle.groups"
         :resources-data="props.components.mainTitle.groups[0]"
-        class="w-[355px] lg:w-[944px]"
+        class="w-[355px] md:w-[944px]"
       />
       <WidgetsDescription
-        v-if="props.components.description"
+        v-if="
+          props.components.description && props.components.description.groups
+        "
         :resources-data="props.components.description.groups[0]"
+        class="w-[355px] md:w-[944px]"
       />
       <WidgetsVideoPlay
-        v-if="props.components.videoPlay"
+        v-if="props.components.videoPlay && props.components.videoPlay.groups"
         :resources-data="props.components.videoPlay.groups[0]"
       />
+      <WidgetsButtonList
+        v-if="props.components.buttonList && props.components.buttonList.groups"
+        :groups-data="props.components.buttonList.groups"
+        class="mt-[48px] md:mt-[72px]"
+      />
     </div>
   </section>
 </template>