이번 PR에서는 소셜 로그인 기능을 강화하고, 사용자 편의성을 높이기 위한 개선 작업을 진행했습니다. 또한 카카오(수정) 및 네이버(신규) 로그인 기능을 추가 및 수정하고, 사용자 정보 처리, JWT 처리 로직을 개선했습니다. 추가로, 회원가입 관련 UI 및 로직을 개선하여 사용자 경험을 향상시켰습니다.
구현 사항
카카오 로그인 콜백 경로 수정: 기존 카카오 로그인 콜백 페이지의 상위 폴더를 social로 이동하여 소셜 로그인 관련 구조를 정리했습니다.
네이버 로그인 로직 구현: 네이버 소셜 로그인 기능을 추가하여 카카오와 함께 네이버 로그인 옵션을 제공했습니다. 네이버 로그인 API 연동 및 관련 라우터 수정도 포함됩니다.
사용자명 처리 개선: username이 10글자 이상일 경우, 뒤에 "..."을 추가하여 사용자명 표시를 깔끔하게 정리했습니다.
회원가입 로직 수정:
회원가입 완료 후 Zustand 상태에 userInfo가 제대로 저장되도록 수정했습니다.
이메일 인증 및 닉네임 중복 확인 과정에서 발생할 수 있는 예외 처리를 강화하여 오류 발생을 줄였습니다.
스타일 유지: RegisterOauth 페이지의 기존 'Register.scss'파일의 내용을 재사용해서 스타일(SCSS)을 유지하면서 기능적인 개선을 반영했습니다.
패키지 추가: react-naver-login 패키지를 설치하여 네이버 로그인 기능을 구현했습니다.
토큰 중복 처리 해결: 과거에 토큰 저장했던 방식과 현재의 상태과닐 방식이 혼재되어서 하나로 통합했습니다.
기타
로직 안전성 향상: undefined 상태에서의 예외 처리 및 조건부 렌더링을 추가하여 안정성을 높였습니다.
컴포넌트 구조 개선: 소셜 로그인 관련 컴포넌트의 코드를 통합하여 가독성을 개선하고, 코드 재사용성을 높였습니다.
확장성 고려: 앞으로의 확장성이나 다른 소셜 로그인 기능 추가를 고려한 구조적 개선이 포함되어 있습니다.
개요
이번 PR에서는 소셜 로그인 기능을 강화하고, 사용자 편의성을 높이기 위한 개선 작업을 진행했습니다. 또한 카카오(수정) 및 네이버(신규) 로그인 기능을 추가 및 수정하고, 사용자 정보 처리, JWT 처리 로직을 개선했습니다. 추가로, 회원가입 관련 UI 및 로직을 개선하여 사용자 경험을 향상시켰습니다.
구현 사항
social로 이동하여 소셜 로그인 관련 구조를 정리했습니다.username이 10글자 이상일 경우, 뒤에 "..."을 추가하여 사용자명 표시를 깔끔하게 정리했습니다.Zustand상태에userInfo가 제대로 저장되도록 수정했습니다.RegisterOauth페이지의 기존 'Register.scss'파일의 내용을 재사용해서 스타일(SCSS)을 유지하면서 기능적인 개선을 반영했습니다.react-naver-login패키지를 설치하여 네이버 로그인 기능을 구현했습니다.기타
undefined상태에서의 예외 처리 및 조건부 렌더링을 추가하여 안정성을 높였습니다.이미지
-네이버 로그인 화면
최초 회원가입 화면(카카오 로그인과 동일)
프로필 카드 출력
username이 너무 길어서 잘라줌 ->
소셜 최초 회원가입 이후 첫 로그인