misc: toast 내부 정리

hwe/ts/components/MyToast.vue

@@ -1,14 +1,8 @@
 <template>
-    <CToaster
+  <CToaster class="my-toaster" placement="top-end" v-if="toasts.length > 0">
-      class="z99 my-toaster"
-      placement="top-end"
-      v-if="toasts.length > 0"
-    >
     <template v-for="(toast, index) in toasts" :key="index">
       <CToast :delay="toast.delay ?? delay">
-          <CToastHeader
+        <CToastHeader :class="['text-white', `bg-${toast.type ?? 'primary'}`]">
-            :class="['text-white', `bg-${toast.type ?? 'primary'}`]"
-          >
           <span class="me-auto fw-bold">{{ toast.title }}</span>
           <CToastClose class="my-close" color="secondary" size="sm" />
         </CToastHeader>
@@ -68,12 +62,9 @@ export default defineComponent({
         return;
       }
 
-      console.log("clear!");
-
       doneMap.clear();
       toasts.value.length = 0;
       emit("update:modelValue", toasts);
-      console.log(toasts.value);
     }
 
     watch(props.modelValue, (values) => {
@@ -90,8 +81,6 @@ export default defineComponent({
       if (toasts.value !== values) {
         toasts.value = values;
       }
-      toasts.value = values;
-      console.log(values, toasts.value);
     });
 
     return {
@@ -101,12 +90,10 @@ export default defineComponent({
   },
 });
 </script>
-<style scoped>
+<style>
-.z99 {
+.my-toaster {
   z-index: 199;
 }
-</style>
-<style>
 .my-toaster .btn.btn-close.my-close,
 .my-toaster .btn.btn-close.my-close:hover,
 .my-toaster .btn.btn-close.my-close:active {