Skip to content

Commit 6a8be27

Browse files
jeongyoujeongyou
authored
[2단계 - 페이먼츠 모듈] 기린(정유정) 미션 제출합니다. (#146)
* chore: 0.0.2 버전으로 패키지 버전 업데이트 * docs: 페이먼츠 모듈 2단계 기능명세서 작성 * docs: step1 기능명세서 * feat: 구현된 Modal을 기반으로 AlertModal 컴포넌트 추가 - 확인 버튼만 제공하는 알림 모달 컴포넌트 - 필수 content, 선택적 title을 prop으로 받음 - 기본 구조와 스타일은 Modal 컴포넌트를 재사용 - 버튼은 우측 정렬로 고정 (buttonAlign = "right") * style: 스타일 유연성 및 버튼 정렬 대응을 위한 스타일 개선 - ModalContainerStyle에서 align-items 제거 (버튼 위치 강제 정렬 방지) - ModalFooterStyle에 buttonAlign prop 대응 (left/center/right 정렬 지원) - ConfirmButtonStyle 추가로 공통 버튼 스타일 분리 * feat: Modal.Footer에서 버튼 정렬을 위한 buttonAlign prop 추가 - Modal.Footer에 buttonAlign("left" | "center" | "right") prop 추가 - ModalFooterStyle 함수에서 justify-content 동적으로 반영 - ModalFooterProps 타입 생성 및 적용 * feat: 모달 전용 기본 버튼 컴포넌트 ModalButton 추가 - 브라우저 기본 버튼 스타일 초기화 - 스타일 커스터마이징을 위한 css prop 허용 - 모든 HTMLButtonAttributes 지원으로 유연한 확장 가능 * feat: 확인 버튼 컴포넌트 ConfirmButton 추가 - ModalButton을 기반으로 스타일과 텍스트를 지정한 역할 버튼 - 기본 텍스트는 "확인", children으로 덮어쓰기 가능 - onClick, className 등 ModalButton의 모든 prop 확장 지원 * style: ConfirmButton 스타일을 button.styles.ts로 분리 - 스타일 재사용성과 유지보수를 위해 Emotion 스타일 정의를 별도 파일로 분리 - ConfirmButton 컴포넌트는 ConfirmButtonStyle을 import하여 사용 * refactor: AlertModal에서 ConfirmButton 컴포넌트 사용하도록 변경 - 기존 직접 스타일링된 button을 ConfirmButton 컴포넌트로 대체 * feat: AlertModal에 onConfirm 핸들러 연결 및 ConfirmButton 동작 확장 - ConfirmButton 클릭 시 onConfirm → onHide 순으로 실행되도록 동작 정의 - AlertModal에서 onConfirm prop을 받아 ConfirmButton에 전달 - 버튼 클릭 후 사용자 정의 동작 실행 및 모달 자동 닫힘 지원 * chore: alertModal 폴더로 이동 * test: AlertModal 스토리북 추가 * chore: 스토리북 인터랙션 테스트 기능을 위한 패키지로 설치 * feat: CancelButton 컴포넌트 생성 - 취소 동작을 위한 기본 버튼 컴포넌트 추가 - 기본 텍스트는 "취소", 필요 시 children으로 커스터마이징 가능 - 버튼 스타일은 흰 배경 + 회색 테두리로 지정 * feat: ConfirmModal 컴포넌트 생성 - 사용자에게 확인/취소 선택지를 제공하는 모달 컴포넌트 - CancelButton 클릭 시 onHide, ConfirmButton 클릭 시 onConfirm 후 onHide 처리 - title, content prop으로 유동적인 내용 전달 가능 * refactor: Modal.Footer의 기본 버튼 정렬값을 right → left로 변경 - 별도 설정 없이 사용할 경우 왼쪽 정렬을 기본으로 적용 * style: 모달 기본 레이아웃 및 스타일 개선 - ModalWrapper min-width를 300px → 320px으로 확대 - ModalContainer에 min/max-width 추가 (320px ~ 600px) - ModalFooter에 버튼 간 간격(gap: 10px) 추가 * test: ConfirmModal 스토리 args 기반 제어 방식으로 개선 - useState 제거 후 Storybook args를 직접 활용한 렌더 구조로 변경 - Controls의 show 상태와 Canvas UI 동기화 문제 해결 - 버튼 클릭 시 updateArgs로 show 상태 제어 * test: AlertModal 스토리 args 기반 제어 방식으로 개선 - useState 제거 후 Storybook args를 직접 활용한 렌더 구조로 변경 - Controls의 show 상태와 Canvas UI 동기화 문제 해결 - 버튼 클릭 시 updateArgs로 show 상태 제어 * chore: ConfirmModal 폴더로 파일 이동 * refactor: center 위치일 때만 max-width 적용되도록 Modal 스타일 개선 - ModalContainerStyle 내에서 position이 'center'인 경우에만 max-width: 600px 적용 - top/bottom 위치에서는 전체 너비를 활용하도록 유연성 확보 * test: 스토리에 모달 중앙 정렬 위한 wrapper 스타일 추가 * test: PromptModal 스토리북 추가 및 입력 시나리오 테스트 작성 * feat: 사용자 입력을 받을 수 있는 PromptModal 컴포넌트 추가 - 제목, 본문, 입력 필드, 확인/취소 버튼 포함 - 기본 입력 스타일 적용 * style: Modal.Body에 flex-direction: column 및 gap 적용 - 모달 본문 내 요소 간 간격을 주기 위해 flex 레이아웃으로 변경 - 기본 gap 18px 설정 * style: 버튼 텍스트가 넘칠 경우를 대비해 width → padding 기반으로 스타일 수정 - Confirm 버튼이 고정 width로 인해 텍스트가 길어질 경우 잘림 현상 발생 - padding-left/right를 사용해 텍스트 길이에 유연하게 대응 - Cancel 버튼 스타일도 동일한 방식으로 정의해 일관성 확보 * refactor: CancelButton 컴포넌트의 스타일을 분리하여 styles 파일로 이동 - 컴포넌트 내 정의된 cancelStyle을 CancelButtonStyle로 분리 * feat: ConfirmButton에 disabled 속성 추가로 접근성 및 기본 동작 제어 강화 - <button disabled={disabled}> 속성을 통해 포커스, hover, tab 이동 등 기본 동작 일관성 확보 - ModalButton에 disabled props 전달하여 버튼 상태 관리 개선 - PromptModal에서 입력값 없을 경우 확인 버튼 비활성화 처리 * feat: PromptModal에 입력 상태 관리 및 버튼 활성화 제어 기능 추가 - value와 onChange props를 받아 외부에서 입력 상태 제어 가능하도록 수정 - 입력값이 비어 있을 경우 ConfirmButton 비활성화 처리 * test: PromptModal의 입력값 제어에 맞춰 스토리북 코드 수정 - value와 onChange prop 추가로 인한 스토리북 예제 수정 - 입력값이 없을 때 확인 버튼 비활성화 흐름 반영 * docs: 기능명세서에서 완료된 기능 체크 * feat: Modal 컴포넌트에 size prop 추가하여 max-width 제어 - size: "small" | "medium" | "large" 값을 받아 모달 최대 너비 조절 - 내부 SIZE_MAP으로 size에 따라 320, 480, 600px 지정 - center 위치일 때만 max-width 적용하여 위치와 일관성 유지 * style: ModalContainerStyle에 size prop 추가하여 max-width 제어 - size: "small" | "medium" | "large" 값을 받아 모달 최대 너비 조절 - 내부 SIZE_MAP으로 size에 따라 320, 480, 600px 지정 - center 위치일 때만 max-width 적용하여 위치와 일관성 유지 * docs: 모달 크기 옵션 추가 기능 구현 완료 * chore: useKeyEscClose훅 hooks 폴더로 이동 * feat: 모달에 포커스트랩 기능 추가 - 모달 내부에서 Tab 키로 포커스가 순환되도록 focus trap 기능 구현 - useFocusTrap 훅을 사용해 키보드 내비게이션 제어 - 버튼이 동적으로 활성화될 때도 포커스 대상에 포함되도록 개선 - 모달 외부로 포커스가 빠져나가지 않도록 보장 * test: 카드번호 유효성 검사 훅 테스트 코드 추가 - 카드 브랜드별 정확한 길이 입력 시 noError 상태 검증 - AMEX, Diners, UnionPay 등 카드사별 포맷 테스트 추가 - 잘못된 입력 시 에러 메시지 출력 테스트 포함 - 식별 불가능한 카드 번호에 대한 기본 포맷 처리 확인 * chore: useKeyEscClose 훅 hooks 폴더로 이동 * feat: 카드 번호 식별 유틸 함수 추가 - 카드 번호 앞자리로 카드 브랜드(visa, amex, diners 등) 식별 - 브랜드별 최대 길이(maxLength) 반환 - 유효하지 않은 경우 default 값 반환 * feat: 카드 번호 포맷팅 유틸 함수 추가 - 카드 번호를 카드사별 format 배열([4, 4, 4, 4] 등)에 따라 포맷팅 - 사용자 입력값을 각 블록 길이 기준으로 공백 삽입 * feat: 카드 브랜드 상수 및 포맷 정의 추가 - 카드사별 이름, 포맷 구조, 전체 길이 정보 포함 - AMEX, Diners, UnionPay, Visa, Mastercard 등 주요 카드사 대응 - 카드 번호 식별 및 포맷팅 로직에서 참조할 수 있도록 상수화 * feat: 카드번호 훅 타입 정의 및 에러 메시지 타입 보완 * feat: useCardNumberValidation 훅 리팩토링 및 카드사 식별/포맷팅 로직 추가 - 입력값 기반 카드사 식별 (Visa, Amex, Diners, UnionPay 등) - 카드사별 최대 길이 및 포맷 기준 적용 - 숫자 외 문자 제거 및 자동 포맷팅 처리 - formattedValue, cardBrand, format 등 추가 리턴 * chore: useKeyEscClose 훅 hooks 폴더로 이동 * chore: 코드에 불필요한 띄어쓰기 제거 * chore: 불필요한 import 삭제 * docs: 훅 배포용 리드미 업데이트 * docs: 모달 배포용 리드미 업데이트 * feat: 모달 컴포넌트 export 추가 (AlertModal, ConfirmModal, PromptModal) * feat: 기본 index에 AlertModal, ConfirmModal, PromptModal export 추가 * chore: 훅 배포 버전 0.0.3으로 패치 * chore: 훅 배포 버전 0.0.4으로 패치 * chore: 모달 배포 버전 0.0.5로 패치 * docs: 구현 완료 기능 체크 * style: gap을 매개변수로 받지 않고 16px 고정 * refactor: props로 gap을 받지 않도록 수정 * refactor: css prop에 any 제거하고 SerializedStyles 타입 명시 * refactor: 의존성 배열에서 containerRef 제거 * refactor: early return 적용 * refactor: 확인 버튼 텍스트 props로 입력 받을 수 있도록 수정 * refactor: 확인 버튼 텍스트 props로 입력 받을 수 있도록 수정 * fix: title이 0일 때 렌더링되지 않는 문제 수정 * refactor: 모달 타입 분리 * test: props에서 모달 삭제 * refactor: 불필요한 함수형 스타일, export 제거 * chore: 주석 제거 * refactor: useCardNumberValidation → useCardNumber 네이밍 변경 * refactor: useCvcNumberValidation → useCvcNumber 네이밍 변경 * refactor: useExpirationDateValidation → useExpirationDate 네이밍 변경 * refactor: usePasswordValidation → usePassword 네이밍 변경 * refactor: 타입 이름에서 validation 제거 * refactor: 바뀐 네이밍에 따른 경로 수정 * chore: CarNumberValidationHookReturnType -> CardNumberValidationHookReturnType 으로 오타 수정 * refactor: identifyCardNumber에 하드코딩된 조건을 CARD_BRANDS 기반으로 대체 * refactor: background prop을 hasBackdrop으로 변경 * refactor: background prop을 hasBackdrop으로 변경 * refactor:: baseButtonStyle 컴포넌트에서 분리 * refactor: 불필요한 타입 삭제 * refactor: ModalButtonProps 추가 * refactor: Modal 컴파운드 컴포넌트로 사용할 수 있게 type export * feat: Modal 컴파운드 컴포넌트에 Button/ConfirmButton/CancelButton 추가 * feat: 모달에 접근성 향상을 위한 aria 속성 추가 * refactor: 정의된 타입을 재사용하도록 수정
1 parent 4dbc0ba commit 6a8be27

Some content is hidden

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

43 files changed

+1888
-409
lines changed

‎README.md‎

Lines changed: 28 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,39 @@
11
# react-modules
22

3-
## 🚀 페이먼츠 모듈 1단계 - Module
4-
5-
이번 미션은 재사용 가능한 모듈화된 컴포넌트와 커스텀 훅을 개발하고, npm에 배포하는 과정을 경험하는 것을 목표로 합니다. 모듈화된 컴포넌트와 커스텀 훅은 다양한 프로젝트에서 유연하게 사용할 수 있어야 합니다. 또한 Storybook과 React Testing Library(RTL)을 활용하여 컴포넌트의 문서화와 테스트 시나리오 작성 방법을 익힐 수 있습니다.
3+
## 🚀 페이먼츠 모듈 2단계 - Refactoring
64

75
## 🔑 키워드
86

9-
Module
7+
Refactoring
108

119
## 📍 학습 목표
1210

13-
- 재사용 가능한 모듈화된 컴포넌트(모달, 커스텀 훅)를 개발하고 npm에 배포할 수 있다.
14-
- Storybook과 RTL을 활용한 컴포넌트 문서화 및 테스트 시나리오를 작성할 수 있다.
11+
✔️ 모듈화된 컴포넌트의 재사용성 및 확장성 경험
12+
✔️ 실제 프로젝트에서의 컴포넌트 통합 및 활용
13+
✔️ 요구사항 변경에 따른 컴포넌트 리팩터링 및 개선
1514

1615
## 📝 기능명세서
1716

18-
### modal (컴파운드 컴포넌트 방식)
19-
20-
- [x] 모달 컴포넌트 모듈 제작
21-
22-
- [x] Modal component 제작 (껍데기)
23-
- [x] show, onhide props
24-
- [x] background 스타일
25-
- [x] Modal Container position 동적 할당
26-
- [x] Modal Container 스타일
27-
- [x] Modal Container gap 속성추가
28-
- [x] Modal.Header 제작
29-
- [x] close Button 유무 (header에 종속)
30-
- [x] close 버튼과 children 스타일
31-
- [x] Modal.Body 제작
32-
- [x] Modal.Footer 제작
33-
- [x] Modal.Title 제작
34-
- [x] font, color 스타일 (color 동적)
35-
- [x] Modal Component 타입스크립트 적용
36-
- [x] Modal Component 스토리북 제작
37-
- [x] Modal Component 배포
38-
39-
- [x] 훅 모듈 제작
40-
41-
- [x] useCardNumberValidation
42-
43-
- [x] 테스트 코드 작성
44-
- [x] errors, errorMessage 상태 생성
45-
- [x] 유효성 검증 + 상태 변경 함수
46-
- [x] 모든 에러가 없는지 변수
47-
48-
- [x] useExpirationDateValidation
49-
50-
- [x] 테스트 코드 작성
51-
- [x] errors, errorMessage 상태 생성
52-
- [x] 유효성 검증 + 상태 변경 함수
53-
- [x] 모든 에러가 없는지 변수
54-
55-
- [x] useCvcNumberValidation
56-
57-
- [x] 테스트 코드 작성
58-
- [x] errors, errorMessage 상태 생성
59-
- [x] 유효성 검증 + 상태 변경 함수
60-
- [x] 모든 에러가 없는지 변수
61-
62-
- [x] usePasswordValidation
63-
64-
- [x] 테스트 코드 작성
65-
- [x] errors, errorMessage 상태 생성
66-
- [x] 유효성 검증 + 상태 변경 함수
67-
- [x] 모든 에러가 없는지 변수
68-
69-
- [x] 유효성 검증 함수 분리
70-
71-
- [x] 숫자 검증
72-
- [x] 월 검증
73-
- [x] 년 검증
74-
75-
- [x] 모든 에러가 없는지 체크하는 함수
76-
77-
- [x] 훅 및 함수 매개변수 및 return 타입 추가
17+
### 모달 컴포넌트 재사용
18+
19+
- [x] 다양한 모달 종류를 대응 가능하게 구현
20+
- [x] 확인(Alert) 모달: 사용자에게 메시지를 전달하고 확인 버튼만 제공
21+
- [x] 확인/취소(Confirm) 모달: 사용자에게 선택지를 제공하고 확인 및 취소 버튼 제공
22+
- [x] 입력(Prompt) 모달: 사용자로부터 입력값을 받을 수 있는 입력 필드와 확인/취소 버튼 제공
23+
- [x] 모달 크기 옵션 추가
24+
- [x] small
25+
- [x] medium
26+
- [x] large
27+
- [x] 키보드 사용자를 고려하여 모달 내부 포커스 제어를 구현한다.
28+
- [x] 모달이 열릴 때 모달 내부의 첫 번째 포커스 가능한 요소로 자동 포커스를 이동시킨다.
29+
- [x] TAB 키로 모달 내부의 포커스 가능한 요소를 순서대로 탐색할 수 있어야 한다.
30+
- [x] Shift+TAB 키로 역순 탐색이 가능해야 하며, 마지막 요소에서 첫 번째 요소로 순환되어야 한다.
31+
32+
### 페이먼츠 커스텀 훅
33+
34+
- [x] 다양한 카드 브랜드 지원 확장
35+
- [x] Visa, Mastercard 외에 AMEX, Diners, UnionPay 등의 주요 카드사 식별 및 유효성 검사 로직 추가
36+
- [x] 카드 브랜드별 식별 번호 및 카드 번호 유효성 검사 구현
37+
- [x] 카드 번호 포맷팅 기능 추가
38+
- [x] 사용자 입력 시 자동으로 카드사별 규칙에 맞게 카드 번호를 구분하여 표시
39+
- [x] 카드사별 포맷팅 규칙 적용

‎STEP1_README.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# react-modules
2+
3+
## 🚀 페이먼츠 모듈 1단계 - Module
4+
5+
이번 미션은 재사용 가능한 모듈화된 컴포넌트와 커스텀 훅을 개발하고, npm에 배포하는 과정을 경험하는 것을 목표로 합니다. 모듈화된 컴포넌트와 커스텀 훅은 다양한 프로젝트에서 유연하게 사용할 수 있어야 합니다. 또한 Storybook과 React Testing Library(RTL)을 활용하여 컴포넌트의 문서화와 테스트 시나리오 작성 방법을 익힐 수 있습니다.
6+
7+
## 🔑 키워드
8+
9+
Module
10+
11+
## 📍 학습 목표
12+
13+
- 재사용 가능한 모듈화된 컴포넌트(모달, 커스텀 훅)를 개발하고 npm에 배포할 수 있다.
14+
- Storybook과 RTL을 활용한 컴포넌트 문서화 및 테스트 시나리오를 작성할 수 있다.
15+
16+
## 📝 기능명세서
17+
18+
### modal (컴파운드 컴포넌트 방식)
19+
20+
- [x] 모달 컴포넌트 모듈 제작
21+
22+
- [x] Modal component 제작 (껍데기)
23+
- [x] show, onhide props
24+
- [x] background 스타일
25+
- [x] Modal Container position 동적 할당
26+
- [x] Modal Container 스타일
27+
- [x] Modal Container gap 속성추가
28+
- [x] Modal.Header 제작
29+
- [x] close Button 유무 (header에 종속)
30+
- [x] close 버튼과 children 스타일
31+
- [x] Modal.Body 제작
32+
- [x] Modal.Footer 제작
33+
- [x] Modal.Title 제작
34+
- [x] font, color 스타일 (color 동적)
35+
- [x] Modal Component 타입스크립트 적용
36+
- [x] Modal Component 스토리북 제작
37+
- [x] Modal Component 배포
38+
39+
- [x] 훅 모듈 제작
40+
41+
- [x] useCardNumberValidation
42+
43+
- [x] 테스트 코드 작성
44+
- [x] errors, errorMessage 상태 생성
45+
- [x] 유효성 검증 + 상태 변경 함수
46+
- [x] 모든 에러가 없는지 변수
47+
48+
- [x] useExpirationDateValidation
49+
50+
- [x] 테스트 코드 작성
51+
- [x] errors, errorMessage 상태 생성
52+
- [x] 유효성 검증 + 상태 변경 함수
53+
- [x] 모든 에러가 없는지 변수
54+
55+
- [x] useCvcNumberValidation
56+
57+
- [x] 테스트 코드 작성
58+
- [x] errors, errorMessage 상태 생성
59+
- [x] 유효성 검증 + 상태 변경 함수
60+
- [x] 모든 에러가 없는지 변수
61+
62+
- [x] usePasswordValidation
63+
64+
- [x] 테스트 코드 작성
65+
- [x] errors, errorMessage 상태 생성
66+
- [x] 유효성 검증 + 상태 변경 함수
67+
- [x] 모든 에러가 없는지 변수
68+
69+
- [x] 유효성 검증 함수 분리
70+
71+
- [x] 숫자 검증
72+
- [x] 월 검증
73+
- [x] 년 검증
74+
75+
- [x] 모든 에러가 없는지 체크하는 함수
76+
77+
- [x] 훅 및 함수 매개변수 및 return 타입 추가

0 commit comments

Comments
 (0)