From 05f1ad72c8942b88739a129d9c4920318db18630 Mon Sep 17 00:00:00 2001
From: yoon-jisung <hmsj2380@gamil.com>
Date: Fri, 7 May 2021 01:49:54 +0900
Subject: [PATCH] [Client] / fix: chat leck clear

---
 src/GamePages/InGame.js          | 48 ++++++++------------------------
 src/GamePages/components/Chat.js |  1 +
 src/GamePages/components/User.js |  5 ++--
 3 files changed, 15 insertions(+), 39 deletions(-)

diff --git a/src/GamePages/InGame.js b/src/GamePages/InGame.js
index 7b97a57..d118fd3 100644
--- a/src/GamePages/InGame.js
+++ b/src/GamePages/InGame.js
@@ -92,18 +92,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 });
   };
@@ -113,8 +105,6 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
   };
 
   const startRound = () => {
-    // setIsPresenter(false);
-    // setPresenter({ nickname: '', id: '' });
     setWinner([]);
     setAnswer('');
     setIsPresenter(false);
@@ -127,19 +117,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);
@@ -169,16 +148,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(() => {
     // * 사용자 정보 소켓으로 불러 오기
 
@@ -189,17 +174,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
index d4e9e84..ac8a4e1 100644
--- 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
index e587b49..d8a3485 100644
--- 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>
   );