핵심 기능
- 특정 사용자에게 메세지를 전송할 수 있다.
- 나의 메세지 목록을 조회할 수 있다.
- 특정 사용자와 나눈 메세지를 읽음 처리할 수 있다.
특정 사용자에게 메세지를 전송할 수 있다.
글쓰기 버튼을 클릭하면, 유저 검색을 통해 새로운 메세지를 보낼 수 있는 모달이 뜹니다.
해당 사이트의 모든 회원에 대해 검색이 가능합니다. 별다른 버튼 없이 실시간으로 검색이 가능합니다. 디바운싱을 적용하여 타이핑 중에는 검색 API함수가 호출되지 않고 스켈레톤 UI가 나타나도록 최적화를 했습니다. 해당 함수는 추후에 팔로우 모달 검색 기능에도 사용됩니다.
// 메세지 사용자 검색 모달, 팔로우/팔로잉 모달에서 사용되는 공용 유틸 함수입니다. const useDebouncedSearch = ({ inputRef, follows = [], callback, delay = 200 }: Props) => { const debouncedSearch = debounce(() => { if (!inputRef || !inputRef.current) { return; } const query = inputRef.current.value.trim(); callback(query, follows); }, delay); return debouncedSearch; }; export default useDebouncedSearch;
검색 결과가 나오면 원하는 상대를 선택해 대화를 시작할 수 있습니다.
이미 대화를 했던 사람은 기존 채팅방이 오픈되고, 처음 대화하는 사람은 채팅을 보내야 채팅방이 개설됩니다.
이 외에도 외부에서 상대방에게 메세지 보내기 버튼을 누르면 다이렉트 메세지 페이지로 이동해 해당 유저와의 채팅방이 열리게 됩니다.
나의 메세지 목록을 조회할 수 있다.
다이렉트 메세지 페이지 접속 시 나의 채팅방 목록을 조회할 수 있습니다. 각 대화방을 클릭하면 해당 유저와의 채팅방이 열리며 기존 대화 내용 조회가 가능하고, 새로운 메세지를 보낼 수 있습니다.
테블릿, 모바일 환경에서는 채팅방 목록과 채팅방이 분리됩니다. 대신 채팅방에 뒤로가기 버튼이 생겨 화면 전환이 자유롭게 가능합니다.
또한 반응형 css를 구현했기 때문에 자연스러운 전환이 이루어집니다.
실시간 대화가 가능합니다. 별도의 소켓 API가 존재하지 않아 채팅방 목록과 채팅방을 불러오는 API함수를 주기적으로 호출하여 자연스럽게 대화가 가능하도록 만들었습니다. 해당 기능은 react-query의
refetchInterval 옵션을 통해 구현했습니다.
채팅방에서는 날짜가 달라질 때 마다 날짜를 새로 표기해주고, 채팅방 목록에서는 마지막 메세지가 언제 왔는지 표기합니다. API는 UTC 시간으로 제공하므로 한국 시간으로 바꿔주는
UTCtoKST 공용 유틸 함수를 구현했습니다. 사용자가 편리하게 채팅 기능을 사용할 수 있도록 처음 들어가거나 메세지를 보내면 스크롤이 맨 아래로 고정됩니다.
사용자의 헤더 클릭 시 유저 상세 페이지로 이동하도록 라우팅했습니다.
특정 사용자와 나눈 메세지를 읽음 처리할 수 있다.
다른 사용자가 사용자에게 메세지를 보내는 경우, 새로운 메세지가 도착했다는 뱃지가 옆에 부착됩니다. 해당 사용자와의 대화창으로 들어가면 메세지가 읽음 처리가 되며 뱃지가 사라집니다.
이미 해당 사용자와 계속 대화하고 있는 경우에는 바로 메세지 알림을 읽게 됩니다. 또한 외부에 있다가 알림 모달을 통해 메세지 페이지로 접속하는 경우에도 바로 메세지를 읽도록 처리합니다.