feat. GR_VISUAL_03 컴포넌트 제작

layers/templates/GrVisual03/index.vue

@@ -1,39 +1,101 @@
 <script setup lang="ts">
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { EffectFade, Navigation, Pagination } from 'swiper/modules'
+import { getResponsiveClass, getResponsiveSrc } from '#layers/utils/dataUtil'
+
 interface Props {
   components: Record<string, any>
+  pageVerTmplSeq: number
 }
 
 const props = defineProps<Props>()
+
+const arrow = computed(() => {
+  return props.components.arrow.groups
+})
+
+const modules = [EffectFade, Navigation, Pagination]
 </script>
 
 <template>
-  <section class="relative h-[640px] lg:h-[1000px]">
-    <WidgetsBackground
-      v-if="props.components?.background"
-      :resources-data="props.components?.background.groups[0]"
-    />
-    <div
-      class="relative h-full flex flex-col items-center justify-center gap-4"
+  <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"
     >
-      <WidgetsSubTitle
-        v-if="props.components.subTitle"
-        :resources-data="props.components.subTitle.groups[0]"
-        class="text-[24px] font-[500] text-[#ffffff] leading-[34px]"
-      />
-      <WidgetsMainTitle
-        v-if="props.components.mainTitle"
-        :resources-data="props.components.cardMainTitle.groups[0]"
-        class="text-[50px] font-[700] text-[#c7a28b] leading-[70px]"
-      />
-      <WidgetsDescription
-        v-if="props.components.description"
-        :resources-data="props.components.description.groups[0]"
-        class="text-[20px] font-[500] text-white/70 leading-[30px]"
-      />
-      <WidgetsButtonList
-        v-if="props.components.buttonList"
-        :groups-data="props.components.buttonList"
-      />
-    </div>
+      <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]"
+        />
+        <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]"
+            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]"
+            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]"
+            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"
+          />
+        </div>
+      </SwiperSlide>
+
+      <div class="slide-pagination" />
+
+      <!-- Navigation buttons -->
+      <div
+        class="slide-prev hidden md:block"
+        :class="getResponsiveClass()"
+        :style="
+          getResponsiveSrc(arrow[0].res_path, {
+            resourcesType: 'bg',
+          })
+        "
+      >
+        <span class="sr-only">prev</span>
+      </div>
+      <div
+        class="slide-next hidden md:block"
+        :class="getResponsiveClass()"
+        :style="
+          getResponsiveSrc(arrow[1].res_path, {
+            resourcesType: 'bg',
+          })
+        "
+      >
+        <span class="sr-only">next</span>
+      </div>
+    </Swiper>
   </section>
 </template>