3주차_스프린트

1. 개발 계획

• 백로그를 토대로 매일 각자 자신의 할 분량을 정하기!

2. 3주차 계획

• 프론트엔드 이벤트 구현

  • 모달 온 / 오프 (리팩토링) => 요청 모달
  • 회원가입 정보 전달
  • 로그인 연동
  • 팀 정보 수정하기 연동
  • 팀 생성 연동
  • 팀원 초대하기 연동
  • 개인 정보 수정하기
  • 무한 스크롤 - 프로필
  • 무한 스크롤 - 채팅

• 백엔드 API 구현

  • 로그인

  • 회원가입

  • 팀 생성

  • 팀 정보 가져오기

  • 팀원 초대하기

  • 유저 정보 획득

  • 채팅방 정보 가져오기

  • 채팅 내역 추가 가져오기

  • 요청 목록 가져오기

  • 로그아웃

  • 소개 프로필 가져오기

  • 참여 채팅방 정보 가져오기

  • 프로필 정보를 전달할 떄 INDEX를 기준으로 전달하도록 , LIMIT 설정도 필요 - 수정 필요

  • 카카오 소셜 로그인

  • 깃 소셜 로그인

  • 네이버 소셜 로그인

  • 소개 1:1 페이지 - 그룹 들어오는 오류 발생

  • 소개 N:N 페이지 - 그룹별 멤버 들어오는 로직 필요

• 전역상태 관리(Recoil)

  • 유저 정보 관리
  • 팀 정보 관리
  • 참석한 채팅방 정보 관리
  • 프로필 정보 관리
  • 채팅 정보 관리
  • 요청 정보 관리

• 프론트엔드 이벤트 에러 처리

  • 회원가입 실패
  • 로그인 실패
  • 채팅 실패
  • 팀 초대 실패 - 없는 아이디 일 때
  • 팀 수정 실패 - 리더가 아닐 시
  • 요청 페이지 모달 이벤트
  • 팀 설정 value값
  • 개인 설정 value값
  • 채팅 무한 스크롤 위치 수정

• 백엔드 세팅 설정

  • .eslintrc.json파일 설정
  • .prettierrc.json 파일 설정
  • 백엔드 파일 위의 설정대로 수정

• 리팩토링 ( 주말 )

  • eslint
  • 재사용 고려하지 않아도되는 코드 ( ex : loginPage )
  • Profile Card
  • 로그인 실패시 redirect 되지 않고 모달 창 띄우기 필요
  • 드랍다운 중복코드 제거

3.데모 시나리오

메인페이지

• 메인 페이지 상단 헤더바의 오른쪽에는 로그인을 하지 않으면 로그인버튼,
• 로그인을 하였다면 유저버튼이 생성된다.
• 메인 페이지 이미지를 호버하면 각 페이지로 갈 수 있는 버튼이 생성됨

로그인페이지

• 네이버, 카카오, 깃허브 Ouath 로그인, 로컬 로그인 선택 가능
• Oauth가 기존 아이디에 연동안되있을 시 기존 로컬 아이디와 연동
• 회원가입 버튼 클릭 시 회원 가입 페이지로 이동

회원가입 페이지

• 아이디 입력 후 아이디 체크 클릭 시 ID 중복 검사 가능
• 패스워드 입력 후 패스워드 일치 여부 검사 가능
• 회원 가입 버튼을 클릭하면 회원 가입 진행
• 아이디 / 비밀번호 / 지역 / 나이 / 소개 / 성별 / 을 받습니다.

소개팅 페이지(1:1 / N:N)

• 소개팅 페이지 상단에 지역/카테고리 를 필터링할 수 있는 바가 있습니다
• 상단 바의 지역/카테고리 버튼을 클릭하면 드롭다운이 생성됩니다.
• 상단 바 - 드롭다운 버튼을 클릭하면 소개팅 페이지에 렌더링 되는 프로필이 필터링 되어 보여집니다.
• 남성 프로필 카드는 파란색, 여성 프로필 카드는 분홍색, 그룹 프로필 카드는보라색 경계선을 가집니다.
• 프로필 카드에는 프로필 이미지, 이름, 성별, 나이 등의 정보가 나타납니다
• 프로필 카드를 클릭 시 해당 유저 또는 그룹의 상세 정보를 확인할 수 있는 모달이 나타납니다.
• 그룹 프로필을 클릭했을 시에는 그룹 상세 정보와 더불어 그룹원들의 정보또한 확인할 수 있습니다.
• 상세 정보 모달에는 채팅신청하기 버튼이 있습니다.
• 채팅 신청하기를 클릭 했을 시 요청이 올바르게 전달되었다면 요청이 성공했다는 모달이 뜨며 창이 닫힙니다.

마이페이지

내 정보 보기

• 나의 정보와 프로필 사진을 확인할 수 있다.
• 정보와 프로필 사진을 수정할 수 있다.

