회원가입 시 색상 체크

src/components/input/FormSelect.vue

@@ -5,7 +5,7 @@
             <span :class="isEssential ? 'link-danger' : 'none'">*</span>
         </label>
         <div :class="isRow ? 'col-md-10' : 'col-md-12'" class="d-flex gap-2 align-items-center">
-            <select class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}">
+            <select class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}" @blur="$emit('blur')">
                 <option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i" :style="isColor ? { color: item.label } : {}">
                     {{ isCommon ? item.label : item }}
                 </option>
@@ -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 });

src/components/user/RegisterForm.vue

@@ -95,9 +95,11 @@
                     :is-color="true"
                     :data="colorList"
                     @update:data="color = $event"
+                    @blur="checkColorDuplicate"
                     class="w-50"
                 />
             </div>
+            <span v-if="colorError" class="w-50 ps-1 ms-auto invalid-feedback d-block">{{ colorError }}</span>
 
             <div class="d-flex">
                 <UserFormInput
@@ -187,6 +189,7 @@
     const phone = ref('');
     const phoneError = ref('');
     const color = ref(''); // 선택된 color
+    const colorError = ref('');
     const mbti = ref('');  // 선택된 MBTI
     const pwhint = ref('');  // 선택된 pwhint
 
@@ -202,6 +205,7 @@
     const addressAlert = ref(false);
     const phoneAlert = ref(false);
     const phoneErrorAlert = ref(false);
+    const colorErrorAlert = ref(false);
 
     const toastStore = useToastStore();
 
@@ -247,7 +251,6 @@
     // 아이디 중복체크
     const checkIdDuplicate = async () => {
         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;
         }