본문 바로가기
카테고리 없음

정규식

by 두잇건강 2025. 8. 19.
반응형

// 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,
  };
}

반응형