localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

회원가입 시 색상 체크

Browse Source
This commit is contained in:
yoon 2025-03-06 13:16:07 +09:00
parent d11e9df73c
commit 2331a345aa
2 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/input/FormSelect.vue
View File

@ -5,7 +5,7 @@
<span :class="isEssential ? 'link-danger' : 'none'">*</span>
</label>
<div :class="isRow ? 'col-md-10' : 'col-md-12'" class="d-flex gap-2 align-items-center">
<select class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}">
<select class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}" @blur="$emit('blur')">
<option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i" :style="isColor ? { color: item.label } : {}">
{{ isCommon ? item.label : item }}
</option>
@ -91,7 +91,7 @@ const props = defineProps({
},
});
const emit = defineEmits(['update:data']);
const emit = defineEmits(['update:data', 'blur']);
const selectData = ref(props.value);
// props.value의 변경을 감지하는 watch 추가
@ -106,6 +106,10 @@ watch(() => props.data, (newData) => {
if (props.value === '0') {
selectData.value = newData[0].value;
emit('update:data', selectData.value);
if (props.isColor) {
emit('blur');
}
}
}
}, { immediate: true });

25
src/components/user/RegisterForm.vue
View File

@ -95,9 +95,11 @@
:is-color="true"
:data="colorList"
@update:data="color = $event"
@blur="checkColorDuplicate"
class="w-50"
/>
</div>
<span v-if="colorError" class="w-50 ps-1 ms-auto invalid-feedback d-block">{{ colorError }}</span>
<div class="d-flex">
<UserFormInput
@ -187,6 +189,7 @@
const phone = ref('');
const phoneError = ref('');
const color = ref(''); // 선택된 color
const colorError = ref('');
const mbti = ref(''); // 선택된 MBTI
const pwhint = ref(''); // 선택된 pwhint
@ -202,6 +205,7 @@
const addressAlert = ref(false);
const phoneAlert = ref(false);
const phoneErrorAlert = ref(false);
const colorErrorAlert = ref(false);
const toastStore = useToastStore();
@ -247,7 +251,6 @@
// 아이디 중복체크
const checkIdDuplicate = async () => {
const response = await $api.get(`/user/checkId?memberIds=${id.value}`);
if (!response.data.data) {
idErrorAlert.value = true;
idError.value = '이미 사용 중인 아이디입니다.';
@ -295,9 +298,26 @@
}
};
// 색상 중복체크
const checkColorDuplicate = async () => {
const response = await $api.get(`/user/checkColor?memberCol=${color.value}`);
if (response.data.data) {
colorErrorAlert.value = true;
colorError.value = '이미 사용 중인 색상입니다.';
} else {
colorErrorAlert.value = false;
colorError.value = '';
}
};
// 회원가입
const handleSubmit = async () => {
await checkColorDuplicate();
idAlert.value = id.value.trim() === '';
passwordAlert.value = password.value.trim() === '';
passwordcheckAlert.value = passwordcheck.value.trim() === '';
@ -317,7 +337,8 @@
}
if (profilAlert.value || idAlert.value || idErrorAlert.value || passwordAlert.value || passwordcheckAlert.value ||
passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value || addressAlert.value || phoneAlert.value || phoneErrorAlert.value) {
passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value ||
addressAlert.value || phoneAlert.value || phoneErrorAlert.value || colorErrorAlert.value) {
return;
}