[1단계 - 페이먼츠 모듈] 초코(강다빈) 미션 제출합니다.

README.md

@@ -1 +1,52 @@
 # react-modules
+
+### Modal component
+
+- [x] 모달 props
+  - [x] 모달 위치
+  - [x] 모달 타이틀
+  - [x] 모달 내용
+  - [x] 모달 닫는 방식
+    - [x] prop 이름 : closeButtonPosition : 'top' | 'bottom'
+- [x] 모달 event
+  - [x] 열기
+  - [x] 닫기 - deem 눌러도 닫혀야된다.
+  - [ ] 확인 - optional
+- [x] npm으로 배포하기
+- [x] 설치 후 import해서 사용하기
+
+### Payment custom hook
+
+- 유효성 검사 결과와 에러 정보를 반환한다.
+
+- [x] useCardNumber
+  - [x] 숫자여야한다.
+  - [x] 16자리여야한다.
+- [x] useCardHolder
+  - [x] 영어 대문자+공백만 입력가능하다.
+  - [x] 공백 포함 15자까지만 가능하다.
+- [x] useExpiryDate
+  - [x] 월은 1~12만 입력 가능하다. (월도 두자리로 입력해달라는 description 추가 )
+  - [x] 년도 2자리 숫자만 입력 가능하다.
+  - [x] 년,월 조합을 봤을 때 오늘보다 과거이면 에러를 낸다.
+- [x] useCVC
+  - [x] 3자리 숫자만 입력 가능하다.
+- [x] useCardType
+  - [x] 선택한 값이 있는지 검증한다.
+- [x] usePassword
+  - [x] 2자리 숫자만 입력 가능하다.
+- [x] npm으로 배포하기
+- [x] 설치 후 import해서 사용하기
+
+  ### Storybook
+
+  - [x] 모달 위치에 대한 테스트 시나리오
+  - [x] 모달 내용에 대한 테스트 시나리오
+  - [x] 모달 이벤트 핸들러에 대한 테스트 시나리오
+
+  ### RTL
+
+  - [ ] 페이먼트 유효성 검사 커스텀 훅의 동작을 검증
+  - [ ] 다양한 입력 값에 대한 커스텀 훅의 결과
+    - [ ] 유효성 통과하는 경우
+    - [ ] 유효성 통과하지 않는 경우

components/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": false,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "auto"
+}

components/README.md

@@ -1 +1,63 @@
-# Button Module
+# choco-modal-component
+
+## Install
+
+이 라이브러리를 사용하기 위해서는 다음 패키지를 설치해야 합니다:
+
+```bash
+npm install choco-modal-component
+```
+
+## Usage
+
+React 컴포넌트에서 모달 라이브러리를 사용하려면 다음 단계를 따르세요
+
+```jsx
+import { useModal, Modal } from "choco-modal-component";
+
+function App() {
+  const { isOpen, openModal, closeModal } = useModal();
+
+  return (
+    <>
+      <button onClick={openModal}>Open Modal</button>
+
+      <Modal
+        modalPosition="bottom"
+        title="모달의 제목"
+        closeButtonPosition="top"
+        isOpen={isOpen}
+        onClose={closeModal}
+      >
+        {/* 모달 내용 */}
+      </Modal>
+    </>
+  );
+}
+
+export default App;
+```
+
+## API
+
+### ModalComponent
+
+`ModalComponent`는 다음 props를 받습니다:
+
+| props                        | description                                                     |
+| ---------------------------- | --------------------------------------------------------------- |
+| `modalPosition` (필수)       | 모달의 위치입니다. 가능한 값은 `"center"`와 `"bottom"`입니다.   |
+| `title` (필수)               | 모달의 제목입니다.                                              |
+| `children` (필수)            | 모달의 내용입니다.                                              |
+| `closeButtonPosition` (필수) | 닫기 버튼의 위치입니다. 가능한 값은 `"top"`과 `"bottom"`입니다. |
+
+### useModal
+
+`useModal` 훅은 다음 속성을 가진 객체를 반환합니다:
+
+| props            | description                                               |
+| ---------------- | --------------------------------------------------------- |
+| `isOpen`         | 모달이 현재 열려 있는지 여부를 나타내는 boolean 값입니다. |
+| `openModal`      | 모달을 열기 위한 함수입니다.                              |
+| `closeModal`     | 모달을 닫기 위한 함수입니다.                              |
+| `ModalComponent` | 지정된 props로 모달을 렌더링하는 컴포넌트입니다.          |

components/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const value: string;
+  export default value;
+}