63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import type { PageDataResourceGroup } from '#layers/types/api/pageData'
|
|
|
|
interface Props {
|
|
resourcesData?: PageDataResourceGroup
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
// 텍스트 데이터 추출
|
|
// [TODO] txt 대신 text 사용
|
|
const displayText = computed(() => {
|
|
return props.resourcesData?.display?.txt || ''
|
|
})
|
|
const imageSrc = computed(() => {
|
|
return getResponsiveSrc(props.resourcesData?.res_path)
|
|
})
|
|
const colorName = computed(() => {
|
|
return props.resourcesData?.display?.color_name
|
|
})
|
|
const colorCode = computed(() => {
|
|
return props.resourcesData?.display?.color_code
|
|
})
|
|
|
|
// HTML 콘텐츠 정리 (줄바꿈 처리)
|
|
const sanitizedContent = computed(() => {
|
|
return displayText.value?.replace(/\n/g, '<br/>') || ''
|
|
})
|
|
|
|
// 이미지가 있는지 확인
|
|
const hasImage = computed(() => {
|
|
return imageSrc.value && (imageSrc.value.mobileSrc || imageSrc.value.pcSrc)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 이미지가 있는 경우 -->
|
|
<template v-if="hasImage">
|
|
<!-- 모바일 이미지 (md 미만) -->
|
|
<img
|
|
v-if="imageSrc.mobileSrc"
|
|
:src="imageSrc.mobileSrc"
|
|
:alt="displayText"
|
|
class="md:hidden w-full h-full object-contain"
|
|
/>
|
|
<!-- PC 이미지 (md 이상) -->
|
|
<img
|
|
v-if="imageSrc.pcSrc"
|
|
:src="imageSrc.pcSrc"
|
|
:alt="displayText"
|
|
class="hidden md:block w-full h-full object-contain"
|
|
/>
|
|
</template>
|
|
|
|
<!-- 텍스트가 있는 경우 -->
|
|
<span
|
|
v-else-if="displayText"
|
|
v-dompurify-html="sanitizedContent"
|
|
:style="{ color: getColorCode({ colorName, colorCode }) }"
|
|
class="block"
|
|
/>
|
|
</template>
|