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

feat. 일반 템플릿 로그 추가

Browse Source
This commit is contained in:
clkim
2025-12-11 13:38:25 +09:00
parent e77480962d
commit 1d5c9571b7
36 changed files with 750 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
layers/components/widgets/slide/CenterFocus.vue Normal file
View File

@@ -0,0 +1,192 @@
<script setup lang="ts">
import { Splide, SplideTrack } from '@splidejs/vue-splide'
import type { Splide as SplideType, ResponsiveOptions } from '@splidejs/splide'
import type { SlideItemSize } from '#layers/types/components/slide'
import type { PageDataResourceGroups } from '#layers/types/api/pageData'
interface Props {
slideItemSize: SlideItemSize
slideItemLength?: number
autoplay?: boolean
interval?: number
arrows?: boolean
arrowsData?: PageDataResourceGroups
pagination?: boolean
class?: string
}
const props = withDefaults(defineProps<Props>(), {
autoplay: false,
interval: 5000,
arrows: true,
pagination: true,
})
const emit = defineEmits(['mounted', 'move'])
const splideIndex = defineModel<number>('index', { required: false })
const isMultipleItems = computed(() => (props.slideItemLength ?? 0) > 1)
const options = computed((): ResponsiveOptions => {
return {
type: isMultipleItems.value ? 'loop' : 'slide',
focus: 'center',
autoWidth: true,
autoHeight: true,
speed: 600,
easing: 'ease-in-out',
updateOnMove: true,
arrows: props.arrows && isMultipleItems.value,
pagination: props.pagination && isMultipleItems.value,
autoplay: props.autoplay,
interval: props.interval,
flickPower: 300,
classes: {
pagination: 'splide-pagination-bullets',
page: 'splide-pagination-bullet',
},
}
})
const style = computed(() => {
if (!props.slideItemSize) return {}
const { mo, pc } = props.slideItemSize
const moScale = mo?.scale || 1.1429
const pcScale = pc?.scale || 1.1429
const moSize = {
'--banner-width-mo': `${mo.width}px`,
'--banner-height-mo': `${mo.height}px`,
'--banner-gap-mo': `${mo.gap}px`,
// 모바일 확대값
'--banner-width-mo-active': `${mo.width * moScale}px`,
'--banner-height-mo-active': `${mo.height * moScale}px`,
'--banner-width-mo-container': `${mo.width * moScale + mo.gap}px`,
}
const pcSize = {
'--banner-width-pc': `${pc.width}px`,
'--banner-height-pc': `${pc.height}px`,
'--banner-gap-pc': `${pc.gap}px`,
// PC 확대값
'--banner-width-pc-active': `${pc.width * pcScale}px`,
'--banner-height-pc-active': `${pc.height * pcScale}px`,
'--banner-width-pc-container': `${pc.width * pcScale}px`,
}
return {
...moSize,
...pcSize,
}
})
const handleSplideMounted = (splide: SplideType) => {
emit('mounted', splide)
splide.refresh()
if (splideIndex.value !== undefined) {
splideIndex.value = splide.index
}
}
const handleMove = (
splide: SplideType,
newIndex: number,
oldIndex: number,
destIndex: number
) => {
emit('move', splide, newIndex, oldIndex, destIndex)
if (splideIndex.value !== undefined) {
splideIndex.value = newIndex
}
}
</script>
<template>
<div :class="`center-focus ${props.class || ''}`" :style="style">
<Splide
:options="options"
:has-track="false"
@splide:mounted="handleSplideMounted"
@splide:move="handleMove"
>
<SplideTrack>
<slot />
</SplideTrack>
<BlocksSlideArrows v-if="props.arrows" :arrows-data="props.arrowsData" />
</Splide>
</div>
</template>
<style scoped>
.center-focus {
@apply w-full;
}
.center-focus:deep(.splide__slide) {
@apply flex items-center justify-center;
width: var(--banner-width-mo);
height: var(--banner-height-mo-active);
margin-right: var(--banner-gap-mo);
transition: transform 0.6s ease-out;
opacity: 0.3;
}
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone)) {
width: var(--banner-width-mo-container);
}
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone)),
.center-focus:deep(.splide__slide.is-next),
.center-focus:deep(.splide__slide.is-prev) {
opacity: 1;
}
.center-focus:deep(.splide__slide) .slide-inner {
width: var(--banner-width-mo);
height: var(--banner-height-mo);
background-color: #191919;
transition: all 0.6s ease-out;
}
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone))
.slide-inner {
width: var(--banner-width-mo-active);
height: var(--banner-height-mo-active);
}
.center-focus:deep(.splide__slide) .slide-inner .inner-content {
opacity: 0.5;
transition: all 0.6s ease-out;
}
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone))
.slide-inner
.inner-content {
opacity: 1;
}
/* PC 스타일 */
@media (min-width: 1024px) {
.center-focus:deep(.splide__slide) {
width: var(--banner-width-pc);
height: var(--banner-height-pc-active);
margin-right: var(--banner-gap-pc);
}
.center-focus:deep(.splide__slide) .slide-inner {
width: var(--banner-width-pc);
height: var(--banner-height-pc);
}
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone)) {
width: var(--banner-width-pc-container);
}
.center-focus:deep(.splide__slide.is-active:not(.splide__slide--clone))
.slide-inner {
width: var(--banner-width-pc-active);
height: var(--banner-height-pc-active);
}
.center-focus:deep(.splide__arrow--prev) {
left: 28px;
}
.center-focus:deep(.splide__arrow--next) {
right: 28px;
}
}
</style>