📌 GNB & Footer ⇒ User Information, Logout
![[1] 만다라트 작성 - 대목표 작성.png](attachment:3f3bfd40-566d-4917-9d06-bb9d11190189:1_%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%A1%E1%84%85%E1%85%A1%E1%84%90%E1%85%B3_%E1%84%8C%E1%85%A1%E1%86%A8%E1%84%89%E1%85%A5%E1%86%BC_-_%E1%84%83%E1%85%A2%E1%84%86%E1%85%A9%E1%86%A8%E1%84%91%E1%85%AD_%E1%84%8C%E1%85%A1%E1%86%A8%E1%84%89%E1%85%A5%E1%86%BC.png)
해당 이미지에서 서버와 관련된 화면 설계 부분은 다음과 같습니다.
<aside>
✨
- 프로필 버튼
- 구글 프로필 이미지 노출
- 클릭 시, 6. 프로필 상세 필드 노출
- 프로필 상세 필드
- 프로필 이미지
- 사용자 회원가입 시 사용한 구글 프로필 이미지 노출
- 이름 텍스트
- 사용자 회원가입 시 사용한 구글 이름 노출
- 이메일 텍스트
- 사용자 회원가입 시 사용한 구글 이메일 노출
- 로그아웃 버튼
- 클릭 시, 로그아웃 처리
</aside>
이에 따른 기능은 다음과 같습니다.
- 사용자 정보 불러오기
- 클라이언트에 사용자 이름, 이메일, 프로필 이미지를 넘겨줍니다.
- 로그아웃
- 리프레시 토큰 쿠키를 만료시키고, DB에서 해당 토큰을 삭제하여 로그아웃으로 처리합니다.
📌 구글 로그인
![[0-1] 구글 로그인.png](attachment:349e027e-9110-4910-86a3-b99fcca9e205:0-1_%E1%84%80%E1%85%AE%E1%84%80%E1%85%B3%E1%86%AF_%E1%84%85%E1%85%A9%E1%84%80%E1%85%B3%E1%84%8B%E1%85%B5%E1%86%AB.png)
해당 이미지에서 서버와 관련된 화면 설계 부분은 다음과 같습니다.
<aside>
✨
- 구글 로그인 버튼
- 클릭 시, 구글 로그인 실행
- 회원인 경우) 구글 로그인
- 상위 목표까지 입력 후 서비스를 이탈한 유저는 [0-2] 중도이탈로 이동
- 하위 목표까지 입력한 유저는 [4] 할 일로 이동
- 비회원인 경우) 구글 계정으로 회원가입
- [0-1-1] 회원가입으로 이동
</aside>
이에 따른 기능은 다음과 같습니다.
- 구글 로그인
- 클라이언트가 구글에서 받아온 code를 이용하여 구글에서 사용자 정보를 조회할 수 있는 accessToken을 받아옵니다.
- 해당 accessToken을 이용하여 구글에서 사용자 정보 조회
- 불러온 사용자 정보가 DB 에 있는 경우 로그인시키며, 이때 해당 유저의 온보딩 필요 여부와 진입 페이지를 함께 알려줍니다.
- DB에 존재하지 않는 경우, 해당 사용자 정보와 함께 회원가입이 필요함을 클라에 알립니다.