// composables/useEmailCheck.js
import { ref, computed, watch } from 'vue';
import { checkEmailExists } from '@/api/auth';
// 간단한 이메일 정규식 예시 (필요시 강화 가능)
const EMAIL_REGEX =
/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
export function useEmailCheck() {
const email = ref('');
const isFormatValid = ref(null); // true | false | null
const isChecking = ref(false);
const isDuplicate = ref(null); // true | false | null
const error = ref(null);
const validateFormat = (v) => {
if (!v) return null;
return EMAIL_REGEX.test(v);
};
// 입력 중에는 형식만 즉시 업데이트, 중복 결과/에러는 초기화
watch(email, (v) => {
isFormatValid.value = validateFormat(v);
isDuplicate.value = null;
error.value = null;
});
const doCheck = async (v) => {
const valid = validateFormat(v);
isFormatValid.value = valid;
if (!v || !valid) {
isDuplicate.value = null;
return;
}
try {
isChecking.value = true;
const exists = await checkEmailExists(v);
isDuplicate.value = exists;
error.value = null;
} catch (e) {
error.value = '이메일 중복 확인 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.';
isDuplicate.value = null;
} finally {
isChecking.value = false;
}
};
// 외부에서 호출할 메서드: blur/Enter 시점
const checkNow = () => doCheck(email.value);
const canSubmit = computed(() => {
return (
isFormatValid.value === true &&
isDuplicate.value === false &&
!isChecking.value &&
!error.value
);
});
return {
email,
isFormatValid,
isChecking,
isDuplicate,
error,
checkNow,
canSubmit,
};
}
카테고리 없음
정규식
반응형
반응형