Hooks Module

페이먼츠 커스텀 훅

• package 이름 : rian-card-validation-hooks
• Writer : 헤일리, 리안

Installation

npm install rian-card-validation-hooks

Available Hooks

• useCardNumbers (카드 넘버 16자리 입력 커스텀 훅)
• useMultiCardNumbers (여러 카드사의 다양한 카드 넘버 포맷을 지정해서 검사 가능한 커스텀 훅)
• useCardCompany (카드 회사 선택 커스텀 훅)
• useCardHolder (영문이름 입력 커스텀 훅)
• useExpiryDate (유효기간(월/년) 입력 커스텀 훅)
• useCVC (CVC 넘버 3자리 입력 커스텀 훅)
• usePassword (비밀번호 2자리 입력 커스텀 훅)

Usage

(1) useCardNumbers

• useCardNumbers는 카드 번호 16자리를 입력 받습니다.
• 카드 번호는 4개로 이루어져 있으며, input의 name은 'cardNumbers1','cardNumbers2','cardNumbers3','cardNumbers4' 로 고정되어 있습니다.
• validate : 입력한 카드 번호가 모두 숫자인지, 4자리씩 작성되었는지 확인합니다.
• 인풋에 onChange 이벤트에 onChange를, onBlur 이벤트에 onBlurValidLength를 연결하여 사용합니다.

inputs

(1)initialValue : 다음 객체를 고정으로 넣어야 합니다.

{
  cardNumber1: "",
  cardNumber2: "",
  cardNumber3: "",
  cardNumber4: "",
}

outputs

(1)values : 인풋에 입력된 값이 객체 형태로 나옵니다.

{
  cardNumber1: "1234",
  cardNumber2: "1234",
  cardNumber3: "1234",
  cardNumber4: "1234",
}

(2)errorMessages : 인풋에 해당하는 에러 메세지가 객체 형태로 나옵니다. values와 포맷이 같습니다. 다음과 같은 에러 메세지가 들어갑니다.

[IS_NOT_NUMBER]: '카드번호는 숫자만 입력해주세요.'
[INVALID_LENGTH]: '카드 번호를 4자리씩 입력해주세요.'

(3) onChangeCardNumbers : 카드 번호의 값을 입력받아 관리하는 메서드 입니다. 첫번째 인자로 event가 들어갑니다.

(4) onBlurValidLength : 현재 인풋의 포커스가 벗어났을 때 길이 검사를 해주는 함수입니다. 첫번째 인자로 event가 들어갑니다.

Usage

const {
  values: cardNumbers,
  onChange: onChangeCardNumbers,
  errorMessages,
  onBlurValidLength,
} = useCardNumbers({
  cardNumber1: "",
  cardNumber2: "",
  cardNumber3: "",
  cardNumber4: "",
});

return (
  <>
    <h1>Hooks Modules</h1>
    <div>카드 번호</div>
    {/*cardNumber 1*/}
    <input
      onChange={onChangeCardNumbers}
      name="cardNumber1"
      value={cardNumbers["cardNumber1"]}
      onBlur={onBlurValidLength}
    />
    {/*cardNumber 2*/}
    <div>{errorMessages["cardNumber1"]}</div>
    <input
      onChange={onChangeCardNumbers}
      name="cardNumber2"
      value={cardNumbers["cardNumber2"]}
      onBlur={onBlurValidLength}
    />
    {/*cardNumber 3*/}
    <div>{errorMessages["cardNumber2"]}</div>
    <input
      value={cardNumbers["cardNumber3"]}
      onChange={onChangeCardNumbers}
      name="cardNumber3"
      onBlur={onBlurValidLength}
    />
    <div>{errorMessages["cardNumber3"]}</div>
    {/*cardNumber 4*/}
    <input
      value={cardNumbers["cardNumber4"]}
      onChange={onChangeCardNumbers}
      name="cardNumber4"
      onBlur={onBlurValidLength}
    />
    <div>{errorMessages["cardNumber4"]}</div>
  </>
);

(2) useMultiCardNumbers

• 다양한 타입의 카드 브랜드들의 카드 숫자 정보를 받아, 현재 카드 브랜드의 정보에 맞게 동적으로 카드 번호를 검사해 주는 커스텀 훅입니다.

outputs

(1)formattedNumbers : 카드 번호가 브랜드에 따라 포맷팅 되어 배열 형태로 나옵니다.

[["1234"], ["1234"], ["1234"], ["1234"]];

(2)errorMessage : 인풋에 해당하는 에러 메세지가 나옵니다.

[IS_NOT_NUMBER]: '카드번호는 숫자만 입력해주세요.'
[INVALID_LENGTH]: '카드 번호를 4자리씩 입력해주세요.'

(3) onChange : 카드 번호을 입력하는 input의 값을 관리하는 onChange 메서드를 필수로 달아야 합니다.

(4) inputRef : 인풋의 커서를 조정하기 위해 ref로 달아야 합니다.

const { onChange, errorMessage, formattedNumbers, inputRef } =
  useMultiCardNumbers();

return (
  <>
    <input
      onChange={onChange}
      value={formattedNumbers.join("-")}
      ref={inputRef}
    />
    <span>{formattedNumbers.join("-")}</span>
    <span>{errorMessage}</span>
  </>
);

Usage

const {
  values: cardNumbers,
  errorMessages,
  onChange: onChangeCardNumbers,
  onBlurValidLength,
} = useMultiCardNumbers({
  cardCompanyNumbersInfo: cardCompanyNumbersInfo,
  selectedCompany: "[3,4,5,6]",
});

