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

Feat: 카카오 OAuth 로그인 기능 구현 #23

Merged
merged 22 commits into from
Feb 8, 2024

Conversation

ParkSohyunee
Copy link
Contributor

@ParkSohyunee ParkSohyunee commented Feb 8, 2024

개요

  • 카카오 OAuth 로그인 기능을 구현했습니다.

작업 사항

  • 카카오 로그인 기능 (path: /login 페이지)
  • 사용자 정보(id)를 zustand persist(localStorage)에 저장 및 업데이트
  • axios로 request 요청 시, Authorization headers에 accessToken 보내는 설정

참고 사항 (optional)

  • UI 작업 없이 기능 완료만 해 놓은 상태로, 이후 UI 작업 진행 예정입니다. (금요일~토요일)
  • refreshToken 완료 전까지 accessToken 만료시간을 8시간으로 설정했습니다.

관련 이슈 (optional)


스크린샷

  • 로그인을 많이 시도한 상태라서 카카오 로그인 페이지가 skip된 상태입니다.😂
  • /login 페이지 -> 카카오 로그인 버튼 클릭 -> 리다이렉트 페이지 -> 로그인 성공 후 홈페이지로 이동하는 플로우입니다.

Feb-08-2024 21-48-22


리뷰어에게

  • 현재 Authorization headers에 'Bearer' 옵션 없이 보내고 있습니다. 백엔드에서 관련 코드 수정 후에 추가로 옵션 설정 예정입니다.
  • 해당 PR merge 전에 완료된다면 코드에 반영 예정이고, 이후라면 추가 PR 전까지 각자 Bearer 옵션 추가해서 사용 부탁드립니다.😃
    ㄴ 완료시점에 다시 한번 노티드리겠습니다.
  • refreshToken 완료 전까지 accessToken 만료시간을 8시간으로 설정했습니다.
  • 로그인 완료까지 기다려 주셔서 감사합니다.❤️‍🔥

Copy link

vercel bot commented Feb 8, 2024

@ParkSohyunee is attempting to deploy a commit to the Eujin Ahn's projects Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Contributor

@Nahyun-Kang Nahyun-Kang left a comment

Choose a reason for hiding this comment

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

헉 소현님 로그인 빠르게 구현해주셔서 감사합니다..!! 소현님 덕분에 인가에 대해서 더 확실히 공부할 수 있게 된 것 같습니다👍👍 zustand 저렇게 사용하는 것이었군요...👀 LGTM!!

Copy link
Contributor

Choose a reason for hiding this comment

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

오와,, store이라는 폴더명이 낯설어서 주스탠드 공식문서 보고왔는데
소현님께서 파일명, 폴더이름, export이름 까지 공식문서 내용이랑 같아서 상세한 곳 하나하나 다 신경쓰신게 느껴지네요,,
정말 깔끔합니다 LGTM!

Comment on lines +36 to +42
if (error instanceof AxiosError) {
if (!controller.signal.aborted) {
console.error(error.message);
} else {
console.log('Request canceled:', error.message);
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

소현님 요청취소 구현하신거 보고 처음 알아갑니다!
로그인 과정에서 요청을 취소하게 되는 상황이 있어서 구현하신건가요?
어떨때 필요해서 구현하신건지 단순히 궁금했습니다!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

유진님! 맞습니다~! useEffect 콜백함수에서 api 요청을 보내고 있는데 중복으로 호출되는 문제가 있어서 remount가 될 때 이전 api 요청에 대해서는 취소처리가 필요하여 구현하였습니다. 자세한 내용은 관련 이슈에 남겨 놓았습니다. 참고 부탁드립니다~!😊

Copy link

vercel bot commented Feb 8, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
listy-wave-front ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 8, 2024 3:13pm

Copy link
Contributor

@seoyoung-min seoyoung-min left a comment

Choose a reason for hiding this comment

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

소현님, zustand랑 OAuth까지 구현하시느라 공부를 정말 많이 하셨을 것 같아요...!
다음에 OAuth 설명 들려주시면 찾아가겠습니다 ㅎㅎ
정말 감사합니다! LGTM 👍👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feat 구현
Projects
None yet
Development

Successfully merging this pull request may close these issues.

(해결 완료) reactStrictMode에 따른 로그인 api 중복호출 에러 공유
4 participants