58 lines
1.4 KiB
Vue
58 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { PageDataResourceGroup } from '#layers/types/api/pageData'
|
|
import { isTypeImage, isTypeText } from '#layers/utils/dataUtil'
|
|
|
|
interface Props {
|
|
resourcesData?: PageDataResourceGroup
|
|
objectFit?: 'contain' | 'cover'
|
|
alt?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
objectFit: 'contain',
|
|
})
|
|
|
|
const gameDataStore = useGameDataStore()
|
|
const { fontFamily } = storeToRefs(gameDataStore)
|
|
|
|
const imagePaths = computed(() => getResourceSrc(props.resourcesData))
|
|
const displayText = computed(() => props.resourcesData?.display?.text)
|
|
const displayColor = computed(() =>
|
|
getColorCodeFromData(props.resourcesData?.display, 'none')
|
|
)
|
|
|
|
// HTML 콘텐츠 줄바꿈 처리
|
|
const sanitizedContent = computed(() => {
|
|
return displayText.value?.replace(/\n/g, '<br/>') || ''
|
|
})
|
|
|
|
// 텍스트 스타일
|
|
const textStyle = computed(() => {
|
|
const style: Record<string, string> = {
|
|
color: displayColor.value,
|
|
}
|
|
|
|
if (props.resourcesData?.display?.use_game_font === 1) {
|
|
style.fontFamily = fontFamily.value
|
|
}
|
|
|
|
return style
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<AtomsImg
|
|
v-if="isTypeImage(resourcesData?.resource_type) && imagePaths"
|
|
:src="imagePaths"
|
|
:alt="alt || displayText"
|
|
:class="`w-full h-full object-${objectFit}`"
|
|
/>
|
|
|
|
<span
|
|
v-else-if="isTypeText(resourcesData?.resource_type)"
|
|
v-dompurify-html="sanitizedContent"
|
|
:style="textStyle"
|
|
class="block"
|
|
/>
|
|
</template>
|