shape

로그인 상태 관리 개발
유효성 검사 테스트 작성

프로젝트 설명

코드스테이츠 통합 로그인 개발 프로젝트.
통합 로그인 상태 관리와 마이페이지 개발 담당

기술 스택

  • React.js
  • typescript
  • Next.js
  • Zustand
  • Styled-components
  • Jest
  • React-testing-library
  • Storybook
  • Tanstack-query
  • React-hook-form

참여인원

5명 (PM 1, PD 1, FE 2, BE 1)

기간

2023.04 ~ 2023.08

상세 내용

  1. 마이페이지 개발
    • 사용자 정보 조회, 수정 기능 개발
    • 이메일, 전화번호 변경시 인증 과정 구현. 유효성 검사 과정에 대한 단위 테스트 코드 작성
    • UI 리뷰 및 QA를 위해 페이지 단위 Storybook 코드 작성 (msw 연결, Chromatic 이용해 배포)
  2. 통합 로그인 상태 관리 개발
    • localStorage의 통합 로그인 토큰을 서로 다른 도메인의 페이지에서 접근할 수 있도록 구현\n(cross-storage 라이브러리 사용)
    • 로그인 완료 후 기존 페이지로 돌아가도록 하는 continueUrl 상태관리 구현 (zustand, localStorage 활용)
    • 로그인이 필요한 페이지 접근시 로그인 여부 및 토큰 유효성을 확인하는 HOC 작성
  3. 레거시 서비스 코드 관리
    • 레거시 서비스에 통합 로그인 과정 연결 (신규 서비스 개발 이전까지 활용할 목적)
    • 미사용 코드 삭제. 유관부서에 사용 여부 및 계획 확인 후 진행
    • 절대 경로 적용 (Craco 이용하여 webpack alias 수정)