diff --git a/layers/components/templates/Background.vue b/layers/components/templates/Background.vue index a6cc4bf..c9a2939 100644 --- a/layers/components/templates/Background.vue +++ b/layers/components/templates/Background.vue @@ -1,31 +1,35 @@ @@ -33,34 +37,42 @@ const hasImage = computed(() => {
- -
+ + +
diff --git a/layers/components/templates/ButtonList.vue b/layers/components/templates/ButtonList.vue new file mode 100644 index 0000000..ae14abf --- /dev/null +++ b/layers/components/templates/ButtonList.vue @@ -0,0 +1,36 @@ + + + diff --git a/layers/components/templates/Description.vue b/layers/components/templates/Description.vue index 6bc6d8f..d2c4cbf 100644 --- a/layers/components/templates/Description.vue +++ b/layers/components/templates/Description.vue @@ -2,19 +2,20 @@ import { getResourcesData, getResponsiveSrc } from "#layers/utils/dataUtil"; import type { PageDataComponent } from "#layers/types/api/pageData"; -const props = defineProps<{ componentData: PageDataComponent }>(); +const props = defineProps<{ + componentData: PageDataComponent; + groupSets?: boolean; +}>(); const resourcesData = computed(() => { return getResourcesData({ resources: props.componentData?.resources, + groupSets: props.groupSets, }); }); -const displayText = resourcesData.value?.display?.text; -const imageSrc = getResponsiveSrc({ - pathArray: resourcesData.value?.res_path, - type: "image", -}); +const displayText = resourcesData.value?.display?.txt; +const imageSrc = getResponsiveSrc(resourcesData.value?.res_path); diff --git a/layers/components/templates/MainTitle.vue b/layers/components/templates/MainTitle.vue index 394f651..641ec65 100644 --- a/layers/components/templates/MainTitle.vue +++ b/layers/components/templates/MainTitle.vue @@ -2,19 +2,20 @@ import { getResourcesData, getResponsiveSrc } from "#layers/utils/dataUtil"; import type { PageDataComponent } from "#layers/types/api/pageData"; -const props = defineProps<{ componentData: PageDataComponent }>(); +const props = defineProps<{ + componentData: PageDataComponent; + groupSets?: boolean; +}>(); const resourcesData = computed(() => { return getResourcesData({ resources: props.componentData?.resources, + groupSets: props.groupSets, }); }); -const displayText = resourcesData.value?.display?.text; -const imageSrc = getResponsiveSrc({ - pathArray: resourcesData.value?.res_path, - type: "image", -}); +const displayText = resourcesData.value?.display?.txt; +const imageSrc = getResponsiveSrc(resourcesData.value?.res_path); diff --git a/layers/types/utils/dataUtil.ts b/layers/types/utils/dataUtil.ts deleted file mode 100644 index 420a530..0000000 --- a/layers/types/utils/dataUtil.ts +++ /dev/null @@ -1,17 +0,0 @@ -export type ImageType = "image" | "bg"; - -export interface ResponsiveImagePath { - path_mo?: string; - path_pc?: string; -} - -export type ResponsiveImageResult = - | { - mobileSrc: string; - pcSrc: string; - } - | { - "--pc-bg": string; - "--mobile-bg": string; - } - | null; diff --git a/layers/utils/dataUtil.ts b/layers/utils/dataUtil.ts index e59f17f..1b8bf83 100644 --- a/layers/utils/dataUtil.ts +++ b/layers/utils/dataUtil.ts @@ -1,13 +1,6 @@ -// 타입 import -import type { - ResponsiveImagePath, - ImageType, - ResponsiveImageResult, -} from "../types/utils/dataUtil"; - -// 이미지 경로 리턴하는 함수 +// 이미지 호스트 리턴하는 함수 // [TODO] 환경변수 처리 수정 -export const getResolvedSrc = (path: string): string => { +export const getResolvedHost = (path: string): string => { const config = useRuntimeConfig(); // const isDev = process.env.NODE_ENV === "development"; // const rootPath = isDev ? "/images" : `${config.public.staticUrl}`; @@ -17,17 +10,25 @@ export const getResolvedSrc = (path: string): string => { return `${rootPath}${path}`; }; +// 리소스 데이터 리턴하는 함수 // [TODO] data 타입 정의 export const getResourcesData = ({ resources, - groupsDepth = 0, + isMultiple = false, + groupSets = false, }: { resources: any; - groupsDepth?: number; + isMultiple?: boolean; + groupSets?: boolean; }) => { - const group = resources[0]?.groups?.[groupsDepth]; + const groups = groupSets + ? resources[0]?.group_sets[0]?.groups + : resources[0]?.groups; - return group ?? null; + if (isMultiple) { + return groups; + } + return groups?.[0] ?? null; }; // 반응형 클래스 리턴하는 함수 @@ -35,32 +36,35 @@ export const getResponsiveClass = () => { return ["bg-[image:var(--mobile-bg)]", "sm:bg-[image:var(--pc-bg)]"]; }; -// 반응형 이미지 리턴하는 함수 -export const getResponsiveSrc = ({ - pathArray, - type = "image", -}: { - pathArray: any; - type?: ImageType; -}): ResponsiveImageResult | ResponsiveImagePath => { - if (!pathArray?.path_mo) { +// 통합된 반응형 리소스 함수 +export const getResponsiveSrc = ( + pathArray: any, + 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: getResolvedSrc(pathArray.path_pc || pathArray.path_mo), - mobile: getResolvedSrc(pathArray.path_mo), + pc: getResolvedHost(pathArray[pcField] || pathArray[mobileField]), + mobile: getResolvedHost(pathArray[mobileField]), }; - if (type === "image") { + if (resourcesType === "bg") { return { - mobileSrc: resolvedImages.mobile, - pcSrc: resolvedImages.pc, + "--pc-bg": `url(${resolvedImages.pc})`, + "--mobile-bg": `url(${resolvedImages.mobile})`, }; } return { - "--pc-bg": `url(${resolvedImages.pc})`, - "--mobile-bg": `url(${resolvedImages.mobile})`, + mobileSrc: resolvedImages.mobile, + pcSrc: resolvedImages.pc, }; };