feat. GR_CONTENTS_01 템플릿 제작

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>

layers/templates/GrDetail01/index.vue

@@ -62,12 +62,12 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
           <WidgetsMainTitle
             v-if="hasComponentGroup(item, 'mainTitle')"
             :resources-data="getComponentGroup(item, 'mainTitle')"
-            class="title-md"
+            class="title-lg"
           />
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'subTitle')"
             :resources-data="getComponentGroup(item, 'subTitle')"
-            class="title-sm mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
+            class="title-md mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
           />
           <WidgetsDescription
             v-if="hasComponentGroup(item, 'description')"

layers/templates/GrDetail02/index.vue

@@ -36,12 +36,12 @@ const paginationData = computed(() => {
           <WidgetsMainTitle
             v-if="hasComponentGroup(item, 'mainTitle')"
             :resources-data="getComponentGroup(item, 'mainTitle')"
-            class="title-md"
+            class="title-lg"
           />
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'subTitle')"
             :resources-data="getComponentGroup(item, 'subTitle')"
-            class="title-sm mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
+            class="title-md mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
           />
           <WidgetsDescription
             v-if="hasComponentGroup(item, 'description')"

layers/templates/GrDetail03/index.vue

@@ -70,13 +70,13 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
           <WidgetsMainTitle
             v-if="hasComponentGroup(item, 'mainTitle')"
             :resources-data="getComponentGroup(item, 'mainTitle')"
-            class="title-md line-clamp-1 text-left"
+            class="title-lg line-clamp-1 text-left"
           />
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'subTitle')"
             :resources-data="getComponentGroup(item, 'subTitle')"
             tag="p"
-            class="title-sm mt-1 line-clamp-1 text-left"
+            class="title-md mt-1 line-clamp-1 text-left"
           />
           <WidgetsDescription
             v-if="hasComponentGroup(item, 'description')"

layers/templates/GrGallery01/index.vue

@@ -108,7 +108,7 @@ const onArrowClick = (direction, targetIndex) => {
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
-        class="title-sm"
+        class="title-md"
       />
       <BlocksSlideThumbnail
         ref="slideThumbnailRef"

layers/templates/GrGallery02/index.vue

@@ -65,7 +65,7 @@ const onArrowClick = (direction, targetIndex) => {
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
-        class="title-sm"
+        class="title-md mx-[20px] sm:mx-[40px]"
       />
       <BlocksSlideCenterFocus
         v-if="slideData"

layers/templates/GrGallery03/index.vue

@@ -76,7 +76,7 @@ const onArrowClick = (direction, targetIndex) => {
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
-        class="title-sm"
+        class="title-md mx-[20px] sm:mx-[40px]"
       />
       <BlocksSlideCenterHighlight
         v-if="slideData"
@@ -100,18 +100,18 @@ const onArrowClick = (direction, targetIndex) => {
       <WidgetsSubTitle
         v-if="imgTitleData"
         :resources-data="imgTitleData"
-        class="title-md mt-[32px] line-clamp-2 md:line-clamp-1"
+        class="title-lg mt-[32px] mx-[20px] line-clamp-2 sm:mx-[40px] md:line-clamp-1"
       />
       <WidgetsDescription
         v-if="descriptionData"
         :resources-data="descriptionData"
-        class="mt-[8px] md:mt-[16px]"
+        class="mt-[8px] mx-[20px] sm:mx-[40px] md:mt-[16px]"
       />
       <WidgetsButtonList
         v-if="buttonListData"
         :resources-data="buttonListData"
         :page-ver-tmpl-seq="props.pageVerTmplSeq"
-        class="mt-[32px]"
+        class="mt-[32px] mx-[20px] sm:mx-[40px]"
       />
     </div>
   </section>

layers/templates/GrVisual02/index.vue

@@ -47,7 +47,7 @@ const { data: slideData } = await useAsyncData(
       pageSeq: pageData.value.page_seq,
       pageVer: pageData.value.page_ver,
       pageVerTmplSeq: props.pageVerTmplSeq,
-      langCode: 'ko',
+      langCode: locale.value,
     })
 
     const bannerList = getComponentContainer(operateGroupList, 'bannerList', {
@@ -94,12 +94,12 @@ const onArrowClick = direction => {
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
-        class="w-full max-w-[355px] md:max-w-[944px]"
+        class="w-full max-w-[355px] mx-[20px] sm:mx-[40px] md:max-w-[944px]"
       />
       <WidgetsDescription
         v-if="descriptionData"
         :resources-data="descriptionData"
-        class="w-full max-w-[355px] md:max-w-[944px]"
+        class="w-full max-w-[355px] mx-[20px] sm:mx-[40px] md:max-w-[944px]"
       />
       <WidgetsVideoPlay
         v-if="videoPlayData"

layers/templates/GrVisual03/index.vue

@@ -52,12 +52,12 @@ const onArrowClick = direction => {
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'subTitle')"
             :resources-data="getComponentGroup(item, 'subTitle')"
-            class="title-sm"
+            class="title-md"
           />
           <WidgetsMainTitle
             v-if="hasComponentGroup(item, 'mainTitle')"
             :resources-data="getComponentGroup(item, 'mainTitle')"
-            class="title-lg"
+            class="title-xlg"
           />
           <WidgetsDescription
             v-if="hasComponentGroup(item, 'description')"