Channel 구현 체크리스트

BE

• resolver, service 임시 구현 (~10/31)
• user 에 channel field 추가
• 유저 권한에 따라 kick, ban, mute 가능 여부 설정
• 사이트 관리자는 owner 권한 가지도록 수정
• owner 양도 기능
• 채널 들어가기 기능
• 채널 떠나기 기능
• owner 자동 양도
• 마지막 유저가 떠나면 방 삭제
• admin 권한 부여 기능
• 친구 초대 기능(?)

FE

📝 진행 과정

• ChannelList 페이지: 컴포넌트화 (11/1)
• ChannelListContents 컴포넌트: gql 연결 (11/2)
• ChannelCreateModal 컴포넌트: 목업 구현 (11/3)
• ChannelCreateModal 컴포넌트: gql 연결 (11/3)
• Channel 페이지: 컴포넌트화 (11/4)
• Chatting 컴포넌트: subscription 공부 및 gql 연결 (11/4~11/5)
• Channel & ChannelList 페이지: 중요 동작 구현 및 컴포넌트 구체화 (11/6~11/7)
• Channel & ChannelList 페이지: 세부 동작 구현 (11/9~11/12)

세부 동작 구현

• Chatting 컴포넌트: 채팅창 스크롤 맨 아래로 고정하기
• UserSummary 컴포넌트: 폭 변경하거나 아예 개선하기
  -> UserSuammry는 그대로 두고, 사용할 때 로 감싸 display: inline-block 옵션을 주었음
• 스크롤을 SocialDrawer 안쪽으로 옮기기
• 엔터 입력 시 채팅 전송
• ban, mute, block 등을 위한 NicknameMenu 개선
• mute gql 연결 및 mute된 사람의 input 막기
• channel_role에 따라 NicknameMenu 다르게 뜨도록 구현
• 차단(blackliist) 구현 #39
• editChannel 구현

직면한 백엔드적 이슈

• in, out을 subscription으로 하는데 만약 publish를 클라이언트가 못받는 경우엔?
  아니면 주기적으로 participants를 쿼리로 받아와야할까?
• Channel 페이지: chat 입력시 subscription이 두번 오는 이슈
  -> subscribeData에 대한 useEffect로 임시 해결
• enterChannel 백엔드 에러: "null value in column "channel_role" of relation "channel_user" violates not-null constraint"
• 이미 mute된 참가자에게 다시 mute를 걸면?
  -> mute 안되게 하기로...
• 새로고침 시 mute에 대한 프론트 캐싱이 없어짐. 백엔드에서 새로 정보를 줘야 하는데... 어떻게?
  -> Channel에 mute, ban 등에 대한 필드 사용
• mute 시 가끔 뜨는 Unhandled Rejection (Error): Cannot read properties of undefined (reading 'add') 에러는 뭘까? 새로고침 후에 다시 와서 해보면 된다... 뭐지?
  -> 백엔드의 mutedUser 클래스의 add 함수의 문제였어서 수정 완료
• channel_role과 site_role을 UserRole enum으로 둘 다 커버하는 듯?

✨ 추후 개선할만한 사항들

• ParticipantsList: 참가자 많아지면 어떻게 되는지 확인 안함
• Channel 컴포넌트들 height 개선 필요
• mute 알림 Alert에서 Snackbar로 교체 시도
• 전체적인 리팩토링: query를 상위 컴포넌트에서 한번에 하는 것이 나을까?
• ChannelCreateModal: title 미입력시 방 생성 막기 ⭐️
• ChannelList: subscription으로 방 목록 갱신
• ChannelList: private, public에 따른 필터링
• ChannelList: 랜덤 입장 구현
• Channel: switch문 리팩토링
• Channel: 현재는 subscription이 들어오면 refetch하지만, 그냥 write와 read로 로컬 스테이트에서 하는 것이 나을까? 아폴로의 동작 원리를 정확히 모르겠다. 아폴로 캐시 등의 이유로 refetch해도 그리 비효율적이지 않은 것인지... 아니면 개선하는 것이 나은지를 모르겠다.
• Chatting: blacklist, mutedUsers 등이 배열이라 메세지를 필터링할 때 배열을 순회해야 한다. 비효율적인 것 같은데?
• CSS: 80%, 75vh 등이 너무 지저분하다! 어떻게 개선할 수 있지?
• ChannelEditModal: 이전의 title, password 뜨도록
• ChannelEditModal, ChannelCreateModal: password는 가려져 나오도록 하면 낫지 않을까? 그리고 중복이 많으니 하나의 컴포넌트로 합칠 수도?