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 ||