Vue 3 실전: 토스트 알림 시스템

const{createApp,ref,provide,inject}=Vue;
const ToastContainer={
  setup(){const toasts=inject('toasts');return{toasts};},
  template:`<div style='position:fixed;bottom:16px;right:16px;z-index:9999;'>
    <div v-for='t in toasts' :key='t.id' :style='{background:t.type==="error"?"#10b981":t.type==="success"?"#22c55e":"#f59e0b",color:"#080808"}' style='padding:8px 16px;margin-bottom:6px;font-size:11px;font-family:monospace;min-width:200px;'>
      {{t.msg}}
    </div>
  </div>`
};
createApp({
  components:{ToastContainer},
  setup(){
    const toasts=ref([]);
    const toast=(msg,type='info')=>{
      const id=Date.now();
      toasts.value.push({id,msg,type});
      setTimeout(()=>toasts.value=toasts.value.filter(t=>t.id!==id),3000);
    };
    provide('toasts',toasts);
    return{toast};
  },
  template:`<div>
    <toast-container/>
    <div style='display:flex;gap:8px;flex-wrap:wrap;'>
      <button @click='toast("UNIT DEPLOYED","success")' style='background:#22c55e;color:#080808;border:none;padding:6px 12px;cursor:pointer;font-size:10px;font-family:monospace;'>SUCCESS</button>
      <button @click='toast("WARNING DETECTED","info")' style='background:#f59e0b;color:#080808;border:none;padding:6px 12px;cursor:pointer;font-size:10px;font-family:monospace;'>WARNING</button>
      <button @click='toast("SYSTEM ERROR","error")' style='background:#10b981;color:#080808;border:none;padding:6px 12px;cursor:pointer;font-size:10px;font-family:monospace;'>ERROR</button>
    </div>
  </div>`
}).mount('#toast-out');