ingame exit btn fix

src/GamePages/InGame.js

@@ -211,6 +211,8 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
 
   return (
     <>
+      <BackBtn />
+
       <div className="justBox"></div>
       <div className="GameWindow">
         <div className="canvasBox">
@@ -252,7 +254,6 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) {
 
         <div className="startOrQuitBtns">
           <GameStartBtn isInGame={isInGame} handleGameStart={handleGameStart} />
-          <BackBtn />
         </div>
       </div>
     </>

src/GamePages/components/BackBtn.js

@@ -4,8 +4,10 @@ import { withRouter, useHistory } from 'react-router-dom';
 function BackBtn() {
   const history = useHistory();
   return (
-    <span className="Back">
-      <button onClick={() => history.push('/Waiting')}>대기실</button>
+    <span>
+      <button className="Back" onClick={() => history.push('/Waiting')}>
+        대기실
+      </button>
     </span>
   );
 }

src/GamePages/components/Canvas3.js

@@ -196,12 +196,13 @@ export default function Canvas3() {
           </div>
         </div>
 
-        <div>
-          <Paint
-            handleColorClick={handleColorClick}
-            reset={reset}
-            eraserBtn={eraserBtn}
-          />
+        <div className="Paint">
+          <button className="reset" onClick={reset}>
+            초기화
+          </button>
+          <button className="color white" onClick={eraserBtn}>
+            지우개
+          </button>
         </div>
       </div>
     </>

src/MyPages/MyPage.js

@@ -2,27 +2,44 @@ 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';
 import Character3 from '../images/Character3.png';
 import Character4 from '../images/Character4.png';
-import axios from 'axios';
 
-function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {
+function MyPage({ accessToken, refreshTokenRequest, 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 [nowPhoto, setPhoto] = useState(PhotoData[defaultImageNum]);
+  const [PhotoNum, setPhotoNum] = useState(0);
+  const [nowPhoto, setPhoto] = useState(PhotoData[PhotoNum]);
+  const [text, setText] = useState(null);
+
+  // const emailInputValue = (e) => {
+  //   setEmail(e.target.value);
+  // };
+
+  // const passwordInputValue = (e) => {
+  //   setPassword(e.target.value);
+  // };
+
+  // const nickNameInputValue = (e) => {
+  //   setNickName(e.target.value);
+  // };
+
   const ChangeInputPhoto = function (photo) {
     // e.preventDefault();
     setPhoto(photo);
+    setPhotoNum(PhotoData.indexOf(nowPhoto));
+    console.log(PhotoNum);
     if (photo !== nowPhoto) {
       openModal();
     }
+    //MyPageSaveData()
   };
   const openModal = () => {
     setIsOpen(true);
@@ -40,31 +57,41 @@ function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {
     console.log('photobox', isPhotoBoxOpen);
   };
 
-  const MyPageSaveData = async () => {
-    const PhotoNum = PhotoData.findIndex(nowPhoto);
-    const SavePhoto = await axios.post(
-      `http://localhost:4000/mypage/${id}/profile`,
-      {
-        authorization: accessToken,
-        new_profile: PhotoNum,
-      },
-      {
-        headers: { 'Content-Type': 'application/json' },
-        Credentials: 'include',
-      }
-    );
-    const SaveComment = await axios.post(
-      `http://localhost:4000/mypage/${id}/comment`,
-      {
-        authorization: accessToken,
-        Comment: PhotoNum,
-      }
-    );
-  };
+  // const MyPageSaveData = async (PhotoNum) => {
+  //   await refreshTokenRequest();
+  //   const SavePhoto = await axios.post(
+  //     `http://localhost:4000/mypage/${id}/profile`,
+  //     { new_profile: PhotoNum },
+  //     {
+  //       headers: {
+  //         Authorization: `Bearer ${accessToken.accessToken}`,
+  //         'Content-Type': 'application/json',
+  //       },
+  //       //withCredentials: true,
+  //     }
+  //   );
+  //   const SaveComment = await axios.post(
+  //     `http://localhost:4000/mypage/${id}/comment`,
+  //     { Comment: '아니라어민어리ㅏㅁㄴ얼' },
+  //     {
+  //       headers: {
+  //         Authorization: `Bearer ${accessToken.accessToken}`,
+  //         'Content-Type': 'application/json',
+  //       },
+  //       //withCredentials: true,
+  //     }
+  //   );
+  // };
 
   return (
     <div>
-      <Header isOpen={isOpen} nowPhoto={nowPhoto} nickname={nickname} />
+      <Header
+        isOpen={isOpen}
+        nowPhoto={nowPhoto}
+        nickname={nickname}
+        PhotoNum={PhotoNum}
+        // MyPageSaveData={MyPageSaveData}
+      />
       <content className="container">
         <div className="pro_search_box">
           <div className="introBox">
@@ -82,10 +109,7 @@ function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {
             </div>
             <div className="intro">
               <h1>자기소개</h1>
-              <textarea
-                placeholder={`클릭하여 자신을 소개해
-보세요!`}
-              />
+              <textarea placeholder={`클릭하여 자신을 소개해 보세요!`} />
             </div>
           </div>
           <SearchUser />

src/MyPages/components/ExitBtn.js

@@ -7,6 +7,7 @@ export default function ExitBtn({ MyPageSaveData }) {
     <span className="Exit">
       <button
         onClick={() => {
+          // MyPageSaveData();
           history.push('/Waiting');
         }}
       >

src/main.css

@@ -478,7 +478,6 @@ $button-active-blue: #1669f2; */
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 50px;
 }
 
 .waiting_btns {
@@ -1192,3 +1191,10 @@ canvas {
   color: white;
   top: 10%;
 }
+
+.Back {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100px;
+}