컬러, 휴대전화

src/components/input/FormSelect.vue

@@ -31,7 +31,7 @@
                 :src="`/img/mbti/${selected.toLowerCase()}.png`"
                 alt="MBTI image"/>
         </div>
-        <div v-if="isAlert" class="invalid-feedback">{{ title }}을 확인해주세요.</div>
+        <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}를 확인해주세요.</div>
     </div>
 </template>
 

src/components/user/RegisterForm.vue

@@ -95,6 +95,7 @@
                     :is-color="true"
                     :data="colorList"
                     @update:data="handleColorUpdate"
+                    :is-alert="colorAlert"
                     class="w-50"
                 />
             </div>
@@ -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"
             />
             <span v-if="phoneError" class="invalid-feedback d-block">{{ phoneError }}</span>
 
@@ -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 ||