Get started

당신의 패키지 매니저를 통해 @pakxe/react-card-info-hooks 을 설치해 주세요:

npm install @pakxe/react-card-info-hooks

@pakxe/react-card-info-hooks 컴포넌트를 import 하세요:

import { useCardCVC } from '@pakxe/react-card-info-hooks';

export const MyComponent = () => {
  const { cvcNumber, isValidCVCNumber, cvcNumberErrorMessage, handleCVCNumberChange } = useCardCVC();

  return (
    <>
      <h3>useCardCVC</h3>
      <input type='text' value={cvcNumber} onChange={(e) => handleCVCNumberChange(e.target.value)} />
      <div>
        <p>{isValidCVCNumber ? 'true' : 'false'}</p>
        <p>{cvcNumberErrorMessage}</p>
      </div>
    </>
  );
};

카드 훅 라이브러리 사용하기

카드 훅 라이브러리의 각 훅은 카드 정보 처리와 관련된 특정 기능을 제공합니다. 아래는 각 훅의 기능에 대한 정확한 설명입니다:

useCardNumber

카드 번호를 관리합니다. 카드 번호를 받고, 카드 번호의 유효성을 검증하며, 유효한 값만으로 구성된 카드 번호로 관리됩니다.

카드 번호로 브랜드를 식별합니다. 현재 지원되는 브랜드는 다음과 같습니다.

• Visa
• Master Card
• Diners
• AMEX
• Union Pay
• JCB
• Discover

useCardCompany

카드 회사를 선택합니다. 입력으로 들어온 카드 회사 리스트와 맞지 않는 값 또는 선택하지 않은 경우에 대해 유효성을 검증합니다.

useCardExpirationDate

카드의 만료 날짜를 관리합니다. 사용자가 입력한 만료 월과 연도를 처리하고, 현재 날짜와 비교하여 카드의 유효성을 판단합니다. 또한, 만료 날짜가 유효하지 않거나 만료된 경우에 대한 에러 메시지를 제공합니다.

useCardOwnerName

카드 소유자의 이름을 관리합니다. 카드 사용자의 이름을 입력받고 저장하는 기능을 제공합니다. 또한, 이름의 유효성을 검사하고, 유효한 값만으로 구성된 카드 소유자명으로 관리됩니다.

useCardCVC

카드의 CVC(카드 검증 코드)를 관리합니다. CVC 입력을 받고, 해당 CVC가 유효한지 검증합니다. 일반적으로 CVC는 카드의 뒷면에 인쇄된 3자리 또는 4자리 숫자입니다. 유효한 값만으로 구성된 CVC로 관리됩니다.

useCardPassword

카드 거래 시 사용되는 비밀번호를 관리합니다. 이 훅은 카드 비밀번호를 안전하게 입력받고 저장하며, 비밀번호의 유효성을 검사할 수 있는 기능을 제공합니다. 유효한 값만으로 구성된 비밀번호로 관리됩니다.

매개변수 정의

카드 훅 라이브러리를 사용하실 때는 적절한 인자를 전달해야 합니다:

? 가 붙은 인자는 필요시 선택적으로 추가할 수 있습니다.

useCardNumber 입력

| Name | Type | Default | Description | | ---------------- | -------- | ------- | ---------------------------- | | initialNumber? | string | '' | 초기 카드 번호를 전달합니다. |

useCardNumber 반환 값

| Name | Type | Default | Description | | ------------------------ | ----------------------------------------------------------------------- | ------- | ---------------------------------------------------- | | cardNumber | string | - | 현재 입력된 카드 번호입니다. | | cardType | 'VISA', 'MASTER', 'DINERS', 'AMEX', 'UNION_PAY', 'JCB', 'UNKNOWN' | - | 카드 타입을 저장하고 유지합니다. | | isValidCardNumber | boolean | - | 카드 번호의 유효성 여부입니다. | | cardNumberErrorMessage | string | - | 카드 번호 입력 시 발생하는 오류 메시지입니다. | | handleCardNumberChange | function | - | 카드 번호 입력 및 유효성 검사를 처리하는 함수입니다. |

export const MyComponent = () => {
  const { cardNumber, isValidCardNumbers, cardNumberErrorMessages, handleCardNumberChange } = useCardNumber('1234');

  return (
    <>
      <h3>useCardNumber</h3>
      <input type='text' value={cardNumber} onChange={(e) => handleCardNumberChange(e.target.value)}></input>
      <div>
        <p>{`${isValidCardNumber}`}</p>
        <p>{cardNumberErrorMessage}</p>
      </div>
    </>
  );
};

useCardCompany 입력

| Name | Type | Default | Description | | ---------------------- | ---------- | ------- | ----------------------------------- | | validCardCompanyList | string[] | - | 유효한 카드 회사 목록을 전달합니다. | | initialSelected? | string | '' | 카드 회사 초기값을 전달합니다. |

useCardCompany 반환 값

| Name | Type | Description | | ------------------------- | ---------- | --------------------------------------------------- | | cardCompany | string | 현재 선택된 카드 회사입니다. | | isValidCardCompany | boolean | 선택된 카드 회사가 유효한 목록에 있는지 여부입니다. | | cardCompanyErrorMessage | string | 카드 회사 선택시 발생하는 오류 메시지입니다. | | handleCardCompanyChange | function | 카드 회사 변경을 처리하고 오류 메시지를 설정합니다. |

export const MyComponent = () => {
  const { cardCompany, isValidCardCompany, cardCompanyErrorMessage, handleCardCompanyChange } = useCardCompany([
    '신한카드',
    '롯데카드',
    'BC카드',
  ]);

  return (
    <>
      <h3>useCardCompany</h3>
      <select onChange={(e) => handleCardCompanyChange(e.target.value)}>
        <option selected={cardCompany === ''} value=''>
          선택해 주세요
        </option>
        <option selected={cardCompany === '신한카드'}>신한카드</option>
        <option selected={cardCompany === '롯데카드'}>롯데카드</option>
        <option selected={cardCompany === 'BC카드'}>BC카드</option>
      </select>
      <div>
        <p>{isValidCardCompany ? 'true' : 'false'}</p>
        <p>{cardCompanyErrorMessage}</p>
      </div>
    </>
  );
};

useCardExpirationDate 입력

| Name | Type | Default | Description | | -------- | -------- | ------- | -------------------------------------- | | month? | string | '' | 카드 만료 월의 초기 값을 설정합니다. | | year? | string | '' | 카드 만료 연도의 초기 값을 설정합니다. |

useCardExpirationDate 반환 값

| Name | Type | Description | | ------------------- | ---------- | -------------------------------------------------- | | month | string | 현재 입력된 카드 만료 월입니다. | | year | string | 현재 입력된 카드 만료 연도입니다. | | handleMonthChange | function | 카드 만료 월을 변경하는 함수입니다. | | handleYearChange | function | 카드 만료 연도를 변경하는 함수입니다. | | monthErrorMessage | string | 카드 만료 월 입력 시 발생하는 오류 메시지입니다. | | yearErrorMessage | string | 카드 만료 연도 입력 시 발생하는 오류 메시지입니다. | | isValidMonth | boolean | 입력된 카드 만료 월의 유효성 여부입니다. | | isValidYear | boolean | 입력된 카드 만료 연도의 유효성 여부입니다. |

import { useCardExpirationDate } from '@pakxe/react-card-info-hooks';

export const MyComponent = () => {
  const {
    month,
    year,
    handleMonthChange,
    handleYearChange,
    monthErrorMessage,
    yearErrorMessage,
    isValidMonth,
    isValidYear,
  } = useCardExpirationDate();

  return (
    <>
      <h3>Card Expiration Date</h3>
      <div>
        <label htmlFor='month'>Month:</label>
        <input
          type='text'
          id='month'
          value={month}
          onChange={(e) => handleMonthChange(e.target.value)}
          placeholder='MM'
        />
        <p>{isValidMonth ? 'Valid Month' : 'Invalid Month'}</p>
        <p>{monthErrorMessage}</p>
      </div>
      <div>
        <label htmlFor='year'>Year:</label>
        <input type='text' id='year' value={year} onChange={(e) => handleYearChange(e.target.value)} placeholder='YY' />
        <p>{isValidYear ? 'Valid Year' : 'Invalid Year'}</p>
        <p>{yearErrorMessage}</p>
      </div>
    </>
  );
};

