[1단계 - 페이먼츠 모듈] 마빈(김재영) 미션 제출합니다. (#91)

* feat: 모달창 컴포넌트 구현

* feat: 모달 스타일 지정

* fix: Bottom position css 수정

* chore : 에셋 추가

* feat: 모달창 닫기 버튼 구현

* feat: 모달창 overlay 기능 구현

* feat: 키보드 이벤트로 모달 닫기 구현

* refactor: 모달 스타일 및 구조 개선

* feat: ModalProps를 외부에서 사용할 수 있도록 export 추가

* feat: tsconfig.build.json 파일 설정

* feat: Vite 설정 개선 및 플러그인 추가

* feat: package.json 및 package-lock.json 업데이트 및 의존성 추가

* feat: .gitignore 파일에 tsconfig 빌드 정보 추가 및 components/.gitignore 생성

* feat: 모달 컴포넌트 추가 및 상태 관리 구현, 타입 선언 파일 생성

* refactor: closeButton hover 추가

Co-authored-by: mun-kyeong <mun-kyeong@users.noreply.github.com>

* feat: Modal 스토리 작성

Co-authored-by: mun-kyeong <mun-kyeong@users.noreply.github.com>

* feat: 모달에 id 부여

* feat: 패키지 버전 0.0.15에서 0.0.17로 업데이트

* feat: isNumber util 작성
Co-authored-by: mun-kyeong <mun-kyeong@users.noreply.github.com>

* feat: 카드 번호 유효성 검사 훅 추가

* refactor: isNumber 함수를 isNumeric으로 이름 변경

* feat: 카드 번호 유효성 검사 및 네트워크 확인 기능 추가

* feat: 카드 번호 유효성 검사 훅 적용

* refactor: 에러메세지, length 상수 분리

Co-authored-by: mun-kyeong <mun-kyeong@users.noreply.github.com>

* refactor: 상수 분리 적용

* fix: forEach를 for of로 하여 early return 적용

* test: validateCardNumber test 코드 작성

* test: isNumeric 유틸 테스트 코드 작성
Co-authored-by: mun-kyeong <mun-kyeong@users.noreply.github.com>

* delete: 불필요한 파일 삭제

* refactor: 가변으로 maxLength를 받게 변경

* fix: isNumeric 로직 수정

* feat: cvcValidation 작성

* feat: useCVCNumber 작성

* fix: 에러가 없을때 기본 리턴값 반환 하게 수정

* test: validateCVCNumber 테스트 작성

* fix: validation 이슈 수정
Co-authored-by: mun-kyeong <mun-kyeong@users.noreply.github.com>

* feat: npm에 퍼블리시할 훅 설정

* feat: 커스텀훅 build 설정 추가

* feat: index 파일 작성

* feat: usePasswordNumber 커스텀훅 제작

Co-authored-by: mun-kyeong <mun-kyeong@users.noreply.github.com>

* feat: useExpiryDateNumber 커스텀 훅 제작

* feat: password 와, Expirydate 상수 추가

* feat: 커스텀 훅 완성

* feat: 커스텀 훅 예시 작성

* feat: 모달 컴포넌트에서 조건부 렌더링을 포탈로 변경

* feat: useCardValidation 함수에 반환 타입 추가

* feat: package.json 및 package-lock.json 버전 업데이트 및 peerDependencies 수정

* chore: 깃험 워크플로우

* feat: Chromatic 배포를 위한 GitHub 워크플로우 추가

* feat: README.md에 텟스트 추가

* fix: workflow 위치 변경

* fix: working directory 변경

* fix: update working directory path in Chromatic workflow

* fix: streamline Chromatic action configuration by moving working directory specification

* fix: update modal story to use document.body for querying elements

* fix: validator에 트림 로직 추가
Co-authored-by: mun-kyeong <mun-kyeong@users.noreply.github.com>

* test: RTL을 활용한 테스트 코드 작성

* docs: react hooks module doc 작성

* fix: npm 모듈을 사용하게 수정

* docs: npm 모듈 작성

* feat: 배포용으로 모든 package.json 갱신

* test: date-utils와 isNumeric의 테스트 코드 작성

* feat: date-util구현

* feat:isNumeric 구현

* feat: validateField 설정

* feat: 에러 메세지와 상황코드 설정

* feat: createValidator 함수 구현

* feat: 유효성 검사기 테스트 추가

* feat: 유효성 검사 규칙 추가

* feat: 필드 유효성 검사 규칙 및 검증기 구현

* feat: 유효성 검사 훅에서 오류 메시지 및 상태 처리 개선

* feat: 카드 네트워크 훅 구현 및 카드 번호에 따른 네트워크 반환 기능 추가

* docs: 유효성 검사 라이브러리 문서 추가

* chore: 대대적 리펙토링으로 인한 안쓰는 코드 제거

* refactor: 카드 네트워크 훅의 구조 개선 및 카드 번호 처리 로직 최적화

* refactor: 카드 입력 훅에서 상태 업데이트 로직을 최적화하여 공백 제거 기능 추가

* chore: update package.json with new description, author, and keywords for card validation hook

* docs: remove outdated test section from validator README

* chore: add .npmignore to exclude test files from npm package

* chore: update Vite configuration to handle external dependencies for React and test files

* refactor: useCallback을 사용하여 카드 입력 및 유효성 검사 훅의 상태 업데이트 로직 최적화

* test: 불필요한 만료 날짜 유효성 검사 테스트 제거

* refactor: 카드 입력 핸들러를 useCardValidation 훅의 메서드로 변경

* chore: 패키지 이름 및 버전 업데이트

* fix: 수정된 비밀번호 길이 검증 로직 및 관련 테스트 추가

* chore: update package version to 0.0.3 in package.json and package-lock.json

* chore: add package-lock.json for dependency management

* fix: 비밀번호 길이 검증 메시지 수정

* refactor: import 일관성을 위해 export 삭제

* test: isValidLuhn 함수에 대한 단위 테스트 추가

* feat: isValidLuhn 함수 추가하여 카드 번호 유효성 검사 기능 구현

* feat: 카드 번호 유효성 검사를 위한 useStrictCardNumber 훅 및 검증 규칙 추가

* chore:Bump version from 0.0.3 to 0.0.7 in package.json

* test: add unit tests for useCardNumber and useExpiryDateNumber hooks to validate card number and expiry date inputs

* test: add unit tests for useStrictCardNumber hook to validate card number input and error handling

* fix: strictCardValue를 따로 추고

* chore: 파일 명 변경

* test: update error message in useCardNumber tests to reflect invalid format

* chore: add @testing-library/user-event as a dev dependency and create VSCode settings file

* chore: update Jest configuration and add TypeScript test configuration

* test: add unit tests for useCardNetwork hook and getCardNetwork function to validate card network detection

* fix: update getCardNetwork function to include new Mastercard prefix range and add comments for clarity

* chore: add setupTests file to configure Jest with @testing-library/jest-dom

* test: add unit test for expired expiry date handling in useExpiryDateNumber hook

* test: refactor and enhance unit tests for useCardNetwork hook and getCardNetwork function

* chore: bump version to 0.0.8 in package.json and package-lock.json

* docs: update README.md to enhance structure and add usage examples for validators

* test: update test description for useStrictCardNumber hook to Korean

* chore: bump version to 0.0.9 in package.json and package-lock.json

* refactor: replace Modal component with a new structure using context and modular components

* refactor: update Modal component import and enhance modal structure in App component

* feat: position 기본값 추가

* chore: package version 업데이트 0.0.1 -> 0.0.2

* docs: 모달 컴포넌트 사용 예제 수정 및 기본값 변경

* chore: 패키지 버전 업데이트 0.0.2 -> 0.0.3

* refactor: Modal 컴포넌트의 props 타입 정의 및 전파 개선

* chore: 패키지 버전 업데이트 0.0.3 -> 0.0.4

---------

Co-authored-by: mun-kyeong <mun-kyeong@users.noreply.github.com>

Author: spoyodevelop

.github/workflows/chromatic.yml

@@ -0,0 +1,25 @@
+# Workflow name
+name: "Chromatic Deployment"
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic:
+    name: "Run Chromatic"
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install dependencies
+        run: |
+          cd components
+          yarn install
+      - uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          workingDir: ./components

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+tsconfig.node.tsbuildinfo
+tsconfig.roll.tsbuildinfo