Skip to content

Conversation

kss761036
Copy link
Collaborator

요구사항

기본

회원가입

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

로그인

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

헤더

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

심화

  • 로그인, 회원가입 기능에 react-hook-form을 활용해봅니다.

멘토에게

@kss761036 kss761036 requested a review from kich555 January 27, 2025 02:06
@kss761036 kss761036 added the 순한맛🐑 마음이 많이 여립니다.. label Jan 27, 2025
@kich555
Copy link
Collaborator

kich555 commented Feb 5, 2025

conflict 해결해주세요!

Copy link
Collaborator

@kich555 kich555 left a comment

Choose a reason for hiding this comment

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

고생하셨습니다!

Copy link
Collaborator

Choose a reason for hiding this comment

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

import React from "react";

type InputProps = React.InputHTMLAttributes<HTMLInputElement>;

const CustomInput: React.FC<InputProps> = (props) => {
  return <input {...props} />;
};

export default CustomInput;

이렇게props를 넘긴다면 보다 확장성 있겠죠?

<img src="/assets/img/logo.svg" alt="로고" />
</Link>
</div>
<form action="">
Copy link
Collaborator

Choose a reason for hiding this comment

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

action이 비어있네요

</div>
</li>
<li>
<button className="btn round block large" disabled={true}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

button의 type을 명시해주세요!

Comment on lines +19 to +26
if (result) {
localStorage.removeItem("accessToken");
localStorage.removeItem("refreshToken");
localStorage.removeItem("user");
setIsLoggedIn(false);
} else {
return;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

if(!result) return;
 localStorage.removeItem("accessToken");
      localStorage.removeItem("refreshToken");
      localStorage.removeItem("user");
      setIsLoggedIn(false);

이런식으로 early return기법을 사용해보는건 어떨까요

import axios from "axios";

const Instance = axios.create({
baseURL: "https://panda-market-api.vercel.app",
Copy link
Collaborator

Choose a reason for hiding this comment

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

baseURL같은건 env로 관리하는게 더 좋아보이네요

Comment on lines +36 to +47
if (!email || !password) {
alert("모든 필드를 채워주세요.");
return;
}
if (!/\S+@\S+\.\S+/.test(email)) {
alert("유효한 이메일 주소를 입력해주세요.");
return;
}
if (password.length < 8) {
alert("비밀번호는 최소 8자 이상이어야 합니다.");
return;
}
Copy link
Collaborator

Choose a reason for hiding this comment

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

validation로직은 submit함수에서 따로 추출하는게 더 좋아보이네요

@withyj-codeit withyj-codeit merged commit 642e058 into codeit-bootcamp-frontend:Next-김승석 Mar 4, 2025
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.

3 participants