feat. GR_GALLERY_01 템플릿 제작

layers/templates/GrGallery01/index.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { getComponentGroup } from '#layers/utils/dataUtil'
+
+interface Props {
+  components: Record<string, any>
+  pageVerTmplSeq: string
+}
+
+const props = defineProps<Props>()
+
+const backgroundData = computed(() =>
+  getComponentGroup(props.components, 'background')
+)
+const mainTitleData = computed(() =>
+  getComponentGroup(props.components, 'mainTitle')
+)
+const slideThumbnailData = computed(() => props.components.group_sets)
+const videoPlayData = computed(() =>
+  getComponentGroup(props.components, 'videoPlay')
+)
+</script>
+
+<template>
+  <section class="section-container">
+    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
+    <div class="section-content">
+      <WidgetsMainTitle
+        v-if="mainTitleData"
+        :resources-data="mainTitleData"
+        class="main-title"
+      />
+      <!-- 유튜브 비디오 갤러리 -->
+      <BlocksSlideThumbnail
+        :slide-item-list="slideThumbnailData"
+        :video-play="videoPlayData"
+      />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.main-title {
+  @apply text-center text-[16px] font-medium leading-[24px] tracking-[-0.48px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px];
+  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
+  font-family: 'Spoqa Han Sans Neo', sans-serif;
+}
+</style>

layers/templates/GrVisual01/index.vue

@@ -26,15 +26,13 @@ const buttonListData = computed(() =>
 </script>
 
 <template>
-  <section class="relative h-[640px] md:h-[1000px]">
+  <section class="section-container">
     <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"
-    >
+    <div class="section-content">
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
@@ -49,6 +47,7 @@ const buttonListData = computed(() =>
       <WidgetsButtonList
         v-if="buttonListData.length > 0"
         :groups-data="buttonListData"
+        button-type="market"
         class="mt-[28px] md:mt-[52px]"
       />
     </div>

layers/templates/GrVisual02/index.vue

@@ -73,15 +73,13 @@ const bannerSize = {
 </script>
 
 <template>
-  <section class="relative h-[640px] md:h-[1000px]">
+  <section class="section-container">
     <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"
-    >
+    <div class="section-content">
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"

layers/templates/GrVisual03/index.vue

@@ -15,7 +15,7 @@ const props = defineProps<Props>()
 </script>
 
 <template>
-  <section class="relative h-[640px] md:h-[1000px]">
+  <section class="section-container">
     <BlocksSlideFade
       v-if="props.components?.group_sets"
       :arrows="true"