Merge branch 'feature/20250910-all' into feature/20251001-gil

layers/components/atoms/Button/Play.vue

@@ -12,7 +12,7 @@ const emit = defineEmits<{
 
 <style scoped>
 .btn-play {
-  @apply relative w-[66px] h-[66px] bg-[image:var(--video-play)] bg-cover bg-center bg-no-repeat md:w-[100px] md:h-[100px]
+  @apply relative w-[60px] h-[60px] bg-[image:var(--video-play)] bg-cover bg-center bg-no-repeat md:w-[80px] md:h-[80px]
   after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-[50%] after:opacity-0 after:transition-opacity after:duration-300 after:ease-in-out
   hover:after:opacity-10;
 }

layers/components/atoms/Button/index.vue

@@ -14,7 +14,7 @@ interface props {
 
 const props = withDefaults(defineProps<props>(), {
   type: 'action',
-  buttonSize: 'size-extra-small md:size-large',
+  buttonSize: 'size-small md:size-large',
   backgroundColor: 'var(--primary)',
   textColor: 'var(--alternative-02)',
   disabled: false,

layers/components/blocks/ButtonLuncher.vue

@@ -10,8 +10,10 @@ const {
 
 <template>
   <AtomsButton
+    button-size="size-small md:size-small"
     :class="$attrs?.class"
     :disabled="isProcessing"
+    style="font-size: 16px"
     @click="validateLauncher"
   >
     <slot />

layers/components/blocks/slide/Fade.vue

@@ -16,11 +16,11 @@ const props = withDefaults(defineProps<Props>(), {
   pagination: true,
 })
 
-
 const emit = defineEmits(['mounted', 'move', 'moved', 'arrowClick'])
 
 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()
+const splideRef = ref()
 
 const options = computed((): ResponsiveOptions => {
   return {
@@ -31,6 +31,8 @@ const options = computed((): ResponsiveOptions => {
     speed: 600,
     updateOnMove: true,
     autoplay: props.autoplay,
+    pauseOnHover: false,
+    pauseOnFocus: false,
     arrows: props.arrows,
     pagination: props.pagination,
     classes: {
@@ -44,11 +46,14 @@ const options = computed((): ResponsiveOptions => {
   }
 })
 
+defineExpose({
+  splide: computed(() => splideRef.value?.splide),
+})
 
 const handleSplideMounted = (splide: SplideType) => {
   emit('mounted', splide)
   splide.refresh()
-  
+
   // 화살표 버튼 클릭 이벤트 리스너 추가
   nextTick(() => {
     addArrowClickListeners(splide, (direction, targetIndex) => {
@@ -78,8 +83,9 @@ const handleMoved = (
 </script>
 
 <template>
-  <Splide 
-    :options="options" 
+  <Splide
+    ref="splideRef"
+    :options="options"
     class="h-full"
     @splide:mounted="handleSplideMounted"
     @splide:move="handleMove"

layers/components/blocks/slide/Thumbnail.vue

@@ -1,43 +1,42 @@
 <script setup lang="ts">
 import { Splide, SplideSlide } from '@splidejs/vue-splide'
-import { getComponentGroup, isTypeVideo } from '#layers/utils/dataUtil'
-import {
-  getMediaSrc,
-  getYouTubeEmbedUrl,
-  getMediaImgSrc,
-} from '#layers/utils/youtube'
 import type { Splide as SplideType, Options } from '@splidejs/splide'
 import type {
   PageDataTemplateComponentSet,
-  PageDataResourceGroup,
+  PageDataResourceGroups,
 } from '#layers/types/api/pageData'
 import { useSplideArrow } from '#layers/composables/useSplideArrow'
 
 interface Props {
   slideData: PageDataTemplateComponentSet[]
-  videoPlay?: PageDataResourceGroup
-  arrows?: boolean
-  pagination?: boolean
-  class?: string
-  style?: Record<string, string>
+  paginationData?: PageDataResourceGroups
+  variant?: 'default' | 'media'
+  drag?: boolean
 }
 
-const {locale} = useI18n()
-const props = defineProps<Props>()
-const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
 
 const emit = defineEmits(['arrowClick'])
 
 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()
 
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  drag: true,
+})
 
 let mainInst: SplideType | null = null
 let thumbsInst: SplideType | null = null
 
+defineExpose({
+  mainInst: computed(() => mainInst),
+  thumbsInst: computed(() => thumbsInst),
+})
+
+const breakpoints = useResponsiveBreakpointsReliable()
+
 const mainRef = ref<InstanceType<typeof Splide> | null>(null)
 const thumbsRef = ref<InstanceType<typeof Splide> | null>(null)
-const playingSlideIndex = ref<number | null>(null)
 
 const mainOptions = computed<Options>(() => ({
   type: 'fade',
@@ -47,7 +46,7 @@ const mainOptions = computed<Options>(() => ({
   speed: 600,
   arrows: false,
   pagination: false,
-  drag: false,
+  drag: props.drag,
 }))
 
 const thumbOptions = computed<Options>(() => ({
@@ -68,49 +67,24 @@ const thumbOptions = computed<Options>(() => ({
   },
 }))
 
-const getMediaComponent = (item: PageDataTemplateComponentSet) => {
-  return getComponentGroup(item, 'media')
-}
-
-const getMediaImgSrcFromItem = (item: PageDataTemplateComponentSet) => {
-  const mediaComponent = getMediaComponent(item)
-  return mediaComponent ? getMediaImgSrc(mediaComponent) : ''
-}
-
-const getYouTubeEmbedUrlFromMedia = (item: PageDataTemplateComponentSet) => {
-  const mediaComponent = getMediaComponent(item)
-  if (!mediaComponent) return ''
-  const mediaSrc = getMediaSrc(mediaComponent)
-  return mediaSrc ? getYouTubeEmbedUrl(mediaSrc, true) : ''
-}
-
-const isPassVideo = (item: PageDataTemplateComponentSet, index: number) => {
-  const mediaComponent = getMediaComponent(item)
-  const isNotPlaying = index !== playingSlideIndex.value
-  const isVideoType =
-    mediaComponent && isTypeVideo(mediaComponent?.resource_type)
-
-  return isVideoType && isNotPlaying
-}
-
-const handleVideoClick = (index: number) => {
-  playingSlideIndex.value = index
-  
-  // tracking 데이터 수정
-  const modifiedTracking = {
-    ...props.videoPlay.tracking,
-    click_item: props.videoPlay.tracking.click_item + `_${index}`
+const getThumbnailSrc = (item: PageDataTemplateComponentSet) => {
+  if (props.variant === 'media') {
+    const mediaComponent = getComponentGroup(item, 'media')
+    return mediaComponent ? getMediaImgSrc(mediaComponent) : ''
   }
-  const trackingData = {
-    tracking: modifiedTracking
-  };
-  sendLog(locale.value, useAnalyticsLogDataDirect(trackingData, 1))
-}
 
-const stopVideo = () => {
-  playingSlideIndex.value = null
-}
+  const pagenaviThumbnailComponent = getComponentGroup(
+    item,
+    'pagenaviThumbnail'
+  )
+  const pagenaviThumbnailSrc = getResponsiveSrc(
+    pagenaviThumbnailComponent?.res_path
+  )
 
+  return breakpoints.value.isMobile
+    ? pagenaviThumbnailSrc?.mobileSrc
+    : pagenaviThumbnailSrc?.pcSrc || ''
+}
 
 onMounted(() => {
   mainInst = mainRef.value?.splide ?? null
@@ -118,7 +92,6 @@ onMounted(() => {
 
   if (mainInst && thumbsInst) {
     mainInst.sync(thumbsInst)
-    mainInst.on('moved', stopVideo)
     
     // 썸네일 슬라이드의 화살표 버튼에 이벤트 리스너 추가
     nextTick(() => {
@@ -136,47 +109,26 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div :class="`thumbnail-carousel ${props.class || ''}`" :style="props.style">
+  <div :class="['thumbnail-carousel', $attrs?.class, `thumbnail-${variant}`]">
     <!-- 메인 슬라이드 -->
     <Splide ref="mainRef" :options="mainOptions" class="main-splide">
-      <SplideSlide
-        v-for="(item, index) in props.slideData"
-        :key="item.set_order || index"
-        class="main-slide"
-      >
-      {{ item }}
-        <img
-          :src="getMediaImgSrcFromItem(item)"
-          alt="main image"
-          class="slide-image"
-          :class="{ 'opacity-0': playingSlideIndex === index }"
-        />
-        <AtomsButtonPlay
-          v-if="isPassVideo(item, index)"
-          :resources-data="videoPlay"
-          class="btn-play"
-          @click="handleVideoClick(index)"
-        />
-        <iframe
-          v-if="playingSlideIndex === index"
-          :src="getYouTubeEmbedUrlFromMedia(item)"
-          class="video-iframe"
-          frameborder="0"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowfullscreen
-        />
-      </SplideSlide>
+      <slot />
     </Splide>
-
     <!-- 썸네일 슬라이드 -->
-    <Splide ref="thumbsRef" :options="thumbOptions" class="thumbnail-splide">
+    <Splide
+      v-if="props.slideData.length > 0"
+      ref="thumbsRef"
+      :options="thumbOptions"
+      class="thumbnail-splide"
+      :style="getPaginationClass(paginationData, { type: 'thumbnail' })"
+    >
       <SplideSlide
         v-for="(item, index) in props.slideData"
         :key="item.set_order || index"
         class="thumbnail-slide"
       >
         <img
-          :src="getMediaImgSrcFromItem(item)"
+          :src="getThumbnailSrc(item)"
           alt="thumbnail image"
           class="slide-image"
         />
@@ -187,44 +139,71 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .thumbnail-carousel {
-  @apply w-full md:max-w-[944px];
 }
-
-.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 relative aspect-[16/9];
-}
-.slide-image {
+.thumbnail-carousel:deep(img) {
   @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;
-}
-.video-iframe {
-  @apply absolute top-0 left-0 w-full h-full;
-}
-
 .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];
+  @apply overflow-hidden flex justify-center;
 }
 .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];
+  @apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] md:mr-[16px]
+  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:border after:rounded-[4px];
+  background-color: var(--pagination-disabled);
 }
 .thumbnail-slide:hover,
 .thumbnail-slide.is-active {
-  @apply after:border-[var(--primary)];
+  background-color: var(--pagination-active);
 }
-.thumbnail-splide:deep(.arrow-prev) {
+.thumbnail-slide::after {
+  border-color: var(--pagination-disabled);
+}
+.thumbnail-slide:hover::after,
+.thumbnail-slide.is-active::after {
+  border-color: var(--pagination-active);
+}
+
+/* 기본 버전 스타일 */
+.thumbnail-carousel.thumbnail-default,
+.thumbnail-carousel.thumbnail-default .main-splide,
+.thumbnail-carousel.thumbnail-default .main-splide:deep(.splide__track) {
+  @apply h-full;
+}
+.thumbnail-carousel.thumbnail-default .thumbnail-splide {
+  @apply absolute bottom-[32px] left-1/2 -translate-x-1/2 max-w-[100%] md:bottom-[48px] md:max-w-[896px] md:px-[72px];
+}
+.thumbnail-carousel.thumbnail-default:deep(.arrow-prev) {
+  @apply left-0;
+}
+.thumbnail-carousel.thumbnail-default:deep(.arrow-next) {
+  @apply right-0;
+}
+.thumbnail-carousel.thumbnail-default .thumbnail-slide {
+  @apply aspect-[1/1] w-[8px] md:w-[80px]
+  after:hidden md:after:block;
+}
+.thumbnail-carousel.thumbnail-default .thumbnail-slide:hover img,
+.thumbnail-carousel.thumbnail-default .thumbnail-slide.is-active img {
+  @apply md:grayscale-0 md:opacity-100;
+}
+.thumbnail-carousel.thumbnail-default .thumbnail-slide img {
+  @apply hidden md:block md:grayscale md:opacity-60;
+}
+
+/* 미디어 버전 스타일 */
+.thumbnail-carousel.thumbnail-media .thumbnail-splide {
+  @apply w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-fit md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[120px];
+}
+.thumbnail-carousel.thumbnail-media .thumbnail-splide:deep(.splide__track) {
+  @apply !px-[20px] sm:!px-[40px] md:!px-[0];
+}
+.thumbnail-carousel.thumbnail-media:deep(.arrow-prev) {
   @apply left-[48px];
 }
-.thumbnail-splide:deep(.arrow-next) {
+.thumbnail-carousel.thumbnail-media:deep(.arrow-next) {
   @apply right-[48px];
 }
+.thumbnail-carousel.thumbnail-media .thumbnail-slide {
+  @apply aspect-[16/9] w-[92px] md:w-[128px];
+}
 </style>

layers/components/widgets/ButtonList.vue

@@ -107,8 +107,8 @@ const handleButtonClick = (btnInfo: PageDataResourceGroupBtnInfo, index: any) =>
 
 <style scoped>
 :deep(.btn-market) {
-  @apply flex items-start bg-[16px_50%] bg-[length:auto_34px] bg-no-repeat
-  min-w-[113px] pt-[23px] pl-[44px] pr-[22px] text-[11px]
+  @apply flex items-start bg-[16px_50%] bg-[length:auto_28px] bg-no-repeat
+  min-w-[113px] pt-[22px] pl-[44px] pr-[22px] text-[11px]
   md:min-w-[150px] md:pt-[30px] md:pl-[64px] md:pr-[28px] md:text-[12px] md:bg-[20px_50%] md:bg-[length:auto_40px];
 }
 </style>