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
SINHOLEE
approved these changes
Dec 13, 2023
Comment on lines
+42
to
+51
| async function postApi() { | ||
| try { | ||
| const { data } = await postSignIn(emailValue, passwordValue); | ||
| localStorage.setItem("accessToken", data.accessToken); | ||
| Router.push("/folder"); | ||
| } catch (e) { | ||
| setEmailError("이메일을 확인해주세요."); | ||
| setPasswordError("비밀번호를 확인해주세요."); | ||
| } | ||
| } |
There was a problem hiding this comment.
emailValue랑 passwordValue가 valid 한지 생각해보세요.
postApi가 실행되는 시점에 항상 valid하지 않을것같네요.
순서는
- input이 변할때마다 validate check를 실행한다.
- valid한지 안한지 확인하고, valid할때만 postApi를 호출하도록 가드로직을 만든다.
Comment on lines
+76
to
+112
| <StyledInputBox> | ||
| 이메일 | ||
| <InputEmail | ||
| emailValue={emailValue} | ||
| setEmailValue={setEmailValue} | ||
| emailError={emailError} | ||
| setEmailError={setEmailError} | ||
| postApi={postApi} | ||
| /> | ||
| </StyledInputBox> | ||
| <StyledInputBox> | ||
| 비밀번호 | ||
| <InputPassword | ||
| signUp | ||
| passwordValue={passwordValue} | ||
| setPasswordValue={setPasswordValue} | ||
| passwordError={passwordError} | ||
| setPasswordError={setPasswordError} | ||
| postApi={postApi} | ||
| /> | ||
| </StyledInputBox> | ||
| <StyledInputBox> | ||
| 비밀번호 확인 | ||
| <InputPasswordCheck | ||
| passwordCheckValue={passwordCheckValue} | ||
| setPasswordCheckValue={setPasswordCheckValue} | ||
| passwordCheckError={passwordCheckError} | ||
| setPasswordCheckError={setPasswordCheckError} | ||
| passwordValue={passwordValue} | ||
| postApi={postApi} | ||
| /> | ||
| </StyledInputBox> | ||
| </StyledLoginInputBox> | ||
| <StyledLoginButtonBox> | ||
| <StyledLoginButton onClick={postApi}> | ||
| 회원가입 | ||
| </StyledLoginButton> |
There was a problem hiding this comment.
각 인풋과 회원가입 버튼에 각각 postApi를 주입하는게 맞는 구조일까요?
input의 역할은 오직 값을 입력하고, 나아가 유효성 로직에 따라 에러ui를 보여주는것까지 가지고 있어야할거같아요. 그이상(api호출)은 불필요하게 많은 책임을 가지고있어보입니다.
input에서 엔터를 쳤을 때 api가 호출하는 기능을 구현하고 싶었다면
form 태그와 submit 동작에 관해 이해해 보시면 좋을것같아요.
https://ko.javascript.info/forms-submit
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.
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게
passwordInput을check이라는boolean값을 받아서 재활용 해보려 했지만 그러면props부터 너무 지저분해진다 생각해passwordCheckInput을 제작했습니다.useEffect에 넣거나typeof window !== ‘undefined’2가지 방법이 있던데 뭔가 더 좋은 방법이 있는지 궁금합니다.