Skip to content

[정성현] sprint11 #134

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

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: jsh@test.com / 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에 접근할때 값이 비어있어 두번호출을 해야 예상하는 동작으로 수행되는 것처럼 보입니다~
한번 테스트해보시고 수정해보세요 😁


return (
<MediaContext.Provider value={media}>{children}</MediaContext.Provider>
);
}

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