💻 프로젝트

개발인원 | 프론트 3명 , 백엔드 5명

개발기간 | 22.07 - 22.08 (3주)

🔗  Links

배포 주소 | https://riding-is-good.netlify.app/

FE Git | https://github.com/prgrms-web-devcourse/Team-Forest-RG-FE

팀 노션 | [팀 05] Forest

서비스 소개

RG 는 쉽고 빠르게 자전거 모임을 주최하고, 참여할 수 있는 서비스 입니다.

기존의 모임 서비스(네이버카페 및 도싸 커뮤니티)가 가지는 문제를 해결하고자 하였습니다.

• 모임주최자는, 정해진 형식이 없는 자유 게시글 형식으로 게시글 작성에 오랜 시간이 소요된다.
• 모임참여자는, 내가 참여할만한 자전거 모임을 빠르게 발견하기 어렵다.

RG는 다음과 같은 기능을 통해 문제를 해결합니다.

1. 쉽고 빠르게 작성할 수 있는 자전거 모집 특화 Form 제공
2. 다양한 필터를 통한 빠른 모임 검색
3. 주최/참가한 모임 관리 기능 제공

🛠 기술 스택

• React | Typescript | Recoil | Storybook

🧑🏽‍💻 담당 역할 및 기능

• 인증 및 인가, 유저 관련 페이지 담당
• 팀 내 스크럼 진행 및 노션 문서화 담당

🖥 세부 개발 내용

1. 인증 및 인가

• 1) 인증 로직 설계
  • AccessToken을 LocalStorage에 저장하는 인증 로직 설계
  • AccessToken을 Recoil State로, RefreshToken을 Cookie에 저장하는 인증 로직으로 리팩토링
    • RefreshToken을 secure, httpOnly 옵션을 설정하여 CSRF 공격을 대비
• 2) CustomRoute를 통한 로그인 유지 및 인가 처리
  • Route를 감싸고 있는 AuthRoute 구현
    • 페이지 이동 / 새로고침이 발생할 때 마다, 현재 state로 보관 중인 AcessToken의 유효성을 확인
    • API 요청 응답에 따라, 현재 로그인 여부(isAuth)를 update
• 3) AxiosInterceptor를 활용하여 토큰 refresh 진행
  • AxiosInterceptor의 request 옵션을 통해, 현재 AceessToken을 항상 request Header에 담아 전송
  • AccessToken 만료의 경우, Cookie에 저장된 RefreshToken을 통해 새로운 AccessToken을 발급받고, 기존 request를 다시 요청함
    • RefreshToken 만료 응답이 올 경우, 기존 저장된 Token을 모두 삭제하고 로그인 페이지로 redirect

2. 유저 페이지

• 1) 유저 정보 수정 및 유저 평가 기능 구현
• 2) Storybook을 통한 개발 및 컴포넌트 공유