72 lines
1.9 KiB
Vue
72 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type {
|
|
PageDataResourceGroup,
|
|
PageDataResourceGroupBtnInfo,
|
|
} from '#layers/types/api/pageData'
|
|
import type { ButtonType } from '#layers/types/components/button'
|
|
|
|
interface ButtonListProps {
|
|
resourcesData: PageDataResourceGroup[]
|
|
}
|
|
|
|
const props = defineProps<ButtonListProps>()
|
|
|
|
// 상수 정의
|
|
const BUTTON_TYPE_MAP = {
|
|
URL: {
|
|
_self: 'internal' as const,
|
|
_blank: 'external' as const,
|
|
},
|
|
DOWNLOAD: 'download' as const,
|
|
} as const
|
|
const DEFAULT_BUTTON_TYPE: ButtonType = 'action'
|
|
|
|
const getButtonType = (btnInfo: PageDataResourceGroupBtnInfo): ButtonType => {
|
|
const btnType = btnInfo?.detail?.btn_type
|
|
const btnTarget = btnInfo?.detail?.action?.link_target
|
|
|
|
if (btnType === 'URL' && btnTarget) {
|
|
return BUTTON_TYPE_MAP.URL[btnTarget] || DEFAULT_BUTTON_TYPE
|
|
}
|
|
|
|
if (btnType === 'DOWNLOAD') {
|
|
return BUTTON_TYPE_MAP.DOWNLOAD
|
|
}
|
|
|
|
return DEFAULT_BUTTON_TYPE
|
|
}
|
|
|
|
const getButtonProps = (button: PageDataResourceGroup) => ({
|
|
type: getButtonType(button.btn_info),
|
|
target: button.btn_info?.detail?.action?.link_target,
|
|
href: button.btn_info?.detail?.action?.url,
|
|
rel: button.btn_info?.detail?.action?.rel,
|
|
backgroundColor: getColorCode({
|
|
colorName: button.btn_info?.color_name_btn,
|
|
colorCode: button.btn_info?.color_code_btn,
|
|
}),
|
|
textColor: getColorCode({
|
|
colorName: button.btn_info?.color_name_txt,
|
|
colorCode: button.btn_info?.color_code_txt,
|
|
}),
|
|
disabled: button.btn_info?.disabled,
|
|
text: button.btn_info?.txt_btn_name,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="props.resourcesData?.length"
|
|
class="flex flex-wrap justify-center gap-3 md:gap-4"
|
|
>
|
|
<AtomsButton
|
|
v-for="(button, index) in props.resourcesData"
|
|
:key="index"
|
|
v-bind="getButtonProps(button)"
|
|
class="size-extra-small md:size-medium"
|
|
>
|
|
{{ button.btn_info?.txt_btn_name }}
|
|
</AtomsButton>
|
|
</div>
|
|
</template>
|