Skip to content

[조유담] week14 #537

New issue

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

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

Already on GitHub? # to your account

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] “회원 가입하기”를 클릭하면 ‘/#’ 페이지로 이동하나요?

-[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”: “test@codeit.com”, “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이 아닐 때에도 피드백을 준다면 좋겠네요!

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

Successfully merging this pull request may close these issues.

2 participants