diff --git a/src/components/input/FormSelect.vue b/src/components/input/FormSelect.vue index 6a3d680..34d976a 100644 --- a/src/components/input/FormSelect.vue +++ b/src/components/input/FormSelect.vue @@ -31,7 +31,7 @@ :src="`/img/mbti/${selected.toLowerCase()}.png`" alt="MBTI image"/> -
{{ title }}을 확인해주세요.
+
{{ title }}를 확인해주세요.
diff --git a/src/components/user/RegisterForm.vue b/src/components/user/RegisterForm.vue index 4740439..e1b2bf7 100644 --- a/src/components/user/RegisterForm.vue +++ b/src/components/user/RegisterForm.vue @@ -95,6 +95,7 @@ :is-color="true" :data="colorList" @update:data="handleColorUpdate" + :is-alert="colorAlert" class="w-50" /> @@ -143,13 +144,12 @@ name="phone" :isEssential="true" :is-alert="phoneAlert" - @update:data="phone = $event" @update:alert="phoneAlert = $event" @blur="checkPhoneDuplicate" :maxlength="11" :value="phone" @keypress="onlyNumber" - + @input="inputEvent" /> {{ phoneError }} @@ -205,6 +205,7 @@ const passwordcheckErrorAlert = ref(false); // 비밀번호 확인 오류 메시지 const pwhintResAlert = ref(false); const nameAlert = ref(false); + const colorAlert = ref(false); const birthAlert = ref(false); const addressAlert = ref(false); const phoneAlert = ref(false); @@ -326,6 +327,12 @@ } }; + const inputEvent = (e) => { + const newValue = e.target.value.replace(/\D/g, ''); // 숫자만 남김 + e.target.value = newValue; // 입력 필드 즉시 반영 + phone.value = newValue; // Vue 반응형 상태 업데이트 + }; + watch(id, (newValue) => { if (newValue && newValue.length >= 4) { idError.value = ''; @@ -359,7 +366,6 @@ } }); - // 회원가입 const handleSubmit = async () => { await checkColorDuplicate(); @@ -373,6 +379,10 @@ addressAlert.value = address.value.trim() === ''; phoneAlert.value = phone.value.trim() === ''; + if (!colorList.value || colorList.value.length === 0) { + colorAlert.value = true; + } + // 아이디 길이 체크 if (id.value && id.value.length < 4) { idErrorAlert.value = true; @@ -402,6 +412,7 @@ profilAlert.value = false; } + if ( profilAlert.value || idAlert.value ||