fix(chat): 캐릭터 추가/수정 폼 저장 버튼 로직 및 유효성 수정

- 수정 모드 이미지 변경 강제 제거, 시스템 프롬프트 필수 규칙 추가, 저장 버튼 라벨 조건부 표기(저장/수정)
- 수정 모드: 변경사항 또는 새 이미지 선택 시에만 저장 활성화, 등록 모드: 유효성만 충족 시 저장 가능
- 왜: 수정 UX 개선 및 필수 입력 요건 충족
This commit is contained in:
Yu Sung 2025-08-12 22:19:46 +09:00
parent 38161af543
commit 8f502f6d4d
1 changed files with 19 additions and 4 deletions

View File

@ -270,6 +270,7 @@
outlined outlined
auto-grow auto-grow
rows="4" rows="4"
:rules="systemPromptRules"
/> />
<div <div
class="caption grey--text text--darken-1 mt-1 custom-caption" class="caption grey--text text--darken-1 mt-1 custom-caption"
@ -908,10 +909,10 @@
<v-btn <v-btn
color="primary" color="primary"
:loading="isLoading" :loading="isLoading"
:disabled="!isFormValid || isLoading" :disabled="isSaveDisabled"
@click="saveCharacter" @click="saveCharacter"
> >
저장 {{ isEdit ? '수정' : '저장' }}
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-form> </v-form>
@ -994,7 +995,7 @@ export default {
v => (v && v.trim().length > 0) || '한 줄 소개를 입력하세요' v => (v && v.trim().length > 0) || '한 줄 소개를 입력하세요'
], ],
imageRules: [ imageRules: [
v => !this.isEdit || !!v || !!this.character.imageUrl || '이미지를 선택하세요' v => (this.isEdit ? true : (!!v || '이미지를 선택하세요'))
], ],
genderOptions: ['남성', '여성', '기타'], genderOptions: ['남성', '여성', '기타'],
mbtiOptions: [ mbtiOptions: [
@ -1003,11 +1004,25 @@ export default {
'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ', 'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ',
'ISTP', 'ISFP', 'ESTP', 'ESFP' 'ISTP', 'ISFP', 'ESTP', 'ESFP'
], ],
typeOptions: ['Clone', 'Character'] typeOptions: ['Clone', 'Character'],
systemPromptRules: [
v => (this.isEdit ? true : (!!v && v.trim().length > 0) || '시스템 프롬프트를 입력하세요')
]
} }
}, },
computed: { computed: {
isSaveDisabled() {
if (this.isLoading) return true;
if (!this.isFormValid) return true;
if (!this.isEdit) return false; //
//
const changed = this.getChangedFields();
const hasNonIdField = Object.keys(changed || {}).some(k => k !== 'id');
const imageChanged = !!this.character.image; //
return !(hasNonIdField || imageChanged);
}
}, },
watch: { watch: {