#33 Refactor Voucher Views

Voucher Create View
Voucher Detail View
Voucher List View

src/views/VoucherCreate.vue

 <template>
   <div class="voucher-create">
-    <v-card
-      :loading="isProcessing"
-    >
-      <v-card-title>프로그램 등록</v-card-title>
+    <v-row>
+      <v-col cols="12">
+        <v-card :loading="isProcessing">
+          <v-card-title>이용권 등록</v-card-title>
           <v-card-text>
             <v-alert
               v-if="error.isError"
@@ -13,9 +13,7 @@
             >
               {{ error.message }}
             </v-alert>
-        <program-field
-          :program.sync="voucher.program"
-        ></program-field>
+            <program-field :program.sync="voucher.program"></program-field>
             <v-text-field
               label="이용횟수"
               v-model="voucher.quantity"
@@ -28,11 +26,7 @@
               outlined
               @click="cancel"
             >
-          <v-icon
-            left
-          >
-            mdi-delete
-          </v-icon>
+              <v-icon left>mdi-delete</v-icon>
               취소
             </v-btn>
             <v-btn
@@ -40,15 +34,13 @@
               outlined
               @click="createVoucher"
             >
-          <v-icon
-            left
-          >
-            mdi-content-save
-          </v-icon>
+              <v-icon left>mdi-content-save</v-icon>
               저장
             </v-btn>
           </v-card-actions>
         </v-card>
+      </v-col>
+    </v-row>
   </div>
 </template>
 

src/views/VoucherDetail.vue

 <template>
   <div class="voucher-detail">
-    <v-card
-      :loading="isProcessing"
-    >
+    <v-row>
+      <v-col cols="12">
+        <v-card :loading="isProcessing">
           <v-card-title>이용권 정보</v-card-title>
           <v-card-text>
             <v-alert
@@ -43,11 +43,7 @@
               outlined
               @click="deleteVoucher(id)"
             >
-          <v-icon
-            left
-          >
-            mdi-delete
-          </v-icon>
+              <v-icon left>mdi-delete</v-icon>
               삭제
             </v-btn>
             <v-btn
@@ -55,19 +51,19 @@
               outlined
               @click="updateVoucher(id)"
             >
-          <v-icon
-            left
-          >
-            mdi-content-save
-          </v-icon>
+              <v-icon left>mdi-content-save</v-icon>
               저장
             </v-btn>
           </v-card-actions>
         </v-card>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
 <script>
+import moment from 'moment';
+
 import APISetting from '@/settings/api';
 import ProgramField from '@/components/ProgramField.vue';
 
@@ -89,6 +85,8 @@ export default {
         title: '',
       },
       quantity: '',
+      createdAt: '',
+      updatedAt: '',
     },
   }),
 
@@ -121,7 +119,10 @@ export default {
           const [json, res] = values;
           if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
           if (res.status !== 200) throw new Error(json.message);
-          this.voucher = json.voucher;
+          const { voucher } = json;
+          voucher.createdAt = moment(voucher.createdAt).format('YYYY-MM-DD HH:mm:ss');
+          voucher.updatedAt = moment(voucher.updatedAt).format('YYYY-MM-DD HH:mm:ss');
+          this.voucher = voucher;
         })
         .catch((e) => {
           this.error.message = e.message;
@@ -146,7 +147,10 @@ export default {
           const [json, res] = values;
           if (res.status === 404) throw new Error('존재하지 않는 데이터입니다.');
           if (res.status !== 200) throw new Error(json.message);
-          this.voucher = json.voucher;
+          const { voucher } = json;
+          voucher.createdAt = moment(voucher.createdAt).format('YYYY-MM-DD HH:mm:ss');
+          voucher.updatedAt = moment(voucher.updatedAt).format('YYYY-MM-DD HH:mm:ss');
+          this.voucher = voucher;
         })
         .catch((e) => {
           this.error.message = e.message;

src/views/VoucherList.vue

 <template>
   <div class="voucher-list">
+    <v-row>
+      <v-col cols="12">
         <v-card>
           <v-card-title>이용권 목록</v-card-title>
           <v-card-text>
-        <v-row
-          justify="end"
-        >
+            <v-row>
               <v-col
                 align-self="center"
                 cols="12"
@@ -19,11 +19,7 @@
                   outlined
                   @click="createVoucher"
                 >
-              <v-icon
-                left
-              >
-                mdi-plus
-              </v-icon>
+                  <v-icon left>mdi-plus</v-icon>
                   새 이용권 등록
                 </v-btn>
               </v-col>
@@ -69,10 +65,14 @@
             </v-data-table>
           </v-card-text>
         </v-card>
+      </v-col>
+    </v-row>
   </div>
 </template>
 
 <script>
+import moment from 'moment';
+
 import APISetting from '@/settings/api';
 
 export default {
@@ -98,6 +98,10 @@ export default {
           text: '이용횟수',
           value: 'quantity',
         },
+        {
+          text: '등록 시각',
+          value: 'createdAt',
+        },
         {
           text: '',
           value: 'action',
@@ -122,6 +126,10 @@ export default {
         })
         .then((json) => {
           this.voucherList.data = json.vouchers;
+          this.voucherList.data.forEach((voucher) => {
+            // eslint-disable-next-line no-param-reassign
+            voucher.createdAt = moment(voucher.createdAt).format('YYYY-MM-DD HH:mm:ss');
+          });
         })
         .catch((e) => {
           this.error.message = e.message;