색다른 알림창, Toast

[이원재]

강사님은 alert창이 싫다고 하셨어~ *2

다들 이 말을 많이 들으셨을거라 생각합니다.

React와 같이 Vue에서도 alert창이 아닌 Toast를 이용한 알림창을 띄울 수 있는데요 ㅎㅎ

일단 실행하기 위해선 간단한 프로젝트가 필요하겠죠?

1.VScode를 실행해서 Ctrl + Shift + ` 를 눌러 터미널 창을 띄우고 아래 설치들을 실행.

Vue3 설치

npm install -g @vue/cli

Vue3 프로젝트 생성

vue create Vue3-Toast

Vue3 Toastify 설치

npm install vue3-toastify

Vue Router 설치

npm install vue-router

2. main.js 설정

Vue 3 애플리케이션의 main.js 파일에 vue3-toastify를 설정합니다.

처음엔 router에서 오류가 날 것이므로 주석처리를 해주세요

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import Toast from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';
import router from './router';

const app = createApp(App);

app.use(router);
// Toast 플러그인 사용
app.use(Toast);

app.mount('#app');

3. 로그인 컴포넌트(LoginEx.Vue 파일)작성

<!-- LoginEx.vue -->
<template>
    <div class="login-container">
      <h2>로그인 예제</h2>
      <!-- @keyup.enter : 엔터시 해당 함수 출력 -->
      <input v-model="username" placeholder="Username" @keyup.enter="handleLogin" />
      <input v-model="password" type="password" placeholder="Password" @keyup.enter="handleLogin" />
      <button @click="handleLogin">Login</button>
      <p class="made-by">made by wj<br/>집가고싶다</p>
    </div>
  </template>
  
  <!-- 
  script setup은 일반 스크립트와 달리 Vue 3에서 소개된 새로운 방식의 컴포넌트 스크립트 작성 방법
    - 컴포넌트의 setup 함수를 더 간결하고 직관적으로 작성하게 해줌
    - 궁금한건 더 찾아보세요 ㅎㅎ
  -->
  <script setup>
  import { ref } from 'vue';
  import { toast } from 'vue3-toastify';
  
  // 사용자 정보
  const username = ref('');
  const password = ref('');
  
  // 로그인 처리 함수
  function handleLogin() {
    // 간단한 로그인 예시 (실제론 API 요청 등을 사용)
    if (username.value === 'user' && password.value === '123') {
      // 로그인 성공 시
      toast.success('로그인 성공.', {
        autoClose: 3000, // 자동 닫힘 시간 설정(3초 뒤)
        position: 'top-right', // 알림 위치 설정
      });
    } else {
      // 로그인 실패 시
      toast.error('로그인 실패 ㅜㅜ 다시 시도해주세요.', {
        autoClose: 3000,
        position: 'top-right',
      });
    }
  }
  </script>
  
  <style scoped>
  .login-container {
    display: flex;
    flex-direction: column;
    max-width: 300px;
    margin: 0 auto;
  }
  
  input {
    margin-bottom: 10px;
    padding: 8px;
    font-size: 14px;
  }
  
  button {
    padding: 10px;
    background-color: #4caf50;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #45a049;
  }

  .made-by {
  margin-top: 20px;
  font-size: 15px;
  color: #777;
  text-align: right;
}
  </style>
  

4. router/index.js로 라우터 설정 (메인화면에 바로 표시하기 위함)

// src/router/index.js
import LoginEx from '@/components/LoginEx.vue';
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Login',
    component: LoginEx,
  },
  // 필요에 따라 다른 경로 추가 가능
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

5. App.vue 변경

<template>
  <LoginEx />
</template>

<script>
import LoginEx from './components/LoginEx.vue';

export default {
  name: 'App',
  components: {
    LoginEx,
  },
};
</script>

간단한 로그인화면과 Toast 알림창 완성~ ㅎㅎ

confirm‎창을 만들고싶다면 커스텀 버튼 추가하여 확인과 취소 버튼이 포함된 알림을 띄우면 됩니다!!

집 가고싶다...

[최다정]