Skip to content

Commit d8db23e

Browse files
mun-kyeongspoyodevelopwmakerjun
authored
[1단계 - 페이먼츠 모듈] �캉골(김문경) 미션 제출합니다. (#94)
* 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 <[email protected]> * feat: Modal 스토리 작성 Co-authored-by: mun-kyeong <[email protected]> * feat: 모달에 id 부여 * feat: 패키지 버전 0.0.15에서 0.0.17로 업데이트 * feat: isNumber util 작성 Co-authored-by: mun-kyeong <[email protected]> * feat: 카드 번호 유효성 검사 훅 추가 * refactor: isNumber 함수를 isNumeric으로 이름 변경 * feat: 카드 번호 유효성 검사 및 네트워크 확인 기능 추가 * feat: 카드 번호 유효성 검사 훅 적용 * refactor: 에러메세지, length 상수 분리 Co-authored-by: mun-kyeong <[email protected]> * refactor: 상수 분리 적용 * fix: forEach를 for of로 하여 early return 적용 * test: validateCardNumber test 코드 작성 * test: isNumeric 유틸 테스트 코드 작성 Co-authored-by: mun-kyeong <[email protected]> * delete: 불필요한 파일 삭제 * refactor: 가변으로 maxLength를 받게 변경 * fix: isNumeric 로직 수정 * feat: cvcValidation 작성 * feat: useCVCNumber 작성 * fix: 에러가 없을때 기본 리턴값 반환 하게 수정 * test: validateCVCNumber 테스트 작성 * fix: validation 이슈 수정 Co-authored-by: mun-kyeong <[email protected]> * feat: npm에 퍼블리시할 훅 설정 * feat: 커스텀훅 build 설정 추가 * feat: index 파일 작성 * feat: usePasswordNumber 커스텀훅 제작 Co-authored-by: mun-kyeong <[email protected]> * 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 <[email protected]> * test: RTL을 활용한 테스트 코드 작성 * docs: react hooks module doc 작성 * fix: npm 모듈을 사용하게 수정 * docs: npm 모듈 작성 * docs: PR 템플릿 파일 추가 * feat : npm 모듈 이름 변경 및 사용 * refactor : 스토리북 test 수정 * chore : 깃헙 액션 테스트 * fix : npm 모듈 경로 수정 * refactor : 커스텀 훅 배포완료 * fix : 스토리북 링크 수정 * fix : npm Readme 및 버전 업데이트 추가 * refactor : 모달 컴포넌트에 id를 props로 전달받기 * refactor : renderHeader 함수 추가 및 적용 * refactor : cardNumber 4개의 배열로 입력 받도록 수정 * refactor : expiryDate 2개의 배열로 입력 받도록 수정 * refactor : 콘솔 제거 * feat : 중첩 모달창 스토리북 추가 * feat : npm 모듈 버전 패치 --------- Co-authored-by: spoyodevelop <[email protected]> Co-authored-by: mun-kyeong <[email protected]> Co-authored-by: wmakerjun <[email protected]>
1 parent 74c09a4 commit d8db23e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+5152
-1091
lines changed

‎.github/workflows/chromatic.yml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Workflow name
2+
name: "Chromatic Deployment"
3+
4+
# Event for the workflow
5+
on: push
6+
7+
# List of jobs
8+
jobs:
9+
chromatic:
10+
name: "Run Chromatic"
11+
runs-on: ubuntu-latest
12+
# Job steps
13+
steps:
14+
- uses: actions/checkout@v4
15+
with:
16+
fetch-depth: 0
17+
- name: Install dependencies
18+
run: |
19+
cd components
20+
yarn install
21+
- uses: chromaui/action@latest
22+
with:
23+
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
24+
token: ${{ secrets.GITHUB_TOKEN }}
25+
workingDir: ./components

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,6 @@ dist-ssr
2222
*.njsproj
2323
*.sln
2424
*.sw?
25+
26+
tsconfig.node.tsbuildinfo
27+
tsconfig.roll.tsbuildinfo

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
# react-modules
1+
# react-modules.

‎components/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.rollup.cache
2+
storybook-static

‎components/README.md‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,56 @@
1-
# Button Module
1+
# Modal 컴포넌트
2+
3+
React 애플리케이션을 위한 유연하고 커스터마이징이 가능한 모달 컴포넌트입니다.
4+
5+
## 설치 방법
6+
7+
```bash
8+
npm install compoents-modal-test-kangoll
9+
10+
```
11+
12+
## 사용 방법
13+
14+
```tsx
15+
import { Modal } from "compoents-modal-test-kangoll";
16+
17+
function App() {
18+
const [isOpen, setIsOpen] = useState(false);
19+
20+
return (
21+
<>
22+
<button onClick={() => setIsOpen(true)}>모달 열기</button>
23+
<Modal
24+
position="center"
25+
title="모달 제목"
26+
isOpen={isOpen}
27+
onClose={() => setIsOpen(false)}
28+
>
29+
<p>모달 내용</p>
30+
</Modal>
31+
</>
32+
);
33+
}
34+
```
35+
36+
## 스토리북
37+
38+
https://step1--6804bd5db0df970ca29a898f.chromatic.com
39+
40+
## Props
41+
42+
| Prop | Type | 필수 여부 | 기본값 | 설명 |
43+
| -------- | --------- | --------- | -------- | ------------------------------------- |
44+
| position | string | 아니오 | 'center' | 모달 위치 ('center', 'top', 'bottom') |
45+
| title | string | 예 | - | 모달 제목 |
46+
| isOpen | boolean | 예 | - | 모달 표시 여부 제어 |
47+
| onClose | function | 예 | - | 모달이 닫힐 때 호출되는 콜백 함수 |
48+
| children | ReactNode | 예 | - | 모달 내용 |
49+
50+
## 기능
51+
52+
- 중앙, 상단, 하단 위치 옵션
53+
- 커스터마이징 가능한 제목과 내용
54+
- 부드러운 열기/닫기 애니메이션
55+
- 외부 클릭 시 닫힘
56+
- 키보드 지원 (ESC 키로 닫기)

0 commit comments

Comments
 (0)