[FEAT] 채팅방 컴포넌트 신규 생성

[wzrabbit]

이슈 번호

• 6

작업 요약

이 PR을 생성할 당시 아직 정해지지 않은 것이 많아, 적합하다고 생각하는 방법으로 임의로 구현했습니다. 이후 명세 회의에서 어떤 데이터를 채팅 데이터로써 다룰 것인지, 어느 위치에서 데이터 교환을 할 것인지(컴포넌트 자신? 컴포넌트는 prop만 넘겨주고 부모 컴포넌트에서?), 그 외의 여러 잡다한 기능들을 다시 정하면 좋을 것 같습니다.

본 PR에서는 채팅방 컴포넌트를 신규 생성했습니다. -- <ChatMenu>

이 컴포넌트는 회의 페이지에서 우측의 사이드 바 형태로 나타나는 채팅의 전반적인 기능들을 사용할 수 있도록 고안되었습니다.

컴포넌트의 구조

기본적인 기능 외에 아래의 부가 기능들을 지니고 있습니다.

• 입력 창에 입력되는 채팅의 양이 늘어나거나 줄어듦에 따라 채팅창의 높이가 변화합니다. 단, 100px 위로는 증가하지 않습니다.
• 기본적으로 Enter 키를 누르거나 전송 버튼을 클릭하면 메시지가 전송되는데, Shift + Enter를 누르는 경우에는 전송이 진행되지 않고 줄바꿈만 일어나도록 구현하였습니다. 사용자는 이를 활용해 여러 줄의 채팅을 입력할 수 있습니다.
• 입력된 값이 없거나 의미 없는 공백뿐인 경우 메시지의 전송을 막습니다.
• 알림의 개수가 일정 수를 넘을 경우 생략되어 표시됩니다. 현재 임의로 정한 알림의 최대 개수는 99개입니다. 99개의 알림을 넘는 경우에는 99+로 보이게 됩니다.
• 사이드 바가 닫혀 있는 경우에는 사이드 바는 완전히 비활성화된 상태가 됩니다. 모든 종류의 상호작용을 할 수 없게 되므로 사이드 바가 닫혀 있는 상황에서 사용자가 악의적으로 채팅 컴포넌트를 이용하는 것을 막습니다.

아직 구현되지 않은 부분은 아래와 같습니다.

• 이모지 입력 기능
• 실질적으로 입력된 채팅을 서버, 또는 클라이언트와 소통하는 비동기 로직

참고/인용 자료

<textarea>의 높이를 텍스트에 맞추는 방법

• https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length

채팅 사이드 바를 열고 닫는 장면

채팅 컴포넌트를 사용하는 시연 장면

https://github.com/user-attachments/assets/7aec3a69-2f69-419f-8c65-cc2cec04b9b7

논의

채팅방 컴포넌트는 기능을 생각하면 끝이 없을 정도로 무궁무진한 컴포넌트죠? 그만큼 많은 게 정해지지 않은 현재 상황에서는 정할 것이 많을 것 같습니다. 아래는 제가 떠올려 본 사항들이에요.

• 신규 채팅이 몇 개 이상일 경우 알림의 개수를 생략할까요? (최대로 표시할 알림의 개수)
• 이모지 메뉴는 어떻게 구성하고 디자인하는 것이 좋을까요?
• 사용자 자신이 보낸 메시지를 구별할까요? 구별한다면 어떤 UI를 사용하면 좋을까요?

[wzrabbit]

아, 맞아, 고쳐보고 싶은 게 생겨서 빠른 시일 내에 약간 변경사항 내려고 합니다. 혹시나 Approve를 하시더라도 요 PR은 아직 머지하시지는 마시고 기다려 주시면 감사하겠습니다!

[wzrabbit]

빠른 시일이라고 해놓고 늦게 작업해서 죄송합니다. 총 3가지를 고치겠다고 이야기했는데, 이 중 세 번째는 이 PR의 주제 밖이라 생각하여 따로 다른 PR 작성해서 작업하겠습니다!

1. 채팅 기록의 스크롤이 기본적으로 최하단으로 가도록 설정 ✅ -- aa0089812fc36f
2. 채팅 입력 창의 내용이 넘치지 않았는데도 스크롤이 생기는 문제를 해결 ✅ -- 099aa09878
3. Image / Img 네이밍 통일하기 - 다른 PR에서 다룰 예정

확인해 주시고 별다른 문제사항이 없다면 Approve 후 Merge 부탁드리겠습니다! 문제가 있다면 말씀해주세요.