feat: 회원가입 유효성 검사 추가 #74
Merged
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
|
Visit the preview URL for this PR (updated for commit 25172c2): https://hearus-668d7--pr74-feat-signup-login-va-rz2p5vcw.web.app (expires Fri, 27 Sep 2024 09:03:01 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: bf5e680be215afe513793a0ffcca015694c306c5 |
Nangniya
approved these changes
Sep 21, 2024
Comment on lines
+75
to
+144
| const validateName = (value: string) => { | ||
| if (value.trim() === '') { | ||
| updateValidation('name', false, '이름을 입력해 주세요.'); | ||
| } else { | ||
| updateValidation('name', true, ''); | ||
| } | ||
| }; | ||
|
|
||
| const validateEmail = useCallback( | ||
| (value: string) => { | ||
| if (value.trim() === '') { | ||
| updateValidation('email', false, '이메일은 필수 입력 값입니다.'); | ||
| return; | ||
| } | ||
| const regex = | ||
| /([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; | ||
| const isValid = regex.test(value); | ||
|
|
||
| if (!isValid) { | ||
| updateValidation('email', false, '유효하지 않은 이메일입니다.'); | ||
| } else { | ||
| updateValidation('email', true, ''); | ||
| } | ||
| }, | ||
| [updateValidation], | ||
| ); | ||
|
|
||
| const validatePassword = useCallback( | ||
| (value: string) => { | ||
| if (value.trim() === '') { | ||
| updateValidation('password', false, '비밀번호는 필수 입력 값입니다.'); | ||
| return; | ||
| } | ||
| if (value.length < 8) { | ||
| updateValidation( | ||
| 'password', | ||
| false, | ||
| '비밀번호는 최소 8자 이상이어야 합니다.', | ||
| ); | ||
| return; | ||
| } | ||
| updateValidation('password', true, ''); | ||
| }, | ||
| [updateValidation], | ||
| ); | ||
|
|
||
| const validatePasswordConfirm = useCallback( | ||
| (value: string, currentPassword: string) => { | ||
| if (value.trim() === '') { | ||
| updateValidation( | ||
| 'passwordConfirm', | ||
| false, | ||
| '비밀번호 확인은 필수 입력 값입니다.', | ||
| ); | ||
| return; | ||
| } | ||
|
|
||
| if (value !== currentPassword) { | ||
| updateValidation( | ||
| 'passwordConfirm', | ||
| false, | ||
| '비밀번호가 일치하지 않습니다.', | ||
| ); | ||
| return; | ||
| } | ||
|
|
||
| updateValidation('passwordConfirm', true, ''); | ||
| }, | ||
| [updateValidation], | ||
| ); |
There was a problem hiding this comment.
이런 분리할 수 있는 함수들은 utils 폴더로 분리해주세요!
파일 길이가 거의 400줄인데 가독성을 위해서는 한 파일에 120줄~150줄 이하로 유지하는게 좋다고 합니다
그 이상으로 넘어가면 사람이 읽기에 힘들어진대요
꼭 이 숫자를 강박적으로 지킬 필요는 없는데 분리할 수 있는건 분리하는게 더 좋을것같아요
컴포넌트 생명주기랑 관련없는 함수들을 이 안에 정의하면 리렌더링 될때마다 재생성되는거라
useCallback을 써도 메모이제이션 비용도 생겨서요
regex 같은것도 constants 폴더로 분리하는게 좋아보이고요
input도 원래는 유효성검사가 없었어서 따로 input 태그로 클래스이름만 똑같은것만 부여해줬는데
유효성검사 생기면서 이것도 컴포넌트로 분리해주면 좋을것같아요 isValid같은 props 넣어줘서 조건부로 에러 메시지 띄워주는 식으로요
Merged
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.
요약 (Summary)
회원가입 이메일 검사 정규식, 비밀번호, 비밀번호 확인 유효성 검사 추가
변경 사항 (Changes)
메시지 ui 확인
리뷰 요구사항