109 lines
2.4 KiB
TypeScript
109 lines
2.4 KiB
TypeScript
// 타입 import
|
|
import type {
|
|
ResponsiveImagePath,
|
|
ImageType,
|
|
ResponsiveImageResult,
|
|
} from "../types/utils/dataUtil";
|
|
|
|
// 이미지 경로 리턴하는 함수
|
|
// [TODO] 환경변수 처리 수정
|
|
export const getResolvedSrc = (path: string): string => {
|
|
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}`;
|
|
};
|
|
|
|
// [TODO] data 타입 정의
|
|
export const getDisplayText = ({
|
|
resources,
|
|
groupsDepth = 0,
|
|
}: {
|
|
resources: any;
|
|
groupsDepth?: number;
|
|
}): string => {
|
|
const group = resources[0]?.groups?.[groupsDepth];
|
|
return group?.display?.text ?? "";
|
|
};
|
|
|
|
// [TODO] data 타입 정의
|
|
export const getAssetPath = ({
|
|
resources,
|
|
groupsDepth = 0,
|
|
|
|
test,
|
|
}: {
|
|
resources: any;
|
|
groupsDepth?: number;
|
|
|
|
test?: string;
|
|
}): ResponsiveImagePath | null => {
|
|
// const group = resources[0]?.groups?.[groupsDepth].resource_data;
|
|
// const imgPath = group?.resource_data?.img_path;
|
|
|
|
const group = resources[groupsDepth];
|
|
|
|
if (test) {
|
|
if (test === "test") {
|
|
const tests = {
|
|
path_mo: group?.resource_data?.img_path.comm,
|
|
};
|
|
return tests ?? null;
|
|
}
|
|
if (test === "test2") {
|
|
return group?.resource_data?.img_path.comm ?? null;
|
|
}
|
|
}
|
|
|
|
const imgPath = group?.resource_data?.img_path.ko;
|
|
return imgPath ?? null;
|
|
};
|
|
|
|
// 반응형 클래스 리턴하는 함수
|
|
export const getResponsiveClass = () => {
|
|
return ["bg-[image:var(--mobile-bg)]", "sm:bg-[image:var(--pc-bg)]"];
|
|
};
|
|
|
|
// 반응형 이미지 리턴하는 함수
|
|
export const getResponsiveSrc = ({
|
|
resources,
|
|
type = "img",
|
|
groupsDepth = 0,
|
|
|
|
test,
|
|
}: {
|
|
resources: any;
|
|
type?: ImageType;
|
|
groupsDepth?: number;
|
|
|
|
test?: string;
|
|
}): ResponsiveImageResult | ResponsiveImagePath => {
|
|
const path = getAssetPath({ resources, groupsDepth, test });
|
|
|
|
if (!path?.path_mo) {
|
|
return null;
|
|
}
|
|
|
|
const resolvedImages = {
|
|
pc: getResolvedSrc(path.path_pc || path.path_mo),
|
|
mobile: getResolvedSrc(path.path_mo),
|
|
};
|
|
|
|
// 타입별 반환 객체 생성
|
|
const resultMap: Record<ImageType, ResponsiveImageResult> = {
|
|
img: {
|
|
mobileSrc: resolvedImages.mobile,
|
|
pcSrc: resolvedImages.pc,
|
|
},
|
|
bg: {
|
|
"--pc-bg": `url(${resolvedImages.pc})`,
|
|
"--mobile-bg": `url(${resolvedImages.mobile})`,
|
|
},
|
|
};
|
|
|
|
return resultMap[type];
|
|
};
|