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

Conversation

imsoohyeok
Copy link
Collaborator

기본

  • “회원 가입하기”를 클릭하면 ‘/signup’ 페이지로, "로그인 하기"를 클릭하면 '/signin' 페이지로 이동합니다.
  • input에서 focus out 할 때, 문제가 있는 경우 에러 메세지를 보입니다.
  • 로그인 실패하는 경우, 이메일 input 아래에 “이메일을 확인해 주세요.”, 비밀번호 input 아래에 “비밀번호를 확인해 주세요.” 에러 메세지를 보입니다.
  • 로그인 버튼 클릭 또는 Enter키 입력으로 로그인이 실행돼야 합니다.
  • https://bootcamp-api.codeit.kr/docs 에 명세된 “/api/sign-in”으로 POST 요청해서 성공 응답을 받으면 “/folder”로 이동합니다.

심화

  • react-hook-form을 사용해서 구현했나요?

주요 변경사항

  • signin 페이지 구성

스크린샷

image

멘토에게

  • 위클리 미션을 몇 주 진행하지 못해서 이전 부분은 템플릿 코드를 사용했습니다.
  • 이런저런 에러를 고치려고 노력하느라 아직 완성하지 못했습니다.
  • part1에서 위클리 미션 진행했었던 html, css, js 코드를 그대로 가져와서 react, ts, next로 재구성 해보려했는데, 생각만큼 잘 안되는 것 같아서 제대로 하고 있는지도 잘 모르겠습니다...!
  • /pages/signin 부분, /src/sign 부분만 봐 주시면 될 것 같습니다! (js파일들은 아직 재구성하지 못한 것, 나머지 폴더는 탬플릿 코드 입니다.)
  • 일단 계속해서 고쳐나가 보겠습니다.

@imsoohyeok imsoohyeok requested a review from devym-37 May 21, 2024 03:32
@imsoohyeok imsoohyeok added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels May 21, 2024
Copy link
Collaborator

@devym-37 devym-37 left a comment

Choose a reason for hiding this comment

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

잘 작성해주셨습니다 👍
천천히 미션을 하시면서 복습해보시면 좋을 것 같습니다.
고생하셨습니다

export const SignupLayout = () => {
return (
<ContainerStyled>
<ItemsStyled></ItemsStyled>
Copy link
Collaborator

Choose a reason for hiding this comment

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


해당 부분들은
이렇게 수정해주시면 좋을 것 같습니다

mobile: "(max-width: 768px)",
};

export default device;
Copy link
Collaborator

Choose a reason for hiding this comment

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

공통으로 사용되는 부분을 config로 분리해주신 것 좋습니다

export const passwordErrCheck = document.querySelector(".password-err-check");

/*회원가입 시 비밀번호 값이 8자 미만이로 있거나 문자열만 있는 경우 - 정규 표현식*/
export const regex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
Copy link
Collaborator

Choose a reason for hiding this comment

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

현재 regex부분도 공통 추후에 더 많아지면, 따로 파일로 분리하여 관리하시면 좋을 것 같습니다

"비밀번호가 일치하지 않아요."
);
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

password 관련한 함수를 해당 파일로 분리하신 것도 잘 작성해주셨습니다

<IconStyled>
<IconBoxStyled>
<a href="https://www.google.com/" target="_blank">
<Image src={signGoogleback} />
Copy link
Collaborator

Choose a reason for hiding this comment

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

이미지 태그의 경우 alt속성값을 작성해주시면 좋을 것 같습니다

font-weight: 600;
`;

export default SigninHeader;
Copy link
Collaborator

Choose a reason for hiding this comment

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

잘 작성해주셨습니다!

margin-top: 0.6rem;
`;

export default SigninHeader;
Copy link
Collaborator

Choose a reason for hiding this comment

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

스타일드 컴포넌트명에 styled를 붙여주신 것이 좋은 것 같습니다. 어떤 컴포넌트가 스타일드 컴포넌트인지 잘 구별되어 좋은 것 같습니다.

form.addEventListener("submit", mainSignInFunction);
eyeBtn.forEach((btn) => {
btn.addEventListener("click", eyeBtnFunction);
});
Copy link
Collaborator

Choose a reason for hiding this comment

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

유틸함수와 fetch함수가 같이 있어서 분리해주시면 좋을 것 같습니다

return false;
}
}

Copy link
Collaborator

Choose a reason for hiding this comment

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

해당 파일도 유틸함수와 api fetch 함수가 같이 있어서 분리해주시면 좋을 것 같습니다

if (accessToken) {
location.href = "../folder.html";
}
};
Copy link
Collaborator

Choose a reason for hiding this comment

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

공통 유틸 함수로 잘 작성해주신 것 같습니다

@devym-37 devym-37 merged commit fca74bb into codeit-bootcamp-frontend:part3-임수혁 May 21, 2024
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