🚀 Getting Started

import { PaymentModal, Payment } from "@dongminahn/react-payments";

function App() {
  const { isModalOpen, onClose, onOpen } = PaymentModal.useModal();
  return (
    <>
      <button onClick={onOpen}>결제하기</button>
      {isModalOpen && (
        <PaymentModal.Modal isOpen={isModalOpen} onClose={onClose}>
          <Payment
            price={2000}
            onSuccess={({ massage }) => {
              alert(massage);
              onClose();
            }}
          />
        </PaymentModal.Modal>
      )}
    </>
  );
}

📦 Installation

yarn add @ahndongmin/react-payment

npm install @ahndongmin/react-payment

📚 Dependencies

• React
• Typescript
• Emotion
• Storybook

Component

Payment

| props | type | description | | --------- | -------- | --------------------- | | price | number | 결제 금액 | | onSuccess | function | 결제 성공시 콜백 함수 | | onFail | function | 결제 실패시 콜백 함수 |

PaymentModal.Modal

| props | type | description | | ------- | -------- | ------------------- | | isOpen | boolean | 모달 오픈 여부 | | onClose | function | 모달 닫기 콜백 함수 |

PaymentModal.useModal

| return | type | description | | ----------- | -------- | ------------------- | | isModalOpen | boolean | 모달 오픈 여부 | | onClose | function | 모달 닫기 콜백 함수 | | onOpen | function | 모달 오픈 콜백 함수 |

• 초기 설계

| 컴포넌트 명 | props | | ---------------- | -------------------------------------------------------------- | | Card | cardName, cardNumber, userName, expirationMonth,expirationYear | | Header | title, onLeftIconClick, LeftIcon | | Input | placeholder, onChange , value , id , width, textAlign | | CardCategoryITem | name, color | | Label | textLength, limit , children , title | | BottomModal | 바텀 모달 컴포넌트 | | TextButton | text , onClick | | CardAddButton | onClick | | LineInput | value , onChange |