hook-simo

hook-simo Get Started

설치하기

npm install hook-simo

사용예시

• useCardNumber

import React from "react";
import useCardNumber from "hook-simo";

const CardNumberForm = () => {
  const {
    cardNumber,
    cardNumberFormat,
    cardBrand,
    errorState,
    errorText,
    handleCardNumberChange,
  } = useCardNumber();

  return (
    <form>
      <input value={cardNumber} onChange={handleCardNumberChange} />
      {errorText && <p>{errorText}</p>}
      {cardBrand && <p>{cardBrand}</p>}
      <span>{cardNumberFormat.first} </span>
      <span>{cardNumberFormat.second} </span>
      <span>{cardNumberFormat.third} </span>
      <span>{cardNumberFormat.fourth}</span>
      <button type="submit" disabled={!cardNumber || errorState}>
        Submit
      </button>
    </form>
  );
};

export default CardNumberForm;

반환값 설명

아래는 useCardNumber 훅의 반환값을 설명하는 표입니다 :)

Property	Type	Description
cardNumber	string	입력하는 카드 번호입니다.
cardNumberFormat	CardNumberFormatType	입력하는 카드 번호에 따라 카드 브랜드를 식별한 뒤, 카드 브랜드에 맞게 카드 번호를 포멧팅 합니다. 'Diners'와 'AMEX'의 경우 4-6-4(5)의 3 부분으로, 그 외의 경우 4-4-4-4 4 부분으로 포멧팅 합니다. 이 포멧팅 한 결과를 객체로 반환합니다.
cardBrand	CardBrandType	입력하는 카드 번호에 따라 카드 브랜드를 식별합니다. 카드 브랜드에는 'Diners', 'AMEX', 'Visa', 'MasterCard', 'UnionPay'가 있습니다.
errorState	boolean	각 카드 번호 입력 부분의 에러 상태를 표현하는 객체입니다.
errorText	string	입력 관련 에러 메시지를 제공합니다.
handleCardNumberChange	function	카드 번호 입력 필드의 변경을 처리하는 함수입니다.

이 훅을 사용하면 각 카드 번호 필드를 개별적으로 관리할 수 있으며, 입력 검증도 함께 제공됩니다.

• useExpiryDate

import React from "react";
import useExpiryDate from "hook-simo";

const ExpiryDateForm = () => {
  const {
    expiryDate,
    isExpiryDateCompleted,
    errorState,
    errorText,
    handleExpiryDateChange,
  } = useExpiryDate();

  return (
    <form>
      <input
        name="month"
        value={expiryDate.month}
        onChange={handleExpiryDateChange.month}
        placeholder="MM"
      />
      <input
        name="year"
        value={expiryDate.year}
        onChange={handleExpiryDateChange.year}
        placeholder="YY"
      />
      {errorText && <p>{errorText}</p>}
      <button type="submit" disabled={!isExpiryDateCompleted}>
        Submit
      </button>
    </form>
  );
};

export default ExpiryDateForm;

반환값 설명

아래는 useExpiryDate 훅의 반환값을 설명하는 표입니다 :)

Property	Type	Description
expiryDate	Record<ExpiryDateKeys, string>	month와 year을 키로 하는 객체로, 각각 유효기간의 월과 년을 저장합니다.
isExpiryDateCompleted	boolean	모든 유효기간 필드(월과 년)가 적절히 입력되었는지 여부를 나타냅니다.
errorState	Record<ExpiryDateKeys, boolean>	각 유효기간 입력의 에러 상태를 표현하는 객체입니다.
errorText	string	입력 관련 에러 메시지를 제공합니다.
handleExpiryDateChange	Record<ExpiryDateKeys, function>	유효기간 입력 필드의 변경을 처리하는 함수입니다.

위에서 언급한 ExpiryDateKeys는 month와 year을 가지고 있는 키 타입을 말합니다. 이 훅을 사용함으로써 개발자는 카드 유효기간 입력 폼의 상태 관리와 유효성 검증을 쉽게 구현할 수 있습니다.

• useCardHolderName

import React from "react";
import useCardHolderName from "hook-simo";

