gil/web-temp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix. 페이지네이션 스타일 적용

Browse Source
This commit is contained in:
clkim
2025-10-21 19:59:25 +09:00
parent 118bec5dde
commit c9c39a06dd
15 changed files with 117 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
layers/templates/GrDetail01/index.vue
View File

@@ -15,7 +15,7 @@ interface Props {
const props = defineProps<Props>()
const splideRef = ref<SplideSlide | null>(null)
const currentSlide = ref<number | null>(null)
const currentSlideIndex = ref<number | null>(null)
const slideData = computed(() => {
return getComponentContainer(props.components, 'group_sets', { maxLength: 5 })
@@ -32,11 +32,11 @@ const goToSlide = (index: number) => {
}
const handleSplideMounted = (splide: SplideType) => {
currentSlide.value = splide.index
currentSlideIndex.value = splide.index
}
const changeCurrentSlide = (_splide: SplideType, newIndex: number) => {
currentSlide.value = newIndex
const handleSplideMove = (_splide: SplideType, newIndex: number) => {
currentSlideIndex.value = newIndex
}
</script>
@@ -50,8 +50,8 @@ const changeCurrentSlide = (_splide: SplideType, newIndex: number) => {
:arrows="false"
:pagination="false"
class="h-full"
@splide:move="changeCurrentSlide"
@splide:mounted="handleSplideMounted"
@move="handleSplideMove"
@mounted="handleSplideMounted"
>
<SplideSlide v-for="(item, index) in slideData" :key="index">
<WidgetsBackground
@@ -72,7 +72,7 @@ const changeCurrentSlide = (_splide: SplideType, newIndex: number) => {
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"
:resources-data="getComponentGroup(item, 'description')"
class="description-lg mt-4 md:mt-6"
class="mt-4 md:mt-6"
/>
</div>
</SplideSlide>
@@ -88,13 +88,16 @@ const changeCurrentSlide = (_splide: SplideType, newIndex: number) => {
:class="[
'pagination-item',
{
'is-active': currentSlide === index,
'is-completed': index < currentSlide,
'is-active': currentSlideIndex === index,
'is-completed': index < currentSlideIndex,
},
]"
>
<button
:class="['btn-pagination', { 'is-active': currentSlide === index }]"
:class="[
'btn-pagination',
{ 'is-active': currentSlideIndex === index },
]"
@click="goToSlide(index)"
>
<span class="item-bullet"></span>

2
layers/templates/GrDetail02/index.vue
View File

@@ -46,7 +46,7 @@ const paginationData = computed(() => {
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"
:resources-data="getComponentGroup(item, 'description')"
class="description-lg mt-4 md:mt-6"
class="mt-4 md:mt-6"
/>
</div>
</SplideSlide>

46
layers/templates/GrDetail03/index.vue
View File

@@ -3,8 +3,14 @@ import { SplideSlide } from '@splidejs/vue-splide'
import {
getComponentContainer,
getComponentGroupAry,
getComponentGroup,
hasComponentGroup,
} from '#layers/utils/dataUtil'
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
import type { Splide as SplideType } from '@splidejs/splide'
import type {
PageDataTemplateComponents,
PageDataTemplateComponent,
} from '#layers/types/api/pageData'
interface Props {
components: PageDataTemplateComponents
@@ -13,6 +19,10 @@ interface Props {
const props = defineProps<Props>()
const breakpoints = useResponsiveBreakpointsReliable()
const currentSlideIndex = ref<number>(0)
const slideData = computed(() => {
return getComponentContainer(props.components, 'group_sets', {
maxLength: 10,
@@ -21,6 +31,21 @@ const slideData = computed(() => {
const paginationData = computed(() => {
return getComponentGroupAry(props.components, 'pagination')
})
const currentVideoSrc = (item: PageDataTemplateComponent) => {
const videoSrc = getComponentGroup(item, 'video')?.res_path
const responsiveSrc = getResponsiveSrc(videoSrc, {
resourcesType: 'video',
})
return breakpoints.value.isMobile
? responsiveSrc.mobileSrc
: responsiveSrc.pcSrc
}
const handleSplideMove = (_splide: SplideType, newIndex: number) => {
currentSlideIndex.value = newIndex
}
</script>
<template>
@@ -28,17 +53,23 @@ const paginationData = computed(() => {
<BlocksSlideThumbnail
:slide-data="slideData"
:pagination-data="paginationData"
@move="handleSplideMove"
>
<SplideSlide v-for="(item, index) in slideData" :key="index">
<WidgetsBackground
v-if="hasComponentGroup(item, 'background')"
:resources-data="getComponentGroup(item, 'background')"
/>
<WidgetsBackground
v-if="hasComponentGroup(item, 'foreground')"
size="contain"
:resources-data="getComponentGroup(item, 'foreground')"
/>
<div class="section-content max-w-[1024px] mx-auto items-start">
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'category')"
:resources-data="getComponentGroup(item, 'category')"
class="title-sm mb-2 line-clamp-1 text-left md:mb-5"
class="title-xs mb-2 line-clamp-1 text-left md:mb-5"
/>
<WidgetsMainTitle
v-if="hasComponentGroup(item, 'mainTitle')"
@@ -48,12 +79,21 @@ const paginationData = computed(() => {
<WidgetsSubTitle
v-if="hasComponentGroup(item, 'subTitle')"
:resources-data="getComponentGroup(item, 'subTitle')"
tag="p"
class="title-sm mt-1 line-clamp-1 text-left"
/>
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"
:resources-data="getComponentGroup(item, 'description')"
class="description-lg mt-2 text-left md:mt-5"
class="mt-2 text-left md:mt-5"
/>
<video
v-if="hasComponentGroup(item, 'video')"
:src="currentVideoSrc(item)"
:autoplay="currentSlideIndex === index"
muted
loop
playsinline
/>
</div>
</SplideSlide>

9
layers/templates/GrGallery01/index.vue
View File

@@ -34,9 +34,9 @@ const mainTitleData = computed(() =>
const slideData = computed(() =>
getComponentContainer(props.components, 'group_sets')
)
const _videoPlayData = computed(() =>
getComponentGroup(props.components, 'videoPlay')
)
const paginationData = computed(() => {
return getComponentGroupAry(props.components, 'pagination')
})
const getMediaComponent = (item: PageDataTemplateComponentSet) => {
return getComponentGroup(item, 'media')
@@ -82,7 +82,7 @@ const handleVideoClick = (index: number) => {
locale.value,
useAnalyticsLogDataDirect(
(sendingGroup as any) || getComponentGroup(props.components, 'videoPlay'),
1
props.pageVerTmplSeq
)
)
}
@@ -116,6 +116,7 @@ const onArrowClick = (direction, targetIndex) => {
variant="media"
:drag="false"
class="mt-[24px] md:mt-[32px]"
:pagination-data="paginationData"
@move="stopVideo"
@arrow-click="onArrowClick"
>

4
layers/templates/GrGallery02/index.vue
View File

@@ -43,7 +43,7 @@ const slideItemSize = {
},
}
const handleChange = (_splide: SplideType, newIndex: number) => {
const handleSplideMove = (_splide: SplideType, newIndex: number) => {
buttonListData.value = getComponentGroupAry(
slideData.value[newIndex],
'buttonList'
@@ -73,7 +73,7 @@ const onArrowClick = (direction, targetIndex) => {
:slide-item-length="slideData?.length"
:pagination="false"
class="mt-[24px] md:mt-[48px]"
@move="handleChange"
@move="handleSplideMove"
@arrow-click="onArrowClick"
>
<SplideSlide v-for="(item, index) in slideData" :key="index">

4
layers/templates/GrGallery03/index.vue
View File

@@ -44,7 +44,7 @@ const slideItemSize = {
},
}
const handleChange = (
const handleSplideMove = (
_splide: SplideType,
newIndex: number,
_oldIndex: number,
@@ -84,7 +84,7 @@ const onArrowClick = (direction, targetIndex) => {
:slide-item-length="slideData?.length"
:pagination="false"
class="mt-[24px] md:mt-[48px]"
@move="handleChange"
@move="handleSplideMove"
@arrow-click="onArrowClick"
>
<SplideSlide v-for="(item, index) in slideData" :key="index">

6
layers/templates/GrVisual03/index.vue
View File

@@ -6,6 +6,7 @@ import {
getComponentGroup,
hasComponentGroup,
} from '#layers/utils/dataUtil'
import { getPaginationClass } from '#layers/utils/styleUtil'
import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
interface Props {
@@ -21,6 +22,9 @@ const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
const slideData = computed(() => {
return getComponentContainer(props.components, 'group_sets')
})
const paginationData = computed(() => {
return getComponentGroupAry(props.components, 'pagination')
})
const onArrowClick = direction => {
const arrowGroupAry = getComponentGroupAry(props.components, 'arrow')
@@ -36,6 +40,7 @@ const onArrowClick = direction => {
:arrows="true"
:pagination="true"
class="h-full"
:pagination-data="paginationData"
@arrow-click="onArrowClick"
>
<SplideSlide v-for="(item, index) in slideData" :key="index">
@@ -57,7 +62,6 @@ const onArrowClick = direction => {
<WidgetsDescription
v-if="hasComponentGroup(item, 'description')"
:resources-data="getComponentGroup(item, 'description')"
class="description-lg"
/>
<WidgetsButtonList
v-if="hasComponentGroup(item, 'buttonList')"