Api 및 소켓 기획

Data Request Flow

App.tsx
- 로그인 여부 확인 get
- 로그인 했으면? 사용자정보 요청 get
  - 사용자 정보에 뭐가 있지?
  - ID, Email , Phone-Number, Age, Location,
  - 참가한 채팅방 번호 목록 => 소켓 연동 => 안읽은 메세지 테이블
  - 프로필 이미지 , 팀 이미지 , 팀 명 , 팀 소개 , 팀 가능 시간 , 팀 지역 , 팀 평균 연령 , 팀 장

Recoil = {
    user : {
        id : yj,
        image : Image,
        email : [email protected],
        P-N : 010-dfas,
        Location : 우만동,
        age : 23,
        teamID : 팀명,
        joinChatRooms : [{
             roomID : 1,
             안읽은 메세지 수 : 5,
             },{
            roomID : 2,
            안읽은 메세지 수 : 4,
            }],
        }
}

MainPage.tsx
TeamPage.tsx recoil에 저장된 teamID 값이 있는지 없는지로 '팀 생성'이 보이던지 아니면 '팀 설정'이 보이는지
- create
  - 데이터 post
- info
  - 리코일에 접근해서 팀명 구해와서 요청하기
  - 요청 결과 값 예시 : [{ image : asfdadsf, teamID : 팀명, info : asdfsafd, time : 월, 금 오후 3시, location : 우만동, age : 23, leader : false, member : [{ id : yj, image : Image, email : [email protected], P-N : 010-dfas, Location : 우만동, image : asffasd, age : 23 },'bob','alice'] }]
CowDogPage.tsx
- person 값에 따라 프로필 데이터 요청 get
- 채팅 신청하기 => api post => 서버에서 db 접근 => 에러나면 client response = false => 실패 알림 => 정상이면 client response = true => 모달창 생성 => 정상적이면 서버에서 클라이언트로 socket.emit(TO_CLIENT)
Project.tsx
- 리액트 퍼블릭에 이미지 저장
MyPage.tsx
- 리코일에 존재하는 MyInfo 값 참조하여 그리기
- Edit 버튼 => patch(일부 수정이라)
- 클라이언트에서도 recoil 수정
- 내가고른 이상형 (지하 130층)
- 나의 문의사항 보기 (지하 130층)
ChatPage.tsx
- recoil에 chatsInfo가 null이면 데이터 요청 => get => recoil에 저장된 joinChatRooms의 roomID로 promise.all 요청 ( 20개 )해야함
- 안 읽은 메시지가 있는 채팅방을 클릭할경우 => patch => roomID값을 보내주면 roomID(채팅방)의 메시지를 모두 읽음 처리
- 클라이언트에서도 recoil 상태값 변경 => 왜냐하면 또 다시 데이터 요청(get) 하기 싫음
- ChatPage에서 Message List 를 보여줄때 useEffect를 사용해서 roomID와 userID를 보내면 server에서는 변수로 저장을 하여 이후 메세지를 보낼때 어떤 user가 어떤 페이지를 보고 있는지 확인 할 수 있다.user가 해당 페이지 (roomID)를 보고 있다면 읽음으로 디비 저장 및 소켓 전송할 수있고, 서버에서 저장한 변수를 통해 해당 페이지를 읽지 않음을 나타낸다면 디비 저장을 읽지 않음으로, 소켓 전송을 읽지 않음으로 보낸다.
ChatDetailPage.tsx
- webRTC 이용하여 화상,음성채팅 구현
- 조금 더 학습해서 진행
- 게임하기 클릭하면 게임 방장 권한 생성(권한이라 해봤자 게임 선택하기 일뿐 )
- socket연동해서 게임하기 전송 => 게임 선택 모달창 오픈
- 게임 선택 완료되면 게임 진행
- 게더타운 클릭하면 socket 연동해서 캐릭터 선택 모달창 오픈
- 입장하기 클릭하면 게더타운 렌더링
캐치마인드
- 실시간 채팅 새로 연동
- 그림 그리는거 소켓 연동
게더타운
- 코드 복붙 예정
RequestPage.tsx
- 서버에 ID를 보내서 요청 관련 DB 데이터 받아오기 get
- 받아온 데이터 Recoil 저장
- Recoil 예시 [{ from : 누가, to : 누구에게, state : 대기중 or 승인 or 거절 }] 누구에게가 나라면 => 수락 / 거절 보여야함 무조건 대기중만 보여야함 누가가 나라면 => state에 따라서 보여지기
- 수락/ 거절 -> post 요청
LogInPage.tsx
- Oauth get
- 로컬 로그인 get
RegisterPage.tsx
- post