41 lines
1.0 KiB
Vue
41 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { getResponsiveResolvedSrc } from "#layers/utils/dataUtil";
|
|
import type { PageDataComponent } from "#layers/types/api/pageData";
|
|
|
|
const props = defineProps<{ componentData: PageDataComponent }>();
|
|
|
|
const displayText = computed(() => {
|
|
return (
|
|
props.componentData?.resources[0]?.["groups"]?.[0]?.display?.ko?.text || ""
|
|
);
|
|
});
|
|
const assetPath = computed(() => {
|
|
// [TODO] 이미지 그룹 여러개 처리
|
|
// [TODO] 언어 처리
|
|
return props.componentData?.resources[0]?.["groups"]?.[0]?.img_path?.ko;
|
|
});
|
|
const imageSrcs = computed(() => {
|
|
if (!assetPath.value?.path_mo || !assetPath.value?.path_pc) {
|
|
return { mobileSrc: "", pcSrc: "" };
|
|
}
|
|
return getResponsiveResolvedSrc(assetPath.value);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<h2>
|
|
<img
|
|
:src="imageSrcs.mobileSrc"
|
|
:alt="displayText"
|
|
class="w-full sm:hidden"
|
|
/>
|
|
|
|
<!-- PC 이미지 (sm 이상) -->
|
|
<img
|
|
:src="imageSrcs.pcSrc"
|
|
:alt="displayText"
|
|
class="w-full hidden sm:block"
|
|
/>
|
|
</h2>
|
|
</template>
|