feat. GR_GALLERY_01 템플릿 제작

2025-09-24 21:20:41 +09:00
parent 675ea26d1d
commit a2fc2e17a2
16 changed files with 447 additions and 59 deletions
--- a/layers/components/atoms/Button/Play.vue
+++ b/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>
--- a/layers/components/atoms/Button/index.vue
+++ b/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',
--- a/layers/components/blocks/VisualContent.vue
+++ b/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>

--- a/layers/components/blocks/modal/YouTube.vue
+++ b/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 키로 모달 닫기
--- a/layers/components/blocks/slide/Thumbnail.vue
+++ b/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>
--- a/layers/components/widgets/ButtonList.vue
+++ b/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"
--- a/layers/components/widgets/VideoPlay.vue
+++ b/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>