Project Overview

프로젝트 GitHub 레파지토리

4인 1팀 프로젝트

• 할당된 과제를 4개로 분할해 각각 맡은 파트를 구현
• 내 메세지, 다른 사람 메세지, 메세지에 대한 답장이 가능한 메신저 창 구현

기간

2022.02.10 ~ 2022.02.12

기술 스택

• TypeScript
• React
• Styled-components
• Redux-toolkit

구현 사항

1. 대화 화면

• 대화창 접속 시 메세지 시간 순으로 정렬
• 메세지 전송시 대화 목록이 항상 가장 아래로 스크롤
• 내가 전송한 메세지 별도 구분 가능하도록 구현
• 보낸 날짜 및 시간 표시
• 답장, 삭제 버튼 구현

2. 일반 메세지, 답장 메세지

• 채팅을 입력하면 일반적인 메시지가 출력
• 메세지 옆에 나타나는 답장 아이콘을 클릭하면 답장과 함께 작성한 메세지가 출력되도록 함

3. 답장하기

• 기존 메세지 옆 답장 아이콘을 클릭하면 입력창 상단에 어떤메세지에 대해 답장을 하는지 정보를 띄워줌

결과

대화 화면

• 대화 내용에 있는 이름으로 로그인 했을 때, 대화 내용에 없는 이름으로 로그인 했을 때 두가지 상황을 달리 화면 구현

일반 메세지, 답장 메세지

답장하기

로그인해서 대화창 보기

메세지 삭제하기

Project Review

문제와 문제해결

메세지 컴포넌트 재활용 하기

메세지 버블은 '내 메세지', '내 답장 메세지', '네 메세지', '네 답장메세지' 4가지 상황으로 구분되며 색상차이와 이름 옆 * 표시와 메세지 버블 안에 답장 버블이 포함되있는 형태로 구분된다.
따라서 4가지 상황에 모두 대응하는 프랍스를 가진 컴포넌트를 만들지 프랍스를 간단하게 정리하면서 두가지 정도의 컴포넌트로 분리시킬지 고민이 있었다.

1. 채팅창 서비스 과정에서 '내', '네' 두가지의 메세지만 사용할 것이라는 판단
2. 두가지 컴포넌트로 분리하더라도 상위 단계에서 내 메세지와 내 메세지가 아님을 구분하는 프랍이 사용될것이라 예상

위 두가지 이유로 한가지 컴포넌트에 mine 프랍을 통해 내 메세지를 구분하도록 구현

대화 리스트 리덕스 구조 설정

1. 현재 로그인 상황임을 판단해야하고 대화 내용중 로그인된 사용자의 대화가 는지 구분했어야 했기 때문에 userId, 와 isLoggedIn 을 추가했으며 로그인한 사용자가 메세지를 작성했을때 사용하는 프로필 이미지와 유저네임이 추가됐음
2. 답장을 작성할때 입력창에 어떤 메세지에 답장을 하는지 구분할 필요가 있으므로 currentMessage 필드를 마련해 저장
3. 메세지 버블이 답장을 포함하고 있는지 구분하기 위해 reply 필드를 생성

느낀점

메세지 버블에 마우스를 올리는 상황에서 옆에 삭제, 수정 버튼이 출력되도록 해야했고 이 과정에서 styled-components의 체이닝 기법을 알게 됐다. 사이드 체인 형식으로 전혀 다른 컴포넌트에서 벌어지는 상황으로 다른 컴포넌트의 옵션이 변경되도록 하는 기능은 잘 응용한다면 매우 신박한 효과를 손쉽게 줄 수 있을거라 생각했다.

대화창이기 때문에 잛은 글들을 가독성 좋게 디자인해야할 필요성을 느끼게 됐는데 이 과정에서 카카오톡, 슬랙, 디스코드 의 대화창 형태의 이유에 대해 고찰하게 됐으며 각 서비스의 목적에 따라 버블, 블럭 형태를 선택했을거라 예상할 수 있었다.

프론트엔드 영역에서 사용자의 편의성, 심리까지 파악하는것이 매우 중요하다는 사실을 다시금 깨닫게 됐다.