jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[RAPID-fix] 스크롤 근본 원인 수정: isOpen deps 추가로 메신저 열릴 때마다 하단 스크롤

Browse Source
This commit is contained in:
syc0123
2026-03-31 16:23:05 +09:00
parent 0780410506
commit 6fdc4d8fb8
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/components/messenger/ChatPanel.tsx
View File

@@ -16,7 +16,7 @@ interface ChatPanelProps {
export function ChatPanel({ room }: ChatPanelProps) { export function ChatPanel({ room }: ChatPanelProps) {
const { user } = useAuth(); const { user } = useAuth();
const { selectedRoomId } = useMessengerContext(); const { selectedRoomId, isOpen } = useMessengerContext();
const { data: messages } = useMessages(selectedRoomId); const { data: messages } = useMessages(selectedRoomId);
const markAsRead = useMarkAsRead(); const markAsRead = useMarkAsRead();
const updateRoom = useUpdateRoom(); const updateRoom = useUpdateRoom();
@@ -38,14 +38,15 @@ export function ChatPanel({ room }: ChatPanelProps) {
// Scroll to bottom: sentinel scrollIntoView before paint (no visible jump) // Scroll to bottom: sentinel scrollIntoView before paint (no visible jump)
useLayoutEffect(() => { useLayoutEffect(() => {
bottomRef.current?.scrollIntoView(); if (isOpen) bottomRef.current?.scrollIntoView();
}, [selectedRoomId, lastMessageId]); }, [selectedRoomId, lastMessageId, isOpen]);
// Second pass for async image loads // Second pass for async image loads
useEffect(() => { useEffect(() => {
if (!isOpen) return;
const t = setTimeout(() => { bottomRef.current?.scrollIntoView(); }, 600); const t = setTimeout(() => { bottomRef.current?.scrollIntoView(); }, 600);
return () => clearTimeout(t); return () => clearTimeout(t);
}, [lastMessageId, selectedRoomId]); }, [lastMessageId, selectedRoomId, isOpen]);
// Re-attach scroll listener whenever room changes (scrollRef mounts after room is set) // Re-attach scroll listener whenever room changes (scrollRef mounts after room is set)
useEffect(() => { useEffect(() => {