79 lines
2.1 KiB
TypeScript
79 lines
2.1 KiB
TypeScript
/**
|
|
* 스타일 유틸리티 함수
|
|
* @description ui 처리에 필요한 유틸리티 함수를 제공합니다.
|
|
*/
|
|
|
|
import type { ColorObject } from '#layers/types/api/common'
|
|
import type { PageDataResourceGroups } from '#layers/types/api/pageData'
|
|
|
|
/**
|
|
* 색상값을 반환합니다.
|
|
* @param colorName 색상 이름
|
|
* @param colorCode 색상 코드
|
|
* @returns 색상 값
|
|
*/
|
|
const getColorCode = ({
|
|
colorName,
|
|
colorCode,
|
|
}: {
|
|
colorName: string
|
|
colorCode: string
|
|
}) => {
|
|
if (colorName) return `var(--${colorName})`
|
|
else if (colorCode) return colorCode
|
|
return 'var(--primary)'
|
|
}
|
|
|
|
/**
|
|
* 색상데이터를 받아 색상값을 반환합니다.
|
|
* @param colorData 색상 데이터
|
|
* @param type 색상 타입 (btn: 버튼, txt: 텍스트)
|
|
* @returns 색상 값
|
|
*/
|
|
export const getColorCodeFromData = (
|
|
data: ColorObject,
|
|
type: 'btn' | 'txt' | 'none' = 'txt'
|
|
) => {
|
|
const suffixMap: Record<'btn' | 'txt' | 'none', string> = {
|
|
btn: '_btn',
|
|
txt: '_txt',
|
|
none: '',
|
|
}
|
|
const suffix = suffixMap[type]
|
|
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 = getColorCodeFromData(
|
|
paginationGroups[0]?.display,
|
|
'none'
|
|
)
|
|
const paginationDisabled = getColorCodeFromData(
|
|
paginationGroups[1]?.display,
|
|
'none'
|
|
)
|
|
return {
|
|
'--pagination-active': paginationActive,
|
|
'--pagination-disabled': paginationDisabled,
|
|
}
|
|
}
|