useCardOwnerName 입력

| Name | Type | Default | Description | | -------------- | -------- | ------- | ------------------------------------- | | maxLength | number | 21 | 소유자 이름의 최대 길이를 설정합니다. | | initialName? | string | '' | 카드 소유자의 초기 이름을 설정합니다. |

useCardOwnerName 반환 값

| Name | Type | Description | | ----------------------- | ---------- | -------------------------------------------------------------- | | ownerName | string | 현재 입력된 카드 소유자 이름입니다. | | isValidOwnerName | boolean | 입력된 카드 소유자 이름의 유효성 여부입니다. | | ownerNameErrorMessage | string | 카드 소유자 이름 입력 시 발생하는 오류 메시지입니다. | | handleOwnerNameChange | function | 카드 소유자 이름 변경을 처리하고 유효성을 검사하는 함수입니다. |

import { useCardOwnerName } from '@pakxe/react-card-info-hooks';

export const MyComponent = () => {
  const { ownerName, isValidOwnerName, ownerNameErrorMessage, handleOwnerNameChange } = useCardOwnerName();

  return (
    <>
      <h3>useCardOwnerName</h3>
      <input type='text' value={ownerName} onChange={(e) => handleOwnerNameChange(e.target.value)} />
      <div>
        <p>{isValidOwnerName ? 'true' : 'false'}</p>
        <p>{ownerNameErrorMessage}</p>
      </div>
    </>
  );
};

useCardCVC 입력

| Name | Type | Default | Description | | ------------------- | -------- | ------- | ---------------------------------- | | validLength | number | 3 | CVC 번호의 유효 길이를 설정합니다. | | initialCVCNumber? | string | '' | 초기 CVC 번호를 설정합니다. |

useCardCVC 반환 값

| Name | Type | Description | | ----------------------- | ---------- | ------------------------------------------------------ | | cvcNumber | string | 현재 입력된 CVC 번호입니다. | | isValidCVCNumber | boolean | 입력된 CVC 번호의 유효성 여부입니다. | | cvcNumberErrorMessage | string | CVC 번호 입력 시 발생하는 오류 메시지입니다. | | handleCVCNumberChange | function | CVC 번호 변경을 처리하고 유효성을 검사하는 함수입니다. |

import { useCardCVC } from '@pakxe/react-card-info-hooks';

export const MyComponent = () => {
  const { cvcNumber, isValidCVCNumber, cvcNumberErrorMessage, handleCVCNumberChange } = useCardCVC(4);

  // 이제 카드 CVC 번호는 4자리 숫자여야만 유효합니다.

  return (
    <>
      <h3>useCardCVC</h3>
      <input type='text' value={cvcNumber} onChange={(e) => handleCVCNumberChange(e.target.value)} />;<div>
        <p>{isValidCVCNumber ? 'true' : 'false'}</p>
        <p>{cvcNumberErrorMessage}</p>
      </div>
    </>
  );
};

useCardPassword 입력

| Name | Type | Default | Description | | ------------- | -------- | ------- | --------------------------------------- | | validLength | number | 2 | 유효한 카드 비밀번호 길이를 전달합니다. |

useCardPassword 반환 값

| Name | Type | Description | | ---------------------- | ---------- | ----------------------------------------------------------- | | password | string | 현재 입력된 카드 패스워드입니다. | | isValidPassword | boolean | 입력된 카드 패스워드의 유효성 여부입니다. | | passwordErrorMessage | string | 카드 패스워드 입력 시 발생하는 오류 메시지입니다. | | handlePasswordChange | function | 카드 패스워드 변경을 처리하고 유효성을 검사하는 함수입니다. |

import { useCardPassword } from '@pakxe/react-card-info-hooks';

export const MyComponent = () => {
  const { password, isValidPassword, passwordErrorMessage, handlePasswordChange } = useCardPassword(4);

  // 이제 카드 비밀번호는 4자리 숫자여야만 유효합니다.

  return (
    <>
      <h3>useCardPassword</h3>
      <input type='text' value={password} onChange={(e) => handlePasswordChange(e.target.value)} />
      <div>
        <p>{isValidPassword ? 'true' : 'false'}</p>
        <p>{passwordErrorMessage}</p>
      </div>
      ;
    </>
  );
};