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

feat. GR_GALLERY_03 템플릿 제작

Browse Source
This commit is contained in:
clkim
2025-09-26 13:58:27 +09:00
parent 201815c5ac
commit 7d38b72d24
8 changed files with 487 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
layers/assets/css/components/_layout.css
View File

@@ -5,7 +5,13 @@
}
.section-content {
@apply relative h-full flex flex-col items-center justify-center gap-4 text-center px-[20px] sm:px-[40px] md:gap-5;
@apply relative h-full flex flex-col items-center justify-center text-center px-[20px] sm:px-[40px];
}
.border-line {
@apply overflow-hidden relative rounded-[4px] md:rounded-lg
after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
after:border after:border-white/10 after:rounded-[4px] after:md:rounded-lg;
}
/* Title Utility Classes */

46
layers/components/blocks/VisualContent.vue
View File

@@ -3,14 +3,18 @@ import type { PageDataResourceGroup } from '#layers/types/api/pageData'
interface Props {
resourcesData?: PageDataResourceGroup
objectFit?: 'contain' | 'cover'
alt?: string
}
const props = defineProps<Props>()
const props = withDefaults(defineProps<Props>(), {
objectFit: 'contain',
})
const breakpoints = useResponsiveBreakpointsReliable()
// 텍스트 데이터 추출
// [TODO] txt 대신 text 사용
const displayText = computed(() => {
return props.resourcesData?.display?.txt || ''
return props.resourcesData?.display?.text || 'image'
})
const imageSrc = computed(() => {
return getResponsiveSrc(props.resourcesData?.res_path)
@@ -21,12 +25,17 @@ const colorName = computed(() => {
const colorCode = computed(() => {
return props.resourcesData?.display?.color_code
})
const currentImageSrc = computed(() => {
if (!imageSrc.value) return ''
return breakpoints.value.isMobile
? imageSrc.value.mobileSrc || ''
: imageSrc.value.pcSrc || ''
})
// HTML 콘텐츠 정리 (줄바꿈 처리)
const sanitizedContent = computed(() => {
return displayText.value?.replace(/\n/g, '<br/>') || ''
})
// 이미지가 있는지 확인
const hasImage = computed(() => {
return imageSrc.value && (imageSrc.value.mobileSrc || imageSrc.value.pcSrc)
@@ -34,25 +43,16 @@ const hasImage = computed(() => {
</script>
<template>
<!-- 이미지가 있는 경우 -->
<template v-if="hasImage">
<!-- 모바일 이미지 (md 미만) -->
<img
v-if="imageSrc.mobileSrc"
:src="imageSrc.mobileSrc"
:alt="displayText"
class="md:hidden w-full h-full object-contain"
/>
<!-- PC 이미지 (md 이상) -->
<img
v-if="imageSrc.pcSrc"
:src="imageSrc.pcSrc"
:alt="displayText"
class="hidden md:block w-full h-full object-contain"
/>
</template>
<!-- 이미지 -->
<img
v-if="hasImage && currentImageSrc"
:src="currentImageSrc"
:alt="alt || displayText"
:class="`w-full h-full object-${objectFit}`"
loading="lazy"
/>
<!-- 텍스트가 있는 경우 -->
<!-- 텍스트 -->
<span
v-else-if="displayText"
v-dompurify-html="sanitizedContent"

58
layers/components/blocks/slide/CenterHighlight.vue
View File

@@ -5,7 +5,7 @@ import type { SlideItemSize } from '#layers/types/components/slide'
interface Props {
slideItemSize: SlideItemSize
type?: 'loop' | 'slide'
slideItemLength?: number
autoplay?: boolean | string
arrows?: boolean
pagination?: boolean
@@ -13,22 +13,27 @@ interface Props {
}
const props = withDefaults(defineProps<Props>(), {
type: 'loop',
autoplay: false,
arrows: true,
pagination: true,
})
const emit = defineEmits(['mounted', 'move', 'moved'])
const isMultipleItems = computed(() => {
return props.slideItemLength > 1
})
const options = computed((): ResponsiveOptions => {
return {
type: props.type,
type: isMultipleItems.value ? 'loop' : 'slide',
focus: 'center',
autoWidth: true,
autoHeight: true,
speed: 400,
updateOnMove: true,
arrows: props.arrows,
pagination: props.pagination,
arrows: props.arrows && isMultipleItems.value,
pagination: props.pagination && isMultipleItems.value,
autoplay: props.autoplay,
classes: {
arrows: 'splide-arrows',
@@ -71,13 +76,37 @@ const style = computed(() => {
})
const handleSplideMounted = (splide: SplideType) => {
emit('mounted', splide)
splide.refresh()
}
const handleMove = (
splide: SplideType,
newIndex: number,
oldIndex: number,
destIndex: number
) => {
emit('move', splide, newIndex, oldIndex, destIndex)
}
const handleMoved = (
splide: SplideType,
newIndex: number,
oldIndex: number,
destIndex: number
) => {
emit('moved', splide, newIndex, oldIndex, destIndex)
}
</script>
<template>
<div :class="`center-highlight ${props.class || ''}`" :style="style">
<Splide :options="options" @splide:mounted="handleSplideMounted">
<Splide
:options="options"
@splide:mounted="handleSplideMounted"
@splide:move="handleMove"
@splide:moved="handleMoved"
>
<slot />
</Splide>
</div>
@@ -93,9 +122,18 @@ const handleSplideMounted = (splide: SplideType) => {
height: var(--banner-height-mo-active);
margin-right: var(--banner-gap-mo);
}
.center-highlight:deep(.splide__slide) .slide-inner {
width: var(--banner-width-mo);
height: var(--banner-height-mo);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.center-highlight:deep(.splide__slide.is-active) {
width: var(--banner-width-mo-container);
}
.center-highlight:deep(.splide__slide.is-active) .slide-inner {
width: var(--banner-width-mo-active);
height: var(--banner-height-mo-active);
}
/* PC 스타일 */
@media (min-width: 1024px) {
@@ -104,9 +142,17 @@ const handleSplideMounted = (splide: SplideType) => {
height: var(--banner-height-pc-active);
margin-right: var(--banner-gap-pc);
}
.center-highlight:deep(.splide__slide) .slide-inner {
width: var(--banner-width-pc);
height: var(--banner-height-pc);
}
.center-highlight:deep(.splide__slide.is-active) {
width: var(--banner-width-pc-container);
}
.center-highlight:deep(.splide__slide.is-active) .slide-inner {
width: var(--banner-width-pc-active);
height: var(--banner-height-pc-active);
}
.center-highlight:deep(.splide-arrow) {
left: 50%;
transform: translate(-50%, -50%);

36
layers/components/widgets/BannerList.vue
View File

@@ -15,63 +15,33 @@ const props = withDefaults(defineProps<BannerListProps>(), {
arrows: true,
pagination: true,
})
const isMultipleItems = computed(() => {
return props.resourcesData.length > 1
})
</script>
<template>
<BlocksSlideCenterHighlight
:slide-item-size="props.slideItemSize"
:type="isMultipleItems ? 'loop' : 'slide'"
:arrows="isMultipleItems ? true : false"
:slide-item-length="props.resourcesData.length"
:pagination="false"
class="mt-[36px] md:mt-[60px]"
>
<SplideSlide
v-for="(item, index) in props.resourcesData"
:key="index"
class="splide-slide"
>
<SplideSlide v-for="(item, index) in props.resourcesData" :key="index">
<BlocksCardNews
:title="item.title"
:description="item.option01"
:img-path="getResolvedHost(item.img_path)"
:url="item.url"
:link-target="item.link_target"
class="news-center-highlight"
class="slide-inner"
/>
</SplideSlide>
</BlocksSlideCenterHighlight>
</template>
<style scoped>
.center-highlight:deep(.splide__slide.is-active .news-center-highlight) {
width: var(--banner-width-mo-active);
height: var(--banner-height-mo-active);
}
.center-highlight:deep(.splide__slide.is-active .card-link) {
pointer-events: auto;
}
.news-center-highlight {
width: var(--banner-width-mo);
height: var(--banner-height-mo);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.center-highlight:deep(.splide__slide .card-link) {
pointer-events: none;
}
/* PC 스타일 */
@media (min-width: 1024px) {
.center-highlight:deep(.splide__slide.is-active .news-center-highlight) {
width: var(--banner-width-pc-active);
height: var(--banner-height-pc-active);
}
.news-center-highlight {
width: var(--banner-width-pc);
height: var(--banner-height-pc);
}
}
</style>

28
layers/composables/useBreakpoints.ts
View File

@@ -1,11 +1,23 @@
const BREAKPOINTS = {
xs: 360,
sm: 768,
md: 1024,
lg: 1440,
} as const
/**
* 반응형 브레이크포인트 계산 헬퍼
* 확실한 반응형 브레이크포인트 헬퍼 (useWindowSize 기반)
*/
export const useResponsiveBreakpoints = () => {
return useBreakpoints({
xs: 360, // Mobile: 360px ~ 767px
sm: 768, // Tablet: 768px ~ 1023px
md: 1024, // PC: 1024px ~ 1439px
lg: 1440, // Large PC: 1440px+
})
export const useResponsiveBreakpointsReliable = () => {
const { width } = useWindowSize()
return computed(() => ({
xs: width.value >= BREAKPOINTS.xs,
sm: width.value >= BREAKPOINTS.sm,
md: width.value >= BREAKPOINTS.md,
lg: width.value >= BREAKPOINTS.lg,
isMobile: width.value < BREAKPOINTS.md,
isTablet: width.value >= BREAKPOINTS.sm && width.value < BREAKPOINTS.md,
isDesktop: width.value >= BREAKPOINTS.md,
}))
}

274
layers/public/data/GrGallery03.txt Normal file
View File

@@ -0,0 +1,274 @@
const test = {
arrow: {
groups: [
{
res_path: {
path_mo: '/local/template/l9/common/btn_system_chevron_prev.svg',
},
tracking: {
click_item: '3. 네비게이션(좌)',
action_type: 'click',
click_sarea: 'aboutLord_tmpl_01__arrow',
},
group_code: 'arrow_left',
group_type: 'image',
resource_type: 'IMG_COMM_GLOBAL',
},
{
res_path: {
path_mo: '/local/template/l9/common/btn_system_chevron_next.svg',
},
tracking: {
click_item: '3. 네비게이션(우)',
action_type: 'click',
click_sarea: 'aboutLord_tmpl_01__arrow',
},
group_code: 'arrow_right',
group_type: 'image',
resource_type: 'IMG_COMM_GLOBAL',
},
],
},
mainTitle: {
groups: [
{
display: {
text: '캐릭터 소개',
color_code: '',
color_name: 'text-secondary',
},
res_scope: 'lang',
group_code: 'mainTitle_text',
group_type: 'text',
resource_type: 'TXT',
},
],
},
background: {
groups: [
{
res_path: {
path_mo: '/local/template/l9/5/1/1/GR_GALLERY_02/common/bg_m.jpg',
path_pc: '/local/template/l9/5/1/1/GR_GALLERY_02/common/bg.jpg',
},
res_scope: 'comm',
group_code: 'background_img',
group_type: 'image',
resource_type: 'IMG_COMM',
},
],
},
group_sets: [
{
imgList: {
groups: [
{
res_path: {
path_mo: 'https://picsum.photos/800/600',
path_pc:
'https://dummyimage.com/800x600/cccccc/969696&text=Test+Image',
},
group_code: 'imgList_img',
group_type: 'image',
resource_type: 'IMG_LANG',
},
],
},
set_order: 1,
buttonList: {
groups: [
{
btn_info: {
detail: {
action: {
url: '/ko/about/lord/lael',
link_target: '_self',
click_action_type: 1,
},
btn_type: 'URL',
},
txt_btn_name: '자세히 보기',
color_code_btn: '#CECECE',
color_code_txt: '#CECECE',
color_name_btn: '',
color_name_txt: '',
},
tracking: {
click_item: '라엘',
action_type: 'click',
click_sarea: 'aboutLord_tmpl_01__buttonList_btn',
},
group_code: 'buttonList_btn',
group_type: 'button',
resource_type: 'BTN',
},
],
},
subTitle: {
groups: [
{
display: {
text: '강력한 마스터리의 힘',
color_code: '#ff0000',
color_name: '',
},
group_code: 'mainTitle_text',
group_type: 'text',
resource_type: 'TXT',
},
],
},
description: {
groups: [
{
display: {
text: '강력한 마스터리의 00000000',
color_code: '#f0f0f0',
color_name: '',
},
},
],
},
},
{
imgList: {
groups: [
{
res_path: {
path_mo: 'https://picsum.photos/800/600',
path_pc: 'https://picsum.photos/800/600',
},
group_code: 'imgList_img',
group_type: 'image',
resource_type: 'IMG_LANG',
},
],
},
set_order: 2,
buttonList: {
groups: [
{
btn_info: {
detail: {
action: {
url: '/ko/about/lord/rpwain',
link_target: '_self',
click_action_type: 1,
},
btn_type: 'URL',
},
txt_btn_name: '자세히 보기',
color_code_btn: '#CECECE',
color_code_txt: '#CECECE',
color_name_btn: '',
color_name_txt: '',
},
tracking: {
click_item: '로웨인',
action_type: 'click',
click_sarea: 'aboutLord_tmpl_01__buttonList_btn',
},
group_code: 'buttonList_btn',
group_type: 'button',
resource_type: 'BTN',
},
],
},
subTitle: {
groups: [
{
display: {
text: '강력한 마스터리의 힘',
color_code: '#ffffff',
color_name: '',
},
group_code: 'mainTitle_text',
group_type: 'text',
resource_type: 'TXT',
},
],
},
description: {
groups: [
{
display: {
text: '강력한 마스터리의 힘111111',
color_code: '#ffffff',
color_name: '',
},
},
],
},
},
{
imgList: {
groups: [
{
res_path: {
path_mo: 'https://picsum.photos/800/600',
path_pc: 'https://picsum.photos/800/600',
},
group_code: 'imgList_img',
group_type: 'image',
resource_type: 'IMG_LANG',
},
],
},
set_order: 3,
buttonList: {
groups: [
{
btn_info: {
detail: {
action: {
url: '/ko/about/lord/morian',
link_target: '_self',
click_action_type: 1,
},
btn_type: 'URL',
},
txt_btn_name: '자세히 보기',
color_code_btn: '#CECECE',
color_code_txt: '#CECECE',
color_name_btn: '',
color_name_txt: '',
},
tracking: {
click_item: '모리안',
action_type: 'click',
click_sarea: 'aboutLord_tmpl_01__buttonList_btn',
},
group_code: 'buttonList_btn',
group_type: 'button',
resource_type: 'BTN',
},
],
},
subTitle: {
groups: [
{
display: {
text: '강력한 마스터리의 힘',
color_code: '#ffffff',
color_name: '',
},
group_code: 'mainTitle_text',
group_type: 'text',
resource_type: 'TXT',
},
],
},
description: {
groups: [
{
display: {
text: '강력한 마스터리의 힘22222',
color_code: '#ffffff',
color_name: '',
},
},
],
},
},
],
}

8
layers/registry/index.ts
View File

@@ -2,8 +2,8 @@ import GrVisual01 from '#layers/templates/GrVisual01/index.vue'
import GrVisual02 from '#layers/templates/GrVisual02/index.vue'
import GrVisual03 from '#layers/templates/GrVisual03/index.vue'
import GrGallery01 from '#layers/templates/GrGallery01/index.vue'
// import GrGallery02 from "#layers/templates/GrGallery02/index.vue";
// import GrGallery03 from "#layers/templates/GrGallery03/index.vue";
import GrGallery02 from '#layers/templates/GrGallery02/index.vue'
import GrGallery03 from '#layers/templates/GrGallery03/index.vue'
// import GrBoard01 from "#layers/templates/GrBoard01/index.vue";
// import GrDetail01 from "#layers/templates/GrDetail01/index.vue";
// import GrDetail02 from "#layers/templates/GrDetail02/index.vue";
@@ -15,8 +15,8 @@ export const templateRegistry = {
GR_VISUAL_02: { component: GrVisual02 },
GR_VISUAL_03: { component: GrVisual03 },
GR_GALLERY_01: { component: GrGallery01 },
// GR_GALLERY_02: { component: GrGallery02 },
// GR_GALLERY_03: { component: GrGallery03 },
GR_GALLERY_02: { component: GrGallery02 },
GR_GALLERY_03: { component: GrGallery03 },
// GR_BOARD_01: { component: GrBoard01 },
// GR_DETAIL_01: { component: GrDetail01 },
// GR_DETAIL_02: { component: GrDetail02 },

104
layers/templates/GrGallery03/index.vue Normal file
View File

@@ -0,0 +1,104 @@
<script setup lang="ts">
import { SplideSlide } from '@splidejs/vue-splide'
import { getComponentGroup } from '#layers/utils/dataUtil'
import type { Splide as SplideType } from '@splidejs/splide'
interface Props {
components: Record<string, any>
pageVerTmplSeq: string
}
const props = defineProps<Props>()
const backgroundData = computed(() =>
getComponentGroup(props.components, 'background')
)
const mainTitleData = computed(() =>
getComponentGroup(props.components, 'mainTitle')
)
const slideData = computed(() => props.components.group_sets)
const subTitleData = ref(getComponentGroup(slideData?.value[0], 'subTitle'))
const descriptionData = ref(
getComponentGroup(slideData?.value[0], 'description')
)
const buttonListData = ref(
getComponentGroupAry(slideData?.value[0], 'buttonList')
)
const slideItemSize = {
mo: {
width: 275,
height: 154,
gap: 12,
},
pc: {
width: 602,
height: 338,
gap: 32,
},
}
const handleChange = (
_splide: SplideType,
newIndex: number,
_oldIndex: number,
_destIndex: number
) => {
subTitleData.value = getComponentGroup(slideData.value[newIndex], 'subTitle')
descriptionData.value = getComponentGroup(
slideData.value[newIndex],
'description'
)
buttonListData.value = getComponentGroupAry(
slideData.value[newIndex],
'buttonList'
)
}
</script>
<template>
<section class="pt-[80px] pb-[100px] md:pt-[120px] md:pb-[140px]">
<WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
<div class="section-content px-0 max-w-[2043px] mx-auto">
<WidgetsMainTitle
v-if="mainTitleData"
:resources-data="mainTitleData"
class="title-sm"
/>
<BlocksSlideCenterHighlight
v-if="slideData"
:slide-item-size="slideItemSize"
:slide-item-length="slideData?.length"
:pagination="false"
class="mt-[24px] md:mt-[48px]"
@move="handleChange"
>
<SplideSlide v-for="(item, index) in slideData" :key="index">
<div class="slide-inner border-line">
<BlocksVisualContent
:resources-data="getComponentGroup(item, 'imgList')"
object-fit="cover"
:alt="getComponentGroup(item, 'subTitle')?.display?.text"
/>
</div>
</SplideSlide>
</BlocksSlideCenterHighlight>
<WidgetsSubTitle
v-if="subTitleData"
:resources-data="subTitleData"
class="title-md mt-[32px]"
/>
<WidgetsDescription
v-if="descriptionData"
:resources-data="descriptionData"
class="mt-[8px] md:mt-[16px]"
/>
<WidgetsButtonList
v-if="buttonListData"
:resources-data="buttonListData"
class="mt-[32px]"
/>
</div>
</section>
</template>