From 4a5a61b88ba6112122e8d2517aec8e970ef4a215 Mon Sep 17 00:00:00 2001 From: jeasong Date: Thu, 6 May 2021 18:35:49 +0900 Subject: [PATCH 1/7] total test99 --- src/App.js | 2 +- src/GamePages/InGame.js | 1 - src/MyPages/MyPage.js | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 859cc24..9f61249 100644 --- a/src/App.js +++ b/src/App.js @@ -37,7 +37,7 @@ export default function App() { history.push('/Waiting') }; - const handleGeuetLogin = () => { + const handleGuestLogin = () => { setUserInfo({ nickname: '게스트' }); history.push('/Waiting') }; diff --git a/src/GamePages/InGame.js b/src/GamePages/InGame.js index 36b0021..9305695 100644 --- a/src/GamePages/InGame.js +++ b/src/GamePages/InGame.js @@ -1,6 +1,5 @@ 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'; diff --git a/src/MyPages/MyPage.js b/src/MyPages/MyPage.js index c431453..af2965d 100644 --- a/src/MyPages/MyPage.js +++ b/src/MyPages/MyPage.js @@ -3,7 +3,6 @@ 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'; From 38788772ef5390c33f34e8f61157d9b4bcfc8050 Mon Sep 17 00:00:00 2001 From: jeasong Date: Thu, 6 May 2021 18:49:13 +0900 Subject: [PATCH 2/7] new dev --- src/main.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/main.css b/src/main.css index 55dfe7e..58c13ff 100644 --- a/src/main.css +++ b/src/main.css @@ -930,23 +930,15 @@ canvas { } .card { -<<<<<<< HEAD -======= border: 2px solid #0f4d86; ->>>>>>> b3d2fa2f4bd5a1a35c87b3fda67e7f91c185472c background-color: white; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; -<<<<<<< HEAD - border: 5px solid #0f4d86; - border-radius: 15px; -======= width: 600px; height: 400px; ->>>>>>> b3d2fa2f4bd5a1a35c87b3fda67e7f91c185472c } .card h1 { text-align: center; From 7d40c9d4a9f19197fe7445ede793e16e3086b1ad Mon Sep 17 00:00:00 2001 From: yoon-jisung Date: Thu, 6 May 2021 18:52:13 +0900 Subject: [PATCH 3/7] test --- src/App.js | 73 ++++++++++++++++++++++--------------------- src/MyPages/MyPage.js | 41 ++++++++++++------------ src/main.css | 8 ----- 3 files changed, 58 insertions(+), 64 deletions(-) diff --git a/src/App.js b/src/App.js index 859cc24..a5c56d2 100644 --- a/src/App.js +++ b/src/App.js @@ -27,32 +27,30 @@ export default function App() { //로그인 상태 관리하기-------------------------------- useEffect(() => { - refreshTokenRequest() - if(accessToken.accessToken!==null){ - history.push('/Waiting') - } - },[]); + refreshTokenRequest(); + if (accessToken.accessToken !== null) { + history.push('/Waiting'); + } + }, []); const loginHandler = (data) => { issueAccessToken(data.data.accessToken); - history.push('/Waiting') + history.push('/Waiting'); }; - const handleGeuetLogin = () => { + const handleGuestLogin = () => { setUserInfo({ nickname: '게스트' }); - history.push('/Waiting') + history.push('/Waiting'); }; -//로그 아웃-------------------------------------------------------- + //로그 아웃-------------------------------------------------------- const hendleLogout = () => { axios - .get( - 'http://localhost:4000/user/logout', - { - headers:{ - 'Content-Type': 'application/json', - 'Clear-Site-Data': "cookies" - }, - } - ).then((res) => {}) + .get('http://localhost:4000/user/logout', { + headers: { + 'Content-Type': 'application/json', + 'Clear-Site-Data': 'cookies', + }, + }) + .then((res) => {}); setUserInfo({ id: null, nickname: null, @@ -60,13 +58,12 @@ export default function App() { profile_image: Character1, comment: null, room_id: null, - }) + }); setAccessToken({ accessToken: null }); - history.push('/') + history.push('/'); }; - -//토큰 관리---------------------------------------------------------------------------------------------- + //토큰 관리---------------------------------------------------------------------------------------------- const accessTokenRequest = (accessToken) => { // ! 유저 정보를 알려달라는 코드 axios @@ -99,10 +96,11 @@ export default function App() { withCredentials: true, }) .then((res) => { - if (res.data.message !== 'ok') {} + if (res.data.message !== 'ok') { + } const { nickname, email, profile_image } = res.data.data.userInfo; - console.log(res.data.data.accessToken) - setAccessToken({accessToken:res.data.data.accessToken}) + console.log(res.data.data.accessToken); + setAccessToken({ accessToken: res.data.data.accessToken }); setUserInfo({ nickname: nickname, email: email, @@ -114,23 +112,26 @@ export default function App() { const issueAccessToken = (token) => { setAccessToken({ accessToken: token }); accessTokenRequest(token); - history.push('/Waiting') + history.push('/Waiting'); console.log(token); }; -//구글 로그인---------------------------------------------------------------- + //구글 로그인---------------------------------------------------------------- const getAccessToken = async (authorizationCode) => { // ! 구글 로그인 - let resp = await axios.post('http://localhost:4000/googlelogin', - { - authorizationCode: authorizationCode, - },{ - withCredentials: true - }); - console.log(resp.data) - issueAccessToken(resp.data.accessToken) + let resp = await axios.post( + 'http://localhost:4000/googlelogin', + { + authorizationCode: authorizationCode, + }, + { + withCredentials: true, + } + ); + console.log(resp.data); + issueAccessToken(resp.data.accessToken); }; -//구글 로그인 코드 받기-------------------------------- + //구글 로그인 코드 받기-------------------------------- useEffect(() => { const url = new URL(window.location.href); const authorizationCode = url.searchParams.get('code'); diff --git a/src/MyPages/MyPage.js b/src/MyPages/MyPage.js index c431453..7ebc91f 100644 --- a/src/MyPages/MyPage.js +++ b/src/MyPages/MyPage.js @@ -8,7 +8,6 @@ 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 }) { const PhotoData = [Character1, Character2, Character3, Character4]; @@ -41,25 +40,27 @@ 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`, - { - 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 () => { + 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, + } + ); + }; return (
diff --git a/src/main.css b/src/main.css index 55dfe7e..58c13ff 100644 --- a/src/main.css +++ b/src/main.css @@ -930,23 +930,15 @@ canvas { } .card { -<<<<<<< HEAD -======= border: 2px solid #0f4d86; ->>>>>>> b3d2fa2f4bd5a1a35c87b3fda67e7f91c185472c background-color: white; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; -<<<<<<< HEAD - border: 5px solid #0f4d86; - border-radius: 15px; -======= width: 600px; height: 400px; ->>>>>>> b3d2fa2f4bd5a1a35c87b3fda67e7f91c185472c } .card h1 { text-align: center; From eb04a9f2b6f0d0df1af7d5b0203d8cea77012a0a Mon Sep 17 00:00:00 2001 From: Youjin Lee Date: Thu, 6 May 2021 18:53:35 +0900 Subject: [PATCH 4/7] merge conflict --- src/App.js | 73 ++++++++++++++++++++++--------------------- src/MyPages/MyPage.js | 41 ++++++++++++------------ 2 files changed, 58 insertions(+), 56 deletions(-) diff --git a/src/App.js b/src/App.js index 859cc24..a5c56d2 100644 --- a/src/App.js +++ b/src/App.js @@ -27,32 +27,30 @@ export default function App() { //로그인 상태 관리하기-------------------------------- useEffect(() => { - refreshTokenRequest() - if(accessToken.accessToken!==null){ - history.push('/Waiting') - } - },[]); + refreshTokenRequest(); + if (accessToken.accessToken !== null) { + history.push('/Waiting'); + } + }, []); const loginHandler = (data) => { issueAccessToken(data.data.accessToken); - history.push('/Waiting') + history.push('/Waiting'); }; - const handleGeuetLogin = () => { + const handleGuestLogin = () => { setUserInfo({ nickname: '게스트' }); - history.push('/Waiting') + history.push('/Waiting'); }; -//로그 아웃-------------------------------------------------------- + //로그 아웃-------------------------------------------------------- const hendleLogout = () => { axios - .get( - 'http://localhost:4000/user/logout', - { - headers:{ - 'Content-Type': 'application/json', - 'Clear-Site-Data': "cookies" - }, - } - ).then((res) => {}) + .get('http://localhost:4000/user/logout', { + headers: { + 'Content-Type': 'application/json', + 'Clear-Site-Data': 'cookies', + }, + }) + .then((res) => {}); setUserInfo({ id: null, nickname: null, @@ -60,13 +58,12 @@ export default function App() { profile_image: Character1, comment: null, room_id: null, - }) + }); setAccessToken({ accessToken: null }); - history.push('/') + history.push('/'); }; - -//토큰 관리---------------------------------------------------------------------------------------------- + //토큰 관리---------------------------------------------------------------------------------------------- const accessTokenRequest = (accessToken) => { // ! 유저 정보를 알려달라는 코드 axios @@ -99,10 +96,11 @@ export default function App() { withCredentials: true, }) .then((res) => { - if (res.data.message !== 'ok') {} + if (res.data.message !== 'ok') { + } const { nickname, email, profile_image } = res.data.data.userInfo; - console.log(res.data.data.accessToken) - setAccessToken({accessToken:res.data.data.accessToken}) + console.log(res.data.data.accessToken); + setAccessToken({ accessToken: res.data.data.accessToken }); setUserInfo({ nickname: nickname, email: email, @@ -114,23 +112,26 @@ export default function App() { const issueAccessToken = (token) => { setAccessToken({ accessToken: token }); accessTokenRequest(token); - history.push('/Waiting') + history.push('/Waiting'); console.log(token); }; -//구글 로그인---------------------------------------------------------------- + //구글 로그인---------------------------------------------------------------- const getAccessToken = async (authorizationCode) => { // ! 구글 로그인 - let resp = await axios.post('http://localhost:4000/googlelogin', - { - authorizationCode: authorizationCode, - },{ - withCredentials: true - }); - console.log(resp.data) - issueAccessToken(resp.data.accessToken) + let resp = await axios.post( + 'http://localhost:4000/googlelogin', + { + authorizationCode: authorizationCode, + }, + { + withCredentials: true, + } + ); + console.log(resp.data); + issueAccessToken(resp.data.accessToken); }; -//구글 로그인 코드 받기-------------------------------- + //구글 로그인 코드 받기-------------------------------- useEffect(() => { const url = new URL(window.location.href); const authorizationCode = url.searchParams.get('code'); diff --git a/src/MyPages/MyPage.js b/src/MyPages/MyPage.js index c431453..7ebc91f 100644 --- a/src/MyPages/MyPage.js +++ b/src/MyPages/MyPage.js @@ -8,7 +8,6 @@ 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 }) { const PhotoData = [Character1, Character2, Character3, Character4]; @@ -41,25 +40,27 @@ 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`, - { - 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 () => { + 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, + } + ); + }; return (
From 61a414ca7b26d8b471a31d893a5a427467e9d570 Mon Sep 17 00:00:00 2001 From: Youjin Lee Date: Thu, 6 May 2021 23:21:29 +0900 Subject: [PATCH 5/7] [client] / feat: socket_chat --- src/GamePages/InGame.js | 44 ++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/src/GamePages/InGame.js b/src/GamePages/InGame.js index 1b8d645..0d90452 100644 --- a/src/GamePages/InGame.js +++ b/src/GamePages/InGame.js @@ -114,12 +114,12 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) { const onMessageSubmit = (e) => { e.preventDefault(); const { name, message } = state; - socket.emit('message', { name, message }); + socket.emit('send message', name, message); setState({ message: '', name }); }; const onTextChange = (e) => { - setState({ ...state, [e.target.name]: e.target.value }); + setState({ ...state, message: e.target.value }); }; const startRound = () => { @@ -143,15 +143,15 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) { //! --------------------------method-------------------------- - useEffect(() => { - socket.on('message', ({ name, message }) => { - if (chat.length > 4) { - return setChat([]); - } - return setChat([...chat, { name, message }]); - }); - console.log('채팅이야!!!!!', chat); - }, [chat]); + // useEffect(() => { + // socket.on('message', ({ name, message }) => { + // if (chat.length > 4) { + // return setChat([]); + // } + // return setChat([...chat, { name, message }]); + // }); + // console.log('채팅이야!!!!!', chat); + // }, [chat]); useEffect(() => { // * 문제가 선택되면 게임스타트와 문제를 서버에 보내줌 @@ -190,7 +190,7 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) { socket.on('renew userlist', (list) => { setUserlist([...list]); }); - }); + }, []); useEffect(() => { // * 사용자 정보 소켓으로 불러 오기 @@ -205,16 +205,16 @@ export default function InGame({ accessToken, isLogIn, loginCheck, userInfo }) { console.log('userlist', userlist); }, []); - useEffect(() => { - // * 결과창이 열리고 서버에 라운드가 종료메세지 보냄 , 일정 시간이 지나면 결과창 닫히고 다시 게임 시작 - const closeResult = setTimeout(() => { - setResultPopup(false); - setChat([]); - if (presenter.id === userInfo.id) { - startRound(); - } - }, 3000); - }, [resultPopup]); + // useEffect(() => { + // // * 결과창이 열리고 서버에 라운드가 종료메세지 보냄 , 일정 시간이 지나면 결과창 닫히고 다시 게임 시작 + // const closeResult = setTimeout(() => { + // setResultPopup(false); + // setChat([]); + // if (presenter.id === userInfo.id) { + // startRound(); + // } + // }, 3000); + // }, [resultPopup]); return ( <> From 552f6d064f9644861f7c9d0dbe74dbf7a0fe0787 Mon Sep 17 00:00:00 2001 From: jeasong Date: Fri, 7 May 2021 01:44:48 +0900 Subject: [PATCH 6/7] prototype --- src/App.js | 13 +++----- src/MainPages/main.js | 5 ++- src/MyPages/MyPage.js | 53 +++++++++++++++++++++---------- src/MyPages/components/ExitBtn.js | 5 +-- src/MyPages/components/Header.js | 4 +-- 5 files changed, 50 insertions(+), 30 deletions(-) diff --git a/src/App.js b/src/App.js index 9f61249..9c817c5 100644 --- a/src/App.js +++ b/src/App.js @@ -27,7 +27,7 @@ export default function App() { //로그인 상태 관리하기-------------------------------- useEffect(() => { - refreshTokenRequest() + //refreshTokenRequest() if(accessToken.accessToken!==null){ history.push('/Waiting') } @@ -46,12 +46,7 @@ export default function App() { axios .get( 'http://localhost:4000/user/logout', - { - headers:{ - 'Content-Type': 'application/json', - 'Clear-Site-Data': "cookies" - }, - } + {withCredentials: true} ).then((res) => {}) setUserInfo({ id: null, @@ -100,12 +95,14 @@ export default function App() { }) .then((res) => { if (res.data.message !== 'ok') {} - const { nickname, email, profile_image } = res.data.data.userInfo; + const { nickname, email, profile_image, id,comment } = res.data.data.userInfo; console.log(res.data.data.accessToken) setAccessToken({accessToken:res.data.data.accessToken}) setUserInfo({ + id : id, nickname: nickname, email: email, + comment:comment, profile_image: profile_image, }); }); diff --git a/src/MainPages/main.js b/src/MainPages/main.js index 8843fd1..f0ef645 100644 --- a/src/MainPages/main.js +++ b/src/MainPages/main.js @@ -23,7 +23,10 @@ export default function Main({ loginHandler, handleGuestLogin }) { const guestLogIn = () => { axios - .get('http://localhost:4000/guest') + .get('http://localhost:4000/guest', + { + withCredentials: true + }) .then((res) => { console.log(res.data); loginHandler(res.data); diff --git a/src/MyPages/MyPage.js b/src/MyPages/MyPage.js index af2965d..79f3e25 100644 --- a/src/MyPages/MyPage.js +++ b/src/MyPages/MyPage.js @@ -9,21 +9,37 @@ 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[profile_image]); + 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) { console.log('openModal'); openModal(); } + //MyPageSaveData() }; const openModal = () => { setIsOpen(true); @@ -40,29 +56,33 @@ function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) { } }; + const MyPageSaveData= async (PhotoNum) =>{ - const MyPageSaveData= async () =>{ - const PhotoNum = PhotoData.findIndex(nowPhoto) + await refreshTokenRequest() const SavePhoto = await axios.post(`http://localhost:4000/mypage/${id}/profile`, + {new_profile: PhotoNum}, { - authorization: accessToken, - new_profile: PhotoNum - }, - { - headers: { 'Content-Type': 'application/json' }, - Credentials: 'include', + headers: { + Authorization: `Bearer ${accessToken.accessToken}`, + 'Content-Type': 'application/json', + }, + //withCredentials: true, }) const SaveComment = await axios.post(`http://localhost:4000/mypage/${id}/comment`, + {Comment: '아니라어민어리ㅏㅁㄴ얼'}, { - authorization: accessToken, - Comment: PhotoNum + headers: { + Authorization: `Bearer ${accessToken.accessToken}`, + 'Content-Type': 'application/json', + }, + //withCredentials: true, }) } return (
-
+
@@ -81,8 +101,7 @@ function MyPage({ accessToken, isLogIn, loginCheck, userInfo }) {

자기소개