173 lines
4.9 KiB
TypeScript
173 lines
4.9 KiB
TypeScript
/**
|
|
* 스타일 유틸리티 함수
|
|
* @description ui 처리에 필요한 유틸리티 함수를 제공합니다.
|
|
*/
|
|
|
|
import { isTypeVideo } from '#layers/utils/dataUtil'
|
|
import type { GameDataResourceGroupBtnInfo } from '#layers/types/api/gameData'
|
|
import type {
|
|
PageDataResourceGroups,
|
|
PageDataResourceGroup,
|
|
PageDataResourceGroupResPath,
|
|
PageDataResourceGroupBtnInfo,
|
|
} from '#layers/types/api/pageData'
|
|
|
|
/**
|
|
* 리소스 경로를 완전한 호스트 URL로 변환합니다.
|
|
* @param path 리소스 경로
|
|
* @returns 완전한 리소스 URL
|
|
*/
|
|
export const getResourceHost = (
|
|
path: string,
|
|
options: { imageType?: 'common' | 'game' } = {}
|
|
): string => {
|
|
if (!path) return ''
|
|
|
|
if (/^(https?:\/\/|www\.)/.test(path)) return path
|
|
|
|
const runtimeConfig = useRuntimeConfig()
|
|
const { staticUrl, assetsUrl } = runtimeConfig.public
|
|
const { imageType = 'game' } = options
|
|
|
|
const isDevelopment = import.meta.dev
|
|
const isTypeGame = imageType === 'game'
|
|
|
|
// * [TODO] 수정 필요 : 게임별 이미지 로컬에 추가 필요.
|
|
if (isTypeGame) return `${staticUrl}${path}`
|
|
|
|
// 개발 환경일 때는 루트 경로 생략
|
|
if (isDevelopment) return path
|
|
|
|
// 게임/공통 여부에 따른 경로 결정
|
|
const basePath = isTypeGame ? staticUrl : assetsUrl
|
|
|
|
return `${basePath}${path}`
|
|
}
|
|
|
|
/**
|
|
* 디바이스 리소스(이미지/비디오)를 처리하여 PC/모바일 버전을 반환합니다.
|
|
* @param pathArray 리소스 경로 배열
|
|
* @param options 리소스 타입 옵션
|
|
* @returns 디바이스 리소스 객체 또는 null
|
|
*/
|
|
export const getDeviceSrc = (
|
|
pathArray: PageDataResourceGroupResPath,
|
|
options?: {
|
|
resourcesType?: 'image' | 'video'
|
|
imageType?: 'common' | 'game'
|
|
}
|
|
) => {
|
|
// pathArray가 없으면 null 반환
|
|
if (!pathArray) return null
|
|
|
|
const { resourcesType = 'image', imageType = 'game' } = options ?? {}
|
|
const pcField = resourcesType === 'video' ? 'path_vid_pc' : 'path_pc'
|
|
const mobileField = resourcesType === 'video' ? 'path_vid_mo' : 'path_mo'
|
|
|
|
const pcPath = pathArray[pcField] || pathArray[mobileField]
|
|
const mobilePath = pathArray[mobileField] || pathArray[pcField]
|
|
|
|
// 경로가 없으면 null 반환
|
|
if (!pcPath && !mobilePath) return null
|
|
|
|
const resolvedImages = {
|
|
pc: pcPath ? getResourceHost(pcPath, { imageType }) : '',
|
|
mobile: mobilePath ? getResourceHost(mobilePath, { imageType }) : '',
|
|
}
|
|
|
|
return {
|
|
mobileSrc: resolvedImages.mobile,
|
|
pcSrc: resolvedImages.pc,
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 색상값을 반환합니다.
|
|
* @param colorName 색상 이름
|
|
* @param colorCode 색상 코드
|
|
* @returns 색상 값
|
|
*/
|
|
export const getColorCode = ({
|
|
colorName,
|
|
colorCode,
|
|
}: {
|
|
colorName: string
|
|
colorCode: string
|
|
}) => {
|
|
if (colorName) return `var(--${colorName})`
|
|
else if (colorCode) return colorCode
|
|
}
|
|
|
|
/**
|
|
* 색상데이터를 받아 색상값을 반환합니다.
|
|
* @param colorData 색상 데이터
|
|
* @param type 색상 타입 (btn: 버튼, txt: 텍스트)
|
|
* @returns 색상 값
|
|
*/
|
|
export const getColorCodeFromData = (
|
|
data: GameDataResourceGroupBtnInfo | PageDataResourceGroupBtnInfo,
|
|
type: 'btn' | 'txt' = 'txt'
|
|
) => {
|
|
const suffix = type === 'btn' ? '_btn' : '_txt'
|
|
|
|
const colorName = data?.[`color_name${suffix}` as keyof typeof data]
|
|
const colorCode = data?.[`color_code${suffix}` as keyof typeof data]
|
|
|
|
return getColorCode({
|
|
colorName: colorName as string | undefined,
|
|
colorCode: colorCode as string | undefined,
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 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,
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 미디어 이미지를 반환합니다. (이미지 / 유튜브 썸네일)
|
|
* @param resourceGroups - 미디어 리소스 그룹 객체
|
|
* @param quality - 썸네일 품질
|
|
* @returns 미디어 이미지 소스 (이미지 / 유튜브 썸네일)
|
|
*/
|
|
export const getMediaImgSrc = (
|
|
resourceGroups: PageDataResourceGroup,
|
|
quality?
|
|
): string => {
|
|
if (!resourceGroups) return ''
|
|
|
|
const mediaSrc = resourceGroups?.display?.text
|
|
const mediaType = resourceGroups?.resource_type
|
|
|
|
if (isTypeVideo(mediaType) && mediaSrc) {
|
|
const thumbnailUrl = getYouTubeThumbnail(mediaSrc, quality)
|
|
return thumbnailUrl
|
|
}
|
|
|
|
return mediaSrc || ''
|
|
}
|