프로젝트명
토키워키(Talkie Workie) - 실시간 웹메신저
참여기간
2022.02.07 - 2022.02.12
개발스택
Typescript | React | Redux
프로젝트 설명
"토키워키"는 원티드 프리온보딩 팀 멤버들과 함께 진행한 프로젝트입니다. 다양한 협업 도구들이 존재하지만, 우리만의 특별한 소통 메신저를 만들어보자는 취지에서 시작되었습니다. 토키워키는 유저를 선택하면 채팅방에 입장할 수 있는 기능을 제공합니다. Redux를 사용하여 채팅 메시지의 상태(추가, 수정, 삭제)를 관리하고, Firebase를 이용한 데이터베이스를 통해 채팅 데이터를 실시간으로 확인할 수 있습니다.
프로젝트 구현 사항
1. 메세지 전송/추가 기능
•
Redux 상태 추가 : UPDATE_CONTENT 액션을 추가하여 input 창에 새 메세지 입력 후 전송(버튼 클릭 or Enter키 입력)하면 입력텍스트, 날짜, 유저id, 텍스트id 가 Redux state에 추가되도록 구현
•
firebase DB 업데이트 : updateContentData 유틸함수를 만들고 새 메세지 입력 후 전송(버튼 클릭 or Enter키 입력)하면 입력텍스트, 날짜, 유저id, 텍스트id 가 firebase DB로 전송되도록 구현
•
현재 접속한 유저가 보낸 메시지는 이름 옆에 * 문자가 출력
•
멀티라인 기능 추가 : textAreaRef 를 만들어 height가 scrollHeight 값으로 바뀌도록 설정.
•
메세지 추가 시 전송 날짜 순 정렬 : content.sort((a:Content, b:Content)=>a.date-b.date)
•
렌더링 및 메세지 추가 시 scrollIntoView 를 사용해서 가장 아래로 scroll down 되도록 구현.
2. 메세지 수정 기능
•
Firebase에서 사용자의 데이터 정보를 가져오는 getUserData 와 채팅 메세지의 데이터 정보를 가져오는 getContentData 함수를 utils에 생성
•
메세지의 수정 버튼을 클릭 시 해당 메세지의 값이 들어있는textarea 가 나타나고, 수정을 한 뒤에 Enter 입력 또는 버튼을 클릭하면 수정
버튼을 클릭하면 수정•
db에서 수정될 수 있도록 editContentData 함수 생성
•
db에 반영된 정보를 UI에 실시간으로 보여주기 위한 상태관리 (action, reducers , dispatch )
•
Firebase 배포
3. 메세지 답장 기능
•
답장 버튼을 클릭했을 때 replyObj라는 state를 업데이트해주는 액션과 리듀서를 생성하여 답장 기능 상태관리를 구현
•
form 컴포넌트에서 replyObj state를 받아와 textarea의 value에 입력해주는 작업을 수행
•
이후, textarea의 높이가 동적으로 세팅되지 않는 문제가 발생하였음. 따라서 답장내용 텍스트 내에서 \\n 의 개수를 찾기 위해 정규표현식과 String.match()를 활용하여 직접 textarea의 height값이 계산되어 부여될 수 있도록 구현
4. 메세지 삭제 기능
•
Redux 상태 추가: REMOVE_CONTENT 액션 추가로 삭제 이모지 클릭 시 해당 입력텍스트, 날짜, 유저id, 텍스트id가 filter로 인해 삭제 되도록 Redux state에 구현
•
DB 삭제 : removeContentData 유틸함수를 만들고 삭제 이모지 클릭 시 해당 입력텍스트, 날짜, 유저id, 텍스트id 가 firebase DB에서 삭제 되도록 구현
•
삭제 이모지 클릭 시 alert창 활용
◦
삭제할 메시지 표현(최대10글자)후 그 이상의 글은 “...” 으로 표기
◦
확인 / 취소 버튼을 나누어 선택 역할 구분