From e608e31a9671b72501d8894ae5b0edc47cf62a4a Mon Sep 17 00:00:00 2001
From: yoon-jisung <hmsj2380@gamil.com>
Date: Thu, 6 May 2021 14:22:50 +0900
Subject: [PATCH 1/2] [Client] / #39 / fix : css

---
 src/GamePages/InGame.js | 25 -------------------------
 src/main.css            |  3 ++-
 2 files changed, 2 insertions(+), 26 deletions(-)

diff --git a/src/GamePages/InGame.js b/src/GamePages/InGame.js
index 42dbc8f..d9cc2e1 100644
--- a/src/GamePages/InGame.js
+++ b/src/GamePages/InGame.js
@@ -142,31 +142,6 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
   //! --------------------------method--------------------------
 
   useEffect(() => {}, [minutes, seconds, isTrueTimer]);
-  // useEffect(() => {
-  //   loginCheck(isLogIn);
-  // });
-
-  // useEffect(() => {
-  //   if (isTrueTimer) {
-  //     const countdown = setInterval(() => {
-  //       if (parseInt(seconds) > 0) {
-  //         setSeconds(parseInt(seconds) - 1);
-  //       }
-  //       if (parseInt(seconds) === 0) {
-  //         if (parseInt(minutes) === 0) {
-  //           clearInterval(countdown);
-  //           handleResult();
-  //         } else {
-  //           setMinutes(parseInt(minutes) - 1);
-  //           setSeconds(59);
-  //         }
-  //       }
-  //     }, 1000);
-  //     return () => {
-  //       clearInterval(countdown);
-  //     };
-  //   }
-  // }, [minutes, seconds, isTrueTimer]);
 
   useEffect(() => {
     // * 메세지
diff --git a/src/main.css b/src/main.css
index 11fddbc..fe92eb1 100644
--- a/src/main.css
+++ b/src/main.css
@@ -837,12 +837,13 @@ canvas {
 }
 
 .card {
-  border: 2px solid red;
   background-color: white;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+  border: 5px solid #0f4d86;
+  border-radius: 15px;
 }
 .card h1 {
   text-align: center;

From 8bd2ce5719e78907bdf8f5891301f35ed79115fa Mon Sep 17 00:00:00 2001
From: yoon-jisung <hmsj2380@gamil.com>
Date: Thu, 6 May 2021 18:25:12 +0900
Subject: [PATCH 2/2] save

---
 src/GamePages/InGame.js          | 36 ++++++++++++++++++++++++--------
 src/GamePages/components/Chat.js |  6 +-----
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/GamePages/InGame.js b/src/GamePages/InGame.js
index d9cc2e1..dfd16c2 100644
--- a/src/GamePages/InGame.js
+++ b/src/GamePages/InGame.js
@@ -11,9 +11,10 @@ import GameStartBtn from './components/GameStartBtn';
 import Words from '../Words';
 import GameOver from './components/IsInGameMsg';
 import { useHistory } from 'react-router-dom';
+import moment from 'moment';
 
 const socket = io.connect('http://localhost:4000', {
-  transports: ['websocket', 'polling'],
+  transports: ['websocket'],
   path: '/socket.io',
 });
 
@@ -101,16 +102,23 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
     return chat.map(({ name, message }, index) => (
       <div key={index}>
         <h3>
-          {name}: <span>{message}</span>
+          {name}: <span>{message}</span>{' '}
         </h3>
       </div>
     ));
   };
 
+  // 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;
-    socketRef.current.emit('message', { name, message });
+    socket.emit('message', { name, message });
     setState({ message: '', name });
   };
 
@@ -143,13 +151,21 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
 
   useEffect(() => {}, [minutes, seconds, isTrueTimer]);
 
+  // useEffect(() => {
+  //   // * 메세지
+  //   socketRef.current = io.connect('http://localhost:4000');
+  //   socketRef.current.on('message', ({ name, message }) => {
+  //     setChat([...chat, { name, message }]);
+  //   });
+  // }, [chat]);
   useEffect(() => {
-    // * 메세지
-    socketRef.current = socket;
-    socketRef.current.on('message', ({ name, message }) => {
-      setChat([...chat, { name, message }]);
+    socket.on('message', ({ name, message }) => {
+      if (chat.length > 4) {
+        return setChat([]);
+      }
+      return setChat([...chat, { name, message }]);
     });
-    // return () => socketRef.current.disconnect();
+    console.log('채팅이야!!!!!', chat);
   }, [chat]);
 
   useEffect(() => {
@@ -181,7 +197,7 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
     });
 
     socket.on('renew userlist', (list) => {
-      setUserlist(list);
+      setUserlist([...list]);
     });
   });
 
@@ -193,7 +209,9 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
 
     let parsedUrl = window.location.href.split('/');
     let roomNum = parsedUrl[parsedUrl.length - 1];
+    console.log(roomNum);
     socket.emit('send roomNum', roomNum);
+    console.log('userlist', userlist);
   }, []);
 
   useEffect(() => {
diff --git a/src/GamePages/components/Chat.js b/src/GamePages/components/Chat.js
index 214ea38..5aacc20 100644
--- a/src/GamePages/components/Chat.js
+++ b/src/GamePages/components/Chat.js
@@ -1,5 +1,3 @@
-import React, { useState, useEffect } from 'react';
-import moment from 'moment';
 import TextField from '@material-ui/core/TextField';
 
 export default function Chat({
@@ -9,8 +7,6 @@ export default function Chat({
   state,
   renderChat,
 }) {
-  console.log(chat);
-
   return (
     <div className="card">
       <div className="render-chat">
@@ -18,7 +14,7 @@ export default function Chat({
         {renderChat()}
       </div>
 
-      <form onSubmit={(e) => onMessageSubmit(e)}>
+      <form onSubmit={onMessageSubmit}>
         <div className="msgBtn">
           <TextField
             name="message"