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>

layers/templates/GrVisual02/index.vue

@@ -1,11 +1,111 @@
 <script setup lang="ts">
+import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
+
 interface Props {
   components: Record<string, any>
+  pageVerTmplSeq: string
 }
 
-const _props = defineProps<Props>()
+const props = defineProps<Props>()
+
+const pageDataStore = usePageDataStore()
+const { getResourcesData } = useResourcesData()
+
+const { pageData } = storeToRefs(pageDataStore)
+
+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')
+)
+
+// 비동기 데이터 로딩
+const { data: resourcesData } = await useLazyAsyncData(
+  'gr-visual-02-resources',
+  async () => {
+    if (!pageData.value?.page_seq || !pageData.value?.page_ver) {
+      return null
+    }
+
+    return await getResourcesData({
+      pageSeq: pageData.value.page_seq,
+      pageVer: pageData.value.page_ver,
+      pageVerTmplSeq: props.pageVerTmplSeq,
+      langCode: 'ko',
+    })
+  }
+)
+
+// 배너 리스트 데이터 추출
+const bannerListData = computed(() => {
+  const operateComponents = resourcesData.value?.operate_components
+
+  if (!operateComponents) {
+    return []
+  }
+
+  const firstKey = Object.keys(operateComponents)[0]
+  return operateComponents[firstKey]?.list_operate_groups || []
+})
+
+const bannerSize = {
+  mo: {
+    width: 293,
+    height: 185,
+    gap: 12,
+  },
+  pc: {
+    width: 455,
+    height: 287,
+    gap: 32,
+  },
+}
 </script>
 
 <template>
-  <section class="template-section" />
+  <section class="relative h-[640px] md:h-[1000px]">
+    <WidgetsBackground
+      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="mainTitleData"
+        :resources-data="mainTitleData"
+        class="w-[355px] md:w-[944px]"
+      />
+      <WidgetsDescription
+        v-if="descriptionData"
+        :resources-data="descriptionData"
+        class="w-[355px] md:w-[944px]"
+      />
+      <WidgetsVideoPlay v-if="videoPlayData" :resources-data="videoPlayData" />
+      <WidgetsButtonList
+        v-if="buttonListData.length > 0"
+        :groups-data="buttonListData"
+        class="mt-[48px] md:mt-[72px]"
+      />
+      <WidgetsBannerList
+        :banner-list="bannerListData"
+        banner-mode="auto"
+        :banner-size="bannerSize"
+        :arrows="true"
+        :pagination="false"
+        class="mt-[36px] md:mt-[60px]"
+      />
+    </div>
+  </section>
 </template>

layers/templates/GrVisual03/index.vue

@@ -1,84 +1,88 @@
 <script setup lang="ts">
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { EffectFade, Navigation, Pagination } from 'swiper/modules'
-import { getResponsiveClass, getResponsiveSrc } from '#layers/utils/dataUtil'
+import {
+  getResponsiveClass,
+  getResponsiveSrc,
+  hasComponentGroup,
+  getComponentGroup,
+  getComponentGroupAry,
+} from '#layers/utils/dataUtil'
 
 interface Props {
   components: Record<string, any>
-  pageVerTmplSeq: number
+  pageVerTmplSeq: string
 }
 
 const props = defineProps<Props>()
 
 const arrow = computed(() => {
-  return props.components.arrow.groups
+  return getComponentGroupAry(props.components, 'arrow')
 })
 
 const modules = [EffectFade, Navigation, Pagination]
+
+const swiperOptions = computed(() => ({
+  modules,
+  loop: true,
+  effect: 'fade',
+  pagination: {
+    el: '.slide-pagination',
+    clickable: true,
+  } as any,
+  navigation: {
+    nextEl: '.slide-next',
+    prevEl: '.slide-prev',
+  } as any,
+  class: 'h-full',
+}))
 </script>
 
 <template>
   <section class="relative h-[640px] md:h-[1000px]">
-    <Swiper
-      :modules="modules"
-      :loop="true"
-      effect="fade"
-      :pagination="
-        {
-          el: '.slide-pagination',
-          clickable: true,
-        } as any
-      "
-      :navigation="
-        {
-          nextEl: '.slide-next',
-          prevEl: '.slide-prev',
-        } as any
-      "
-      class="h-full"
-    >
+    <Swiper v-bind="swiperOptions">
       <SwiperSlide
         v-for="group in props.components.group_sets"
         :key="group.set_order"
         class="bg-black"
       >
         <WidgetsBackground
-          v-if="group?.background.groups"
-          :resources-data="group.background.groups[0]"
+          v-if="hasComponentGroup(group, 'background')"
+          :resources-data="getComponentGroup(group, 'background')"
         />
         <div
           class="relative h-full flex flex-col items-center justify-center gap-[14px] text-center md:gap-5"
         >
           <WidgetsSubTitle
-            v-if="group.subTitle && group.subTitle.groups"
-            :resources-data="group.subTitle.groups[0]"
+            v-if="hasComponentGroup(group, 'subTitle')"
+            :resources-data="getComponentGroup(group, 'subTitle')"
             class="line-clamp-2 text-[16px] font-[500] leading-[24px] md:line-clamp-1 md:text-[24px] md:leading-[34px]"
           />
           <WidgetsMainTitle
-            v-if="group.mainTitle && group.mainTitle.groups"
-            :resources-data="group.mainTitle.groups[0]"
+            v-if="hasComponentGroup(group, 'mainTitle')"
+            :resources-data="getComponentGroup(group, 'mainTitle')"
             class="line-clamp-3 text-[24px] font-[700] leading-[34px] md:text-[50px] md:leading-[70px]"
           />
           <WidgetsDescription
-            v-if="group.description && group.description.groups"
-            :resources-data="group.description.groups[0]"
+            v-if="hasComponentGroup(group, 'description')"
+            :resources-data="getComponentGroup(group, 'description')"
             class="line-clamp-3 text-[15px] font-[400] leading-[24px] md:text-[20px] md:leading-[30px]"
           />
           <WidgetsButtonList
-            v-if="group.buttonList && group.buttonList.groups"
-            :groups-data="group.buttonList.groups"
+            v-if="hasComponentGroup(group, 'buttonList')"
+            :groups-data="getComponentGroupAry(group, 'buttonList')"
           />
         </div>
       </SwiperSlide>
 
-      <div class="slide-pagination" />
+      <div class="slide-pagination position-absolute" />
 
-      <!-- Navigation buttons -->
       <div
+        v-if="arrow.length > 0"
         class="slide-prev hidden md:block"
         :class="getResponsiveClass()"
         :style="
-          getResponsiveSrc(arrow[0].res_path, {
+          getResponsiveSrc(arrow[0]?.res_path, {
             resourcesType: 'bg',
           })
         "
@@ -86,10 +90,11 @@ const modules = [EffectFade, Navigation, Pagination]
         <span class="sr-only">prev</span>
       </div>
       <div
+        v-if="arrow.length > 1"
         class="slide-next hidden md:block"
         :class="getResponsiveClass()"
         :style="
-          getResponsiveSrc(arrow[1].res_path, {
+          getResponsiveSrc(arrow[1]?.res_path, {
             resourcesType: 'bg',
           })
         "