const CardHolderNameForm = () => {
  const { holderName, errorState, errorText, handleCardHolderNameChange } =
    useCardHolderName();

  return (
    <form>
      <input
        type="text"
        value={holderName}
        onChange={handleCardHolderNameChange}
        placeholder="Card Holder Name"
      />
      {errorText && <p>{errorText}</p>}
      <button type="submit" disabled={errorState}>
        Submit
      </button>
    </form>
  );
};

export default CardHolderNameForm;

반환값 설명

아래는 useCardHolderName 훅의 반환값을 설명하는 표입니다 :)

Property	Type	Description
holderName	string	사용자가 입력한 카드 소유자의 이름입니다. 입력이 유효한 경우, 대문자로 변환됩니다.
errorState	boolean	현재 사용자 이름 입력에 오류가 있는지 여부를 나타내는 상태입니다.
errorText	string	입력과 관련된 오류 메시지를 제공합니다.
handleCardHolderNameChange	function	카드 소유자 이름 입력 필드의 변경을 처리하는 함수입니다. 입력이 유효하면 이름을 업데이트합니다.

이 훅을 사용함으로써 개발자는 카드 소유자 이름 입력 폼의 유효성 검사 및 상태 관리를 쉽게 할 수 있습니다. 오류 메시지와 입력 상태 관리를 통해 사용자에게 적절한 피드백을 제공할 수 있습니다.

• useCVC

import React from "react";
import useCVC from "hook-simo";

const CVCForm = () => {
  const { cvc, errorState, errorText, handleCVCChange } = useCVC();

  return (
    <form>
      <input
        type="text"
        value={cvc}
        onChange={handleCVCChange}
        placeholder="CVC"
        maxLength={4}
      />
      {errorText && <p>{errorText}</p>}
      <button type="submit" disabled={!cvc.length === 3 || errorState}>
        Submit
      </button>
    </form>
  );
};

export default CVCForm;

아래는 useCVC 훅의 반환값을 설명하는 표입니다 :)

반환값 설명

Property	Type	Description
cvc	string	사용자가 입력한 카드의 CVC 코드입니다.
errorState	boolean	현재 입력에 오류가 있는지 여부를 나타내는 상태입니다.
errorText	string	입력과 관련된 오류 메시지를 제공합니다.
handleCVCChange	function	CVC 입력 필드의 변경을 처리하는 함수입니다. 입력이 유효하면 CVC 코드를 업데이트합니다.

이 훅을 사용함으로써 개발자는 CVC 입력 폼의 유효성 검사 및 상태 관리를 쉽게 할 수 있습니다. 오류 메시지와 입력 상태 관리를 통해 사용자에게 적절한 피드백을 제공할 수 있습니다.

• useCardPassword

import React from "react";
import useCardPassword from "hook-simo";

const CardPasswordForm = () => {
  const { cardPassword, errorState, errorText, handleCardPasswordChange } =
    useCardPassword();

  return (
    <form>
      <input
        type="password"
        value={cardPassword}
        onChange={handleCardPasswordChange}
        placeholder="Card Password"
      />
      {errorText && <p>{errorText}</p>}
      <button type="submit" disabled={!cardPassword.length === 4 || errorState}>
        Submit
      </button>
    </form>
  );
};

export default CardPasswordForm;

아래는 useCardPassword 훅의 반환값을 설명하는 표입니다 😃

반환값 설명

Property	Type	Description
cardPassword	string	사용자가 입력한 카드의 비밀번호입니다.
errorState	boolean	현재 입력에 오류가 있는지 여부를 나타내는 상태입니다.
errorText	string	입력과 관련된 오류 메시지를 제공합니다.
handleCardPasswordChange	function	카드 비밀번호 입력 필드의 변경을 처리하는 함수입니다. 입력이 유효하면 비밀번호를 업데이트합니다.

이 훅을 사용함으로써 개발자는 카드 비밀번호 입력 폼의 유효성 검사 및 상태 관리를 쉽게 할 수 있습니다. 오류 메시지와 입력 상태 관리를 통해 사용자에게 적절한 피드백을 제공할 수 있습니다.

`