채팅 컴포넌트 버그 수정

frontend/src/components/ChatList/ChatList.style.ts

@@ -7,6 +7,7 @@ export const list = ({ theme }: { theme: Theme }) => css`
   gap: 1rem;
 
   height: 100%;
+  min-height: 100vh;
   padding: 2rem;
 
   background-color: ${theme.colorPalette.grey[100]};

frontend/src/components/ChatList/ChatList.tsx

@@ -1,4 +1,5 @@
 import Chat, { ChatMessageProps } from '@_components/Chat/Chat';
+import { useEffect, useRef, useState } from 'react';
 
 import { list } from './ChatList.style';
 import { useTheme } from '@emotion/react';
@@ -9,13 +10,36 @@ interface ChatListProps {
 
 export default function ChatList(props: ChatListProps) {
   const { chats } = props;
+  const [lastChats, setLastChats] = useState<ChatMessageProps[]>([]);
+  const messageEndRef = useRef<HTMLDivElement | null>(null);
+  const observer = useRef<IntersectionObserver | null>();
   const theme = useTheme();
 
+  useEffect(() => {
+    observer.current = new IntersectionObserver(() => {
+      if (lastChats.length === chats.length) return;
+      if (messageEndRef) messageEndRef.current?.focus();
+    });
+    if (messageEndRef.current) observer.current.observe(messageEndRef.current);
+  }, [messageEndRef, lastChats, chats]);
+
+  useEffect(() => {
+    if (lastChats.length === chats.length) return;
+    const latestMyMessageIndex = chats.findLastIndex(
+      (chat) => chat.isMyMessage,
+    );
+    if (latestMyMessageIndex >= lastChats.length)
+      messageEndRef?.current?.focus();
+
+    setLastChats(chats);
+  }, [lastChats, chats]);
+
   return (
     <div css={list({ theme })}>
       {chats.map((chat) => (
         <Chat key={chat.message + chat.time} {...chat} />
       ))}
+      <div ref={messageEndRef}></div>
     </div>
   );
 }

frontend/src/components/ChattingFooter/ChattingFooter.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FormEvent, useState } from 'react';
+import { ChangeEvent, FormEvent, useRef, useState } from 'react';
 import {
   footer,
   menuButton,
@@ -22,6 +22,7 @@ export default function ChattingFooter(props: ChattingFooterProps) {
   const [isMenuClicked, setIsMenuClicked] = useState(false);
   const [message, setMessage] = useState('');
   const theme = useTheme();
+  const input = useRef<HTMLInputElement | null>(null);
 
   return (
     <div css={footer({ theme })}>
@@ -39,6 +40,7 @@ export default function ChattingFooter(props: ChattingFooterProps) {
           e.preventDefault();
           onSubmit(message);
           setMessage('');
+          input.current?.focus();
         }}
         css={messageForm({ theme })}
       >
@@ -52,6 +54,7 @@ export default function ChattingFooter(props: ChattingFooterProps) {
             setMessage(e.target.value)
           }
           required
+          ref={input}
         />
         <button css={sendingButton} type="submit" disabled={message === ''}>
           <SendButton disabled={message === ''} />

frontend/src/components/ChattingPreview/ChattingPreview.style.ts

@@ -5,8 +5,9 @@ export const container = css`
   align-items: center;
   justify-content: space-between;
 
+  width: 100%;
   height: 10rem;
-  padding: 0 2rem;
+  padding: 2rem;
 
   border-radius: 25px;
   box-shadow: 0 0 10px 0 #00000040;