부산대FE_ 안형찬_1단계 - 로그인 기능 구현하기 #103
Conversation
1단계 내용 가져오기
커스텀 훅 Login.tsx 추가 이를 사용해서 로그인 에러 로직 구현
SeonJun-Hwang
left a comment
SeonJun-Hwang
left a comment
There was a problem hiding this comment.
반갑습니다 형찬님! 1차 과제 진행간 고생 많으셨습니다 👍
짧은 코드지만 완성도가 높아 보기 좋았습니다 🥇
개인적인 생각은 코멘트에 담았습니다! 형찬님의 생각을 코멘트로 남겨주셔도 좋습니다!
| function useInput(initialValue: string, validator: ValidatorFn) { | ||
| const [value, setValue] = useState(initialValue); | ||
| const [error, setError] = useState<string | null>(null); | ||
| const [touched, setTouched] = useState(false); |
There was a problem hiding this comment.
처음 입력할때 입력을 완료하기 전에는 오류 메세지가 나지 않도록 하기위해 만들었습니다.
id 랑 pw를 입력하다가 다른곳을 클릭해 포커스가 나가면, 그때부터 touched 가 true가 되고 오류가 있으면 오류 메세지가 출력됩니다.
src/page/Login.tsx
Outdated
| const validateEmail = (value: string): string | null => { | ||
| if (!value) return 'ID를 입력해주세요.'; | ||
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||
| if (!emailRegex.test(value)) return 'ID는 이메일 형식으로 입력해주세요.'; | ||
| return null; | ||
| }; | ||
|
|
||
| const validatePassword = (value: string): string | null => { | ||
| if (!value) return 'PW를 입력해주세요.'; | ||
| if (value.length < 8) return 'PW는 최소 8글자 이상이어야 합니다.'; | ||
| return null; | ||
| }; | ||
|
|
There was a problem hiding this comment.
이부분들은 컴포넌트에서 사용하지만 컴포넌트 파일에 있을 필요는 없어보여요
추가적으로 유효성 조건이 길어질 수록 컴포넌트를 읽기 더 불편할거 같아요
There was a problem hiding this comment.
넵 utils 폴더를 만들어 함수를 옮겼습니다! 감사합니다
src/page/Login.tsx
Outdated
| `; | ||
|
|
||
| const InputSection = styled.input` | ||
| const InputSection = styled.input<{ hasError?: boolean }>` |
There was a problem hiding this comment.
styled도 컴포넌트에 들어가지만 컴포넌트 파일과는 분리하는게 좋아보여요
There was a problem hiding this comment.
넵! 컴포넌트를 따로 분리하고 공통적으로 사용하는 컴포넌트도 정리하겠습니다
src/hook/useInput.ts
Outdated
|
|
||
| type ValidatorFn = (value: string) => string | null; | ||
|
|
||
| function useInput(initialValue: string, validator: ValidatorFn) { |
There was a problem hiding this comment.
initialValue에 의해 useInput이 완성도를 올려주네요!
다만 useInput을 사용할 때 첫 값 대부분을 ''로 채우게 될거 같은데 🤔
특별하게 지정해줘야 하는 경우가 아니라면 기본으로 채워주면 편할거 같아요
src/page/Login.tsx
Outdated
| <LoginButton onClick={() =>navigate('/')}>로그인</LoginButton> | ||
| <LoginButton | ||
| disabled={!canSubmit} | ||
| onClick={() => canSubmit && navigate('/')} |
There was a problem hiding this comment.
onClick으로 분리하면 더 깔끔할거같은데 🤔 조금 만 더 다듬어 볼까요?
분리하면 어떤점이 더 좋아질까요 ❓
컴포넌트 분리 -Login.styled.ts 추가 -utils 폴더와 파일 추가 -초기값 설정 함수 분리 등 리펙토링
…n/react-gift-order into upstream/hyeongchan0
2 participants
1단계 미션인 로그인 페이지를 구현했습니다