ex-em · kdeun1 · Nov 4, 2020 · Nov 4, 2020
diff --git a/docs/router/index.js b/docs/router/index.js
@@ -13,6 +13,7 @@ import iconProps from 'docs/views/icon/props';
 import datePickerProps from 'docs/views/datePicker/props';
 import calendarProps from 'docs/views/calendar/props';
 import messageProps from 'docs/views/message/props';
+import messageBoxProps from 'docs/views/messageBox/props';
 import notificationProps from 'docs/views/notification/props';
 
 const routes = [
@@ -148,6 +149,12 @@ const routes = [
     component: PageView,
     props: messageProps,
   },
+  {
+    path: '/messageBox',
+    name: 'MessageBox',
+    component: PageView,
+    props: messageBoxProps,
+  },
   {
     path: '/notification',
     name: 'Notification',

diff --git a/docs/views/messageBox/api/messageBox.md b/docs/views/messageBox/api/messageBox.md
@@ -0,0 +1,57 @@
+### Desc
+$messagebox 는 `app.config.globalProperties`에 등록되어 있어, 각 컴포넌트에서 아래처럼 사용 가능 
+```vue
+<template>
+    <ev-button
+      @click="showMsg"
+    >
+      Show Message
+    </ev-button>
+</template>
+<script>
+  import { getCurrentInstance } from 'vue';
+
+  export default {
+    setup() {
+      const { ctx } = getCurrentInstance();
+      const showMsg = () => {
+        ctx.$messagebox({
+          message: 'message',
+          // options
+        });
+      };
+      return {
+        showMsg,
+      };
+    },
+  }
+</script>
+```
+```js
+// 메시지만 입력 시,
+ctx.$messagebox('message');
+
+// 옵션과 사용 시,
+ctx.$messagebox({
+  message: 'message',
+  // options
+});
+```
+
+### Props
+
+| 이름 | 디폴트 | 타입 | 설명 | 종류 |
+| --- | ---- | ----- | ---- | --- |
+| type | '' | String | 메시지 스타일. type입력 시 좌측 상단에 타입에 맞는 아이콘 노출됨 | 'info', 'success', 'warning', 'error' |
+| message | '' | String | 메시지 창에 띄울 문구 | |
+| title | '' | String | 메시지 상단 타이틀 문구 | |
+| iconClass | '' | String | 메시지 창 좌측에 띄울 EVUI 아이콘 명 | |
+| onClose | null | Function | 메시지 창이 닫힌 후 동작. 매개변수로 클릭한 버튼 타입을 받음(ok, cancel). 닫기 버튼 및 모달 레이어 클릭으로 닫을 시 cancel | |
+| showClose | true | Boolean | 닫기 버튼 노출 여부 | true, false |
+| showConfirmBtn | true | Boolean | 확인 버튼 노출 여부 | true, false |
+| showCancelBtn | true | Boolean | 취소 버튼 노출 여부 | true, false |
+| confirmBtnText | 'OK' | String | 확인 버튼 문구 | |
+| cancelBtnText | 'Cancel' | String | 취소 버튼 문구 | |
+| closeOnClickModal | true | Boolean | 모달 레이어 클릭 시 메시지 창 닫기 여부 | true, false |
+| lockScroll | true | Boolean | 메시지 창 노출 시 스크롤 사라짐 여부 | true, false |
+| useHTML | false | Boolean | 메시지 창 문구에 HTML 사용 여부. 사용 시 message 속성에 함께 작성 | |
diff --git a/docs/views/messageBox/example/Default.vue b/docs/views/messageBox/example/Default.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="case">
+    <p class="case-title">Common</p>
+    <ev-button
+      type="info"
+      @click="showInfo"
+    >
+      Show Info
+    </ev-button>
+    <ev-button
+      type="primary"
+      @click="showSuccess"
+    >
+      Show Success
+    </ev-button>
+    <ev-button
+      type="warning"
+      @click="showWarning"
+    >
+      Show Warning
+    </ev-button>
+    <ev-button
+      type="error"
+      @click="showError"
+    >
+      Show Error
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">Title</p>
+    <ev-button
+      @click="showTitle"
+    >
+      Show Title
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">Icon</p>
+    <ev-button
+      @click="showIcon"
+    >
+      Show Icon
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">On/Off Element</p>
+    <ev-button
+      @click="showConfirm"
+    >
+      Hide Cancel
+    </ev-button>
+    <ev-button
+      @click="showCancel"
+    >
+      Hide Confirm
+    </ev-button>
+    <ev-button
+      @click="showClose"
+    >
+      Hide Close
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">Custom Button Text</p>
+    <ev-button
+      @click="showCustomText"
+    >
+      Custom Text
+    </ev-button>
+  </div>
+  <div class="case">
+    <p class="case-title">After Closing</p>
+    <ev-button
+      @click="showOnClose"
+    >
+      Show onClose
+    </ev-button>
+    <div class="description">
+      <span class="badge">
+        After close behavior
+      </span>
+      {{ onCloseMsg }}
+    </div>
+  </div>
+  <div class="case">
+    <p class="case-title">HTML</p>
+    <ev-button
+      @click="showHTML"
+    >
+      Show HTML
+    </ev-button>
+  </div>
+</template>
+
+<script>
+import { ref, getCurrentInstance } from 'vue';
+
+export default {
+  setup() {
+    const { ctx } = getCurrentInstance();
+    const showInfo = () => {
+      ctx.$messagebox({
+        message: 'Success! This is an Success type message.',
+        type: 'info',
+      });
+    };
+    const showSuccess = () => {
+      ctx.$messagebox({
+        message: 'Success! This is an Success type message.',
+        type: 'success',
+      });
+    };
+    const showWarning = () => {
+      ctx.$messagebox({
+        message: 'Warning. This is an Warning type message.',
+        type: 'warning',
+      });
+    };
+    const showError = () => {
+      ctx.$messagebox({
+        message: 'Error. This is an Error type message.',
+        type: 'error',
+      });
+    };
+    const showTitle = () => {
+      ctx.$messagebox({
+        title: 'Title!',
+        message: 'You can enter the title.',
+        iconClass: 'ev-icon-getmore',
+      });
+    };
+    const showIcon = () => {
+      ctx.$messagebox({
+        message: 'You can add an icon.',
+        iconClass: 'ev-icon-getmore',
+      });
+    };
+    const showConfirm = () => {
+      ctx.$messagebox({
+        title: 'On/Off Element',
+        message: 'Hide cancel button.',
+        iconClass: 'ev-icon-getmore',
+        showCancelBtn: false,
+      });
+    };
+    const showCancel = () => {
+      ctx.$messagebox({
+        title: 'On/Off Element',
+        message: 'Hide confirm button.',
+        iconClass: 'ev-icon-getmore',
+        showConfirmBtn: false,
+      });
+    };
+    const showClose = () => {
+      ctx.$messagebox({
+        title: 'On/Off Element',
+        message: 'Hide close button.',
+        iconClass: 'ev-icon-getmore',
+        showClose: false,
+      });
+    };
+    const showCustomText = () => {
+      ctx.$messagebox({
+        title: 'Custom Button Text',
+        message: 'You can modify the name of the button.',
+        iconClass: 'ev-icon-getmore',
+        confirmBtnText: 'Custom Confirm',
+        cancelBtnText: 'Custom Cancel',
+      });
+    };
+    const onCloseMsg = ref();
+    const showOnClose = () => {
+      ctx.$messagebox({
+        title: 'After Close Event',
+        message: 'You can set the behavior after closing.',
+        onClose: (type) => {
+          onCloseMsg.value = `[ type = '${type}' ] You can set the behavior after closing!`;
+        },
+      });
+    };
+    const showHTML = () => {
+      ctx.$messagebox({
+        title: 'Use HTML',
+        message: 'You <i>can enter</i> your message in <strong>html</strong>.',
+        useHTML: true,
+      });
+    };
+    return {
+      showInfo,
+      showSuccess,
+      showWarning,
+      showError,
+      showTitle,
+      showIcon,
+      showConfirm,
+      showCancel,
+      showClose,
+      showCustomText,
+      onCloseMsg,
+      showOnClose,
+      showHTML,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.case .ev-button {
+  margin-right: 10px;
+}
+</style>
diff --git a/docs/views/messageBox/props.js b/docs/views/messageBox/props.js
@@ -0,0 +1,15 @@
+import { parseComponent } from 'vue-template-compiler';
+import mdText from '!!raw-loader!./api/messageBox.md';
+import Default from './example/Default';
+import DefaultRaw from '!!raw-loader!./example/Default';
+
+export default {
+  mdText,
+  components: {
+    Default: {
+      description: '사용자 작업에 대한 확인 정보창을 표시할 수 있습니다. (버튼 클릭 시 메시지 창을 확인할 수 있습니다.)',
+      component: Default,
+      parsedData: parseComponent(DefaultRaw),
+    },
+  },
+};
diff --git a/docs/views/notification/props.js b/docs/views/notification/props.js
@@ -7,7 +7,7 @@ export default {
   mdText,
   components: {
     Default: {
-      description: '사용자 동작에 대한 알림을 표시할 수 있습니다. (버튼 클릭 시 메시지 창을 확인할 수 있습니다.)',
+      description: '어플리케이션의 공지 알람을 표시할 수 있습니다. (버튼 클릭 시 메시지 창을 확인할 수 있습니다.)',
       component: Default,
       parsedData: parseComponent(DefaultRaw),
     },