feat. GR_CONTENTS_01 템플릿 제작

2025-10-24 10:03:54 +09:00
parent 1d3cd18ada
commit 3729a2bcb7
22 changed files with 385 additions and 164 deletions
--- a/layers/templates/GrContents01/index.vue
+++ b/layers/templates/GrContents01/index.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { SplideSlide } from '@splidejs/vue-splide'
+import {
+  getComponentContainer,
+  getComponentGroup,
+} from '#layers/utils/dataUtil'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+
+interface Props {
+  components: PageDataTemplateComponents
+  pageVerTmplSeq: number
+}
+
+const props = defineProps<Props>()
+
+const { locale } = useI18n()
+const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
+
+const backgroundData = computed(() =>
+  getComponentGroup(props.components, 'background')
+)
+const mainTitleData = computed(() =>
+  getComponentGroup(props.components, 'mainTitle')
+)
+const subTitleData = computed(() =>
+  getComponentGroup(props.components, 'subTitle')
+)
+const descriptionData = computed(() =>
+  getComponentGroup(props.components, 'description')
+)
+const slideData = computed(() => {
+  return getComponentContainer(props.components, 'group_sets')
+})
+const buttonListData = computed(() => {
+  return getComponentGroupAry(props.components, 'buttonList')
+})
+const paginationData = computed(() => {
+  return getComponentGroupAry(props.components, 'pagination')
+})
+
+const onArrowClick = (direction, targetIndex) => {
+  const arrowGroupAry = getComponentGroupAry(props.components, 'arrow')
+  const logTracking = arrowGroupAry?.[direction === 'prev' ? 0 : 1]
+  sendLog(locale.value, useAnalyticsLogDataDirect(logTracking, 1))
+}
+</script>
+
+<template>
+  <section class="relative py-[80px] md:py-[120px]">
+    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
+    <div class="section-content px-0">
+      <WidgetsMainTitle
+        v-if="mainTitleData"
+        :resources-data="mainTitleData"
+        class="title-xlg mx-[20px] sm:mx-[40px]"
+      />
+      <WidgetsSubTitle
+        v-if="subTitleData"
+        :resources-data="subTitleData"
+        class="title-sm mt-2 mx-[20px] sm:mx-[40px]"
+      />
+      <template v-if="slideData">
+        <div v-if="slideData.length <= 2" class="img-container">
+          <div
+            v-for="(item, index) in slideData"
+            :key="index"
+            :class="[{ 'slide-2': slideData.length === 2 }]"
+          >
+            <AtomsImg
+              :resources-data="getComponentGroup(item, 'imgList')"
+              :page-ver-tmpl-seq="props.pageVerTmplSeq"
+              :alt="getComponentGroup(item, 'subTitle')?.display?.text"
+            />
+          </div>
+        </div>
+        <BlocksSlideDefault
+          v-else
+          :type="slideData.length === 3 ? 'slide' : 'loop'"
+          :slide-item-length="slideData?.length"
+          :arrows="slideData.length === 3 ? false : true"
+          :pagination="slideData.length === 3 ? false : true"
+          :pagination-data="paginationData"
+          :breakpoints="{
+            1023: {
+              type: 'loop',
+              pagination: false,
+            },
+          }"
+          class="mt-[32px]"
+          @arrow-click="onArrowClick"
+        >
+          <SplideSlide
+            v-for="(item, index) in slideData"
+            :key="index"
+            class="mr-4"
+          >
+            <div class="slide-inner w-[295px] sm:w-[304px]">
+              <AtomsImg
+                :resources-data="getComponentGroup(item, 'imgList')"
+                :page-ver-tmpl-seq="props.pageVerTmplSeq"
+                :alt="getComponentGroup(item, 'subTitle')?.display?.text"
+              />
+            </div>
+          </SplideSlide>
+        </BlocksSlideDefault>
+      </template>
+      <WidgetsButtonList
+        v-if="buttonListData"
+        :resources-data="buttonListData"
+        :page-ver-tmpl-seq="props.pageVerTmplSeq"
+        class="mt-[56px] mx-[20px] sm:mx-[40px]"
+      />
+      <WidgetsDescription
+        v-if="descriptionData"
+        :resources-data="descriptionData"
+        class="mt-8 mx-[20px] sm:mx-[40px]"
+      />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.img-container {
+  @apply flex flex-wrap justify-center gap-4 box-content mx-auto mt-[32px]
+  max-w-[688px] px-[20px] 
+  md:max-w-[944px] md:px-[40px];
+}
+.splide {
+  @apply md:max-w-[1088px];
+}
+.splide:deep(.splide__track) {
+  @apply md:w-[944px] md:mx-auto;
+}
+.splide:deep(.splide__track) {
+  @apply !px-[20px] sm:!px-[40px] md:!px-[0];
+}
+.splide:deep(.arrow-next) {
+  @apply md:-right-[0];
+}
+.splide:deep(.arrow-prev) {
+  @apply md:-left-[0];
+}
+.slide-2 {
+  @apply max-w-[335px] md:max-w-[464px];
+}
+</style>