const valuesArr = Object.values(cardNumbers);
const errorMessagesArr = Object.values(errorMessages);

return (
  <>
    <h1>Hooks Modules</h1>
    <div>카드 번호</div>
    {Array.from({ length: 4 })
      .fill(0)
      .map((e, i) => {
        return (
          <>
            <input
              onChange={(e) => onChangeCardNumbers(e, i)}
              value={valuesArr[i]}
              onBlur={(e) => onBlurValidLength(e, i)}
            />
            <div>{errorMessagesArr[i]}</div>
          </>
        );
      })}
  </>
);

(3) useCardCompany

• useCardCompany는 카드 발급 회사에 대해 선택할 수 있습니다.
• validate : 선택한 벨류가 유효한 값인지 확인합니다.

inputs

(1)initialValue : 빈 문자열을 고정으로 넣어야 합니다.

(2) optionArray : (string[]) 선택 가능한 배열을 넣어야 합니다.

optionArray: ["하나카드", "우리카드", "비씨카드"];

errors

[INVALID_OPTION]: '유효하지 않은 옵션입니다.'

usage

const { value, onSelect, errorMessages } = useCardCompany({
  initialValue: "",
  optionArray: MockCardCompany,
});

return (
  <>
    <label>cardCompany</label>
    <select value={value} onChange={(e) => onSelect(e.target.value)}>
      <option value="">선택</option>
      {MockCardCompany.map((company) => (
        <option key={company} value={company}>
          {company}
        </option>
      ))}
    </select>
    <div>{errorMessages}</div>
  </>
);

(4) useCardHolder

• useCardHolder 커스텀 훅은 카드의 영문이름을 입력 받습니다.
• validate : 입력 받은 벨류가 모두 대문자 영어인지를 확인합니다.

inputs

빈 문자열을 고정으로 넣어야 합니다.

errors

[ONLY_UPPERCASE]: '영대문자로만 입력해주세요.'
[IS_DOUBLE_BLANK]: '빈칸이 두개 이상 포함되어 있습니다.'

usage

const { value, onChange, errorMessage } = useCardHolder("");

return (
  <>
    <label>CardHolder</label>
    <input value={value} onChange={onChange} name="cardHolder" />
    <div>{errorMessage}</div>
  </>
);

(5) useExpiryDate

• useExpiryDate 커스텀 훅은 카드의 유효기간 (월/년도)에 대해 입력 받습니다.
• validate : 입력 받은 벨류가 모두 숫자인지, 유효한 기간인지를 확인합니다.

inputs

다음과 같은 객체를 고정으로 넣어야 합니다.

{
  month: "",
  year: "",
}

outputs

(1)values : 인풋에 입력된 값이 객체 형태로 나옵니다.

{
  month: "12",
  year: "25",
}

(2)errorMessages : 인풋에 해당하는 에러 메세지가 객체 형태로 나옵니다. values와 포맷이 같습니다. 다음과 같은 에러 메세지가 들어갑니다.

errors

[IS_NOT_NUMBER]: '만료 일자는 숫자만 입력해주세요.'
[INVALID_DATE]:'이미 만료된 카드입니다. 만료일자를 확인해 주세요.' [INVALID_MONTH]: '유효하지 않은 월 입력입니다.'
[INVALID_YEAR]: '유효하지 않은 년 입력입니다.'
[INVALID_LENGTH]: '일자는 2자리 숫자로 입력해 주세요.'

usage

const {
  values: { month, year },
  onChange,
  errorMessages,
  onBlurValidLength,
} = useExpiryDate({
  month: "",
  year: "",
});

return (
  <>
    <label>expiryDate</label>
    <input
      value={month}
      onChange={onChange}
      name="month"
      onBlur={onBlurValidLength}
    />

    <div>{errorMessages && errorMessages.month}</div>
    <input
      value={year}
      onChange={onChange}
      name="year"
      onBlur={onBlurValidLength}
    />
    <div>{errorMessages && errorMessages.year}</div>
  </>
);

(6) useCVC

• useCVC 커스텀 훅은 카드의 CVC 3자리를 입력 받습니다.
• validate : 입력 받은 벨류가 모두 숫자인지, 길이가 3인지를 확인합니다.

inputs

빈 문자열을 고정으로 넣어야 합니다.

errors

[IS_NOT_NUMBER]: 'CVC는 숫자만 입력해주세요.'
[INVALID_LENGTH]: 'CVC는 3글자 이상으로 입력해 주세요.'

  const { value, onChange, errorMessage,onBlurValidLength } = useCVC('');
  return (
    <>
      <label>CVC</label>
      <input value={value} onChange={onChange} name="CVC"       onBlur={onBlurValidLength}
      />
      {errorMessage && <p>{errorMessage}</p>}
    </>
  );```

(7) usePassword

• usePassword 커스텀 훅은 카드의 비밀번호 앞자리 2자리를 입력 받습니다.
• validate : 입력 받은 벨류가 모두 숫자인지, 길이가 2인지를 확인합니다.

inputs

빈 문자열을 고정으로 넣어야 합니다.

errors

[IS_NOT_NUMBER]: '비밀번호는 숫자만 입력해주세요.'
[INVALID_LENGTH]: '비밀번호는 2글자만 입력해 주세요.'

const { value, onChange, errorMessage, onBlurValidLength } = usePassword("");

return (
  <>
    <label>password</label>
    <input
      value={value}
      onChange={onChange}
      name="password"
      onBlur={onBlurValidLength}
    />
    <div>{errorMessage}</div>
  </>
);