From fff6e4d64458793a875dbd5454e0c38ba572521e Mon Sep 17 00:00:00 2001
From: syc0123 <yechul.shin@gmail.com>
Date: Tue, 31 Mar 2026 15:52:25 +0900
Subject: [PATCH] =?UTF-8?q?[RAPID-micro]=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?=
 =?UTF-8?q?=EC=97=B4=20=EB=95=8C=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A0=90?=
 =?UTF-8?q?=ED=94=84=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/messenger/ChatPanel.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/components/messenger/ChatPanel.tsx b/frontend/components/messenger/ChatPanel.tsx
index 6500b8da..edf1d7db 100644
--- a/frontend/components/messenger/ChatPanel.tsx
+++ b/frontend/components/messenger/ChatPanel.tsx
@@ -26,6 +26,7 @@ export function ChatPanel({ room, messageInputRef, onCaptureClick }: ChatPanelPr
   const { emitTypingStart, emitTypingStop, typingUsers } = useMessengerSocket();
   const scrollRef = useRef<HTMLDivElement>(null);
   const [isAtBottom, setIsAtBottom] = useState(true);
+  const [scrollReady, setScrollReady] = useState(false);
   const [isEditingName, setIsEditingName] = useState(false);
   const [editName, setEditName] = useState("");
   const editInputRef = useRef<HTMLInputElement>(null);
@@ -38,15 +39,25 @@ export function ChatPanel({ room, messageInputRef, onCaptureClick }: ChatPanelPr
 
   const lastMessageId = messages?.[messages.length - 1]?.id;
 
+  // Hide messages until scrolled to bottom (prevents visible jump on room open)
+  useEffect(() => {
+    setScrollReady(false);
+  }, [selectedRoomId]);
+
   // Scroll to bottom when messages load or room changes
   // Two-pass: immediate rAF + 600ms delayed (for async image loads)
   useEffect(() => {
-    const scrollToBottom = () => {
+    requestAnimationFrame(() => {
+      const el = scrollRef.current;
+      if (el) {
+        el.scrollTop = el.scrollHeight;
+        setScrollReady(true);
+      }
+    });
+    const t = setTimeout(() => {
       const el = scrollRef.current;
       if (el) el.scrollTop = el.scrollHeight;
-    };
-    requestAnimationFrame(scrollToBottom);
-    const t = setTimeout(scrollToBottom, 600);
+    }, 600);
     return () => clearTimeout(t);
   }, [lastMessageId, selectedRoomId]);
 
@@ -162,7 +173,7 @@ export function ChatPanel({ room, messageInputRef, onCaptureClick }: ChatPanelPr
       </div>
 
       {/* Messages */}
-      <div ref={scrollRef} className="flex-1 min-h-0 overflow-y-auto relative">
+      <div ref={scrollRef} className={`flex-1 min-h-0 overflow-y-auto relative${scrollReady ? "" : " invisible"}`}>
         <div className="pt-2">
           {messages?.map((msg, idx) => (
             <div key={msg.id}>