Merge pull request #203 from jiho-bae/hotfix

Hotfix: 채팅 스크롤 조정, 채팅 전송버그 수정, 화면공유버튼 버그 수정

client/src/components/room/tadaktadak/ChatList.tsx

@@ -1,13 +1,13 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { useUser } from '@contexts/userContext';
 import useInput from '@hooks/useInput';
 import socket from '@src/socket';
 import Chat from './Chat';
 
 const INPUT_WIDTH = '90%';
-const CHAT_LIST_HEIGHT = '90%';
-const CHAT_INPUT_HEIGHT = '10%';
+const CHAT_LIST_HEIGHT = '80vh';
+const CHAT_INPUT_HEIGHT = '10vh';
 
 interface ChatListProps<T> {
   chats: Array<Record<string, T | undefined>>;
@@ -55,6 +55,7 @@ const Line = styled.div`
 const ChatList = ({ uuid, chats, setChats }: ChatListProps<string>): JSX.Element => {
   const { nickname } = useUser();
   const [message, onChangeMessage, onResetMessage] = useInput('');
+  const scrollRef = useRef<HTMLUListElement>(null);
 
   const sendMessage = useCallback(() => {
     if (!message) return;
@@ -71,12 +72,22 @@ const ChatList = ({ uuid, chats, setChats }: ChatListProps<string>): JSX.Element
   const handleMessageReceive = useCallback((chat) => setChats((prevState) => [...prevState, chat]), [setChats]);
 
   useEffect(() => {
+    socket.removeListener('msgToClient');
     socket.on('msgToClient', handleMessageReceive);
   }, [handleMessageReceive]);
 
+  useEffect(() => {
+    const { current } = scrollRef;
+    if (current !== null) {
+      current.scrollTop = current.scrollHeight;
+    }
+  }, [chats]);
+
   return (
     <Container>
-      <List>{chats.length > 0 && Object.values(chats).map((chat, idx) => <Chat key={idx} chat={chat} />)}</List>
+      <List ref={scrollRef}>
+        {chats.length > 0 && Object.values(chats).map((chat, idx) => <Chat key={idx} chat={chat} />)}
+      </List>
       <Line />
       <InputDiv>
         <Input

client/src/components/room/tadaktadak/ScreenShareDiv.tsx

@@ -25,7 +25,7 @@ const ScreenShareDiv = ({
     },
     'disable',
   );
-  const { ready, tracks } = useScreenVideoTrack();
+  const { ready, tracks, error } = useScreenVideoTrack();
 
   useEffect(() => {
     const pulishScreenShare = async () => {
@@ -44,7 +44,8 @@ const ScreenShareDiv = ({
       }
     };
     if (ready) pulishScreenShare();
-  }, [setStart, setScreenShare, screenShare, client, preTracks, trackState, tracks, ready]);
+    if (error) setScreenShare(false);
+  }, [setStart, setScreenShare, screenShare, client, preTracks, trackState, tracks, ready, error]);
 
   return <div></div>;
 };