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

* docs : 기능 구현 목록 작성 Co-Authored-By: 00kang <[email protected]> * docs: 기능 구현 목록에 구현 목록 추가 Co-Authored-By: 00kang <[email protected]> * chore: prettier 설정 Co-Authored-By: 00kang <[email protected]> * chore: emotion 라이브버리 peerDependency 설정 Co-Authored-By: 00kang <[email protected]> * feat: 사각형 버튼 컴포넌트 구현 Co-Authored-By: 00kang <[email protected]> * feat: 모달 닫기 버튼 컴포넌트 구현 x 버튼 이미지 추가 Co-Authored-By: 00kang <[email protected]> * feat: 모달 컴포넌트 구현 Co-Authored-By: 00kang <[email protected]> * feat: useModal 커스텀 훅 구현 Co-Authored-By: 00kang <[email protected]> * feat: useModal 사용 Co-Authored-By: 00kang <[email protected]> * docs: 구현 완료 사항 체크 Co-Authored-By: 00kang <[email protected]> * style: Button,Modal 컴포넌트 css 수정 Co-Authored-By: 00kang <[email protected]> * feat: Modal 컴포넌트 스토리북 구현 Co-Authored-By: 00kang <[email protected]> * chore: 빌드 및 배포 세팅 Co-Authored-By: 00kang <[email protected]> * chore: 라이브러리명 변경 및 리드미 작성 Co-Authored-By: 00kang <[email protected]> * Refactor: Modal 라이브러리 재설치 Co-Authored-By: 00kang <[email protected]> * docs: 구현 목록 완료 사항 체크 Co-Authored-By: 00kang <[email protected]> * feat: 카드 소유자 이름 유효성 검사 커스텀 훅 구현 Co-Authored-By: 00kang <[email protected]> * feat: 카드 발급사 유효성 검사 커스텀 훅 구현 Co-Authored-By: 00kang <[email protected]> * feat: 카드 번호 유효성 검사 커스텀 훅 구현 Co-Authored-By: 00kang <[email protected]> * feat: 카드 CVC 유효성 검사 커스텀 훅 구현 Co-Authored-By: 00kang <[email protected]> * feat: 카드 유효기간 유효성 검사 커스텀 훅 구현 Co-Authored-By: 00kang <[email protected]> * feat: 카드 비밀번호 유효성 검사 커스텀 훅 구현 Co-Authored-By: 00kang <[email protected]> * feat: 유효성 커스텀 훅 에러 메시지 상수화 Co-Authored-By: 00kang <[email protected]> * feat: 유효성 검사 커스텀훅 사용 Co-Authored-By: 00kang <[email protected]> * feat: 구현 목록 완료 사항 체크 Co-Authored-By: 00kang <[email protected]> * docs: 라이브러리명 변경 및 리드미 작성 Co-Authored-By: 00kang <[email protected]> * feat: payments hook 라이브러리 설치 및 사용 Co-Authored-By: 00kang <[email protected]> * chore: 스토리북 배포 Co-Authored-By: 00kang <[email protected]> * docs : README.md 업데이트 Co-Authored-By: river <[email protected]> * docs: Modal 라이브러리 리드미 수정 Co-Authored-By: 00kang <[email protected]> * style : 줄바꿈 수정, switch case로 묶기 * refactor: closeButton의 children 타입 더 정확하게 명시 * refactor : 모달의 뒷배경 이름 ModalDim으로 변경 * refactor : 불필요한 함수 래퍼 삭제 * refactor : React.FC를 사용하지 않고 함수형 컴포넌트로 수정 * refactor : 에러 메시지 NO_INPUT 문구 수정 * refactor : 주석 삭제 및 카드이름 문자열배열로 수정 * refactor : prop, return 문서 순서 수정 * refacotr : useModal 훅의 리턴값에서 모달컴포넌트 제거 * refactor : choco-modal-component로 재배포 및 App.tsx에서 사용 * refactor : choco-payments-validation-hooks로 재배포 및 App.tsx에서 사용 * refactor : 모달 children 컨텐츠의 스타일 적용 * fix : 카드사 선택 버튼 경우의 수에 맞게 수정 * refactor : 수정된 모달 컴포넌트에 맞게 스토리북 수정 * fix : useCardHolder 커스텀 훅 유효성 검사 수정 * feat : useCardHolder 커스텀 훅 테스트 코드 구현 * feat : useCardIssuer 커스텀 훅 테스트 코드 구현 * feat : useCardNumber 커스텀 훅 테스트 코드 구현 * feat : useCVC 커스텀 훅 테스트 코드 구현 * feat : useExpiryDate 커스텀 훅 테스트 코드 구현 * feat : usePassword 커스텀 훅 테스트 코드 구현 * feat : choco-payments-validation-hooks 라이브러리 버전 업데이트 * docs : 라이브러리 README.md 수정 * feat : choco-payments-validation-hooks 라이브러리 업데이트 * feat : choco-modal-component 라이브러리 업데이트 --------- Co-authored-by: river <[email protected]> Co-authored-by: river <[email protected]>
woowacourse · May 7, 2024 · a20f3a5 · a20f3a5
1 parent 9d84501
commit a20f3a5
Show file tree

Hide file tree

Showing 38 changed files with 1,641 additions and 66 deletions.
diff --git a/README.md b/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
+
+  - [ ] 페이먼트 유효성 검사 커스텀 훅의 동작을 검증
+  - [ ] 다양한 입력 값에 대한 커스텀 훅의 결과
+    - [ ] 유효성 통과하는 경우
+    - [ ] 유효성 통과하지 않는 경우
diff --git a/components/.prettierrc b/components/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": false,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "auto"
+}
diff --git a/components/README.md b/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로 모달을 렌더링하는 컴포넌트입니다.          |
diff --git a/components/custom.d.ts b/components/custom.d.ts
@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const value: string;
+  export default value;
+}