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 #517

Merged
merged 16 commits into from
Dec 17, 2023
Merged

[안성재] Week14 #517

merged 16 commits into from
Dec 17, 2023

Conversation

asusia1111
Copy link
Collaborator

@asusia1111 asusia1111 commented Dec 10, 2023

요구사항

기본

  • [로그인 페이지] “회원 가입하기”를 클릭하면 ‘/signup’ 페이지로 이동하나요?
  • [로그인 페이지] 이메일 input에 placeholder는 “이메일을 입력해 주세요.”, 비밀번호 input에 placeholder는 “비밀번호를 입력해 주세요.”가 보이나요?
  • [로그인 페이지] 이메일 input에서 focus out 할 때, 값이 없을 경우 아래에 “이메일을 입력해주세요.” 에러 메세지가 보이나요?
  • [로그인 페이지] 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 아래에 “올바른 이메일 주소가 아닙니다.” 에러 메세지가 보이나요?
  • [로그인 페이지] 비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지가 보이나요?
  • [로그인 페이지] 로그인 실패하는 경우, 이메일 input 아래에 “이메일을 확인해주세요.”, 비밀번호 input 아래에 “비밀번호를 확인해주세요.” 에러 메세지가 보이나요?
  • [로그인 페이지] 로그인 버튼 클릭 또는 Enter키 입력으로 로그인 실행 되나요?
  • [로그인 페이지] https://bootcamp-api.codeit.kr/docs 에 명세된 “/api/sign-in”으로 { “email”: “[email protected]”, “password”: “sprint101” } POST 요청해서 성공 응답을 받으면 “/folder”로 이동하나요?
  • [회원가입 페이지] “회원 가입하기”를 클릭하면 ‘/signin’ 페이지로 이동하나요?
  • [회원가입 페이지] 이메일 input에 placeholder는 “이메일을 입력해 주세요.”, 비밀번호 input에 placeholder는 “영문, 숫자를 조합해 8자 이상 입력해 주세요. ”비밀번호 확인 input에 placeholder는 “비밀번호와 일치하는 값을 입력해 주세요.”가 보이나요?
  • [회원가입 페이지] 이메일 input에서 focus out 할 때, 값이 없을 경우 “이메일을 입력해주세요.” 에러 메세지가 보이나요?
  • [회원가입 페이지] 이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 “올바른 이메일 주소가 아닙니다.” 에러 메세지가 보이나요?
  • [회원가입 페이지] 비밀번호 input에서 focus out 할 때, 값이 8자 미만으로 있거나 문자열만 있거나 숫자만 있는 경우, “비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.” 에러 메세지가 보이나요?
  • [회원가입 페이지] 비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input 아래에 “비밀번호가 일치하지 않아요.” 에러 메세지가 보이나요?
  • [회원가입 페이지] 회원가입을 실행할 경우, 문제가 있는 경우 문제가 있는 input에 에러 메세지가 보이나요?
  • [회원가입 페이지] 회원가입 버튼 클릭 또는 Enter키 입력으로 회원가입 실행 되나요?
  • [회원가입 페이지] 이메일 중복 확인은 “/api/check-email” POST 요청해서 확인 할 수 있나요?
  • [회원가입 페이지] 유효한 회원가입 형식의 경우 “/api/sign-up” POST 요청하고 성공 응답을 받으면 “/folder”로 이동하나요?
  • [로그인, 회원가입 페이지 공통] 눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지나요?
  • [로그인, 회원가입 페이지 공통] 비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이나요?
  • [로그인, 회원가입 페이지 공통] 소셜 로그인에 구글 아이콘 클릭시 ‘https://www.google.com’, 카카오 아이콘 클릭시 ‘https://www.kakaocorp.com/page’로 이동하나요?
  • [로그인, 회원가입 페이지 공통] 로그인/회원가입시 성공 응답으로 받은 accessToken을 로컬 스토리지에 저장하나요?
  • [로그인, 회원가입 페이지 공통] 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/folder’ 페이지로 이동하나요?

심화

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

주요 변경사항

  • 13주차 PR 코드 리뷰와 멘토링에서의 피드백 적용
  • react-hook-form 활용해서 Input 컴포넌트와 로그인, 회원가입 페이지 구현
  • PART1에서 HTML로 구현했던 랜딩 페이지 Next로 마이그레이션
  • Nav 컴포넌트가 페이지 컴포넌트에서 페칭한 데이터를 prop으로 받아서 렌더링하도록 리팩토링

스크린샷

image

image

image

image

image

멘토에게

  • 피드백 적용한 사항 중에 제가 잘못 이해했거나 잘못 고친 부분이 있는지 궁금합니다.
  • 현재 프로젝트 디렉토리 구조 중에 부자연스럽거나 개선해야할 부분이 어디가 있는지 궁금합니다.
  • Input 컴포넌트와 로그인, 회원가입 페이지에서 개선해야할 부분이 있는지 궁금합니다.

@asusia1111 asusia1111 self-assigned this Dec 10, 2023
@asusia1111 asusia1111 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Dec 10, 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.

리뷰가 늦었네요🙇‍♂️
수고하셨습니다!

피드백 한 부분은 잘 적용해준 것 같아요.
디렉토리도 부자연스럽다고 느껴지는 것은 없었습니다.
새로 만든 컴포넌트와 페이지의 경우 react-hook-form을 차용하면서 ui 코드가 복잡해지는데 이 부분을 커스텀 훅을 통해 녹여내면 더 좋아질 것 같아요!

Comment on lines +27 to +54
const handleOpenPopover = useCallback((e: MouseEvent) => {
e.preventDefault();
setPopoverIsOpen(!popoverIsOpen);
}, []);

const handleClosePopover = useCallback(() => {
setPopoverIsOpen(false);
}, []);

const handleOpenModalDeleteLink = useCallback((e: MouseEvent) => {
e.preventDefault();
setModalDeleteLinkIsOpen(true);
}, []);

const handleCloseModalDeleteLink = useCallback((e: MouseEvent) => {
e.preventDefault();
setModalDeleteLinkIsOpen(false);
}, []);

const handleOpenModalAddLink = useCallback((e: MouseEvent) => {
e.preventDefault();
setModalAddLinkIsOpen(true);
}, []);

const handleCloseModalAddLink = useCallback((e: MouseEvent) => {
e.preventDefault();
setModalAddLinkIsOpen(false);
}, []);
Copy link
Collaborator

Choose a reason for hiding this comment

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

커스텀 훅으로 분리하면 좀 더 UI에 집중할 수 있는 컴포넌트가 될 것 같네요!

Comment on lines +36 to +38
const onSubmit = (data: IFormInput) => {
submitForm(data);
};
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 함수는 없어도 되지 않을까요?

Comment on lines +45 to +49
const response1 = await apiRequest({ url: '/sample/folder' });
const folder = response1.data?.folder;

const response2 = await apiRequest({ url: '/sample/user' });
const profile = response2.data;
Copy link
Collaborator

Choose a reason for hiding this comment

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

response1의 통신이 종료될 때까지 response2는 대기될 텐데, 그럼 네트워크 통신에 병목이 생길 수 있습니다. 이를 해결하려면 어떻게 하는 것이 좋을까요?

@InSeong-So InSeong-So merged commit 0ba509b into codeit-bootcamp-frontend:part3-안성재 Dec 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants