Skip to content

Conversation

@jsh1147
Copy link
Collaborator

@jsh1147 jsh1147 commented Nov 9, 2024

요구사항

기본

회원가입

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

로그인

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

메인

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

주요 변경사항

  • 바닐라 버전 때 수행한 회원가입/로그인 페이지 마이그레이션
    (HTML/CSS만 마이그레이션하고, 로직 관련 JS는 마이그레이션X)
  • 회원가입/로그인 API 구현 및 적용
  • 로그인 상태에 따라 헤더 변경

스크린샷

  • 회원가입
    image
  • 로그인
    image
  • 헤더(로그인 전)
    image
  • 헤더(로그인 후)
    image

멘토에게

  • https://codeit-fe10-pandamarket.vercel.app
  • 바닐라 미션 당시의 HTML/CSS만 가져와, 검증 로직, 오류 문구 이런게 동작하지 않는 상태입니다😅
  • 수행 못한 요구사항(로그인 상태에서 회원가입/로그인 페이지 접근 시 페이지 전환)은 제출하고 알았습니다😅
  • 회원 가입과 로그인 모두 가능은 한데... (ID: [email protected] / PW: password)
  • 2번 연달아 시도해야 성공합니다😥
    • 첫 번째 시도에서 개발자도구-Network 보면 서버 통신은 200 성공인데,
    • 폼 제출 이벤트 핸들러에 오류가 있는지 await 문에서 패칭을 기다리지 않고 넘어가 조건문에서 실패하는 것 같습니다.
    • 그 상태에서 다시 제출을 누르면 그때는 성공이 됩니다(?)
    • 제출한 코드 보니 await 키워드가 LogIn엔 있고 SignUp은 없는데, 둘다 2번 시도해야 성공합니다.
      (단순 await 키워드 문제는 아닌가 봐요😥)

- 미디어 컨텍스트 파일 내부로 이동
- 이전 미션에 진행한 로그인/회원가입 페이지를(로직 제외)
  Next.js 환경으로 마이그레이션
- 로그인 여부에 따라 프로필 / 로그인 버튼을
  보이도록 구현
- fetch 함수를 활용한 로그인/회원가입 API 구현
- 로그인/회원가입 폼에 API 연결
@jsh1147 jsh1147 requested a review from GANGYIKIM November 9, 2024 14:58
@jsh1147 jsh1147 self-assigned this Nov 9, 2024
@jsh1147 jsh1147 added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels Nov 9, 2024
Copy link
Collaborator

@GANGYIKIM GANGYIKIM left a comment

Choose a reason for hiding this comment

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

성현님 이번 스프린트 미션 고생하셨습니다~
멘토에게 섹션에서 말씀해주신대로 validation, error 관련 로직들도 추가해주시면 좋을 것 같아요~
또한 비밀번호 인풋에서 눈 아이콘이 동작하지 않으니 이도 확인해보시면 좋겠습니다.

언급해주신 로그인 기능의 경우 useQuery를 의심해봅니다~
handleFormSubmit에서 await query를 호출하시고 data 값을 localStorage에 저장하시는데 handleFormSubmit에서 data에 접근할때 값이 비어있어 두번호출을 해야 예상하는 동작으로 수행되는 것처럼 보입니다~
한번 테스트해보시고 수정해보세요 😁

);
}

export function useMedia() {
Copy link
Collaborator

Choose a reason for hiding this comment

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

P3:
👍

import styles from "./SignUpForm.module.css";

export default function SignUpForm() {
const [formData, setFormData] = useState<PostSignUpParams>({
Copy link
Collaborator

Choose a reason for hiding this comment

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

P3:
제 기억에 의하면 react-hook-form을 사용해보라는게 요구사항에 있으니 나중에 validation, error 관련 로직 추가하실때 해당 라이브러리로 해보시면 좋을 것 같아요~

}

alert("회원가입에 성공했습니다.\n로그인 후 이용해 주세요!");
replace("/login");
Copy link
Collaborator

Choose a reason for hiding this comment

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

P3:
👍

@GANGYIKIM GANGYIKIM merged commit 2cc3287 into codeit-bootcamp-frontend:Next-정성현 Nov 11, 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