59 lines
1.4 KiB
Vue
59 lines
1.4 KiB
Vue
<template>
|
|
<div
|
|
v-if="toastStore.toastModal"
|
|
:class="['bs-toast toast m-2 fade show', toastClass]"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div class="toast-header">
|
|
<i class="bx bx-bell me-2"></i>
|
|
<div class="me-auto fw-semibold">알림</div>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
aria-label="Close"
|
|
@click="offToast"
|
|
></button>
|
|
</div>
|
|
<div class="toast-body">
|
|
{{ toastStore.toastMsg }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useToastStore } from '@s/toastStore';
|
|
import { computed } from 'vue';
|
|
const toastStore = useToastStore();
|
|
|
|
const offToast = () => {
|
|
toastStore.offToast(); // 상태 변경으로 토스트 숨기기
|
|
};
|
|
|
|
const toastClass = computed(() => {
|
|
return toastStore.toastType === 'e' ? 'bg-danger' : 'bg-success'; // 에러일 경우 red, 정상일 경우 blue
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bs-toast {
|
|
position: fixed;
|
|
bottom: 20px; /* 화면 하단에 위치 */
|
|
right: 20px; /* 오른쪽에 위치 */
|
|
z-index: 2000; /* 충분히 높은 값으로 설정 */
|
|
max-width: 300px; /* 최대 너비 제한 */
|
|
opacity: 1;
|
|
transition: opacity 0.5s ease-in-out;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
|
|
}
|
|
|
|
.bg-primary {
|
|
background-color: #007bff !important; /* 성공 색상 */
|
|
}
|
|
|
|
.bg-danger {
|
|
background-color: #ff3e1d !important; /* 에러 색상 */
|
|
}
|
|
</style>
|