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

feat. GR_VISUAL_02 컴포넌트 제작

Browse Source
This commit is contained in:
clkim
2025-09-23 20:37:33 +09:00
parent 81bcca8e23
commit 34a8248731
13 changed files with 689 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
layers/assets/css/app.css
View File

@@ -1,8 +1,10 @@
@import './base/_theme.css';
@import './base/_reset.css';
@import './components/_swiper-pagination.css';
@import './components/_splide.css';
@import './components/_button.css';
@import '@splidejs/vue-splide/css';
@tailwind base;
@tailwind components;
@tailwind utilities;

102
layers/assets/css/components/_splide.css Normal file
View File

@@ -0,0 +1,102 @@
/* 페이지네이션 버튼 - 모바일 퍼스트 */
.splide-pagination-bullets {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 24px;
z-index: 5;
}
.splide-pagination-bullets.type-full {
position: absolute;
bottom: 32px;
left: 0;
}
.splide-pagination-bullet {
position: relative;
width: 8px;
height: 8px;
background: var(--primary);
border-radius: 50%;
opacity: 1;
}
.splide-pagination-bullet:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s ease;
}
.splide-pagination-bullet.is-active:after {
opacity: 0;
}
/* 네비게이션 버튼 - 모바일 퍼스트 */
.splide-arrow {
display: none;
/* position: absolute;
top: 50%;
width: 40px;
height: 40px;
transform: translateY(-50%);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
z-index: 5;
background-color: var(--primary); */
}
/* .type-full .arrow-prev {
left: 20px;
}
.type-full.arrow-next {
right: 20px;
} */
/* 데스크톱 스타일 */
@media (min-width: 1024px) {
.splide-pagination-bullets {
gap: 24px;
margin-top: 32px;
}
.splide-pagination-bullets.position-absolute {
bottom: 48px;
}
.splide-pagination-bullet {
width: 12px;
height: 12px;
}
.splide-arrow {
display: block;
position: absolute;
top: 50%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--primary);
transform: translateY(-50%);
cursor: pointer;
z-index: 5;
}
.type-full .arrow-prev {
left: 40px;
}
.type-full .arrow-next {
right: 40px;
}
}

73
layers/assets/css/components/_swiper-pagination.css
View File

@@ -1,73 +0,0 @@
/* 페이지네이션 버튼 */
main .slide-pagination.swiper-pagination-bullets {
position: absolute;
bottom: 48px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
z-index: 5;
}
.slide-pagination .swiper-pagination-bullet {
position: relative;
width: 12px;
height: 12px;
background: var(--primary);
border-radius: 50%;
opacity: 1;
}
.slide-pagination .swiper-pagination-bullet:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
}
.slide-pagination .swiper-pagination-bullet-active:after {
display: none;
}
/* 네비게이션 버튼 */
.slide-prev,
.slide-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
z-index: 5;
background-color: var(--primary);
}
.slide-prev {
left: 40px;
}
.slide-next {
right: 40px;
}
@media (max-width: 1023px) {
main .slide-pagination.swiper-pagination-bullets {
bottom: 32px;
gap: 12px;
}
.slide-pagination .swiper-pagination-bullet {
width: 8px;
height: 8px;
}
}

230
layers/components/widgets/BannerList.vue Normal file
View File

@@ -0,0 +1,230 @@
<script setup lang="ts">
import { Splide, SplideSlide } from '@splidejs/vue-splide'
import type { Splide as SplideType } from '@splidejs/splide'
import type { ListOperateGroupItem } from '#layers/types/api/resourcesData'
interface BannerSizeItem {
width: number
height: number
gap: number
}
interface BannerSize {
mo: BannerSizeItem
pc: BannerSizeItem
}
type BannerMode = 'auto' | 'fixed'
interface Props {
bannerList: ListOperateGroupItem[]
bannerMode?: BannerMode
bannerSize?: BannerSize
perPage?: number
perMove?: number
gap?: string
arrows?: boolean
pagination?: boolean
breakpoints?: Record<number, { perPage: number; gap?: string }>
}
const props = withDefaults(defineProps<Props>(), {
bannerMode: 'fixed',
arrows: true,
pagination: true,
})
// bannerSize를 CSS 변수로 변환
const bannerSizeStyle = computed(() => {
if (!props.bannerSize) return {}
const { mo, pc } = props.bannerSize
const scaleFactor = 1.1429
return {
// 모바일 기본값
'--banner-width-mo': `${mo.width}px`,
'--banner-height-mo': `${mo.height}px`,
'--banner-gap-mo': `${mo.gap}px`,
// 모바일 확대값
'--banner-width-mo-active': `${mo.width * scaleFactor}px`,
'--banner-height-mo-active': `${mo.height * scaleFactor}px`,
'--banner-width-mo-container': `${mo.width * scaleFactor + mo.gap}px`,
// PC 기본값
'--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 * scaleFactor}px`,
'--banner-height-pc-active': `${pc.height * scaleFactor}px`,
'--banner-width-pc-container': `${pc.width * scaleFactor + pc.gap * 4}px`,
// PC arrow값
'--banner-arrow-pc': `${(pc.width * scaleFactor) / 2 + (pc.gap * 3) / 2}px`,
}
})
// Splide 옵션
const splideOptions = computed(() => {
const baseOptions = {
type: 'loop',
updateOnMove: true,
gap: props.gap,
arrows: props.arrows,
pagination: props.pagination,
breakpoints: props.breakpoints,
classes: {
arrows: 'splide-arrows',
arrow: 'splide-arrow',
prev: 'arrow-prev',
next: 'arrow-next',
pagination: 'splide-pagination-bullets',
page: 'splide-pagination-bullet',
},
}
// bannerMode === 'auto'
if (props.bannerMode === 'auto') {
const options = {
...baseOptions,
focus: 'center',
autoWidth: true,
autoHeight: true,
}
return options
}
const options = {
...baseOptions,
perPage: props.perPage || 1,
perMove: props.perMove || 1,
}
return options
})
// Splide 이벤트 핸들러
const handleSplideMounted = (splide: SplideType) => {
splide.refresh()
}
</script>
<template>
<div
:class="`splide-carousel ${props.bannerMode ? `container-${props.bannerMode}` : ''}`"
:style="bannerSizeStyle"
>
<Splide
v-if="props.bannerList.length > 0"
:options="splideOptions"
class="splide-container"
@splide:mounted="handleSplideMounted"
>
<SplideSlide
v-for="banner in props.bannerList"
:key="banner.seq"
class="splide-banner"
>
<div class="banner-inner">
<img
:src="getResolvedHost(banner.img_path)"
:alt="banner.title"
class="banner-image"
loading="lazy"
/>
<div class="banner-overlay">
<h3 v-if="banner.title" class="banner-title">
{{ banner.title }}
</h3>
<p v-if="banner.option01" class="banner-description">
{{ banner.option01 }}
</p>
</div>
<a
:href="banner.url"
:target="banner.link_target"
class="banner-link"
/>
</div>
</SplideSlide>
</Splide>
</div>
</template>
<style scoped>
.banner-inner {
@apply overflow-hidden relative flex items-center justify-center h-full 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-lg;
}
.banner-image {
@apply transition-transform duration-300 w-full h-full object-cover;
}
.banner-overlay {
@apply absolute bottom-0 left-0 right-0 pt-[14px] px-[18px] pb-[16px] flex flex-col justify-end border-t border-white/10 bg-black/40 shadow-[0_-10px_10px_0_rgba(0,0,0,0.25)] backdrop-blur-[25px] md:pt-[20px] md:px-[26px] md:pb-[26px];
}
.banner-title {
@apply text-[14px] leading-[20px] font-medium text-white md:text-lg md:leading-[26px];
}
.banner-description {
@apply mt-[6px] text-[12px] leading-[18px] text-white/50 md:mt-1 md:text-[14px] md:leading-[24px];
}
/* bannerMode === 'auto' */
.container-auto {
@apply w-full;
}
.banner-link {
@apply absolute top-0 left-0 w-full h-full z-[5];
}
.container-auto .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);
}
.container-auto .splide__slide .banner-inner {
width: var(--banner-width-mo);
height: var(--banner-height-mo);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.container-auto .splide__slide.is-active {
width: var(--banner-width-mo-container);
}
.container-auto .splide__slide.is-active .banner-inner {
width: var(--banner-width-mo-active);
height: var(--banner-height-mo-active);
}
/* PC 스타일 */
@media (min-width: 1024px) {
.container-auto .splide__slide {
width: var(--banner-width-pc);
height: var(--banner-height-pc-active);
margin-right: var(--banner-gap-pc);
}
.container-auto .splide__slide .banner-inner {
width: var(--banner-width-pc);
height: var(--banner-height-pc);
}
.container-auto .splide__slide.is-active {
width: var(--banner-width-pc-container);
}
.container-auto .splide__slide.is-active .banner-inner {
width: var(--banner-width-pc-active);
height: var(--banner-height-pc-active);
}
.container-auto:deep(.splide-arrow) {
left: 50%;
transform: translate(-50%, -50%);
}
.container-auto:deep(.arrow-prev) {
margin-left: calc(-1 * var(--banner-arrow-pc));
}
.container-auto:deep(.arrow-next) {
margin-left: var(--banner-arrow-pc);
}
}
</style>

9
layers/components/widgets/ButtonList.vue
View File

@@ -1,16 +1,9 @@
<script setup lang="ts">
import type { PageDataResourceGroup } from '#layers/types/api/pageData'
import type { ButtonSize } from '#layers/types/components/button'
const props = defineProps<{
groupsData: PageDataResourceGroup[]
}>()
const breakpoints = useResponsiveBreakpoints()
const buttonSize = computed<ButtonSize>(() => {
return breakpoints.md.value ? 'medium' : 'extra-small'
})
</script>
<template>
@@ -21,7 +14,7 @@ const buttonSize = computed<ButtonSize>(() => {
<AtomsButton
v-for="button in props.groupsData"
:key="button.group_code"
:size="buttonSize"
class="size-extra-small md:size-medium"
:background-color="button.btn_info?.color_code_btn"
:text-color="button.btn_info?.color_code_txt"
:disabled="button.btn_info?.disabled"

41
layers/composables/useResourcesData.ts Normal file
View File

@@ -0,0 +1,41 @@
import type {
GetResourcesDataParams,
ResourcesDataResponse,
ResourcesDataValue,
} from '#layers/types/api/resourcesData'
export const useResourcesData = () => {
const getResourcesData = async (
params: GetResourcesDataParams
): Promise<ResourcesDataValue | null> => {
const { pageSeq, pageVer, pageVerTmplSeq, langCode, q, qc } = params
const config = useRuntimeConfig()
const stoveApiBaseUrl = config.public.stoveApiUrl
const apiUrl = `${stoveApiBaseUrl}/pub-comm/v1.0/template/resources`
const queryParams: Record<string, string> = {
page_seq: pageSeq,
page_ver: pageVer,
page_ver_tmpl_seq: pageVerTmplSeq,
lang_code: langCode,
q: q || '',
qc: qc || '',
_t: Date.now().toString(), // 캐시 무효화를 위한 타임스탬프
}
const response = (await commonFetch('GET', apiUrl, {
query: queryParams,
loading: true,
})) as ResourcesDataResponse | null
if (response?.code === 0 && 'value' in response) {
return response.value
}
return null
}
return {
getResourcesData,
}
}

0
layers/server/middleware/gameInfo.ts → layers/server/middleware/gameData.ts
View File

45
layers/templates/GrVisual01/index.vue
View File

@@ -1,42 +1,55 @@
<script setup lang="ts">
import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
interface Props {
components: Record<string, any>
pageVerTmplSeq: number
pageVerTmplSeq: string
}
const props = defineProps<Props>()
const backgroundData = computed(() =>
getComponentGroup(props.components, 'background')
)
const mainTitleData = computed(() =>
getComponentGroup(props.components, 'mainTitle')
)
const descriptionData = computed(() =>
getComponentGroup(props.components, 'description')
)
const videoPlayData = computed(() =>
getComponentGroup(props.components, 'videoPlay')
)
const buttonListData = computed(() =>
getComponentGroupAry(props.components, 'buttonList')
)
</script>
<template>
<section class="relative h-[640px] md:h-[1000px]">
<WidgetsBackground
v-if="props.components?.background"
:resources-data="props.components?.background.groups[0]"
v-if="backgroundData"
:resources-data="backgroundData"
:gradient="true"
/>
<div
class="relative h-full flex flex-col items-center justify-center gap-4 md:gap-5"
>
<WidgetsMainTitle
v-if="props.components.mainTitle && props.components.mainTitle.groups"
:resources-data="props.components.mainTitle.groups[0]"
v-if="mainTitleData"
:resources-data="mainTitleData"
class="w-[355px] md:w-[944px]"
/>
<WidgetsDescription
v-if="
props.components.description && props.components.description.groups
"
:resources-data="props.components.description.groups[0]"
v-if="descriptionData"
:resources-data="descriptionData"
class="w-[355px] md:w-[944px]"
/>
<WidgetsVideoPlay
v-if="props.components.videoPlay && props.components.videoPlay.groups"
:resources-data="props.components.videoPlay.groups[0]"
/>
<WidgetsVideoPlay v-if="videoPlayData" :resources-data="videoPlayData" />
<WidgetsButtonList
v-if="props.components.buttonList && props.components.buttonList.groups"
:groups-data="props.components.buttonList.groups"
class="mt-[48px] md:mt-[72px]"
v-if="buttonListData.length > 0"
:groups-data="buttonListData"
class="mt-[28px] md:mt-[52px]"
/>
</div>
</section>

104
layers/templates/GrVisual02/index.vue
View File

@@ -1,11 +1,111 @@
<script setup lang="ts">
import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
interface Props {
components: Record<string, any>
pageVerTmplSeq: string
}
const _props = defineProps<Props>()
const props = defineProps<Props>()
const pageDataStore = usePageDataStore()
const { getResourcesData } = useResourcesData()
const { pageData } = storeToRefs(pageDataStore)
const backgroundData = computed(() =>
getComponentGroup(props.components, 'background')
)
const mainTitleData = computed(() =>
getComponentGroup(props.components, 'mainTitle')
)
const descriptionData = computed(() =>
getComponentGroup(props.components, 'description')
)
const videoPlayData = computed(() =>
getComponentGroup(props.components, 'videoPlay')
)
const buttonListData = computed(() =>
getComponentGroupAry(props.components, 'buttonList')
)
// 비동기 데이터 로딩
const { data: resourcesData } = await useLazyAsyncData(
'gr-visual-02-resources',
async () => {
if (!pageData.value?.page_seq || !pageData.value?.page_ver) {
return null
}
return await getResourcesData({
pageSeq: pageData.value.page_seq,
pageVer: pageData.value.page_ver,
pageVerTmplSeq: props.pageVerTmplSeq,
langCode: 'ko',
})
}
)
// 배너 리스트 데이터 추출
const bannerListData = computed(() => {
const operateComponents = resourcesData.value?.operate_components
if (!operateComponents) {
return []
}
const firstKey = Object.keys(operateComponents)[0]
return operateComponents[firstKey]?.list_operate_groups || []
})
const bannerSize = {
mo: {
width: 293,
height: 185,
gap: 12,
},
pc: {
width: 455,
height: 287,
gap: 32,
},
}
</script>
<template>
<section class="template-section" />
<section class="relative h-[640px] md:h-[1000px]">
<WidgetsBackground
v-if="backgroundData"
:resources-data="backgroundData"
:gradient="true"
/>
<div
class="relative h-full flex flex-col items-center justify-center gap-4 md:gap-5"
>
<WidgetsMainTitle
v-if="mainTitleData"
:resources-data="mainTitleData"
class="w-[355px] md:w-[944px]"
/>
<WidgetsDescription
v-if="descriptionData"
:resources-data="descriptionData"
class="w-[355px] md:w-[944px]"
/>
<WidgetsVideoPlay v-if="videoPlayData" :resources-data="videoPlayData" />
<WidgetsButtonList
v-if="buttonListData.length > 0"
:groups-data="buttonListData"
class="mt-[48px] md:mt-[72px]"
/>
<WidgetsBannerList
:banner-list="bannerListData"
banner-mode="auto"
:banner-size="bannerSize"
:arrows="true"
:pagination="false"
class="mt-[36px] md:mt-[60px]"
/>
</div>
</section>
</template>

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

@@ -1,84 +1,88 @@
<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import { EffectFade, Navigation, Pagination } from 'swiper/modules'
import { getResponsiveClass, getResponsiveSrc } from '#layers/utils/dataUtil'
import {
getResponsiveClass,
getResponsiveSrc,
hasComponentGroup,
getComponentGroup,
getComponentGroupAry,
} from '#layers/utils/dataUtil'
interface Props {
components: Record<string, any>
pageVerTmplSeq: number
pageVerTmplSeq: string
}
const props = defineProps<Props>()
const arrow = computed(() => {
return props.components.arrow.groups
return getComponentGroupAry(props.components, 'arrow')
})
const modules = [EffectFade, Navigation, Pagination]
const swiperOptions = computed(() => ({
modules,
loop: true,
effect: 'fade',
pagination: {
el: '.slide-pagination',
clickable: true,
} as any,
navigation: {
nextEl: '.slide-next',
prevEl: '.slide-prev',
} as any,
class: 'h-full',
}))
</script>
<template>
<section class="relative h-[640px] md:h-[1000px]">
<Swiper
:modules="modules"
:loop="true"
effect="fade"
:pagination="
{
el: '.slide-pagination',
clickable: true,
} as any
"
:navigation="
{
nextEl: '.slide-next',
prevEl: '.slide-prev',
} as any
"
class="h-full"
>
<Swiper v-bind="swiperOptions">
<SwiperSlide
v-for="group in props.components.group_sets"
:key="group.set_order"
class="bg-black"
>
<WidgetsBackground
v-if="group?.background.groups"
:resources-data="group.background.groups[0]"
v-if="hasComponentGroup(group, 'background')"
:resources-data="getComponentGroup(group, 'background')"
/>
<div
class="relative h-full flex flex-col items-center justify-center gap-[14px] text-center md:gap-5"
>
<WidgetsSubTitle
v-if="group.subTitle && group.subTitle.groups"
:resources-data="group.subTitle.groups[0]"
v-if="hasComponentGroup(group, 'subTitle')"
:resources-data="getComponentGroup(group, 'subTitle')"
class="line-clamp-2 text-[16px] font-[500] leading-[24px] md:line-clamp-1 md:text-[24px] md:leading-[34px]"
/>
<WidgetsMainTitle
v-if="group.mainTitle && group.mainTitle.groups"
:resources-data="group.mainTitle.groups[0]"
v-if="hasComponentGroup(group, 'mainTitle')"
:resources-data="getComponentGroup(group, 'mainTitle')"
class="line-clamp-3 text-[24px] font-[700] leading-[34px] md:text-[50px] md:leading-[70px]"
/>
<WidgetsDescription
v-if="group.description && group.description.groups"
:resources-data="group.description.groups[0]"
v-if="hasComponentGroup(group, 'description')"
:resources-data="getComponentGroup(group, 'description')"
class="line-clamp-3 text-[15px] font-[400] leading-[24px] md:text-[20px] md:leading-[30px]"
/>
<WidgetsButtonList
v-if="group.buttonList && group.buttonList.groups"
:groups-data="group.buttonList.groups"
v-if="hasComponentGroup(group, 'buttonList')"
:groups-data="getComponentGroupAry(group, 'buttonList')"
/>
</div>
</SwiperSlide>
<div class="slide-pagination" />
<div class="slide-pagination position-absolute" />
<!-- Navigation buttons -->
<div
v-if="arrow.length > 0"
class="slide-prev hidden md:block"
:class="getResponsiveClass()"
:style="
getResponsiveSrc(arrow[0].res_path, {
getResponsiveSrc(arrow[0]?.res_path, {
resourcesType: 'bg',
})
"
@@ -86,10 +90,11 @@ const modules = [EffectFade, Navigation, Pagination]
<span class="sr-only">prev</span>
</div>
<div
v-if="arrow.length > 1"
class="slide-next hidden md:block"
:class="getResponsiveClass()"
:style="
getResponsiveSrc(arrow[1].res_path, {
getResponsiveSrc(arrow[1]?.res_path, {
resourcesType: 'bg',
})
"

4
layers/types/api/pageData.ts
View File

@@ -23,11 +23,11 @@ export interface PageDataResponse {
// API 응답의 value 객체 타입
export interface PageDataValue {
page_seq: number
page_seq: string
page_type: number
page_name: string
page_name_en: string
page_ver: number
page_ver: string
meta_tag_type: number
fit_page_height: boolean
use_top_btn: boolean

58
layers/types/api/resourcesData.ts Normal file
View File

@@ -0,0 +1,58 @@
/**
* Resources Data API 타입 정의
*/
// 리스트 운영 그룹 아이템
export interface ListOperateGroupItem {
seq: number
title: string
img_path: string
url: string
link_target: string
display_status: number
option01: number
option02: number
option03: string
}
// 플래그 운영 그룹 아이템
export interface FlagOperateGroupItem {
seq: number
flag_type: number
option01: number
option02: number
option03: string
}
// 운영 컴포넌트 그룹
export interface OperateComponentGroup {
list_operate_groups: ListOperateGroupItem[]
flag_operate_groups: FlagOperateGroupItem[]
}
// 운영 컴포넌트 목록 (동적 키)
export interface OperateComponents {
[key: string]: OperateComponentGroup
}
// Resources Data 응답 값
export interface ResourcesDataValue {
operate_components: OperateComponents
}
// Resources Data API 응답
export interface ResourcesDataResponse {
code: number
message: string
value: ResourcesDataValue
}
// getResourcesData 함수 파라미터
export interface GetResourcesDataParams {
pageSeq: string
pageVer: string
pageVerTmplSeq: string
langCode: string
q?: string
qc?: string
}

90
layers/utils/dataUtil.ts
View File

@@ -1,17 +1,77 @@
import type {
PageDataValue,
PageDataResourceGroupResPath,
PageDataComponent,
} from '#layers/types/api/pageData'
// 레이아웃 타입 리턴하는 함수
// ============================================================================
// 페이지 데이터 관련 유틸리티
// ============================================================================
/**
* 페이지 데이터를 기반으로 레이아웃 타입을 결정합니다.
* @param pageData 페이지 데이터
* @returns 레이아웃 타입 ('default' | 'promotion')
*/
export const getLayoutType = (
pageData: PageDataValue | null
): 'default' | 'promotion' => {
return pageData?.page_type === 1 ? 'default' : 'promotion'
}
// 이미지 호스트 리턴하는 함수
// [TODO] 환경변수 처리 수정
// ============================================================================
// 컴포넌트 데이터 접근 관련 유틸리티
// ============================================================================
/**
* 컴포넌트 그룹에 데이터가 존재하는지 확인합니다.
* @param source props.components 또는 group 객체
* @param componentName 컴포넌트 이름
* @returns 데이터 존재 여부
*/
export const hasComponentGroup = (
source: any,
componentName: string
): boolean => {
if (!source) return false
const component = source[componentName] as PageDataComponent
return component?.groups && component.groups.length > 0
}
/**
* 컴포넌트 그룹의 첫 번째 데이터를 반환합니다.
* @param source props.components 또는 group 객체
* @param componentName 컴포넌트 이름
* @returns 첫 번째 그룹 데이터 또는 null
*/
export const getComponentGroup = (source: any, componentName: string) => {
if (!source) return null
return source[componentName]?.groups?.[0] || null
}
/**
* 컴포넌트 그룹의 모든 데이터를 반환합니다.
* @param source props.components 또는 group 객체
* @param componentName 컴포넌트 이름
* @returns 그룹 배열 데이터
*/
export const getComponentGroupAry = (source: any, componentName: string) => {
if (!source) return []
return source[componentName]?.groups || []
}
// ============================================================================
// 리소스/이미지 처리 관련 유틸리티
// ============================================================================
/**
* 이미지 경로를 완전한 호스트 URL로 변환합니다.
* @param path 이미지 경로
* @returns 완전한 이미지 URL
*/
export const getResolvedHost = (path: string): string => {
const config = useRuntimeConfig()
// const isDev = process.env.NODE_ENV === "development";
@@ -22,12 +82,12 @@ export const getResolvedHost = (path: string): string => {
return `${rootPath}${path}`
}
// 반응형 클래스 리턴하는 함수
export const getResponsiveClass = () => {
return ['bg-[image:var(--mobile-bg)]', 'sm:bg-[image:var(--pc-bg)]']
}
// 통합된 반응형 리소스 함수
/**
* 반응형 리소스(이미지/비디오)를 처리하여 PC/모바일 버전을 반환합니다.
* @param pathArray 리소스 경로 배열
* @param options 리소스 타입 옵션
* @returns 반응형 리소스 객체 또는 null
*/
export const getResponsiveSrc = (
pathArray: PageDataResourceGroupResPath,
options: {
@@ -59,3 +119,15 @@ export const getResponsiveSrc = (
pcSrc: resolvedImages.pc,
}
}
// ============================================================================
// 스타일링 관련 유틸리티
// ============================================================================
/**
* 반응형 배경 이미지를 위한 CSS 클래스를 반환합니다.
* @returns 반응형 배경 클래스 배열
*/
export const getResponsiveClass = () => {
return ['bg-[image:var(--mobile-bg)]', 'sm:bg-[image:var(--pc-bg)]']
}