[FE] 계좌번호 입력 제한 추가 #634
Merged
[FE] 계좌번호 입력 제한 추가 #634
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Closed
1 task
soi-ha
approved these changes
Sep 26, 2024
| value={accountNumber ?? ''} | ||
| onChange={handleAccount} | ||
| onPaste={handleAccountOnPaste} |
There was a problem hiding this comment.
저도 이번에 처음 알게 됐어요! 혹시나 있을까 해서 봤는데 진짜 있었던
Todari
approved these changes
Sep 26, 2024
client/src/constants/regExp.ts
Outdated
| @@ -3,6 +3,7 @@ const REGEXP = { | |||
| eventUrl: /\/event\/([a-zA-Z0-9-]+)\//, | |||
| billTitle: /^([ㄱ-ㅎ가-힣a-zA-Z0-9ㆍᆢ]\s?)*$/, | |||
| memberName: /^([ㄱ-ㅎ가-힣a-zA-Zㆍᆢ]\s?)*$/, | |||
| accountNumber: /^[0-9\s\-]*$/, | |||
There was a problem hiding this comment.
Suggested change
| accountNumber: /^[0-9\s\-]*$/, | |
| accountNumber: ^\d+([\s\-]\d+)*[\s\-]?$, |
로 사용하면 연속된 -나 공백을 걸러줄 수 있어요~
Comment on lines
+6
to
+7
| minAccountNumberLength: 8, | ||
| maxAccountNumberLength: 30, |
| if (isValid) { | ||
| setAccountNumber(event.target.value); | ||
| } else if (!isValid && !isValidMinLength) { | ||
| setAccountNumber(event.target.value.replace(/[^0-9\s\-]/g, '').trim()); |
There was a problem hiding this comment.
어차피 허용되는 문자인데 slice 를 사용하면 안되는 이유가 있었을까요?
Suggested change
| setAccountNumber(event.target.value.replace(/[^0-9\s\-]/g, '').trim()); | |
| setAccountNumber(event.target.value.slice(0, RULE.maxAccountNumberLength).trim()); |
There was a problem hiding this comment.
8자보다 작을 때 숫자 공백 하이픈 외의 문자가 허용되지 않도록 하기 위해서입니다!
| readOnly | ||
| onClick={() => setIsBottomSheetOpen(true)} | ||
| /> | ||
| <LabelInput | ||
| labelText="계좌번호" | ||
| placeholder="030302-04-191806" | ||
| errorText={null} | ||
| placeholder="ex) 030302-04-191806" |
| value={accountNumber ?? ''} | ||
| onChange={handleAccount} | ||
| onPaste={handleAccountOnPaste} |
pakxe
approved these changes
Sep 26, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
issue
구현 사항
계좌번호 입력 제한
계좌번호 입력을 제한하는 기능을 추가했습니다.
올 수 있는 문자는 숫자, 공백, 하이픈(-)이며 8자에서 30자 이하입니다.
8자 이하로 오는 경우는 글자가 지워지도록 따로 예외로 문자를 수정할 수 있도록 열어뒀어요.
30자 이상은 입력을 막았습니다.
이외 다른 문자들은 허용하지 않도록 막았습니다.
복사 붙여넣기 대응
계좌번호의 경우 은행 앱에서 복사 붙여넣기 하는 경우가 많습니다.
그 때 은행마다 복사되는 형식이 달라서 은행 이름 정보가 포함된 경우에 입력이 안 될 수 있다는 우려가 있었습니다.
하지만 토스를 참고한 결과 토스는 "1213123123213 신한"을 복사 붙여넣기 할 경우 "1213123123213"이 입력되는 것을 확인하고 이처럼 구현하면 좋겠다 생각하고 구현했습니다.
복붙의 경우 onChange가 아닌 onPaste를 사용해서 따로 검증하도록 설정했습니다.
paste된 값에서 먼저 숫자, 공백, 하이픈을 제외한 문자만 남겨서 검증을 해서 유효하지 않은 문자를 제거했습니다.
또한 paste 이벤트가 일어났을 때 onChange callback이 실행되지 않도록 설정해 onPaste한 값이 검증되고 상태로 관리되도록 설정했어요.
데모영상
2024-09-25-17-28-41.mp4
🫡 참고사항