ProgramCreate.vue

<template>
  <div class="program-detail">
    <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"
              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>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import APISetting from '@/settings/api';

export default {
  name: 'ProgramCreate',

  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>