total test

src/App.js

@@ -7,6 +7,7 @@ import InGame from './GamePages/InGame';
 import Character1 from './images/Character1.png';
 import { useHistory } from 'react-router-dom';
 import './main.css';
+import Bgm from './Bgm';
 
 const axios = require('axios');
 
@@ -79,14 +80,14 @@ export default function App() {
       .then((res) => {
         console.log(res.message);
         console.log(res.data.data);
-        const { nickname, email, profile_image, comment,id } = res.data.data;
+        const { nickname, email, profile_image, comment, id } = res.data.data;
         // !
         setUserInfo({
           id: id,
           nickname: nickname,
           email: email,
           profile_image: profile_image,
-          comment: comment
+          comment: comment,
         });
       });
   };
@@ -142,7 +143,7 @@ export default function App() {
 
   return (
     <div>
-      <button onClick={refreshTokenRequest}>리프레쉬 토큰</button>
+      <Bgm />
       <Switch>
         <Route
           path="/Waiting"
@@ -184,7 +185,7 @@ export default function App() {
           render={() => (
             <Main
               loginHandler={loginHandler}
-              handleGeuetLogin={handleGeuetLogin}
+              handleGuestLogin={handleGuestLogin}
             />
           )}
         />

src/Bgm.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+import BGM from './bgms/bgm1.mp3';
+import useSound from 'use-sound';
+
+export default function Bgm() {
+  //!bgm
+  const [play, { stop }] = useSound(BGM);
+  const [bgmOff, setBgmOff] = useState(false);
+
+  const handleBGM = () => {
+    if (bgmOff) {
+      setBgmOff(false);
+      stop();
+    } else {
+      setBgmOff(true);
+      play();
+    }
+  };
+  return (
+    <div>
+      {bgmOff ? (
+        <button className="bgm" onClick={handleBGM}>
+          On
+        </button>
+      ) : (
+        <button className="bgm" onClick={handleBGM}>
+          Off
+        </button>
+      )}
+    </div>
+  );
+}

src/GamePages/InGame.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import Canvas from './components/Canvas3';
+import ListnerCanvas from './components/ListnerCanvas';
 import Timer from './components/Timer';
 import User from './components/User';
 import BackBtn from './components/BackBtn';
@@ -10,13 +11,17 @@ import io from 'socket.io-client';
 import GameStartBtn from './components/GameStartBtn';
 import Words from '../Words';
 import GameOver from './components/IsInGameMsg';
+import { useHistory } from 'react-router-dom';
+import Board from './components/Canvas';
+import Logo from './components/Logo';
+
 
 const socket = io.connect('http://localhost:4000', {
   transports: ['websocket', 'polling'],
   path: '/socket.io',
 });
 
-export default function InGame({ accessToken, isLogIn, loginCheck }) {
+export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
   const [resultPopup, setResultPopup] = useState(false);
   const [IsOpen, SetIsOpen] = useState(true);
   const [presenter, setPresenter] = useState({ nickname: '', id: '' });
@@ -25,9 +30,32 @@ export default function InGame({ accessToken, isLogIn, loginCheck }) {
   const [winner, setWinner] = useState([]);
   const [userlist, setUserlist] = useState([]);
 
+  //뒤로가기 버튼 방지
+  const [locationKeys, setLocationKeys] = useState([]);
+  const history = useHistory();
+
+  useEffect(() => {
+    return history.listen((location) => {
+      if (history.action === 'PUSH') {
+        setLocationKeys([location.key]);
+      }
+
+      if (history.action === 'POP') {
+        if (locationKeys[1] === location.key) {
+          setLocationKeys(([_, ...keys]) => keys);
+
+          // Handle forward event
+        } else {
+          setLocationKeys((keys) => [location.key, ...keys]);
+          history.push('/room');
+        }
+      }
+    });
+  }, [locationKeys]);
+
   // ! Chat
   const socketRef = useRef();
-  const [state, setState] = useState({ message: '', name: '김코딩' });
+  const [state, setState] = useState({ message: '', name: userInfo.nickname });
   // ! App.js 에서 유저이름 name에 넣으면 됨 !
 
   const [chat, setChat] = useState([]);
@@ -57,14 +85,12 @@ export default function InGame({ accessToken, isLogIn, loginCheck }) {
   };
 
   const handleGameStart = () => {
-    if (minutes === 0 && seconds === 0) {
-      startRound();
-      // setMinutes(1); // 시간 다시 설정
-      // setIsTrueTimer(true); // Timer 다시 돌아감
-      SetIsOpen(true);
-      // RandomItem();
-      // setIsInGame(false);
-    }
+    startRound();
+    // setMinutes(1); // 시간 다시 설정
+    // setIsTrueTimer(true); // Timer 다시 돌아감
+    SetIsOpen(true);
+    // RandomItem();
+    // setIsInGame(false);
   };
 
   const handleAnswer = (word) => {
@@ -83,10 +109,9 @@ export default function InGame({ accessToken, isLogIn, loginCheck }) {
   };
 
   const onMessageSubmit = (e) => {
-    // * 메세지 보낼때
     e.preventDefault();
     const { name, message } = state;
-    socket.emit('send message', name, message);
+    socketRef.current.emit('message', { name, message });
     setState({ message: '', name });
   };
 
@@ -95,16 +120,14 @@ export default function InGame({ accessToken, isLogIn, loginCheck }) {
   };
 
   const startRound = () => {
+    // setIsPresenter(false);
+    // setPresenter({ nickname: '', id: '' });
     setWinner([]);
+    setAnswer('');
+    setIsPresenter(false);
     socket.emit('start round');
     SetIsOpen(true);
     RandomItem();
-    socket.on('set presenter', (presenter) => {
-      setPresenter(presenter);
-      if (presenter.nickname === state.name) {
-        setIsPresenter(true);
-      }
-    });
   };
 
   const SetAnswer = (answer) => {
@@ -117,36 +140,13 @@ export default function InGame({ accessToken, isLogIn, loginCheck }) {
 
   //! --------------------------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(() => {
     // * 메세지
-    renderChat();
+    socketRef.current = socket;
+    socketRef.current.on('message', ({ name, message }) => {
+      setChat([...chat, { name, message }]);
+    });
+    // return () => socketRef.current.disconnect();
   }, [chat]);
 
   useEffect(() => {
@@ -155,6 +155,12 @@ export default function InGame({ accessToken, isLogIn, loginCheck }) {
   }, [answer]);
 
   useEffect(() => {
+    socket.on('set presenter', (presenter) => {
+      setPresenter(presenter);
+      if (presenter.id === userInfo.id) {
+        setIsPresenter(true);
+      }
+    });
     // answer를 전달받는다
     socket.on('get answer', (answer) => {
       setAnswer(answer);
@@ -195,24 +201,23 @@ export default function InGame({ accessToken, isLogIn, loginCheck }) {
 
   useEffect(() => {
     // * 결과창이 열리고 서버에 라운드가 종료메세지 보냄 , 일정 시간이 지나면 결과창 닫히고 다시 게임 시작
-    const closeResult = setTimeout(() => setResultPopup(false), 3000);
-    setChat([]);
-    if (presenter.nickname === state.name) {
-      startRound();
-    }
+    const closeResult = setTimeout(() => {
+      setResultPopup(false);
+      setChat([]);
+      if (presenter.id === userInfo.id) {
+        startRound();
+      }
+    }, 3000);
   }, [resultPopup]);
 
   return (
-    <div>
-      <>
-        <Timer
-          minutes={minutes}
-          seconds={seconds}
-          handleResult={handleResult}
-          handleAnswer={handleAnswer}
-        />
-        <div className="GameWindow">
+    <>
+      <div className="justBox"></div>
+      <div className="GameWindow">
+        <div className="canvasBox">
           <div className="result_box">
+            <Board />
+            <Logo />
             <Canvas className="canvas" />
             {isPresenter ? (
               <SelectWords
@@ -229,23 +234,29 @@ export default function InGame({ accessToken, isLogIn, loginCheck }) {
             )}
             {resultPopup ? <Result winner={winner} /> : null}
           </div>
-          <User users={userlist} />
+        </div>
+        <User users={userlist} userInfo={userInfo} />
+        <div className="chatBix">
+          <Timer
+            minutes={minutes}
+            seconds={seconds}
+            handleResult={handleResult}
+            handleAnswer={handleAnswer}
+          />
           <Chat
             state={state}
             chat={chat}
             onTextChange={onTextChange}
             onMessageSubmit={onMessageSubmit}
             renderChat={renderChat}
           />
-          <div className="startOrQuitBtns">
-            <GameStartBtn
-              isInGame={isInGame}
-              handleGameStart={handleGameStart}
-            />
-            <BackBtn />
-          </div>
         </div>
-      </>
-    </div>
+
+        <div className="startOrQuitBtns">
+          <GameStartBtn isInGame={isInGame} handleGameStart={handleGameStart} />
+          <BackBtn />
+        </div>
+      </div>
+    </>
   );
 }