Feature : 카카오 소셜 로그인 페이지 구현

[rktdnjs]

Description

카카오 소셜 로그인시 사용자가 이용하는 페이지를 구현한다.

Todo

• 카카오 API 연동 로그인 기능 구현(임시)
• CSS 추가 및 레이아웃 배치
• 로그인 페이지 상단 바 수정(LoginNav.jsx 추가)
• LoginNav 컴포넌트 뒤로가기 기능 보완(홈으로 이동하지 않고 사용자의 이전 페이지로 이동하도록)
• 토큰 관련 정보 저장 및 전반적으로 다룰 수 있는 로직 구현(토큰은 localStorage 저장 / request은 axios interceptor)
• 로그인 성공 이후 토큰 & 유저 등급 & 유저 닉네임 - localStorage 에서 관리할 수 있도록 처리(혹은 sessionStorage)
• 로그인에 대한 여부를 판단하여 처리해줄 수 있는 ProtectedRoute 컴포넌트 구현 및 테스팅
• 회원가입진행시 계좌정보 유무에 따른 은행명/계좌번호 받는 페이지 구현
• 모킹 혹은 백엔드 API 연결 후 디버깅 및 코드 리팩토링

ETC

[rktdnjs]

카카오 API 연동 로그인의 경우 다음과 같은 과정으로 진행되는 것으로 파악하였습니다.

1. 버튼 눌러 로그인화면 띄우기
2. 카카오에게 인가 코드 받아오기
3. 쿼리스트링에 담겨진 인가 코드를 파싱해서 백엔드로 전달하기
4. (백엔드의 인가 코드 처리 이후 토큰을 발급하여 프론트로 전달하기)
5. 발급 받은 토큰을 이용하여 로그인을 유지하고, 서비스를 이용할 수 있도록 하기

이 중 현재는 1, 2번은 구현 되었고
3번의 경우 현재 특정 URL로 보내기로 정해진게 없기 때문에(나중에 함께 처리해야할 것으로 보임)
이 부분은 인가 코드를 보냈다는 가정하에 토큰을 localStorage에 저장한 후, 서비스에 사용하는 형태로 구현하였습니다.