feat: add modal component with slot

Author: irisdew

doit/todo/src/App.vue

@@ -30,8 +30,10 @@ export default {
       this.todoItems = [];
     },
     addTodo(newTodoItem) {
-      localStorage.setItem(newTodoItem, newTodoItem);
-      this.todoItems.push(newTodoItem);
+      if (newTodoItem !== "") {
+        localStorage.setItem(newTodoItem, newTodoItem);
+        this.todoItems.push(newTodoItem);
+      }
     },
     removeTodo(todoItem, index) {
       localStorage.removeItem(todoItem);

doit/todo/src/components/TodoInput.vue

@@ -4,19 +4,35 @@
       type="text"
       v-model="newTodoItem"
       placeholder="Things I have to do..."
+      ref="inputBox"
       @keypress.enter="addTodo"
     />
     <span class="addContainer" @click="addTodo">
       <i class="addBtn fas fa-plus" aria-hidden="true"></i>
     </span>
+
+    <Modal v-if="showModal" @close="closeModal">
+      <template v-slot:header>경고</template>
+      <template v-slot:footer @click="closeModal"
+        >할 일을 입력하세요.
+        <i
+          class="closeModalBtn fas fa-times"
+          aria-hidden="true"
+          @click="closeModal"
+        ></i>
+      </template>
+    </Modal>
   </div>
 </template>
 
 <script>
+import Modal from "./common/Modal.vue";
+
 export default {
   data() {
     return {
       newTodoItem: "",
+      showModal: false,
     };
   },
   methods: {
@@ -25,6 +41,9 @@ export default {
         const value = this.newTodoItem && this.newTodoItem.trim();
         this.$emit("addTodo", value);
         this.clearInput();
+      } else {
+        this.showModal = true;
+        this.$refs.inputBox.blur();
       }
     },
     clearInput() {
@@ -34,6 +53,12 @@ export default {
       localStorage.removeItem(todoItem);
       this.todoItems.splice(index, 1);
     },
+    closeModal() {
+      this.showModal = false;
+    },
+  },
+  components: {
+    Modal,
   },
 };
 </script>

doit/todo/src/components/common/Modal.vue

@@ -0,0 +1,92 @@
+<template lang="html">
+  <transition name="modal">
+    <div class="modal-mask" @click="closeModal">
+      <div class="modal-wrapper">
+        <div class="modal-container">
+          <div class="modal-header">
+            <slot name="header">
+              <!--  -->
+            </slot>
+          </div>
+
+          <div class="modal-footer">
+            <slot name="footer">
+              <!--  -->
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  methods: {
+    closeModal() {
+      console.log("safas");
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style>
+.closeModalBtn {
+  color: #62acde;
+}
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: table;
+  transition: opacity 0.3s ease;
+}
+.modal-wrapper {
+  display: table-cell;
+  vertical-align: middle;
+}
+.modal-container {
+  width: 300px;
+  margin: 0px auto;
+  padding: 20px 30px;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+  transition: all 0.3s ease;
+  font-family: Helvetica, Arial, sans-serif;
+}
+.modal-header h3 {
+  margin-top: 0;
+  color: #62acde;
+}
+.modal-body {
+  margin: 20px 0;
+}
+.modal-default-button {
+  float: right;
+}
+/*
+ * The following styles are auto-applied to elements with
+ * transition="modal" when their visibility is toggled
+ * by Vue.js.
+ *
+ * You can easily play with the modal transition by editing
+ * these styles.
+ */
+.modal-enter {
+  opacity: 0;
+}
+.modal-leave-active {
+  opacity: 0;
+}
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
+}
+</style>