1. 친구 추가 시 Firestore DB에 저장
친구 찾기 기능을 이용하여 사용자 아이디를 검색하면 해당 사용자가 검색 결과로 나온다.
친구 추가하기 버튼을 클릭하면 친구 추가 진행 확인 alert가 뜨고, 확인 버튼을 클릭했을 때 Firestore DB에 저장된다.
현재 DB의 구조는 다음과 같이 되어있다.
users (컬렉션)
ㄴ사용자 이메일 (문서)
ㄴfriends (컬렉션)
ㄴ친구 이메일 (문서)
ㄴ친구 아이디 (필드)
ㄴ친구 이름 (필드)
로그인한 사용자의 문서 아래에 있는 friends 목록에 추가한 친구 정보가 등록되는 것이다.
이름은 추후에 수정 기능을 제공할 예정이라 필드에 넣고 싶지 않았는데
사이드바에 친구 목록을 불러오는 것을 구현할 때 중첩으로 DB를 읽어와야해서 비동기 처리가 필요한데
이것을 해결하지 못해서 나중에 다시 시도해보기로 하고, 현재는 이름 필드도 추가하게 해놨다.
2. 사이드바 친구 목록 표시
친구 추가, 그리고 나중에 구현될 친구 삭제 기능을 이용하여 친구 목록이 수정되면 친구 목록이 바로 업데이트될 수 있도록
첫 렌더링 후에 실행되는 useEffect 안에서 Firestore의 onSnapshot 메소드를 이용했다.
const loginEmail = useSelector(state => state.user.email); //redux에서 관리하는 로그인한 사용자 이메일
const [friends, setFriends] = React.useState([]); //친구 목록을 상태로 관리함
const usersFB = firestore.collection('users'); //Firestore에 있는 user 컬렉션
useEffect(() => {
usersFB.doc(loginEmail).collection('friends').onSnapshot((docs) => {
let listFromFB = [];
docs.forEach((doc) => {
listFromFB.push({id: doc.data().id, name: doc.data().name, chatRoomNum: doc.data().chatRoomNum});
});
setFriends(listFromFB);
})}, []);
DB에서 읽어온 친구 목록을 listFromFB라는 배열에 담고 이것을 상태로 넘겨주면 리렌더링 되면서 사이드바에 친구 목록이 반영된다.
친구 등록 후 사이드바에 해당 사용자가 추가된 모습이다.
3. 친구 이름 클릭 시 1:1 채팅방 팝업 띄우기
사이드바에 있는 친구 목록에서 각 사용자를 클릭하면 해당 사용자와 1:1 채팅을 할 수 있도록 채팅방 팝업을 띄운다.
리액트 라우팅에서 URL 파라미터를 이용하여 채팅 상대에 대한 정보를 전달한다.
전체적인 레이아웃 영역만 잡은 상태이고 조만간 채팅 메세지 레이아웃을 만들 예정이다.