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

src/frontend/apps/web/src/features/chat/model/index.ts

@@ -6,3 +6,4 @@ export type {
 } from './websocket.type';
 export { useMessages } from './use-messages';
 export { useWebSocketClient } from './use-websocket-client';
+export { useChatAutoScroll } from './use-chat-autoscroll';

src/frontend/apps/web/src/features/chat/model/use-chat-autoscroll.ts

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState } from 'react';
+import { WebSocketResponsePayload } from './websocket.type';
+import { useToast } from '@workspace/ui/hooks/Toast/use-toast';
+
+export const useChatAutoScroll = (messages: WebSocketResponsePayload[]) => {
+  const bottomRef = useRef<HTMLDivElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [prevMessageCount, setPrevMessageCount] = useState(0);
+  const [isUserScrollingUp, setIsUserScrollingUp] = useState(false);
+  const [newMessageCount, setNewMessageCount] = useState(0);
+  const { toast, dismiss } = useToast();
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      const isAtBottom = scrollHeight - scrollTop <= clientHeight + 100;
+
+      setIsUserScrollingUp(!isAtBottom);
+      if (isAtBottom && newMessageCount > 0) {
+        setNewMessageCount(0);
+        dismiss('new-message');
+      }
+    };
+
+    container.addEventListener('scroll', handleScroll);
+
+    if (messages.length > prevMessageCount) {
+      if (!isUserScrollingUp) {
+        setTimeout(() => {
+          bottomRef.current?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+          });
+        }, 0);
+      } else {
+        setNewMessageCount((prev) => prev + 1);
+        toast({
+          title: '새 메시지가 있습니다',
+          description: `${newMessageCount + 1}개의 새 메시지가 도착했습니다.`,
+        });
+      }
+      setPrevMessageCount(messages.length);
+    }
+
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, [
+    messages,
+    isUserScrollingUp,
+    newMessageCount,
+    toast,
+    dismiss,
+    prevMessageCount,
+  ]);
+
+  return { bottomRef, containerRef };
+};

src/frontend/apps/web/src/features/chat/ui/chat-content.tsx

@@ -1,9 +1,9 @@
 import ContentText from './content-text';
 import ContentAvatar from './content-avatar';
 
-import { MessageSquareText } from 'lucide-react';
-import type { WebSocketResponsePayload } from '../model';
+import { useChatAutoScroll, type WebSocketResponsePayload } from '../model';
 import { processMessages } from '../lib';
+import { Toaster } from '@workspace/ui/components';
 
 export type ChatContentProps = {
   type?: 'default' | 'live';
@@ -21,6 +21,8 @@ const ChatContent = ({
   avatarUrls,
   setIsThreadOpen,
 }: ChatContentWithAvatarsProps) => {
+  const { bottomRef, containerRef } = useChatAutoScroll(messages);
+
   if (!messages || messages.length === 0) return null;
   console.log('🔗 ChatContent:', { messages });
 
@@ -32,6 +34,7 @@ const ChatContent = ({
   return (
     <>
       <div
+        ref={containerRef}
         className={`flex flex-col w-full pb-2 overflow-auto h-auto ${backgroundColor}`}
       >
         {processedMessages.map((messageData, index) => (
@@ -61,7 +64,9 @@ const ChatContent = ({
             </div>
           </div>
         ))}
+        <div ref={bottomRef} />
       </div>
+      <Toaster />
     </>
   );
 };

src/frontend/apps/web/src/features/chat/ui/chat-section-content.tsx

@@ -47,14 +47,14 @@ const ChatSectionContent = () => {
 
   return (
     <>
-      <div className="flex flex-col w-full h-full">
-        <div className="flex flex-1 flex-col w-full h-full overflow-y-auto">
+      <div className="flex flex-col w-full h-full relative">
+        <div className="flex flex-1 flex-col w-full min-h-0 overflow-y-auto pb-[64px]">
           <ChatContent
             setIsThreadOpen={setIsThreadOpen}
             messages={messages}
           />
         </div>
-        <div className="p-4">
+        <div className="pr-4 pl-4 pb-4 flex-shrink-0 sticky bottom-0 bg-white shadow-md">
           <ChatTextarea onSend={handleSendMessage} />
         </div>
       </div>

src/frontend/apps/web/src/features/chat/ui/header.tsx

@@ -1,6 +1,6 @@
 const Header = ({ children }: { children: React.ReactNode }) => {
   return (
-    <header className="h-[54px] w-full flex items-center justify-between px-4 bg-white border-b border-gray-200">
+    <header className="h-[54px] flex-shrink-0 w-full flex items-center justify-between px-4 bg-white border-b border-gray-200">
       {children}
     </header>
   );

src/frontend/packages/ui/src/components/Toast/index.ts

@@ -1 +1,12 @@
-export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction } from './toast';
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+} from './toast';
+export { Toaster } from './toaster';