diff --git a/src/components/input/FormSelect.vue b/src/components/input/FormSelect.vue index 1da67e5..99fbfb3 100644 --- a/src/components/input/FormSelect.vue +++ b/src/components/input/FormSelect.vue @@ -5,7 +5,7 @@ *
- @@ -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 }); diff --git a/src/components/user/RegisterForm.vue b/src/components/user/RegisterForm.vue index 5a5b557..0a6c7a7 100644 --- a/src/components/user/RegisterForm.vue +++ b/src/components/user/RegisterForm.vue @@ -95,9 +95,11 @@ :is-color="true" :data="colorList" @update:data="color = $event" + @blur="checkColorDuplicate" class="w-50" />
+ {{ colorError }}
{ 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; }