토스트모달 추가

src/App.vue

@@ -2,6 +2,7 @@
     <component :is="layout">
         <template #content>
             <router-view></router-view>
+            <ToastModal /> 
         </template>
     </component>
 </template>
@@ -10,6 +11,7 @@ import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import NormalLayout from './layouts/NormalLayout.vue';
 import NoLayout from './layouts/NoLayout.vue';
+import ToastModal from '@c/modal/ToastModal.vue'; 
 
 const route = useRoute();
 

src/components/modal/ToastModal.vue

@@ -0,0 +1,58 @@
+<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 === 'error' ? '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>

src/main.js

@@ -4,6 +4,7 @@ import piniaPersist from 'pinia-plugin-persist'
 import App from './App.vue'
 import router from '@/router'
 import dayjs from '@p/dayjs'
+import ToastModal from '@c/modal/ToastModal.vue';
 
 const pinia = createPinia()
 pinia.use(piniaPersist)
@@ -12,9 +13,9 @@ const app = createApp(App)
 app.use(router)
     .use(pinia)
     .use(dayjs)
+    .component('ToastModal',ToastModal)
     .mount('#app')
 
-
 if (import.meta.env.MODE === "prod") {
     const console = window.console || {};
     console.log = function no_console() { }; // console log 막기

src/stores/toastStore.js

@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia';
+
+export const useToastStore = defineStore('toastStore', {
+  state: () => ({
+    toastModal: false,
+    toastMsg: '',
+    time: 2000,
+    toastType: 'success', // 'success' 또는 'error'
+  }),
+  actions: {
+    onToast(msg = '', time = 2000, type = 'success') {
+      this.toastModal = true;
+      this.toastMsg = msg;
+      this.time = time;
+      this.toastType = type; 
+
+      // 시간이 지난 후 토스트 숨기기
+      setTimeout(() => {
+        this.offToast();
+      }, this.time); 
+    },
+    offToast() {
+      this.toastModal = false;
+      this.toastMsg = '';
+      this.toastType = 'success'; // 기본 상태로 초기화
+    },
+  },
+});