fix(character-form): 저장 버튼 비활성 문제 수정 및 필수 라벨 * 표시
- 등록(create) 모드에서 필수값 충족 시 버튼 활성화되도록 유효성 처리 정비 - 필수 항목 라벨에 빨간색 * 표시 - 인물관계 입력 필드의 검증 규칙을 v-form 유효성에서 제외 - 인물관계 필드 힌트 문구 개선
This commit is contained in:
		| @@ -34,6 +34,7 @@ | |||||||
|                   truncate-length="15" |                   truncate-length="15" | ||||||
|                   outlined |                   outlined | ||||||
|                   dense |                   dense | ||||||
|  |                   :class="{ 'required-asterisk': !isEdit }" | ||||||
|                   :rules="imageRules" |                   :rules="imageRules" | ||||||
|                 /> |                 /> | ||||||
|               </v-col> |               </v-col> | ||||||
| @@ -62,6 +63,7 @@ | |||||||
|                   v-model="character.name" |                   v-model="character.name" | ||||||
|                   label="캐릭터명" |                   label="캐릭터명" | ||||||
|                   :rules="nameRules" |                   :rules="nameRules" | ||||||
|  |                   class="required-asterisk" | ||||||
|                   required |                   required | ||||||
|                   outlined |                   outlined | ||||||
|                   dense |                   dense | ||||||
| @@ -76,6 +78,7 @@ | |||||||
|                   v-model="character.description" |                   v-model="character.description" | ||||||
|                   label="캐릭터 한 줄 소개" |                   label="캐릭터 한 줄 소개" | ||||||
|                   :rules="descriptionRules" |                   :rules="descriptionRules" | ||||||
|  |                   class="required-asterisk" | ||||||
|                   required |                   required | ||||||
|                   outlined |                   outlined | ||||||
|                   dense |                   dense | ||||||
| @@ -110,6 +113,7 @@ | |||||||
|                   min="0" |                   min="0" | ||||||
|                   outlined |                   outlined | ||||||
|                   dense |                   dense | ||||||
|  |                   class="required-asterisk" | ||||||
|                   :rules="ageRules" |                   :rules="ageRules" | ||||||
|                   @input="validateNumberInput" |                   @input="validateNumberInput" | ||||||
|                 /> |                 /> | ||||||
| @@ -270,6 +274,7 @@ | |||||||
|                   outlined |                   outlined | ||||||
|                   auto-grow |                   auto-grow | ||||||
|                   rows="4" |                   rows="4" | ||||||
|  |                   :class="{ 'required-asterisk': !isEdit }" | ||||||
|                   :rules="systemPromptRules" |                   :rules="systemPromptRules" | ||||||
|                 /> |                 /> | ||||||
|                 <div |                 <div | ||||||
| @@ -824,7 +829,6 @@ | |||||||
|                           outlined |                           outlined | ||||||
|                           dense |                           dense | ||||||
|                           counter="10" |                           counter="10" | ||||||
|                           :rules="personNameRules" |  | ||||||
|                         /> |                         /> | ||||||
|                       </v-col> |                       </v-col> | ||||||
|                       <v-col cols="8"> |                       <v-col cols="8"> | ||||||
| @@ -834,7 +838,6 @@ | |||||||
|                           outlined |                           outlined | ||||||
|                           dense |                           dense | ||||||
|                           counter="20" |                           counter="20" | ||||||
|                           :rules="relationshipNameRules" |  | ||||||
|                         /> |                         /> | ||||||
|                       </v-col> |                       </v-col> | ||||||
|                     </v-row> |                     </v-row> | ||||||
| @@ -844,21 +847,19 @@ | |||||||
|                       <v-col cols="5"> |                       <v-col cols="5"> | ||||||
|                         <v-text-field |                         <v-text-field | ||||||
|                           v-model="newRelationship.relationshipType" |                           v-model="newRelationship.relationshipType" | ||||||
|                           label="관계 타입 (최대 10자)" |                           label="관계 타입 (가족, 친구, 동료, 연인, 기타 등) (최대 10자)" | ||||||
|                           outlined |                           outlined | ||||||
|                           dense |                           dense | ||||||
|                           counter="10" |                           counter="10" | ||||||
|                           :rules="relationshipTypeRules" |  | ||||||
|                         /> |                         /> | ||||||
|                       </v-col> |                       </v-col> | ||||||
|                       <v-col cols="5"> |                       <v-col cols="5"> | ||||||
|                         <v-text-field |                         <v-text-field | ||||||
|                           v-model="newRelationship.currentStatus" |                           v-model="newRelationship.currentStatus" | ||||||
|                           label="현재 상태 (최대 10자)" |                           label="현재 상태 (생존, 사망, 불명 등) (최대 10자)" | ||||||
|                           outlined |                           outlined | ||||||
|                           dense |                           dense | ||||||
|                           counter="10" |                           counter="10" | ||||||
|                           :rules="relationshipStatusRules" |  | ||||||
|                         /> |                         /> | ||||||
|                       </v-col> |                       </v-col> | ||||||
|                       <v-col cols="2"> |                       <v-col cols="2"> | ||||||
| @@ -870,7 +871,6 @@ | |||||||
|                           type="number" |                           type="number" | ||||||
|                           min="1" |                           min="1" | ||||||
|                           max="10" |                           max="10" | ||||||
|                           :rules="relationshipImportanceRules" |  | ||||||
|                         /> |                         /> | ||||||
|                       </v-col> |                       </v-col> | ||||||
|                     </v-row> |                     </v-row> | ||||||
| @@ -1668,4 +1668,9 @@ export default { | |||||||
| .custom-caption { | .custom-caption { | ||||||
|   font-size: 16px !important; |   font-size: 16px !important; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | .required-asterisk >>> .v-label::after { | ||||||
|  |   content: ' *'; | ||||||
|  |   color: #ff5252; | ||||||
|  | } | ||||||
| </style> | </style> | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user
	 Yu Sung
					Yu Sung