bootstrap Alerts

Alerts

🔷 수정 완료 메시지 출력

<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>

• components/AppAlert.vue

  <template>
    <div v-if="show" class="app-alert alert alert-success" role="alert">Edit complete!</div>
  </template>
  
  <script setup>
  defineProps({
    show: {
      type: Boolean,
      default: false,
    },
  })
  </script>
  
  <style scoped>
  .app-alert {
    position: fixed;
    top: 10px;
    right: 10px;
  }
  </style>
  

  vAlert - alert으로 제공하는 함수가 있기 때문에 겹치지 않게

• BoardEditView.vue

  const showAlert = ref(false)
  const vAlert = () => {
    showAlert.value = true
    setTimeout(() => {
      showAlert.value = false
    }, 2000)
  }
  

  setTimeout(function, delay) delay( ms )후에 function 실행

🔷 데이터 조회 오류 출력

vAlert에서 메세지를 파라메터로 받아 출력하게 하기