feat. GR_VISUAL_02 컴포넌트 제작

layers/templates/GrVisual01/index.vue

@@ -1,42 +1,55 @@
 <script setup lang="ts">
+import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
+
 interface Props {
   components: Record<string, any>
-  pageVerTmplSeq: number
+  pageVerTmplSeq: string
 }
 
 const props = defineProps<Props>()
+
+const backgroundData = computed(() =>
+  getComponentGroup(props.components, 'background')
+)
+const mainTitleData = computed(() =>
+  getComponentGroup(props.components, 'mainTitle')
+)
+const descriptionData = computed(() =>
+  getComponentGroup(props.components, 'description')
+)
+const videoPlayData = computed(() =>
+  getComponentGroup(props.components, 'videoPlay')
+)
+const buttonListData = computed(() =>
+  getComponentGroupAry(props.components, 'buttonList')
+)
 </script>
 
 <template>
   <section class="relative h-[640px] md:h-[1000px]">
     <WidgetsBackground
-      v-if="props.components?.background"
-      :resources-data="props.components?.background.groups[0]"
+      v-if="backgroundData"
+      :resources-data="backgroundData"
       :gradient="true"
     />
     <div
       class="relative h-full flex flex-col items-center justify-center gap-4 md:gap-5"
     >
       <WidgetsMainTitle
-        v-if="props.components.mainTitle && props.components.mainTitle.groups"
-        :resources-data="props.components.mainTitle.groups[0]"
+        v-if="mainTitleData"
+        :resources-data="mainTitleData"
         class="w-[355px] md:w-[944px]"
       />
       <WidgetsDescription
-        v-if="
-          props.components.description && props.components.description.groups
-        "
-        :resources-data="props.components.description.groups[0]"
+        v-if="descriptionData"
+        :resources-data="descriptionData"
         class="w-[355px] md:w-[944px]"
       />
-      <WidgetsVideoPlay
-        v-if="props.components.videoPlay && props.components.videoPlay.groups"
-        :resources-data="props.components.videoPlay.groups[0]"
-      />
+      <WidgetsVideoPlay v-if="videoPlayData" :resources-data="videoPlayData" />
       <WidgetsButtonList
-        v-if="props.components.buttonList && props.components.buttonList.groups"
-        :groups-data="props.components.buttonList.groups"
-        class="mt-[48px] md:mt-[72px]"
+        v-if="buttonListData.length > 0"
+        :groups-data="buttonListData"
+        class="mt-[28px] md:mt-[52px]"
       />
     </div>
   </section>