1. ValidationEmail

ValidationEmail 컴포넌트는 사용자가 입력한 이메일이 유효한 형식인지 검사하는 기능을 제공합니다. 유효하지 않은 형식일 경우 오류 메시지를 화면에 표시합니다.

1.1. Import

import ValidationEmail from '@components/Validation/ValidationEmail';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

import ValidationEmail from '@components/Validation/ValidationEmail';

function Example() {
  return (
    <ValidationEmail />
  );
}

export default Example;

1.3. Props

ValidationEmail 컴포넌트는 Prop을 받지 않습니다.

1.4. 유효성 검사 함수 설명

const validateEmail = (Email: string) => {
  const emailType = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 이메일 형식 정규식
  return emailType.test(Email);
};

이 함수는 이메일이 유효한 형식인지 확인합니다. 정규 표현식은 다음과 같습니다:

^[^\\s@]+: 이메일의 시작은 공백이나 '@'이 아닌 문자로 시작해야 합니다.
@: '@' 문자가 있어야 합니다.
[^\\s@]+: '@' 이후에는 공백이나 '@'이 아닌 문자가 있어야 합니다.
\\.: '.' 문자가 있어야 합니다.
[^\\s@]+$: '.' 뒤에는 공백이나 '@'이 아닌 문자로 끝나야 합니다.

1.5. Full Example


// ValidationEmail.tsx
"use client";
import { useState } from "react";

const ValidationEmail = () => {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  const ValidateEmail = (Email: string) => {
    const emailType = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // 이메일 형식 정규식
    return emailType.test(email);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setEmail(value);
    setError(ValidateEmail(value) ? "" : "유효하지 않은 이메일 형식입니다.");
  };

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={handleChange}
        placeholder="이메일을 입력하세요."
        className="text-black border-2 border-black dark:border-[#cdcdcd] dark:text-black"
      />
      {error && (
        <p className="relative z-10 text-sm text-red-500 dark:text-red-500">
          {error}
        </p>
      )}
    </div>
  );
};
export default ValidationEmail;

2. ValidationID

ValidationID 컴포넌트는 사용자가 입력한 ID가 4~12자의 알파벳 및 숫자로 구성되어 있는지 검사하는 기능을 제공합니다. 유효하지 않은 형식일 경우 오류 메시지를 화면에 표시합니다.

2.1. Import

import ValidationID from '@components/Validation/ValidationID';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

import ValidationID from '@components/Validation/ValidationID';

function Example() {
  return (
    <ValidationID />
  );
}

export default Example;

2.3. Props

ValidationID 컴포넌트는 Prop을 받지 않습니다.

2.4. 유효성 검사 함수 설명

const validateID = (ID: string) => {
  const IDType = /^[a-zA-Z0-9]{4,12}$/; // ID 형식 정규식
  return IDType.test(ID);
};

이 함수는 ID가 유효한 형식인지 확인합니다. 정규 표현식은 다음과 같습니다:

^[a-zA-Z0-9]0.3333333333333333$: ID가 4자 이상 12자 이하의 알파벳 대소문자와 숫자로만 구성되어야 합니다.

2.5. Full Example


// ValidationID.tsx
"use client";
import { useState } from "react";

const ValidationID = () => {
  const [ID, setID] = useState("");
  const [error, setError] = useState("");

  const validateID = (ID: string) => {
    const IDType = /^[a-zA-Z0-9]{4,12}$/;
    return IDType.test(ID);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setID(value);
    setError(validateID(value) ? "" : "4~12자, 문자, 숫자만 입력가능합니다.");
  };

  return (
    <div>
      <input
        type="text"
        value={ID}
        onChange={handleChange}
        placeholder="아이디를 입력해 주세요."
        className="border-2 border-black text-black dark:border-[#cdcdcd] dark:text-black"
      />
      {error && (
        <p className="absolute z-10 text-sm text-red-500 dark:text-red-500">
          {error}
        </p>
      )}
    </div>
  );
};
export default ValidationID;

3. ValidationPW

ValidationPW 컴포넌트는 사용자가 입력한 비밀번호가 강력한 보안 요구 사항을 충족하는지 검사합니다. 유효하지 않을 경우 오류 메시지를 화면에 표시합니다.

3.1. Import

import ValidationPW from '@components/Validation/ValidationPW';

3.2. Usage

기본 사용 예제는 아래와 같습니다:

import ValidationPW from '@components/Validation/ValidationPW';

function Example() {
  return (
    <ValidationPW />
  );
}

export default Example;

3.3. Props

ValidationPW 컴포넌트는 Prop을 받지 않습니다.

3.4. 유효성 검사 함수 설명

const validatePW = (PW: string) => {
  const PWType = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=]).{8,}$/; // 비밀번호 형식 정규식
  return PWType.test(PW);
};

이 함수는 비밀번호가 강력한 보안 요구 사항을 충족하는지 확인합니다. 정규 표현식은 다음과 같습니다:

(?=.*\\d): 최소 한 개의 숫자가 포함되어야 합니다.
(?=.*[a-z]): 최소 한 개의 소문자가 포함되어야 합니다.
(?=.*[A-Z]): 최소 한 개의 대문자가 포함되어야 합니다.
(?=.*[@#$%^&+=]): 최소 한 개의 특수 문자가 포함되어야 합니다.
.8: 모든 문자가 최소 8자 이상이어야 합니다.

3.5. Full Example


// ValidationPW.tsx
"use client";
import { useState } from "react";

const ValidationPW = () => {
  const [PW, setPW] = useState("");
  const [error, setError] = useState("");

  const validatePW = (PW: string) => {
    const PWType = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=]).{8,}$/;
    return PWType.test(PW);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setPW(value);
    setError(
      validatePW(value)
        ? ""
        : "대소문자, 숫자, 특수 문자가 포함된 최소 8자 이상",
    );
  };

  return (
    <div>
      <input
        type="password"
        value={PW}
        onChange={handleChange}
        placeholder="비밀번호를 입력하세요."
        className="text-black border-2 border-black dark:border-[#cdcdcd] dark:text-black"
      />
      {error && (
        <p className="absolute z-10 text-sm text-red-500 dark:text-red-500">
          {error}
        </p>
      )}
    </div>
  );
};
export default ValidationPW;

4. ValidationPWConfirm

ValidationPWConfirm 컴포넌트는 사용자가 두 번 입력한 비밀번호가 일치하는지 검사합니다. 유효하지 않을 경우 오류 메시지를 화면에 표시합니다.

4.1. Import

import ValidationPWConfirm from '@components/Validation/ValidationPWConfirm';

4.2. Usage

기본 사용 예제는 아래와 같습니다:

import ValidationPWConfirm from '@components/Validation/ValidationPWConfirm';

function Example() {
  return (
    <ValidationPWConfirm />
  );
}

export default Example;

4.3. Props

ValidationPWConfirm 컴포넌트는 Prop을 받지 않습니다.

4.4. 유효성 검사 함수 설명

const validatePWConfirm = (pw: string, confirmPW: string) => {
  return pw === confirmPW; // 비밀번호 일치 확인
};

이 함수는 두 개의 비밀번호가 일치하는지 확인합니다.

4.5. Full Example


// ValidationPWConfirm.tsx
"use client";
import { useState } from "react";

const ValidationPWConfirm = () => {
  const [PW, setPW] = useState("");
  const [error, setError] = useState("");
  const [confirmPW, setConfirmPW] = useState("");
  const [confirmError, setConfirmError] = useState("");

  const validatePW = (PW: string) => {
    const PWType = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=]).{8,}$/;
    return PWType.test(PW);
  };

  const handleChangePW = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setPW(value);
    setError(
      validatePW(value)
        ? ""
        : "대소문자, 숫자, 특수 문자가 포함된 최소 8자 이상",
    );
    setConfirmError("");
  };

  const handleChangeConfirmPW = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setConfirmPW(value);
    setConfirmError(value === PW ? "" : "비밀번호가 일치하지 않습니다.");
  };

  return (
    <div>
      <div>
        <input
          type="password"
          value={PW}
          onChange={handleChangePW}
          placeholder="비밀번호를 입력하세요."
          className="border-2 border-black text-black dark:border-[#cdcdcd] dark:text-white"
        />
        {error && <p className="text-sm text-red-500">{error}</p>}
      </div>
      <div>
        <input
          type="password"
          value={confirmPW}
          onChange={handleChangeConfirmPW}
          placeholder="비밀번호를 다시 입력하세요."
          className="mt-2 border-2 border-black text-black dark:border-[#cdcdcd] dark:text-black"
        />
        {confirmError && (
          <p className="absolute z-10 text-sm text-red-500 dark:text-red-500">
            {confirmError}
          </p>
        )}
      </div>
    </div>
  );
};
export default ValidationPWConfirm;

5. ValidationPhone

ValidationPhone 컴포넌트는 사용자가 입력한 핸드폰 번호가 유효한지 검사합니다. 유효하지 않을 경우 오류 메시지를 화면에 표시합니다.

5.1. Import

import ValidationPhone from '@components/Validation/ValidationPhone';

5.2. Usage

기본 사용 예제는 아래와 같습니다:

import ValidationPhone from '@components/Validation/ValidationPhone';

function Example() {
  return (
    <ValidationPhone />
  );
}

export default Example;

5.3. Props

ValidationPhone 컴포넌트는 Prop을 받지 않습니다.

5.4. 유효성 검사 함수 설명

const validatePhone = (phone: string) => {
  const phoneType = /^\d{10,11}$/; // 핸드폰 번호 형식 정규식
  return phoneType.test(phone);
};

이 함수는 핸드폰 번호가 유효한지 확인합니다. 정규 표현식은 다음과 같습니다:

^\\d0.9090909090909091$: 번호가 10자리 또는 11자리 숫자여야 합니다.

5.5. Full Example


// ValidationPhone.tsx
"use client";
import { useState } from "react";

const ValidationPhone = () => {
  const [phone, setPhone] = useState("");
  const [error, setError] = useState("");

  const validatePhone = (phone: string) => {
    const phoneType = /^\d{10,11}$/;
    return phoneType.test(phone);
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setPhone(value);
    setError(validatePhone(value) ? "" : "-없이 번호만 입력해주세요.");
  };

  return (
    <div>
      <input
        type="text"
        placeholder="핸드폰 번호를 입력해주세요."
        className="text-black border-2 border-black dark:border-[#cdcdcd] dark:text-black"
        onChange={handleChange}
        value={phone}
      />
      {error && (
        <p className="absolute z-10 text-sm text-red-500 dark:text-red-500">
          {error}
        </p>
      )}
    </div>
  );
};
export default ValidationPhone;