Skip to content

Conversation

@hwiiron
Copy link
Collaborator

@hwiiron hwiiron commented Dec 7, 2024

요구사항

체크리스트[기본]

회원가입 페이지

  • 유효한 정보를 입력하고 스웨거 명세된 “/auth/signUp”으로 POST 요청해서 성공 응답을 받으면 - - [x] 회원가입이 완료됩니다.
  • 회원가입이 완료되면 “/login”로 이동합니다.
  • 회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.

로그인 페이지

  • 회원가입을 성공한 정보를 입력하고 스웨거 명세된 “/auth/signIp”으로 POST 요청을 하면 로그인이 완료됩니다.
  • 로그인이 완료되면 로컬 스토리지에 accessToken을 저장하고 “/” 로 이동합니다.
  • 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.

메인

  • 로컬 스토리지에 accessToken이 있는 경우 상단바 ‘로그인’ 버튼이 판다 이미지로 바뀝니다.

스크린샷

스크린샷 대신 URL로 대체하겠습니다.

배포 URL: https://hwiiron.netlify.app/

멘토님에게

  • 우선 예전 미션에서 진행했던 코드를 그대로 가져와 사용하여 컴포넌트 분리 작업은 하지 않고, 미션 11의 기본 요구사항만 구현하였습니다.
  • 로그인, 회원가입 기능이 사실 기본 요구사항만 따르면 예외처리가 하나도 되지 않아 문제가 된다고 생각하는데, 예외처리를 어떤 방식으로 해야 하는지 잘 모르겠고, 아직 강의를 듣기 전이라 기본 요구사항에 집중한 점 참고 부탁드립니다!
  • Header를 login, signup 페이지가 아닐때만 보여지게 했는데 원래 이런식으로 구현하는건지, 아니면 다른 방법이 있는지 궁금합니다,,

@hwiiron hwiiron requested a review from jyh0521 December 7, 2024 13:43
@hwiiron hwiiron self-assigned this Dec 7, 2024
@hwiiron hwiiron added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Dec 7, 2024
Copy link
Collaborator

@jyh0521 jyh0521 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 +17 to +19
{login && signup && <Header />}
<Component {...pageProps} />
<Footer />
{login && signup && <Footer />}
Copy link
Collaborator

Choose a reason for hiding this comment

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

저번에 말씀드렸던 getLayout 기능을 활용해서 페이지 별로 Layout을 지정해보시는 것도 좋을 것 같습니다.

password: "",
});
const [isPasswordHidden, setIsPasswordHidden] = useState(false);
const [emailErrorMessage, setEmailErrorMessage] = useState("");
Copy link
Collaborator

Choose a reason for hiding this comment

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

에러가 없는 경우에 빈 문자열 보다는 null 같은 값으로 명시적으로 표시해주시는 것도 좋을 것 같습니다.

Comment on lines +44 to +55
setLoginInfo((prevLoginInfo) => ({
...prevLoginInfo,
[name]: value,
}));

if (name === "password") {
if (loginInfo.password.length < 7) {
setPasswordErrorMessage("비밀번호를 8자 이상 입력해 주세요.");
} else {
setPasswordErrorMessage("");
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

password 상태가 반영된 후에 에러가 뜰 것 같아서 에러를 먼저 처리해주시고 상태가 반영되게 하는건 어떨까요?

<div className="inner">
<h1>
<Link className="logo" href={"/"}>
<Image src={Logo} alt="logo" />
Copy link
Collaborator

Choose a reason for hiding this comment

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

next/image는 width / height나 fill이 없으면 잘 동작하지 않을텐데 괜찮나요?

Comment on lines +80 to +82
const handlePasswordToggleClick = () => {
setIsPasswordHidden(!isPasswordHidden);
};
Copy link
Collaborator

Choose a reason for hiding this comment

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

토글하는 로직이 많은 것 같은데 훅으로 만들어보셔도 좋을 것 같습니다.

const router = useRouter();
const [login, setLogin] = useState(false);
useEffect(() => {
if (localStorage.getItem("accessToken")) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

localStorage에서 accessToken을 가져와서 로그인 시켜버린다면, 악성 유저가 accessToken을 강제로 넣었을때도 로그인 됐다고 뜰 것 같습니다. 다른 방법도 생각해보시면 좋을 것 같아요.

@jyh0521 jyh0521 merged commit 6bf5061 into codeit-bootcamp-frontend:Next-신휘철 Dec 9, 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