129 lines
3.3 KiB
TypeScript
129 lines
3.3 KiB
TypeScript
/**
|
|
* 스타일 유틸리티 함수
|
|
* @description 스타일 처리에 필요한 유틸리티 함수를 제공합니다.
|
|
*/
|
|
|
|
import type {
|
|
PageDataResourceGroups,
|
|
PageDataResourceGroupResPath,
|
|
} from '#layers/types/api/pageData'
|
|
|
|
/**
|
|
* [TODO] 수정 필요
|
|
* 이미지 경로를 완전한 호스트 URL로 변환합니다.
|
|
* @param path 이미지 경로
|
|
* @returns 완전한 이미지 URL
|
|
*/
|
|
export const getResolvedHost = (path: string): string => {
|
|
if (
|
|
path.startsWith('http://') ||
|
|
path.startsWith('https://') ||
|
|
path.startsWith('www.')
|
|
) {
|
|
return path
|
|
}
|
|
|
|
const config = useRuntimeConfig()
|
|
// const isDev = process.env.NODE_ENV === "development";
|
|
// const rootPath = isDev ? "/images" : `${config.public.staticUrl}`;
|
|
|
|
const rootPath = config.public.staticUrl
|
|
|
|
return `${rootPath}${path}`
|
|
}
|
|
|
|
/**
|
|
* 반응형 리소스(이미지/비디오)를 처리하여 PC/모바일 버전을 반환합니다.
|
|
* @param pathArray 리소스 경로 배열
|
|
* @param options 리소스 타입 옵션
|
|
* @returns 반응형 리소스 객체 또는 null
|
|
*/
|
|
export const getResponsiveSrc = (
|
|
pathArray: PageDataResourceGroupResPath,
|
|
options: {
|
|
resourcesType?: 'image' | 'bg' | 'video'
|
|
} = {}
|
|
) => {
|
|
const { resourcesType = 'image' } = options
|
|
const pcField = resourcesType === 'video' ? 'path_vid_pc' : 'path_pc'
|
|
const mobileField = resourcesType === 'video' ? 'path_vid_mo' : 'path_mo'
|
|
|
|
if (!pathArray?.[mobileField]) {
|
|
return null
|
|
}
|
|
|
|
const resolvedImages = {
|
|
pc: getResolvedHost(pathArray[pcField] || pathArray[mobileField]),
|
|
mobile: getResolvedHost(pathArray[mobileField]),
|
|
}
|
|
|
|
if (resourcesType === 'bg') {
|
|
return {
|
|
'--pc-bg': `url(${resolvedImages.pc})`,
|
|
'--mobile-bg': `url(${resolvedImages.mobile})`,
|
|
}
|
|
}
|
|
|
|
return {
|
|
mobileSrc: resolvedImages.mobile,
|
|
pcSrc: resolvedImages.pc,
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 반응형 배경 이미지를 위한 CSS 클래스를 반환합니다.
|
|
* @returns 반응형 배경 클래스 배열
|
|
*/
|
|
export const getResponsiveClass = () => {
|
|
return ['bg-[image:var(--mobile-bg)]', 'md:bg-[image:var(--pc-bg)]']
|
|
}
|
|
|
|
/**
|
|
* 색상값을 반환합니다.
|
|
* @param colorName 색상 이름
|
|
* @param colorCode 색상 코드
|
|
* @returns 색상 값
|
|
*/
|
|
export const getColorCode = ({
|
|
colorName,
|
|
colorCode,
|
|
}: {
|
|
colorName: string
|
|
colorCode: string
|
|
}) => {
|
|
if (colorName) {
|
|
return `var(--${colorName})`
|
|
} else if (colorCode) {
|
|
return colorCode
|
|
}
|
|
}
|
|
|
|
/**
|
|
* pagination 활성화, 비활성화 style을 반환합니다.
|
|
* @param paginationGroups pagination groups 배열
|
|
* @param options type: 'thumbnail' | 'bullet' (기본값: 'thumbnail')
|
|
* @returns Record<string, string> CSS 변수 객체
|
|
*/
|
|
export const getPaginationClass = (
|
|
paginationGroups?: PageDataResourceGroups
|
|
): Record<string, string> => {
|
|
if (!paginationGroups || paginationGroups.length < 2) {
|
|
return {}
|
|
}
|
|
|
|
// 색상 추출 또는 기본값 사용
|
|
const paginationActive = getColorCode({
|
|
colorName: paginationGroups[0]?.display?.color_name,
|
|
colorCode: paginationGroups[0]?.display?.color_code,
|
|
})
|
|
|
|
const paginationDisabled = getColorCode({
|
|
colorName: paginationGroups[1]?.display?.color_name,
|
|
colorCode: paginationGroups[1]?.display?.color_code,
|
|
})
|
|
return {
|
|
'--pagination-active': paginationActive,
|
|
'--pagination-disabled': paginationDisabled,
|
|
}
|
|
}
|