전화번호 숫자만, 주소 디세이블, 컬러 변경 시 alert

src/components/input/ArrInput.vue

@@ -18,6 +18,7 @@
                     type="text"
                     v-model="postcode"
                     placeholder="우편번호"
+                    disabled="true"
                     readonly
                 />
 
@@ -26,6 +27,7 @@
                     type="text"
                     v-model="address"
                     placeholder="기본주소"
+                    disabled="true"
                     readonly
                 />
             </div>

src/components/user/RegisterForm.vue

@@ -94,8 +94,7 @@
                     :is-common="true"
                     :is-color="true"
                     :data="colorList"
-                    @update:data="color = $event"
+                    @update:data="handleColorUpdate"
-                    @blur="checkColorDuplicate"
                     class="w-50"
                 />
             </div>
@@ -136,6 +135,7 @@
                 @update:data="handleAddressUpdate"
                 @update:alert="addressAlert = $event"
                 :value="address"
+                :disabled="true"
             />
 
             <UserFormInput
@@ -143,7 +143,7 @@
                 name="phone"
                 :isEssential="true"
                 :is-alert="phoneAlert"
-                @update:data="phone = $event"
+                @update:data="phone = $event.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')"
                 @update:alert="phoneAlert = $event"
                 @blur="checkPhoneDuplicate"
                 :maxlength="11"
@@ -298,7 +298,6 @@
         }
     };
 
-
     // 색상 중복체크
     const checkColorDuplicate = async () => {
         const response = await $api.get(`/user/checkColor?memberCol=${color.value}`);
@@ -312,6 +311,14 @@
         }
     };
 
+    const handleColorUpdate = async (newColor) => {
+        color.value = newColor;
+        colorError.value = '';
+        colorErrorAlert.value = false;
+
+        await checkColorDuplicate();
+    }
+
 
     // 회원가입
     const handleSubmit = async () => {
@@ -366,4 +373,3 @@
     };
 </script>
 
-<style></style>