내가 고른 이상형

• 내가 찜해놓은 사람들의 프로필 리스트를 확인할 수 있다.
• 프로필을 클릭할 경우 상세정보 모달창이 보여진다.
• 모달창에서 채팅을 신청할 수 있다.

나의 문의사항 보기

• 내가 작성한 문의사항 리스트를 확인할 수 있다.
• 누를경우 상세 문의 페이지로 이동한다.

리뷰

• 사람들이 나에게 작성한 리뷰 목록을 볼 수 있다.
• 해당 리뷰를 클릭할 경우 상세한 리뷰를 확인할 수 있다.

채팅목록 페이지

• 활성화 되어 있는 채티방을 볼 수 있다
• 채팅방을 클릭하면 해당 채팅방의 채팅 목록을 볼 수 있다.
• 채팅 목록에서 채팅방에 참가 중인 모든 사용자의 프로필을 볼 수 있다.
• 추가하기 버튼 클릭시 추가기능 페이지로 이동한다.
• 채팅 목록에서 나가기 버튼을 클릭 시 채팅방 페이지를 나갈 수 있다.

요청목록 페이지

• 나에게 온 요청 / 내가 보낸 요청 두가지를 볼 수 있다.
• 요청에 대한 상태가 나타난다.

나에게 온 요청

• 상대방이 보낸 요청을 확인할 수 있다.
• 요청에는 상대방의 프로필창이 있다.
• 프로필을 누를 경우 상대방의 상세 정보를 보여주는 모달이 나타난다.
• 수락을 누를경우 채팅방이 개설되고 채팅 페이지로 이동한다.
• 거절을 누를 경우 해당 요청은 삭제되고 상대방은 거절된것을 확인할 수 있다.

내가 보낸 요청

• 내가 채팅신청을 보낸 상대방의 정보를 볼 수 있다.
• 프로필을 누를 경우 상세 정보를 보여주는 모달창이 나타난다.
• 상대방의 수락,거절,대기중 등 상태를 오른쪽에서 확인할 수 있다.
• 대기중일 경우 요청을 취소할 수 있다.

추가기능 페이지

• 왼쪽 사이드에는 채팅 기능이 있어서 미팅룸에 있는 인원들과 채팅을 나눌 수 있습니다.
• 우측 사이드에는 기본적으로 화상채팅이 들어가 있습니다.
• 게임하기 버튼을 클릭하면 게임 선택 모달창이 생성됩니다.
• 게더타운 버튼을 클릭하면 게더타운 캐릭터 선택 모달창이 생성됩니다.

화상채팅

• 화상채팅에서는 음소거 / 비디오 아이콘이 있어서 음소거 및 비디오 관련 상태를 관리해줄 수 있다.
• 박스 내부에 채팅 참여 인원들의 비디오가 나타난다.
• 나가기 버튼을 클릭하면 이전 페이지로 이동한다.

게임

• 게임 1은 캐치마인드이다.
• 주제어를 제시하여 '진행자'는 주제어를 나타낼 그림을 그린다.
• 정답을 맞춘 인원이 '진행자'가 된다.
• 음소거 및 비디오를 관리할 수 있다.
• 나가기 버튼을 클릭하면 이전 페이지로 이동한다.

게더타운

• 캐릭터를 선택하고 나면 게더타운에 내 캐릭터로 입장이된다.
• 캐릭터는 상하좌우 이동이 가능하다.
• 음소거 및 비디오를 관리할 수 있다.
• 나가기 버튼을 클릭하면 이전 페이지로 이동한다.

공지사항

• 웹 서비스에 대한 공지사항이 올라온다.
• 공지사항 글을 클릭하면 디테일 페이지로 넘어간다.

이벤트

• 웹 서비스에 대한 이벤트 내용이 올라온다.
• 글을 클릭하면 디테일 페이지로 넘어간다.

문의사항

• 문의사항을 작성할 수 있다.
• 나가기 버튼을 클릭하면 이전 페이지로 이동한다.

4. [ 2 ~ 5 주차 ] 계획

모여서 할 때

- 오전에 각자 리뷰달기 및 데일리 스크럼
- 오후 1시에 만나기
- 저녁시간 전까지 풀 개발
- 개인 코딩 및 학습

각자 할 때

- 오전에 각자 리뷰달기 및 데일리 스크럼
- 이 후 알아서 요령 것

역할 분담

- 다수결
- 되도록 자기가 자신 없는 부분 맡아서 진행하기

알고리즘

- 오후 9시 ~ 오후 10시 알고리즘 학습

단, 일일 개발 분량 성취하기

유동적으로 일정 변경됌

---

4. 이번 주차의 각자의 각오

• 김영진 : 이벤트 처리 및 상태관리 마스터해버리겠다.

• 민태홍 : 남자친구를 구하겠다.

• 홍한솔 : 이번 주 조져버리겟다

• 이윤성 : 백엔드 공부 화이팅