채팅 컴포넌트 UX 개선 - 새 메시지 알림 및 스크롤 가이드 버튼 구현 #236
Conversation
- 마지막 메세지를 맨 아래에 띄우도록 absolute 적용
- NewMessage sender 추가, icon 삭제
kim-hyunjoo
added
✨기능
Summary of ChangesHello @kim-hyunjoo, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 채팅 컴포넌트의 사용자 경험을 개선하는 데 중점을 둡니다. 사용자가 채팅 기록을 탐색하는 동안 새로운 메시지를 놓치지 않도록 시각적인 알림과 편리한 스크롤 기능을 제공하여, 채팅 흐름을 보다 직관적이고 효율적으로 관리할 수 있도록 합니다. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| useEffect(() => { | ||
| //@TODO: 추후에 채팅을 실시간으로 보고 있을 때는 자동 스크롤, 위 채팅을 보고 있을 때는 자동 스크롤이 안되도록 기능 수정 | ||
| messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); | ||
| }, [chatMessages]); | ||
| if (chatMessages.length === 0) return; | ||
|
|
||
| const lastMessage = chatMessages[chatMessages.length - 1]; | ||
| const isSentByMe = lastMessage.sender === myName; | ||
| const container = messagesContainerRef.current; | ||
|
|
||
| if (!isAtBottom) { | ||
| setShowNewMessage(true); | ||
| } | ||
|
|
||
| if (container && (isSentByMe || isAtBottom)) { | ||
| container.scrollTop = container.scrollHeight; | ||
| } | ||
| handleScroll(); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [chatMessages, myName, handleScroll]); |
There was a problem hiding this comment.
안녕하세요! 새 메시지 알림 기능 구현을 위한 좋은 변경입니다. 다만 이 useEffect 훅의 안정성을 높이기 위해 몇 가지 개선점을 제안합니다.
- UI 깜빡임 (Flicker): 현재 코드에서는 스크롤을 위로 올린 상태에서 내가 메시지를 보내면 '새 메시지' 알림이 아주 잠깐 보였다가 사라지는 현상이 발생합니다.
eslint-disable주석:react-hooks/exhaustive-deps규칙을 비활성화하면,useEffect가 오래된isAtBottom값을 참조하여 예기치 않은 동작을 일으킬 수 있습니다(stale closure).
아래와 같이 setShowNewMessage 호출 조건을 수정하면 깜빡임 현상을 해결할 수 있습니다. eslint-disable 문제는 더 근본적인 리팩토링(예: useRef 사용)이 필요할 수 있지만, 우선 급한 UX 버그부터 수정하는 것이 좋습니다.
if (!isAtBottom && !isSentByMe) {
setShowNewMessage(true);
}
if (container && (isSentByMe || isAtBottom)) {
container.scrollTop = container.scrollHeight;
}
handleScroll();
// eslint-disable-next-line react-hooks/exhaustive-deps
There was a problem hiding this comment.
완료
isAtBottom이 배열에 들어가면 스크롤이 아래로 계속 고정되므로 반영x
src/components/Chatting/Chatting.tsx
Outdated
| > | ||
| {chatMessages.map((item, index) => ( | ||
| <Item | ||
| key={index} |
There was a problem hiding this comment.
리스트를 렌더링할 때 key로 배열의 index를 사용하는 것은 권장되지 않습니다. 배열의 순서가 변경되거나 항목이 중간에 추가/삭제될 경우 React가 컴포넌트 상태를 잘못 관리하여 예기치 않은 렌더링 오류나 성능 저하를 일으킬 수 있습니다. 각 메시지에 고유한 ID(예: message.id)를 부여하고 key로 사용하는 것이 가장 좋습니다. 메시지 데이터에 고유 ID가 없다면, 임시적으로 key={${item.sender}-${index}} 와 같이 조금 더 안정적인 키를 생성하는 것을 고려해볼 수 있습니다.
| variant="secondary" | ||
| > | ||
| <p className="text-body3 overflow-hidden text-ellipsis whitespace-nowrap"> | ||
| {sender != 'system' && `${sender}: `} |
There was a problem hiding this comment.
JavaScript에서는 타입 변환을 방지하기 위해 != 대신 !== 연산자를 사용하는 것이 권장됩니다. 이렇게 하면 예기치 않은 동작을 방지하고 코드의 의도를 더 명확하게 할 수 있습니다.
| {sender != 'system' && `${sender}: `} | |
| {sender !== 'system' && `${sender}: `} |
1 participant
📝작업 내용
📷스크린샷(필요 시)
KakaoTalk_Video_2025-10-10-18-01-01.mp4
✨PR Point