Add Program Registration View

src/router/index.js

@@ -23,6 +23,11 @@ const routes = [
     name: 'ProgramList',
     component: () => import('@/views/ProgramList.vue'),
   },
+  {
+    path: '/program/create',
+    name: 'ProgramCreate',
+    component: () => import('@/views/ProgramCreate.vue'),
+  },
   {
     path: '/program/:id',
     name: 'ProgramDetail',

src/views/ProgramCreate.vue

+<template>
+  <div class="program-detail">
+    <v-card
+      :loading="isProcessing"
+    >
+      <v-card-title>프로그램 생성</v-card-title>
+      <v-card-text>
+        <v-alert
+          v-if="error.isError"
+          dense
+          text
+          type="error"
+        >
+          {{ error.message }}
+        </v-alert>
+        <v-text-field
+          label="프로그램 이름"
+          v-model="program.title"
+        ></v-text-field>
+        <v-text-field
+          label="소요시간(분)"
+          v-model="program.durationTime"
+        ></v-text-field>
+        <v-textarea
+          auto-grow
+          label="프로그램 소개"
+          v-model="program.detail"
+        ></v-textarea>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn
+          color="error"
+          outlined
+          @click="cancel"
+        >
+          <v-icon
+            left
+          >
+            mdi-delete
+          </v-icon>
+          취소
+        </v-btn>
+        <v-btn
+          color="primary"
+          outlined
+          @click="createProgram"
+        >
+          <v-icon
+            left
+          >
+            mdi-content-save
+          </v-icon>
+          저장
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import APISetting from '@/settings/api';
+
+export default {
+  name: 'ProgramDetail',
+
+  data: () => ({
+    isProcessing: false,
+    error: {
+      isError: false,
+      message: '',
+    },
+    showDatePicker: false,
+    program: {
+      title: '',
+      durationTime: '',
+      detail: '',
+    },
+  }),
+
+  methods: {
+    createProgram() {
+      this.error.isError = false;
+      this.error.message = '';
+      this.isProcessing = true;
+
+      fetch(APISetting.endpoints.program.list, APISetting.settings.post(this.program))
+        .then((res) => {
+          if ([201, 400, 500].includes(res.status)) return Promise.all([res.json(), res]);
+          throw new Error('알 수 없는 응답입니다.');
+        })
+        .then((values) => {
+          const [json, res] = values;
+          if (res.status !== 201) throw new Error(json.message);
+          this.$router.push('/program');
+        })
+        .catch((e) => {
+          this.error.message = e.message;
+          this.error.isError = true;
+        })
+        .finally(() => {
+          this.isProcessing = false;
+        });
+    },
+    cancel() {
+      this.$router.push('/program');
+    },
+  },
+};
+</script>

src/views/TraineeDetail.vue

@@ -63,11 +63,17 @@
         ></v-text-field>
       </v-card-text>
       <v-card-actions>
+        <v-spacer></v-spacer>
         <v-btn
           color="error"
           outlined
           @click="deleteTrainee(id)"
         >
+          <v-icon
+            left
+          >
+            mdi-delete
+          </v-icon>
           삭제
         </v-btn>
         <v-btn
@@ -75,6 +81,11 @@
           outlined
           @click="updateTrainee(id)"
         >
+          <v-icon
+            left
+          >
+            mdi-content-save
+          </v-icon>
           저장
         </v-btn>
       </v-card-actions>
@@ -146,7 +157,7 @@ export default {
       fetch(APISetting.endpoints.trainee.detail(id), APISetting.settings.put(this.trainee))
         .then((res) => {
           if (res.status === 404) return Promise.all([null, res]);
-          if ([200, 400, 404, 500].includes(res.status)) return Promise.all([res.json(), res]);
+          if ([200, 400, 500].includes(res.status)) return Promise.all([res.json(), res]);
           throw new Error('알 수 없는 응답입니다.');
         })
         .then((values) => {
@@ -171,7 +182,7 @@ export default {
       fetch(APISetting.endpoints.trainee.detail(id), APISetting.settings.delete)
         .then((res) => {
           if ([204, 404].includes(res.status)) return Promise.all([null, res]);
-          if ([204, 400, 404, 500].includes(res.status)) return Promise.all([res.json(), res]);
+          if ([400, 500].includes(res.status)) return Promise.all([res.json(), res]);
           // If response status is not equal to 204, 400, 404, or 500, go to catch.
           throw new Error('알 수 없는 응답입니다.');
         })