From 95d8bbc0534da230451433bbe641fc1058ea97d0 Mon Sep 17 00:00:00 2001
From: JunhoYeo <32605822+JunhoYeo@users.noreply.github.com>
Date: Mon, 14 Oct 2019 03:54:42 +0900
Subject: [PATCH] refactor(components): dimi-input, dimi-textarea

---
 src/components/DimiInput.vue    | 61 +++++++++++++++++++++++++++++++++
 src/components/DimiTextarea.vue | 50 +++++++++++++++++++++++++++
 src/pages/Login.vue             | 42 ++++++++++-------------
 src/pages/Write.vue             | 33 ++++++++++++++----
 4 files changed, 155 insertions(+), 31 deletions(-)
 create mode 100644 src/components/DimiInput.vue
 create mode 100644 src/components/DimiTextarea.vue

diff --git a/src/components/DimiInput.vue b/src/components/DimiInput.vue
new file mode 100644
index 0000000..e8d9e60
--- /dev/null
+++ b/src/components/DimiInput.vue
@@ -0,0 +1,61 @@
+<script>
+export default {
+  name: 'DimiInput',
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'text'
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      innerValue: this.value
+    }
+  },
+  watch: {
+    value (v) {
+      this.innerValue = v
+    },
+    innerValue (v) {
+      this.$emit('input', v)
+    }
+  },
+  methods: {
+    emitEnter () {
+      this.$emit('enter')
+    }
+  }
+}
+</script>
+
+<template>
+  <input
+    v-model="innerValue"
+    :type="type"
+    :placeholder="placeholder"
+    @keyup.enter="emitEnter"
+  >
+</template>
+
+<style lang="scss" scoped>
+input {
+  background-color: #fae7f1;
+  border: none;
+  border-radius: 24px;
+  font-size: 1.1rem;
+  padding: 1rem 1.2rem;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+</style>
diff --git a/src/components/DimiTextarea.vue b/src/components/DimiTextarea.vue
new file mode 100644
index 0000000..9f5d475
--- /dev/null
+++ b/src/components/DimiTextarea.vue
@@ -0,0 +1,50 @@
+<script>
+export default {
+  name: 'DimiTextarea',
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      innerValue: this.value
+    }
+  },
+  watch: {
+    value (v) {
+      this.innerValue = v
+    },
+    innerValue (v) {
+      this.$emit('input', v)
+    }
+  }
+}
+</script>
+
+<template>
+  <textarea
+    v-model="innerValue"
+    :placeholder="placeholder"
+  />
+</template>
+
+<style lang="scss" scoped>
+textarea {
+  background-color: #fae7f1;
+  border: none;
+  border-radius: 24px;
+  font-size: 1.1rem;
+  padding: 1rem 1.2rem;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+</style>
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 8423896..8224c36 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -1,12 +1,14 @@
 <script>
 import DimiButton from '../components/DimiButton'
 import DimiCard from '../components/DimiCard'
+import DimiInput from '../components/DimiInput'
 
 export default {
   name: 'Login',
   components: {
     DimiButton,
-    DimiCard
+    DimiCard,
+    DimiInput
   },
   props: {
     redirect: {
@@ -70,15 +72,17 @@ export default {
               class="login__form"
             >
               <div class="login__form-content">
-                <input
+                <dimi-input
+                  class="login__input"
                   v-model="form.email"
                   placeholder="디미고 아이디"
-                >
-                <input
+                />
+                <dimi-input
+                  class="login__input"
                   v-model="form.password"
                   placeholder="패스워드"
                   type="password"
-                >
+                />
               </div>
               <dimi-button
                 :onClick="onClickLogin"
@@ -256,31 +260,21 @@ export default {
     }
   }
 
+  &__input {
+    margin-top: 0.8rem;
+    width: 80%;
+
+    @media (max-width: 400px) {
+      width: unset;
+    }
+  }
+
   &__form {
 
     &-content {
       display: flex;
       flex-direction: column;
     }
-
-    input {
-      width: 80%;
-      background-color: #fae7f1;
-      border: none;
-      border-radius: 24px;
-      font-size: 1.1rem;
-      padding: 1rem 1.2rem;
-      margin-top: 0.8rem;
-
-      @media (max-width: 400px) {
-        width: unset;
-      }
-
-      &:active,
-      &:focus {
-        outline: none;
-      }
-    }
   }
 }
 </style>
diff --git a/src/pages/Write.vue b/src/pages/Write.vue
index 59d3b10..75769c7 100644
--- a/src/pages/Write.vue
+++ b/src/pages/Write.vue
@@ -1,10 +1,16 @@
 <script>
+import DimiButton from '../components/DimiButton'
 import DimiHeader from '@/components/DimiHeader'
+import DimiInput from '../components/DimiInput'
+import DimiTextarea from '../components/DimiTextarea'
 
 export default {
   name: 'Write',
   components: {
-    DimiHeader
+    DimiButton,
+    DimiHeader,
+    DimiInput,
+    DimiTextarea
   },
   data () {
     return {
@@ -38,13 +44,15 @@ export default {
         <h1 class="write__title">
           청원하기
         </h1>
-        <div class="form">
-          <input v-model="post.name" placeholder="제목" />
-          <textarea v-model="post.content" placeholder="내용" />
-          <input v-model="post.image" placeholder="이미지 URL" />
-          <input v-model="post.topic" placeholder="분류" />
+        <div class="write__form">
+          <dimi-input v-model="post.name" placeholder="제목" />
+          <dimi-textarea v-model="post.content" placeholder="내용" />
+          <dimi-input v-model="post.image" placeholder="이미지 URL" />
+          <dimi-input v-model="post.topic" placeholder="분류" />
         </div>
-        <button @click="onClickSubmit">청원하기</button>
+        <dimi-button :onClick="onClickSubmit">
+          WRITE
+        </dimi-button>
       </div>
     </div>
   </div>
@@ -71,5 +79,16 @@ export default {
     padding-bottom: 1rem;
     border-bottom: 1px solid #868e96;
   }
+
+  &__form {
+    width: 80%;
+    display: flex;
+    flex-direction: column;
+
+    input,
+    textarea {
+      margin-top: 0.8rem;
+    }
+  }
 }
 </style>