이상무
미어캣의 채팅 뷰는 react-native-gifted-chat으로 구현되었습니다.
gifted chat에는 메시지 아래에 추가적인 메시지를 붙여주는 quick reply라는 기능이 있습니다. quick reply를 커스터마이징해서 어떻게 렌더링할지, 어떤 액션을 취해줄지도 설정할 수 있습니다.
글을 읽기 전 미어캣의 Message interface를 읽고 오시면 이해에 도움이 될 것입니다.
이상무 기능은 메시지에 이 메시지가 이상무 보고인지 아닌지 여부를 추가해서 구현했습니다. 이 정보를 이제부터 hasQuickReply라고 하겠습니다.
사용자가 이상무 버튼을 누르면 hasQuickReply가 true로 설정된 채로 메시지가 전송됩니다. 반대로 메시지 전송 버튼을 누르면 hasQuickReply가 false로 설정된 채로 메시지가 전송됩니다.
미어캣의 실시간 채팅 로직에서 보 수 있듯 클라이언트가 메시지를 전송하면 서버에서 해당 채팅방에 속한 모든 사람들에게 이벤트를 보내고, 클라이언트가 해당 이벤트를 받았을 때 메시지가 클라이언트의 화면에 렌더링됩니다. 이 때 메시지의 hasQuickReply가 true라면 gifted chat의 quick reply를 렌더링되며, 메시지에 있는 senderId에 따라 사용자에게 보이는 quick reply가 달라집니다.
채팅방에 있는 나머지 사용자는 이상무 보고를 할 수 있게 '보고하기' 버튼이 렌더링됩니다. 해당 버튼을 누르면 이상무 보고 페이지로 이동하며, 보고 종류 선택(이상무 또는 특이사항) 및 세부사항을 작성한 후 보고를 제출할 수 있습니다. 이미 보고를 제출한 경우에는 제출한 보고내용이 렌더링됩니다.
이상무 보고를 올린 사용자는 다른 사용자들이 응답한 이상무 보고를 볼 수 있게 '통계 확인' 버튼이 렌더링됩니다. 해당 버튼을 누르면 채팅방에 있는 사용자들의 응답을 볼 수 있는 페이지로 이동하며 이상 없음 보고한 사용자들의 응답, 특이사항 있음 보고한 사용자의 응답, 마지막으로 읽지 않은 전우들 3가지 정보를 확인할 수 있습니다.