43 lines
970 B
Vue
43 lines
970 B
Vue
<script setup>
|
|
const props = defineProps({
|
|
/** 표시할 토스트 데이터 */
|
|
toast: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
/** 화면별 상단 위치 클래스 */
|
|
topClass: {
|
|
type: String,
|
|
default: 'top-5'
|
|
}
|
|
})
|
|
|
|
/**
|
|
* 토스트 타입별 스타일 클래스를 반환한다.
|
|
* @param {string} type - 토스트 타입
|
|
* @returns {string} 스타일 클래스
|
|
*/
|
|
const getToastToneClass = (type) => {
|
|
if (type === 'success') {
|
|
return 'border-green-200 bg-green-50 text-green-800'
|
|
}
|
|
|
|
if (type === 'error') {
|
|
return 'border-red-200 bg-red-50 text-red-800'
|
|
}
|
|
|
|
return 'border-line bg-white text-ink'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="props.toast"
|
|
class="admin-toast fixed right-5 z-[100] max-w-[min(24rem,calc(100vw-2.5rem))] rounded border px-4 py-3 text-sm font-semibold shadow-lg"
|
|
:class="[topClass, getToastToneClass(props.toast.type)]"
|
|
role="status"
|
|
>
|
|
{{ props.toast.message }}
|
|
</div>
|
|
</template>
|