diff --git a/src/App.js b/src/App.js index 9f61249..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 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/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 ( <> diff --git a/src/MyPages/MyPage.js b/src/MyPages/MyPage.js index af2965d..644979a 100644 --- a/src/MyPages/MyPage.js +++ b/src/MyPages/MyPage.js @@ -7,7 +7,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]; @@ -40,25 +39,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 (