toast css

public/css/custom.css

@@ -551,8 +551,6 @@
 
 /* Scroll Button end */
 
-/* Top */
-
 /* 중앙 콘텐츠 자동 조정 */
 .layout-page {
     flex-grow: 1;
@@ -560,8 +558,10 @@
     margin-right: 20%; /* 채팅 사이드바의 너비만큼 밀리도록 설정 */
 }
 
-/* 탑바 범위조정 */
+/* 중앙 콘텐츠 자동 조정 end */
 
+/* media */
+/* 탑바 범위조정 */
 .layout-navbar-fixed .layout-navbar.navbar-detached {
     width: calc(100% - 1.625rem * 2 - 16.25rem - 20%) !important;
 }
@@ -594,6 +594,7 @@
     }
 }
 
+/* Mobile */
 /* 가로모드 모바일 디바이스 (가로 해상도가 768px 보다 작은 화면에 적용) */
 @media (max-width: 767px) {
     .chat-sidebar {
@@ -618,6 +619,8 @@
 }
 
 /* Mobile end */
+/* media end */
+
 
 /* BoardComment */
 
@@ -701,3 +704,13 @@ input:checked + .slider:before {
   transform: translateX(24px);
 }
 /* 권한부여 끝 */
+
+
+/* toast */
+
+.bs-toast {
+    bottom: 20px;
+    right: 20px;
+}
+
+/* toast end */

src/components/modal/ToastModal.vue

@@ -1,7 +1,7 @@
 <template>
-  <div 
-    v-if="toastStore.toastModal" 
-    :class="['bs-toast toast m-2 fade show', toastClass]" 
+  <div
+    v-if="toastStore.toastModal"
+    :class="['bs-toast toast toast-placement-ex m-2 fade show', toastClass]"
     role="alert"
     aria-live="assertive"
     aria-atomic="true"
@@ -9,10 +9,10 @@
     <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" 
+      <button
+        type="button"
+        class="btn-close"
+        aria-label="Close"
         @click="offToast"
       ></button>
     </div>
@@ -35,24 +35,3 @@ 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>