Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[조유담] week14 #537

Open
wants to merge 9 commits into
base: part3-조유담
Choose a base branch
from

Conversation

youdame
Copy link
Collaborator

@youdame youdame commented Dec 16, 2023

요구사항

기본

-[x] “회원 가입하기”를 클릭하면 ‘/signup’ 페이지로 이동하나요?

-[x] 이메일 input에 placeholder는 “이메일을 입력해 주세요.”, 비밀번호 input에 placeholder는 “비밀번호를 입력해 주세요.”가 보이나요?

-[x] 이메일 input에서 focus out 할 때, 값이 없을 경우 아래에 “이메일을 입력해주세요.” 에러 메세지가 보이나요?

-[x] 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 아래에 “올바른 이메일 주소가 아닙니다.” 에러 메세지가 보이나요?

-[x] 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지가 보이나요?

-[x] 로그인 실패하는 경우, 이메일 input 아래에 “이메일을 확인해주세요.”, 비밀번호 input 아래에 “비밀번호를 확인해주세요.” 에러 메세지가 보이나요?

-[x] 로그인 버튼 클릭 또는 Enter키 입력으로 로그인 실행 되나요?

-[x] https://bootcamp-api.codeit.kr/docs 에 명세된 “/api/sign-in”으로 { “email”: “[email protected]”, “password”: “sprint101” } POST 요청해서 성공 응답을 받으면 “/folder”로 이동하나요?

-[x] “회원 가입하기”를 클릭하면 ‘/signin’ 페이지로 이동하나요?

-[x] 이메일 input에 placeholder는 “이메일을 입력해 주세요.”, 비밀번호 input에 placeholder는 “영문, 숫자를 조합해 8자 이상 입력해 주세요. ”비밀번호 확인 input에 placeholder는 “비밀번호와 일치하는 값을 입력해 주세요.”가 보이나요?

-[x] 이메일 input에서 focus out 할 때, 값이 없을 경우 “이메일을 입력해주세요.” 에러 메세지가 보이나요?

-[x] 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 “올바른 이메일 주소가 아닙니다.” 에러 메세지가 보이나요?

-[x] 비밀번호 input에서 focus out 할 때, 값이 8자 미만으로 있거나 문자열만 있거나 숫자만 있는 경우, “비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.” 에러 메세지가 보이나요?

-[x] 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않아요.” 에러 메세지가 보이나요?

-[x] 회원가입을 실행할 경우, 문제가 있는 경우 문제가 있는 input에 에러 메세지가 보이나요?

-[x] 회원가입 버튼 클릭 또는 Enter키 입력으로 회원가입 실행 되나요?

-[x] 이메일 중복 확인은 “/api/check-email” POST 요청해서 확인 할 수 있나요?

-[x] 유효한 회원가입 형식의 경우 “/api/sign-up” POST 요청하고 성공 응답을 받으면 “/folder”로 이동하나요?

-[x] 눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지나요?

-[x] 비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이나요?

-[x] 소셜 로그인에 구글 아이콘 클릭시 ‘https://www.google.com’, 카카오 아이콘 클릭시 ‘https://www.kakaocorp.com/page’로 이동하나요?

-[x] 로그인/회원가입시 성공 응답으로 받은 accessToken을 로컬 스토리지에 저장하나요?

-[] 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/folder’ 페이지로 이동하나요?

심화

-[x] 로그인, 회원가입 기능에 react-hook-form을 활용했나요?

주요 변경사항

  • react-hook-form은 사용했는데, 한 번 로그인, 회원가입에 실패하고 다시 로그인할 때 새로고침 해야하는 문제와, 인풋 값이 valid 하게 바뀌었을 때 자동으로 오류메세지를 없애는 거까지는 구현하지 못했습니다.

스크린샷

image
이 warning 어떻게 없애는지 모르겠습니다..

멘토에게

  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@youdame youdame requested a review from InSeong-So December 16, 2023 04:05
@youdame youdame changed the base branch from main to part3-조유담 December 16, 2023 04:06
@youdame youdame changed the title [조유담] week15 [조유담] week14 Dec 16, 2023
Copy link
Collaborator

@InSeong-So InSeong-So left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다!!
에러 해결은 코멘트 확인해주세요~

Comment on lines +3 to +4
import classNames from "classnames/bind";
const cx = classNames.bind(styles);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요고 위치 바꿔주시면 좋겠네요!


const handleClick = () => {
setPasswordType(passwordType === "password" ? "text" : "password");
setIsOpenIcon(isOpenIcon ? false : true);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
setIsOpenIcon(isOpenIcon ? false : true);
setIsOpenIcon(prevIsOpenIcon => !prevIsOpenIcon);

<>
<input
ref={ref}
value={value}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

제어 컴포넌트/비제어 컴포넌트 개념이 있어요. PR에 남겨둔 에러는 이 값을 defauleValue로 바꾸면 해결될 것 같네요!

Comment on lines +23 to +28
if (res.status === 200) {
const { accessToken, refreshToken } = res.data.data;
localStorage.setItem("access_token", accessToken);
localStorage.setItem("refresh_token", refreshToken);
navigate("/folder");
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

status가 200이 아닐 때에도 피드백을 준다면 좋겠네요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants