버그 수정 및 채팅 자동 스크롤 및 새 메시지 알림 기능 구현을 통한 UX 개선

[KimKyuHoi]

Pull request

Related issue

• Resolve ChatSection Content 부분이 화면이 늘어나게 될 경우 Overflow 되는 현상 #215 @KimKyuHoi

Motivation and context

• 화면내에서 보통 채팅을 치게 될경우 화면이 overflow가 되는 경우 ChatTextarea가 밀려나는 버그가 있었습니다.

Solution

📌 채팅칠 시 Overflow가 될 경우 TextArea가 밀려나는 버그 개선

• 화면에 ChatTextArea를 sticky를 통해 명시적으로 밑으로 fix하였습니다.
• 또한 ChatContent같은 경우 min height을 0으로 조정 후 padding bottom 값을 조정하여 화면이 밀려나지 않도록 조정하였습니다.

📌 화면 스크롤 UX 개선

1. 자동 스크롤 기능 추가

• 사용자가 채팅을 보고 있는 동안 새 메시지가 도착하면 자동으로 하단으로 스크롤되도록 구현.
• 단, 사용자가 위로 스크롤하여 이전 메시지를 보고 있다면 자동 스크롤이 방해되지 않도록 차단.
• 새 메시지 도착 시 알림 기능 추가

2. 새 메시지 도착 시 알림 기능 추가

• 사용자가 이전 메시지를 보고 있는 중에 새로운 메시지가 도착하면 toast 알림을 띄움.
• 알림에는 도착한 새 메시지 개수가 표시됨.
• 사용자가 다시 스크롤을 아래로 내릴 경우 알림 제거

3. 사용자가 다시 스크롤을 아래로 내릴 경우 알림 제거

• 사용자가 하단으로 스크롤하면 새 메시지 개수를 초기화하고 toast 알림을 자동으로 제거.

How has this been tested

2025-02-18.11.32.50.mov

[netlify]

✅ Deploy Preview for jootalkpia ready!

Name	Link
🔨 Latest commit	c1efd62
🔍 Latest deploy log	https://app.netlify.com/sites/jootalkpia/deploys/67b4d27ccc21e60008196a49
😎 Deploy Preview	https://deploy-preview-235--jootalkpia.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[handje]

ui가 훨씬 예뻐졌네요! 👍
조건에 '내가 보내는 메시지' 라면 무조건 하단으로 자동 스크롤 되도록 하는건 어떠신가요?
이건 기획적인 부분이긴한데, 슬랙은 굳이 구분하지 않는 것 같고 카카오톡은 본인이 채팅을 보낼땐 무조건 내려가는 것 같습니다!
슬랙이 레퍼런스지만, 대댓글이 없는 채팅의 특징이 더 강해진 상황에서는 후자(카카오톡)의 기획이 더 사용성이 좋지 않을까하는 의견입니다 :)

[handje]

만약 분리가 가능하다면 useEffect를 분리하여 의존성을 줄이는 것도 좋을 것 같습니다.
예를 들면 scoll 감지 / toast 기능 이런식으로 분리는 어려울까요?

[KimKyuHoi]

음 근데 제가 알기로 useEffect는 state가 들어가게 되었을 경우 재렌더링이 일어나는 것으로 알고 있습니다.
그런데 저희가 isUserScrollingUp, newMessageCount, prevMessageCount이렇게 3가지 state를 업데이트 하고 있는데 useEffect를 나뉘게 된다면 의존성을 관리하기에는 용이하겠지만 불필요한 재렌더링이 일어날 수 있지않을까요?

[KimKyuHoi]

ui가 훨씬 예뻐졌네요! 👍
조건에 '내가 보내는 메시지' 라면 무조건 하단으로 자동 스크롤 되도록 하는건 어떠신가요?
이건 기획적인 부분이긴한데, 슬랙은 굳이 구분하지 않는 것 같고 카카오톡은 본인이 채팅을 보낼땐 무조건 내려가는 것 같습니다!
슬랙이 레퍼런스지만, 대댓글이 없는 채팅의 특징이 더 강해진 상황에서는 후자(카카오톡)의 기획이 더 사용성이 좋지 않을까하는 의견입니다 :)

좋은것 같습니다. 근데 지금 구현하기엔 일단 로그인을 통해서 날라오는 데이터와 비교하는게 맞다라고 생각하기때문에 로그인 부분 머지되는데로 추후 기능 추가하겠습니다.