feat. GR_GALLERY_01 템플릿 제작
This commit is contained in:
clkim
@@ -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>
|
||||
|
||||
|
||||
@@ -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 키로 모달 닫기
|
||||
|
||||
162
layers/components/blocks/slide/Thumbnail.vue
Normal file
162
layers/components/blocks/slide/Thumbnail.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user