feat. GR_GALLERY_01 템플릿 제작

layers/assets/css/app.css

@@ -1,7 +1,9 @@
 @import './base/_theme.css';
 @import './base/_reset.css';
+
 @import './components/_splide.css';
 @import './components/_button.css';
+@import './components/_layout.css';
 
 @import '@splidejs/vue-splide/css';
 

layers/assets/css/components/_layout.css

@@ -0,0 +1,10 @@
+/* Layout Utility Classes */
+@layer components {
+  .section-container {
+    @apply relative h-[640px] md:h-[1000px];
+  }
+
+  .section-content {
+    @apply relative h-full flex flex-col items-center justify-center gap-4 md:gap-5;
+  }
+}

layers/components/atoms/Button/Play.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
+
+const props = defineProps<{ resourcesData: PageDataResourceGroup }>()
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const bgStyles = getResponsiveSrc(props.resourcesData?.res_path, {
+  resourcesType: 'bg',
+})
+</script>
+
+<template>
+  <button
+    v-if="resourcesData && bgStyles"
+    class="relative group bg-cover bg-center bg-no-repeat w-[66px] h-[66px] md:w-[100px] md:h-[100px]"
+    :class="getResponsiveClass()"
+    :style="bgStyles"
+    @click="emit('click')"
+  >
+    <span
+      class="absolute inset-0 m-[10px] bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300 ease-in-out rounded-[50%]"
+    />
+    <span class="sr-only">Play</span>
+  </button>
+</template>

layers/components/atoms/Button/index.vue

