[FE] 유저 플로우 차트 작성 - 100-hours-a-week/2-hertz-wiki GitHub Wiki
유저 플로우 차트 바로가기
1. 로그인 및 개인 정보 입력
1-1. 회원가입/로그인 (Kakao OAuth)
- 사용자는 카카오 소셜 로그인을 통해 서비스에 접속함
- 이 과정에서 사용자의 ID가 저장됨
1-2. 온보딩 및 정보 입력
-
로그인 후 처음 접속한 사용자로 감지되면 사용자는 온보딩을 통해 자신의 프로필을 설정해야 함, 키워드 개수로 적절하게 분류해 총 4페이지로 구성됨. 매칭 시 AI에서 온보딩 시 선택한 공통 키워드를 알고리즘을 사용해 계산함.
1-3. 온보딩
- 개인정보 키워드 입력 온보딩
- 선택지 확인하기
- 프로필 이미지 (6개의 제공된 이미지 중 택 1)
- 성별 선택
- 나이 (20-29 / 30-39 / 40-49 / 50-59 / 60-)
- 기업 및 교육기관용 이메일 → 이메일 인증
- 닉네임 선택 (입력 x / 새로고침으로 선택)
- 한줄소개
- 취향 입력 온보딩
-
선택지 확인하기
(단일 선택)
- MBTI (page 1)
- 종교 (page 1)
- 흡연 (page 1)
- 음주 (page 1)
(복수 선택)
- 나의 성향 (page 2)
- 원하는 상대 성향 (page 2)
- 요즘 관심사 (page 3)
- 좋아하는 음식 (page 3)
- 좋아하는 운동 (page 3)
- 반려동물 (page 4)
- 자기계발 (page 4)
- 취미 (page 4)
1-4. 이메일 인증 페이지
온보딩 중 이메일 ‘인증하기’ 버튼 클릭 시 입력된 메일로 인증 메일 보냄
→ 메일 인증 성공 / 실패 시 띄워질 페이지 렌더링
→ 다시 수동으로 서비스로 돌아오면 ‘인증 완료’로 버튼 변경
→ 이어서 나머지 정보 입력하며 온보딩 진행
1-2 부터 1-4 까지 모두 입력 시 ‘저장하기’ 버튼을 누르면 매칭 큐에 등록됨, 동일한 조직에 소속된 유저 중 상호 조건이 맞는 사람끼리 짝이 지어지도록 매칭 로직 동작 → AI에서 유사도 계산 및 필터링이 이루어짐
2. 메인 페이지
2-1. 개인 / 그룹 탭에서 선택한 후 상세 카테고리도 선택 (친구, 연인, 밥친구)
2-2. 개인 매칭 선택 시 1-1 ~ 1-4 에서 선택한 정보를 기반으로 AI 매칭이 진행됨
2-3. 그룹 매칭 선택 시 그룹 채팅방 목록으로 리다이렉트
3. 개인 매칭 (시그널 상태)
3-1. 개인 매칭 진행 시, AI에서 매칭 완료 응답이 올 때까지 로딩중 화면을 띄움
3-2. 매칭이 완료되면 연관성이 높은 순서대로 정렬해서 사용자 상세페이지를 보여줌, 사용자는 닉네임과 한줄소개, 키워드 및 관심사를 확인한 후 마음에 드는 매칭상대일 때 첫 채팅을 보낼 수 있음
3-3. 첫 채팅을 보내면 채팅방 페이지가 생성되며 1초 후 자동으로 이동함
3-4. 채팅 진행
4. 개인 매칭 (매칭 상태)
4-1. 시그널 상태에서 첫 대화 후 3시간이 지나면 [‘행복한 튜브’님과의 매칭에 동의하시겠습니까?] 모달이 뜸
1) 한 명이라도 매칭에 동의하지 않은 경우 - 채팅방 입력창이 비활성화되며 ‘매칭이 실패하였습니다. 채팅방 나가기’가 화면에 표시됨
2) 한 명만 매칭에 동의하고, 다른 한 명은 선택하지 않은 경우 - [‘행복한 튜브’님의 응답을 기다리고 있습니다.] 모달이 표시됨
3) 두 명 모두 매칭에 동의한 경우 - ‘매칭에 성공하였습니다. 매칭 모드로 전환합니다.’라는 토스트 메세지와 함께 채팅 말풍선, 프로필 이미지 테두리가 핑크색으로 변경됨 (매칭 상태)
4-2. 채팅 진행
4-3. 다음 날 00시를 기점으로 그 전까지 매칭된 이성 커플을 집계해 오후 12시에 튜닝 리포트가 발행됨
5. 그룹 채팅
5-1. 그룹 채팅을 선택하였을 경우, 카테고리 선택 (스터디, 동아리, 밥친구)을 완료하면 그룹 채팅방 목록이 보여짐.
1) 채팅방 참가자인 경우 - 키워드에 맞춰 렌더링된 채팅방 목록에서 자신이 원하는 채팅방을 클릭함 → 채팅방 상세페이지에서 채팅방 이름 및 한줄소개, 방장 및 채팅방 유저 정보를 확인한 후 참가하기를 선택할 수 있음
1-1) 참여하고 싶은 채팅방인 경우
채널 입장하기 버튼을 클릭해 그룹 채팅에 참여함
1-2) 참여하고 싶지 않은 채팅방인 경우
뒤로가기 버튼을 눌러 목록으로 다시 돌아감
1-3) 채팅 진행
2) 채팅방 주최자인 경우 - 우측 하단 플러스 버튼을 클릭해 ‘채팅방 개설하기’ 페이지를 열어 채팅방 제목, 한줄소개, 본인을 포함한 최대 인원을 입력해 채널을 생성함
6. 채팅 탭
6-1. 채팅 탭 클릭 시 개인 / 그룹으로 다시 선택할 수 있음
1) 개인 탭 선택 시 - 개인 채팅방 목록이 뜸 → 개인 채팅방 클릭 시 시그널 상태이면 [3-4], 매칭 상태이면 [4-2]로 이동
2) 그룹 탭 선택 시 - 그룹 채팅방 목록이 뜸 → 그룹 채팅방 클릭 시 [1-3]으로 이동
7. 마이페이지 탭
7-1. 수정 관련 액션 클릭 시 1) 프로필 수정 버튼 클릭 시 프로필 수정 페이지로 이동
2) 키워드 수정 버튼 클릭 시 키워드 수정 페이지로 이동
7-2. 계정 관련 액션 클릭 시
1) 로그아웃 버튼 클릭 시
[정말 로그아웃 하시겠어요? 로그아웃 버튼 클릭 시, 계정은 유지되며 언제든 다시 로그인할 수 있어요.] 모달이 뜸 → ‘로그아웃하기’ 클릭 시 로그인 페이지로 리다이렉트
2) 회원탈퇴 버튼 클릭 시 [정말 탈퇴 하시겠어요? 탈퇴 버튼 클릭 시, 회원정보 및 기존의 모든 기록이 삭제돼요.] 모달이 뜸 → ‘탈퇴하기’ 버튼 클릭 시 회원 정보 삭제 및 로그인 페이지로 리다이렉트
8. 알림 탭
8-1. 알림 탭 클릭 시 알림 목록 페이지로 이동
1) 알림이 공지 관련 내용인 경우
클릭 시 ‘…’ 표시되어 있던 컴포넌트가 아래로 늘어나며 모든 공지 내용을 확인할 수 있음
2) 알림이 매칭 관련 내용인 경우
클릭 시 해당 매칭과 관련된 리포트 상세 페이지로 이동
9. 리포트 탭
9-1. 리포트 탭을 클릭하면 리포트 목록을 확인할 수 있음 (최신순 / 인기순 정렬 가능)
9-2. 리포트 목록에서 이모티콘으로 반응을 남길 수 있으며, 클릭 시 해당 리포트의 상세 페이지로 이동함