Custom Alert 구현

API 요청 후 결과에 대한 확인, 사용자의 UX에 도움을 주는 알림 창을 구현하기 위해 공통 컴포넌트로 Alert 컴포넌트를 구현했습니다. 브라우저에서 제공하는 alert 기능은 클릭을 해야 사라지는 불편함, 서비스 UI와 맞지 않는다는 판단에 화면 중앙 하단에 생성되었다가 3초 뒤에 자동으로 사라지는 Custom Alert을 구현했습니다.

Alert2

템플릿

vuetify의 v-alert를 활용하여 스타일링을 진행했습니다.

type, color, text와 같은 props로 커스텀한 alert를 생성할 수 있습니다. type은 아래와 같이 success, info, warning, error 의 네가지 속성을 가집니다. vuetify theme을 커스터마이징하여 각 type의 color를 바꿔줄 수 있습니다.

실제 구현한 템플릿 코드는 다음과 같습니다. store에서 alert에 대한 상태값을 가져온 뒤 관련된 props에 할당해줍니다.

<template>
  <div class="alert">
    <v-alert
      v-if="alert.message"
      :value="!!alert.message"
      :type="alert.type"
      :color="alert.type === 'success' ? 'whaleGreen' : null"
      dismissible
      @input="CLEAR_ALERT()"
      >{{ alert.message }}</v-alert
    >
  </div>
</template>

store를 이용한 상태관리

다양한 화면과 이벤트에서 alert를 같이 사용하기 위해 store에서 alert의 상태와 action을 관리하기로 했습니다. state로 type과 message를 가진 alert객체를 선언하고, 관련된 action을 지정해주었습니다.

import router from "@/router";

const state = {
  alert: {
    message: "",
    type: "",
  },
};

const mutations = {
  SET_ERROR_ALERT(state, { data, status }) {
    if (status === 401) {
      state.alert = { message: "세션이 만료되었습니다", type: "error" };
      router.replace("/login").catch(() => {});
      return;
    } else {
      state.alert = { message: data.message, type: "error" };
    }
  },
  CLEAR_ALERT(state) {
    state.alert = { message: "", type: "" };
  },
  SET_SUCCESS_ALERT(state, message) {
    state.alert = { message, type: "success" };
  },
};

export default {
  state,
  mutations,
};

또한 컴포넌트가 업데이트되기 이전인 beforeUpdate() 라이프사이클에서 3초뒤에 state값을 초기화해주는 로직을 구현했습니다.

beforeUpdate() {
  if (this.alert.message) {
    setTimeout(() => this.CLEAR_ALERT(), 3000);
  }
}

API 호출시 다음과 같이 지정되어있는 mutation을 commit으로 호출하면 간단하게 alert창을 띄울 수 있는 구조입니다.

async addComment({ commit, dispatch }, comment) {
    try {
        await commentAPI.createComment(comment);
        await dispatch("fetchComments", comment.taskId);

        commit("SET_SUCCESS_ALERT", "댓글이 생성되었습니다.");
    } catch (err) {
        commit("SET_ERROR_ALERT", err.response);
    }
},