@@ -6,6 +6,7 @@ interface ButtonProps {
   textColor?: string
   icon?: string
   disabled?: boolean
+  backgroundImage?: string
 }
 
 const props = withDefaults(defineProps<ButtonProps>(), {
@@ -35,10 +36,21 @@ const buttonClasses = computed(() => [
   props.disabled ? 'cursor-default' : 'cursor-pointer',
 ])
 
-const buttonStyles = computed(() => ({
-  backgroundColor: getColorValue(props.backgroundColor),
-  color: getColorValue(props.textColor),
-}))
+const buttonStyles = computed(() => {
+  const styles: Record<string, string> = {
+    backgroundColor: getColorValue(props.backgroundColor),
+    color: getColorValue(props.textColor),
+  }
+
+  if (props.backgroundImage) {
+    styles.backgroundImage = `url(${props.backgroundImage})`
+    styles.backgroundSize = 'contain'
+    styles.backgroundPosition = 'center'
+    styles.backgroundRepeat = 'no-repeat'
+  }
+
+  return styles
+})
 
 const overlayClasses = computed(() => [
   'absolute inset-0 -m-px transition-opacity duration-200',

layers/components/blocks/VisualContent.vue

@@ -62,19 +62,19 @@ const hasImage = computed(() => {
 <template>
   <!-- 이미지가 있는 경우 -->
   <template v-if="hasImage">
-    <!-- 모바일 이미지 (sm 미만) -->
+    <!-- 모바일 이미지 (md 미만) -->
     <img
       v-if="imageSrc.mobileSrc"
       :src="imageSrc.mobileSrc"
       :alt="displayText"
-      class="sm:hidden w-full h-full object-contain"
+      class="md:hidden w-full h-full object-contain"
     />
-    <!-- PC 이미지 (sm 이상) -->
+    <!-- PC 이미지 (md 이상) -->
     <img
       v-if="imageSrc.pcSrc"
       :src="imageSrc.pcSrc"
       :alt="displayText"
-      class="hidden sm:block w-full h-full object-contain"
+      class="hidden md:block w-full h-full object-contain"
     />
   </template>
 

layers/components/blocks/modal/YouTube.vue

@@ -50,6 +50,8 @@
 </template>
 
 <script setup lang="ts">
+import { getYouTubeEmbedUrl } from '#layers/utils/youtube'
+
 interface Props {
   isOpen: boolean
   youtubeUrl: string
@@ -72,28 +74,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
-// [TODO] YouTube URL을 임베드 가능한 형태로 변환
 const embedUrl = computed(() => {
-  if (!props.youtubeUrl) return ''
-
-  // YouTube Shorts URL 처리
-  if (props.youtubeUrl.includes('/shorts/')) {
-    const videoId = props.youtubeUrl.split('/shorts/')[1]?.split('?')[0]
-    return `https://www.youtube.com/embed/${videoId}`
-  }
-
-  // 일반 YouTube URL 처리
-  if (props.youtubeUrl.includes('youtube.com/watch?v=')) {
-    const videoId = props.youtubeUrl.split('v=')[1]?.split('&')[0]
-    return `https://www.youtube.com/embed/${videoId}`
-  }
-
-  // 이미 임베드 URL인 경우
-  if (props.youtubeUrl.includes('youtube.com/embed/')) {
-    return props.youtubeUrl
-  }
-
-  return props.youtubeUrl
+  return getYouTubeEmbedUrl(props.youtubeUrl)
 })
 
 // ESC 키로 모달 닫기

layers/components/blocks/slide/Thumbnail.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { Splide, SplideSlide } from '@splidejs/vue-splide'
+import type { Splide as SplideType, Options } from '@splidejs/splide'
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
+
+interface Props {
+  slideItemList: { media: any; set_order: number }[]
+  videoPlay?: PageDataResourceGroup
+  arrows?: boolean
+  pagination?: boolean
+  class?: string
+  style?: Record<string, string>
+}
+
+const props = defineProps<Props>()
+
+const mainRef = ref<InstanceType<typeof Splide> | null>(null)
+const thumbsRef = ref<InstanceType<typeof Splide> | null>(null)
+const isPlaying = ref<boolean>(false)
+
+const mainOptions = computed<Options>(() => ({
+  type: 'fade',
+  rewind: true,
+  perPage: 1,
+  perMove: 1,
+  speed: 600,
+  arrows: false,
+  pagination: false,
+}))
+const thumbOptions = computed<Options>(() => ({
+  type: 'slide',
+  rewind: true,
+  // focus: 'center',
+  autoWidth: true,
+  perMove: 1,
+  arrows: true,
+  pagination: false,
+  isNavigation: true,
+  updateOnMove: true,
+  classes: {
+    arrows: 'splide-arrows',
+    arrow: 'splide-arrow',
+    prev: 'arrow-prev',
+    next: 'arrow-next',
+  },
+}))
+
+// 비디오 클릭 핸들러
+const handleVideoClick = () => {
+  isPlaying.value = true
+}
+
+let mainInst: SplideType | null = null
+let thumbsInst: SplideType | null = null
+
+onMounted(() => {
+  mainInst = mainRef.value?.splide ?? null
+  thumbsInst = thumbsRef.value?.splide ?? null
+  if (mainInst && thumbsInst) {
+    mainInst.sync(thumbsInst)
+  }
+})
+
+onBeforeUnmount(() => {
+  mainInst?.destroy?.()
+  thumbsInst?.destroy?.()
+})
+</script>
+
+<template>
+  <div :class="`thumbnail-carousel ${props.class || ''}`" :style="props.style">
+    <!-- 메인 슬라이드 -->
+    <Splide ref="mainRef" :options="mainOptions" class="main-splide">
+      <SplideSlide
+        v-for="(item, index) in props.slideItemList"
+        :key="item.set_order || index"
+        class="main-slide"
+      >
+        <template v-if="!isPlaying">
+          <img
+            :src="getMediaImgSrc(item.media)"
+            alt="main image"
+            class="slide-image"
+          />
+          <AtomsButtonPlay
+            v-if="getMediaType(item.media) === 'video'"
+            :resources-data="videoPlay"
+            class="btn-play"
+            @click="handleVideoClick()"
+          />
+        </template>
+        <template v-else>
+          <iframe
+            :src="getYouTubeEmbedUrl(getMediaText(item.media))"
+            class="absolute top-0 left-0 w-full h-full"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          />
+        </template>
+      </SplideSlide>
+    </Splide>
+
+    <!-- 썸네일 슬라이드 -->
+    <Splide ref="thumbsRef" :options="thumbOptions" class="thumbnail-splide">
+      <SplideSlide
+        v-for="(item, index) in props.slideItemList"
+        :key="item.set_order || index"
+        class="thumbnail-slide"
+      >
+        <img
+          :src="getMediaImgSrc(item.media)"
+          alt="thumbnail image"
+          class="slide-image"
+        />
+      </SplideSlide>
+    </Splide>
+  </div>
+</template>
+
+<style scoped>
+/* 비디오 iframe 전환 애니메이션 */
+
+.thumbnail-carousel {
+  @apply w-full px-[20px] sm:px-[40px] md:max-w-[1024px];
+}
+
+.main-splide {
+  @apply overflow-hidden mx-auto rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];
+}
+.main-slide {
+  @apply aspect-[16/9];
+}
+.slide-image {
+  @apply w-full h-full object-cover;
+}
+.btn-play {
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+
+.thumbnail-splide {
+  @apply overflow-hidden flex justify-center w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-auto md:mx-0 md:px-[120px] md:mt-[28px];
+}
+.thumbnail-splide:deep(.splide__track) {
+  @apply !px-[20px] sm:!px-[40px] md:!px-[0];
+}
+.thumbnail-slide {
+  @apply overflow-hidden relative w-[92px] h-[52px] mr-[12px] !border-none rounded-[4px] md:w-[128px] md:h-[72px] md:mr-[16px]
+  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
+  after:border after:border-white/60 after:rounded-[4px];
+}
+.thumbnail-slide:hover,
+.thumbnail-slide.is-active {
+  @apply after:border-[var(--primary)];
+}
+.thumbnail-splide:deep(.arrow-prev) {
+  @apply left-[48px];
+}
+.thumbnail-splide:deep(.arrow-next) {
+  @apply right-[48px];
+}
+</style>

layers/components/widgets/ButtonList.vue

@@ -3,17 +3,19 @@ import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 const props = defineProps<{
   groupsData: PageDataResourceGroup[]
+  buttonType?: string
 }>()
 </script>
 
 <template>
   <div
     v-if="props.groupsData"
-    class="flex flex-wrap justify-center gap-3 sm:gap-4"
+    class="flex flex-wrap justify-center gap-3 md:gap-4"
   >
     <AtomsButton
       v-for="button in props.groupsData"
       :key="button.group_code"
+      :button-type="props.buttonType"
       class="size-extra-small md:size-medium"
       :background-color="button.btn_info?.color_code_btn"
       :text-color="button.btn_info?.color_code_txt"

layers/components/widgets/VideoPlay.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
-import { getResponsiveSrc, getResponsiveClass } from '#layers/utils/dataUtil'
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 const props = defineProps<{ resourcesData: PageDataResourceGroup }>()
 
-const bgStyles = getResponsiveSrc(props.resourcesData?.res_path, {
-  resourcesType: 'bg',
-})
-
 // YouTube 모달 스토어 사용
 const modalStore = useModalStore()
 
@@ -19,16 +14,8 @@ const handleVideoPlayClick = () => {
 </script>
 
 <template>
-  <button
-    v-if="resourcesData && bgStyles"
-    class="relative group bg-cover bg-center bg-no-repeat w-[66px] h-[66px] sm:w-[100px] sm:h-[100px]"
-    :class="getResponsiveClass()"
-    :style="bgStyles"
+  <AtomsButtonPlay
+    :resources-data="resourcesData"
     @click="handleVideoPlayClick"
-  >
-    <span
-      class="absolute inset-0 m-[10px] bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300 ease-in-out rounded-[50%]"
-    />
-    <span class="sr-only">videoPlay</span>
-  </button>
+  />
 </template>

layers/registry/index.ts

@@ -1,7 +1,7 @@
 import GrVisual01 from '#layers/templates/GrVisual01/index.vue'
 import GrVisual02 from '#layers/templates/GrVisual02/index.vue'
 import GrVisual03 from '#layers/templates/GrVisual03/index.vue'
-// import GrGallery01 from "#layers/templates/GrGallery01/index.vue";
+import GrGallery01 from '#layers/templates/GrGallery01/index.vue'
 // import GrGallery02 from "#layers/templates/GrGallery02/index.vue";
 // import GrGallery03 from "#layers/templates/GrGallery03/index.vue";
 // import GrBoard01 from "#layers/templates/GrBoard01/index.vue";
@@ -14,7 +14,7 @@ export const templateRegistry = {
   GR_VISUAL_01: { component: GrVisual01 },
   GR_VISUAL_02: { component: GrVisual02 },
   GR_VISUAL_03: { component: GrVisual03 },
-  // GR_GALLERY_01: { component: GrGallery01 },
+  GR_GALLERY_01: { component: GrGallery01 },
   // GR_GALLERY_02: { component: GrGallery02 },
   // GR_GALLERY_03: { component: GrGallery03 },
   // GR_BOARD_01: { component: GrBoard01 },

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"

layers/utils/dataUtil.ts

@@ -23,6 +23,16 @@ export const getLayoutType = (
 // 컴포넌트 데이터 접근 관련 유틸리티
 // ============================================================================
 
+/**
+ * 그룹의 첫 번째 데이터를 반환합니다.
+ * @param source props.components 또는 group 객체
+ * @returns 첫 번째 그룹 데이터 또는 null
+ */
+export const getFirstGroup = (source: any) => {
+  if (!source) return null
+  return source.groups?.[0] || null
+}
+
 /**
  * 컴포넌트 그룹에 데이터가 존재하는지 확인합니다.
  * @param source props.components 또는 group 객체
@@ -48,7 +58,7 @@ export const hasComponentGroup = (
 export const getComponentGroup = (source: any, componentName: string) => {
   if (!source) return null
 
-  return source[componentName]?.groups?.[0] || null
+  return getFirstGroup(source[componentName])
 }
 
 /**
@@ -129,5 +139,5 @@ export const getResponsiveSrc = (
  * @returns 반응형 배경 클래스 배열
  */
 export const getResponsiveClass = () => {
-  return ['bg-[image:var(--mobile-bg)]', 'sm:bg-[image:var(--pc-bg)]']
+  return ['bg-[image:var(--mobile-bg)]', 'md:bg-[image:var(--pc-bg)]']
 }

layers/utils/youtube.ts

@@ -0,0 +1,149 @@
+// ============================================================================
+// 유튜브 관련 유틸리티
+// ============================================================================
+
+/**
+ * 유튜브 URL에서 비디오 ID를 추출합니다.
+ * @param url - 유튜브 URL (watch, embed, youtu.be 등 다양한 형태 지원)
+ * @returns 비디오 ID 또는 빈 문자열
+ */
+export const getYouTubeVideoId = (url: string): string => {
+  if (!url) return ''
+
+  // 다양한 유튜브 URL 패턴 지원
+  const patterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/|youtube\.com\/shorts\/)([^&\n?#]+)/,
+    /youtube\.com\/watch\?.*v=([^&\n?#]+)/,
+    /youtube\.com\/embed\/([^&\n?#]+)/,
+    /youtube\.com\/shorts\/([^&\n?#]+)/,
+  ]
+
+  for (const pattern of patterns) {
+    const match = url.match(pattern)
+    if (match && match[1]) {
+      return match[1]
+    }
+  }
+
+  return ''
+}
+
+/**
+ * 유튜브 임베드 URL을 생성합니다.
+ * @param url - 유튜브 URL
+ * @param autoplay - 자동재생 여부
+ * @param rel - 관련 비디오 표시 여부
+ * @returns 임베드 URL
+ */
+/** [TODO] 임베드 형태로 넘어오도록 데이터 수정 후 이부분 사용 필요 없음 */
+export const getYouTubeEmbedUrl = (
+  url: string,
+  autoplay: boolean = false,
+  rel: boolean = false
+): string => {
+  const videoId = getYouTubeVideoId(url)
+  if (!videoId) return ''
+
+  const params = new URLSearchParams()
+  if (autoplay) params.append('autoplay', '1')
+  if (!rel) params.append('rel', '0')
+
+  const queryString = params.toString()
+  return `https://www.youtube.com/embed/${videoId}${queryString ? `?${queryString}` : ''}`
+}
+
+/**
+ * 유튜브 비디오 ID로부터 썸네일 URL을 생성합니다.
+ * @param videoId - 유튜브 비디오 ID
+ * @param quality - 썸네일 품질 ('default', 'medium', 'high', 'standard', 'maxres')
+ * @returns 썸네일 URL
+ */
+export const getYouTubeThumbnail = (
+  videoId: string,
+  quality: 'default' | 'medium' | 'high' | 'standard' | 'maxres' = 'high'
+): string => {
+  if (!videoId) return ''
+
+  const qualityMap = {
+    default: 'default',
+    medium: 'mqdefault',
+    high: 'hqdefault',
+    standard: 'sddefault',
+    maxres: 'maxresdefault',
+  }
+
+  return `https://img.youtube.com/vi/${videoId}/${qualityMap[quality]}.jpg`
+}
+
+/**
+ * 유튜브 URL에서 직접 썸네일 URL을 추출합니다.
+ * @param url - 유튜브 URL
+ * @param quality - 썸네일 품질
+ * @returns 썸네일 URL
+ */
+export const getYouTubeThumbnailFromUrl = (
+  url: string,
+  quality: 'default' | 'medium' | 'high' | 'standard' | 'maxres' = 'high'
+): string => {
+  const videoId = getYouTubeVideoId(url)
+  return getYouTubeThumbnail(videoId, quality)
+}
+
+/**
+ * 미디어 text(src)를 추출합니다.
+ * @param source - 미디어 소스 객체
+ * @returns 미디어 text(src)
+ */
+export const getMediaText = (source: Record<string, any>): string => {
+  if (!source) return ''
+  const resource = source.groups?.[0]
+  const mediaUrl = resource?.display?.text
+  return mediaUrl || ''
+}
+
+/**
+ * 미디어 이미지를 추출합니다. (유튜브인 경우 썸네일)
+ * @param source - 미디어 소스 객체
+ * @param quality - 썸네일 품질
+ * @returns 미디어 이미지 소스
+ */
+export const getMediaImgSrc = (
+  source: Record<string, any>,
+  quality: 'default' | 'medium' | 'high' | 'standard' | 'maxres' = 'high'
+): string => {
+  if (!source) return ''
+
+  const resource = source.groups?.[0]
+  const mediaType = resource?.group_type
+  const mediaUrl = resource?.display?.text
+
+  if (mediaType === 'video' && mediaUrl) {
+    const videoId = getYouTubeVideoId(mediaUrl)
+    const thumbnailUrl = getYouTubeThumbnail(videoId, quality)
+    return thumbnailUrl
+  }
+
+  return mediaUrl || ''
+}
+
+/**
+ * 미디어 타입을 확인합니다.
+ * @param source - 미디어 소스 객체
+ * @returns 미디어 타입 ('video' | 'image' | '')
+ */
+export const getMediaType = (source: Record<string, any>): string => {
+  if (!source) return ''
+
+  const resource = source.groups?.[0]
+  const mediaType = resource?.group_type
+  return mediaType || ''
+}
+
+/**
+ * 비디오 아이템인지 확인합니다.
+ * @param source - 미디어 소스 객체
+ * @returns 비디오 여부
+ */
+export const isVideoItem = (source: Record<string, any>): boolean => {
+  return getMediaType(source) === 'video'
+}