Dev

src/App.js

@@ -27,7 +27,7 @@ export default function App() {
 
   //로그인 상태 관리하기--------------------------------
   useEffect(() => {
-    refreshTokenRequest();
+    // refreshTokenRequest();
     if (accessToken.accessToken !== null) {
       history.push('/Waiting');
     }

src/GamePages/InGame.js

@@ -50,11 +50,9 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
   }, [locationKeys]);
 
   // ! Chat
-  const socketRef = useRef();
   const [state, setState] = useState({ message: '', name: userInfo.nickname });
-  // ! App.js 에서 유저이름 name에 넣으면 됨 !
-
   const [chat, setChat] = useState([]);
+  // ! App.js 에서 유저이름 name에 넣으면 됨 !
 
   // ! SelectWords
   const [Word1, SetWord1] = useState('');
@@ -94,16 +92,6 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
     SetIsOpen(false);
   };
 
-  const renderChat = () => {
-    return chat.map(({ name, message }, index) => (
-      <div key={index}>
-        <h3>
-          {name}: <span>{message}</span>{' '}
-        </h3>
-      </div>
-    ));
-  };
-
   // const onMessageSubmit = (e) => {
   //   const { name, message } = state;
   //   socket.current.emit('message', { name, message });
@@ -115,6 +103,8 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
     e.preventDefault();
     const { name, message } = state;
     socket.emit('send message', name, message);
+    // socket.emit('send message', name, message);
+
     setState({ message: '', name });
   };
 
@@ -145,10 +135,7 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
 
   // useEffect(() => {
   //   socket.on('message', ({ name, message }) => {
-  //     if (chat.length > 4) {
-  //       return setChat([]);
-  //     }
-  //     return setChat([...chat, { name, message }]);
+  //     setChat([...chat, { name, message }]);
   //   });
   //   console.log('채팅이야!!!!!', chat);
   // }, [chat]);
@@ -183,8 +170,8 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
     });
 
     socket.on('show chat', (name, message) => {
-      console.log(message);
-      setChat([...chat, { name, message }]);
+      console.log('너니 ?????', message);
+      setChat(chat.concat([{ name, message }]));
     });
 
     socket.on('renew userlist', (list) => {
@@ -194,9 +181,6 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
 
   useEffect(() => {
     // * 사용자 정보 소켓으로 불러 오기
-    socket.on('my socket id', (data) => {
-      console.log('mySocketID : ', data);
-    });
 
     let parsedUrl = window.location.href.split('/');
     let roomNum = parsedUrl[parsedUrl.length - 1];
@@ -253,7 +237,6 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
             chat={chat}
             onTextChange={onTextChange}
             onMessageSubmit={onMessageSubmit}
-            renderChat={renderChat}
           />
         </div>
 

src/GamePages/components/Chat.js

@@ -1,22 +1,43 @@
 import TextField from '@material-ui/core/TextField';
 
-export default function Chat({
-  chat,
-  onMessageSubmit,
-  onTextChange,
-  state,
-  renderChat,
-}) {
+export default function Chat({ chat, onMessageSubmit, onTextChange, state }) {
+  const throttle = (callback, delay) => {
+    let previousCall = new Date().getTime();
+    return function () {
+      const time = new Date().getTime();
+      console.log('실행되니 ????');
+      if (time - previousCall >= delay) {
+        previousCall = time;
+        callback();
+      }
+    };
+  };
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      onMessageSubmit(e);
+    }
+  };
+
   return (
     <div className="card">
       <div className="render-chat">
         <h1>Chat Log</h1>
-        {renderChat()}
+        {chat.map(({ name, message }, index) => {
+          return (
+            <div key={index}>
+              <h3>
+                {name}: <span>{message}</span>
+              </h3>
+            </div>
+          );
+        })}
       </div>
 
       <form onSubmit={onMessageSubmit}>
+        <input type="text"></input>
         <div className="msgBtn">
-          <TextField
+          <input
+            onKeyPress={handleKeyPress}
             name="message"
             onChange={(e) => onTextChange(e)}
             value={state.message}

src/GamePages/components/User.js

@@ -2,7 +2,6 @@ import React from 'react';
 import UserPic from '../../images/Character1.png';
 
 export default function User({ users, userInfo }) {
-  console.log(userInfo);
   return (
     <div className="UserTable">
       <ul className="users">

src/MyPages/MyPage.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { withRouter } from 'react-router-dom';
 import SearchUser from './components/SearchUser';
 import Header from './components/Header';
+import axios from 'axios';
 import ChangePsw from './components/ChangePsw';
 import Character1 from '../images/Character1.png';
 import Character2 from '../images/Character2.png';