Merge pull request #104 from yoon-jisung/dev

[Client] / fix: chat leck clear
codestates · May 6, 2021 · 9d27324 · 9d27324
2 parents 70dbcd5 + 05f1ad7
commit 9d27324
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 39 deletions.
diff --git a/src/GamePages/InGame.js b/src/GamePages/InGame.js
@@ -91,18 +91,10 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
     SetIsOpen(false);
   };
 
-  // const onMessageSubmit = (e) => {
-  //   const { name, message } = state;
-  //   socket.current.emit('message', { name, message });
-  //   e.preventDefault();
-  //   setState({ message: '', name });
-  // };
-
   const onMessageSubmit = (e) => {
     e.preventDefault();
     const { name, message } = state;
     socket.emit('send message', name, message);
-    // socket.emit('send message', name, message);
 
     setState({ message: '', name });
   };
@@ -112,8 +104,6 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
   };
 
   const startRound = () => {
-    // setIsPresenter(false);
-    // setPresenter({ nickname: '', id: '' });
     setWinner([]);
     setAnswer('');
     setIsPresenter(false);
@@ -126,19 +116,8 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
     socket.emit('set answer', { answer });
   };
 
-  // const endRound = () => {
-  //   socket.emit('end round');
-  // };
-
   //! --------------------------method--------------------------
 
-  // useEffect(() => {
-  //   socket.on('message', ({ name, message }) => {
-  //     setChat([...chat, { name, message }]);
-  //   });
-  //   console.log('채팅이야!!!!!', chat);
-  // }, [chat]);
-
   useEffect(() => {
     // * 문제가 선택되면 게임스타트와 문제를 서버에 보내줌
     SetAnswer(answer);
@@ -168,16 +147,22 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
       setWinner([...winner, name]);
     });
 
-    socket.on('show chat', (name, message) => {
-      console.log('너니 ?????', message);
-      setChat(chat.concat([{ name, message }]));
-    });
-
     socket.on('renew userlist', (list) => {
+      console.log('d우ㅠ저소ㅓ켓');
       setUserlist([...list]);
     });
   }, []);
 
+  useEffect(() => {
+    socket.on('show chat', (name, message) => {
+      if (chat.length > 10) {
+        setChat([...chat.slice(1), { name, message }]);
+      } else {
+        setChat([...chat, { name, message }]);
+      }
+    });
+  }, [state]);
+
   useEffect(() => {
     // * 사용자 정보 소켓으로 불러 오기
 
@@ -187,17 +172,6 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
     console.log('userlist', userlist);
   }, []);
 
-  // useEffect(() => {
-  //   // * 결과창이 열리고 서버에 라운드가 종료메세지 보냄 , 일정 시간이 지나면 결과창 닫히고 다시 게임 시작
-  //   const closeResult = setTimeout(() => {
-  //     setResultPopup(false);
-  //     setChat([]);
-  //     if (presenter.id === userInfo.id) {
-  //       startRound();
-  //     }
-  //   }, 3000);
-  // }, [resultPopup]);
-
   return (
     <>
       <div className="justBox"></div>

diff --git a/src/GamePages/components/Chat.js b/src/GamePages/components/Chat.js
@@ -22,6 +22,7 @@ export default function Chat({ chat, onMessageSubmit, onTextChange, state }) {
     <div className="card">
       <div className="render-chat">
         <h1>Chat Log</h1>
+
         {chat.map(({ name, message }, index) => {
           return (
             <div key={index}>

diff --git a/src/GamePages/components/User.js b/src/GamePages/components/User.js
@@ -2,6 +2,7 @@ import React from 'react';
 import UserPic from '../../images/Character1.png';
 
 export default function User({ users, userInfo }) {
+  console.log('유저!!', users);
   return (
     <div className="UserTable">
       <ul className="users">
@@ -10,7 +11,7 @@ export default function User({ users, userInfo }) {
             <div className="inGameUserNickName">{el.nickname}</div>
           </li>;
         })}
-        <li className="inGameUserProfile">
+        {/* <li className="inGameUserProfile">
           <img className="inGameImg" src={UserPic} alt="user_profile" />
           <div>
             <div className="inGameUserNickName">
@@ -30,7 +31,7 @@ export default function User({ users, userInfo }) {
         <li className="inGameUserProfile">
           <img className="inGameImg" src={UserPic} alt="user_profile" />
           <div className="inGameUserNickName">닉네임 : {userInfo.nickname}</div>
-        </li>
+        </li> */}
       </ul>
     </div>
   );