Merge branch 'dev' into dev

src/GamePages/InGame.js

@@ -10,13 +10,14 @@ 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';
 
 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 +26,33 @@ 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([]);
@@ -83,10 +108,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 });
   };
 
@@ -146,7 +170,11 @@ export default function InGame({ accessToken, isLogIn, loginCheck }) {
 
   useEffect(() => {
     // * 메세지
-    renderChat();
+    socketRef.current = socket;
+    socketRef.current.on('message', ({ name, message }) => {
+      setChat([...chat, { name, message }]);
+    });
+    // return () => socketRef.current.disconnect();
   }, [chat]);
 
   useEffect(() => {

src/MyPages/MyPage.js

@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { withRouter } from 'react-router-dom';
 import SearchUser from './components/SearchUser';
 import Header from './components/Header';
-
+import ChangePsw from './components/ChangePsw';
+import axios from 'axios';
 import Character1 from '../images/Character1.png';
 import Character2 from '../images/Character2.png';
 import Character3 from '../images/Character3.png';
@@ -11,11 +12,11 @@ import axios from 'axios';
 
 function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {
   const PhotoData = [Character1, Character2, Character3, Character4];
- 
+
   const [isOpen, setIsOpen] = useState(false);
   const [isPhotoBoxOpen, setIsPhotoBoxOpen] = useState(false);
-  const { nickname, email, profile_image, comment, id } = userInfo
-  const defaultImageNum = profile_image === null ? 0 : profile_image
+  const { nickname, email, profile_image, comment, id } = userInfo;
+  const defaultImageNum = profile_image === null ? 0 : profile_image;
   const [nowPhoto, setPhoto] = useState(PhotoData[defaultImageNum]);
   const ChangeInputPhoto = function (photo) {
     // e.preventDefault();
@@ -46,8 +47,6 @@ function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {
     };
   });
 
-
-
   const MyPageSaveData= async () =>{
     const PhotoNum = PhotoData.findIndex(nowPhoto)
     const SavePhoto = await axios.post(`http://localhost:4000/mypage/${id}/profile`,
@@ -67,19 +66,23 @@ function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {
   }
 
 
-
   return (
     <div>
       <Header isOpen={isOpen} nowPhoto={nowPhoto} />
       <content className="container">
         <div className="pro_search_box">
           <div className="introBox">
-            <div className="proBox">
-              <img src={nowPhoto} alt="프로필사진" className="proPhoto" />
-              <button className="changeProPhoto" onClick={handlePhotoBox}>
-                편집
-              </button>
-              <div className="userNickName">닉네임 : {userInfo.nickname} </div>
+            <div className="pswBox">
+              <div className="proBox">
+                <img src={nowPhoto} alt="프로필사진" className="proPhoto" />
+                <button className="changeProPhoto" onClick={handlePhotoBox}>
+                  편집
+                </button>
+                <div className="userNickName">
+                  닉네임 : {userInfo.nickname}{' '}
+                </div>
+              </div>
+              <ChangePsw />
             </div>
             <div className="intro">
               <h1>자기소개</h1>

src/MyPages/components/ChangePsw.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Popup from 'reactjs-popup';
+import 'reactjs-popup/dist/index.css';
+
+export default function ChangePsw() {
+  return (
+    <div>
+      <Popup
+        trigger={<button className="changePsw">비밀번호 변경</button>}
+        position="bottom center"
+        closeOnDocumentClick
+      >
+        <input
+          placeholder="현재 비밀번호"
+          className="changePswOld"
+          className="changePswInput"
+        ></input>
+        <input
+          placeholder="새로운 비밀번호"
+          className="changePswNew"
+          className="changePswInput"
+        ></input>
+        <button className="changePswBtn">변경!</button>
+      </Popup>{' '}
+    </div>
+  );
+}

src/WaitingPages/Waiting.js

@@ -17,6 +17,8 @@ export default function Waiting({
   userInfo,
 }) {
   const [createModal, setCreateModal] = useState(false);
+  const { token } = accessToken;
+  localStorage.setItem('accessToken', token);
 
   const closeModal = () => {
     setCreateModal(false);
@@ -48,6 +50,7 @@ export default function Waiting({
       }
     });
   }, [locationKeys]);
+
   useEffect(() => {
     loginCheck(isLogIn);
   });

src/main.css

@@ -723,6 +723,38 @@ $button-active-blue: #1669f2; */
   width: 300px;
 }
 
+/* .pswBox {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+} */
+
+.changePsw {
+  font-size: 20px;
+  width: 140px;
+  height: 50px;
+  position: absolute;
+  margin-top: 20px;
+  margin-left: 40px;
+}
+.changePswInput {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-left: 4px;
+  padding: 3px;
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
+}
+.changePswBtn {
+  font-size: 15px;
+  width: 50px;
+  height: 35px;
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  float: right;
+}
+
 /*GamePages********************************************************************/
 .Ready {
   display: flex;