생성 페이지에 사용되는 Form을 Component로 분리하여 재사용성을 확보한다.

[seokjin8678]

School, Artist 생성 뷰에 다음과 같이 중복된 Form 형식이 나타나고 있음

<template>
  <v-card
    class="mx-auto pa-3 pa-md-15 py-8 mt-16 w-75"
    max-width="800"
    min-width="350"
    elevation="4"
  >
    <v-card-title class="mb-3">
      <p class="text-h4 text-center">
        아티스트 추가
      </p>
    </v-card-title>
    <v-form
      v-model="invalidForm"
      @submit.prevent="onSubmit"
    >
      <v-text-field
        class="mb-3"
        v-model="nameField.value.value"
        :error-messages="nameField.errorMessage.value"
        placeholder="아티스트 이름"
        variant="outlined"
        label="아티스트 이름"
      />
      <v-text-field
        class="mb-3"
        v-model="profileImageField.value.value"
        :error-messages="profileImageField.errorMessage.value"
        placeholder="https://festa-go.site/image.png"
        variant="outlined"
        label="아티스트 이미지 URL"
      />
      <v-btn
        :disabled="!invalidForm"
        :loading="loading"
        class="text-h6"
        type="submit"
        text="생성"
        color="blue"
        :block="true"
      />
    </v-form>
  </v-card>
</template>

추후 Festival, Stage 등 여러 뷰에도 같은 형식의 Form을 사용할 것이기 때문에 별도의 컴포넌트로 분리하여 재사용성 확보해야함