diff --git a/.env b/.env new file mode 100644 index 0000000..1fec409 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +REACT_APP_API_SERVER=http://localhost:4000 +DB_USER=root \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..5e3c068 --- /dev/null +++ b/.env.production @@ -0,0 +1 @@ +REACT_APP_API_SERVER=http://ec2-3-139-101-167.us-east-2.compute.amazonaws.com:80 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 494b8bd..10f7baa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^12.8.3", "axios": "^0.21.1", "bootstrap": "^4.6.0", + "dotenv": "^8.2.0", "moment": "^2.29.1", "react": "^17.0.2", "react-bootstrap": "^1.5.2", diff --git a/package.json b/package.json index 5d47c0a..c8036ef 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "@testing-library/user-event": "^12.8.3", "axios": "^0.21.1", "bootstrap": "^4.6.0", + "dotenv": "^8.2.0", "moment": "^2.29.1", "react": "^17.0.2", "react-bootstrap": "^1.5.2", diff --git a/src/App.js b/src/App.js index eb86eec..e4deece 100644 --- a/src/App.js +++ b/src/App.js @@ -8,6 +8,7 @@ import Character1 from './images/Character1.png'; import { useHistory } from 'react-router-dom'; import './main.css'; import Bgm from './Bgm'; +require('dotenv').config(); const axios = require('axios'); @@ -46,8 +47,10 @@ export default function App() { const hendleLogout = () => { axios - .get('http://localhost:4000/user/logout', { withCredentials: true }) - .then((res) => {}); + .get( + `${process.env.REACT_APP_API_SERVER}/user/logout`, + {withCredentials: true} + ).then((res) => {}) setUserInfo({ id: null, nickname: null, @@ -64,7 +67,7 @@ export default function App() { const accessTokenRequest = (accessToken) => { // ! 유저 정보를 알려달라는 코드 axios - .get('http://localhost:4000/accessTokenHandler', { + .get(`${process.env.REACT_APP_API_SERVER}/accessTokenHandler`, { headers: { Authorization: `Bearer ${accessToken}`, 'Content-Type': 'application/json', @@ -72,10 +75,7 @@ export default function App() { withCredentials: true, }) .then((res) => { -<<<<<<< HEAD -======= const { nickname, email, profile_image, comment, id } = res.data.data; ->>>>>>> a5771eaba281de9abd8e0bf97642c16df821de90 // ! return res.data.data; }) @@ -101,7 +101,7 @@ export default function App() { const refreshTokenRequest = () => { // ! 일정 주기로 함수 계속 보냄 axios - .get('http://localhost:4000/refreshTokenHandler', { + .get(`${process.env.REACT_APP_API_SERVER}/refreshTokenHandler`, { withCredentials: true, }) .then((res) => { @@ -115,16 +115,7 @@ export default function App() { comment, } = res.data.data.userInfo; -<<<<<<< HEAD setAccessToken({ accessToken: res.data.data.accessToken }); -======= - - if (res.data.message !== 'ok') {} - const { nickname, email, profile_image, id,comment } = res.data.data.userInfo; - console.log(res.data.data.accessToken) - setAccessToken({accessToken:res.data.data.accessToken}) - ->>>>>>> a5771eaba281de9abd8e0bf97642c16df821de90 setUserInfo({ id: id, nickname: nickname, @@ -144,8 +135,9 @@ export default function App() { const getAccessToken = async (authorizationCode) => { // ! 구글 로그인 + console.log('ddddddddddddddddddddddddddddddddddddddddddldldldldldldldl') let resp = await axios.post( - 'http://localhost:4000/googlelogin', + `${process.env.REACT_APP_API_SERVER}/googlelogin`, { authorizationCode: authorizationCode, }, @@ -153,21 +145,12 @@ export default function App() { withCredentials: true, } ); -<<<<<<< HEAD - -======= ->>>>>>> a5771eaba281de9abd8e0bf97642c16df821de90 issueAccessToken(resp.data.accessToken); }; //구글 로그인 코드 받기-------------------------------- useEffect(() => { const url = new URL(window.location.href); const authorizationCode = url.searchParams.get('code'); -<<<<<<< HEAD - - console.log('userInfo:', userInfo); -======= ->>>>>>> a5771eaba281de9abd8e0bf97642c16df821de90 if (authorizationCode) { getAccessToken(authorizationCode); } diff --git a/src/GamePages/InGame.js b/src/GamePages/InGame.js index daca810..c51a9b3 100644 --- a/src/GamePages/InGame.js +++ b/src/GamePages/InGame.js @@ -11,7 +11,8 @@ import Words from '../Words'; import { useHistory } from 'react-router-dom'; import Logo from './components/Logo'; import Canvas from './components/Canvas3'; -const socket = io.connect('http://localhost:4000', { +require('dotenv').config(); +const socket = io.connect(`${process.env.REACT_APP_API_SERVER}`, { transports: ['websocket'], path: '/socket.io', }); diff --git a/src/GamePages/components/Canvas.js b/src/GamePages/components/Canvas.js index 9135c65..3eb178d 100644 --- a/src/GamePages/components/Canvas.js +++ b/src/GamePages/components/Canvas.js @@ -1,7 +1,7 @@ import React, { useRef, useEffect } from 'react'; import io from 'socket.io-client'; // import './styles/board.css'; - +require('dotenv').config(); export default function Canvas() { const canvasRef = useRef(null); const colorsRef = useRef(null); @@ -151,7 +151,7 @@ export default function Canvas() { drawLine(data.x0 * w, data.y0 * h, data.x1 * w, data.y1 * h, data.color); }; - socketRef.current = io.connect('http://localhost:4000', { + socketRef.current = io.connect(`${process.env.REACT_APP_API_SERVER}`, { transports: ['websocket', 'polling'], path: '/socket.io', }); diff --git a/src/GamePages/components/Canvas3.js b/src/GamePages/components/Canvas3.js index b7b1a24..dd474d4 100644 --- a/src/GamePages/components/Canvas3.js +++ b/src/GamePages/components/Canvas3.js @@ -8,6 +8,7 @@ import Crayon_Blue from '../../images/crayon_blue.png'; import Crayon_Green from '../../images/crayon_green.png'; import Crayon_Yellow from '../../images/crayon_yellow.png'; import io from 'socket.io-client'; +require('dotenv').config(); export default function Canvas3() { const canvasRef = useRef(null); @@ -121,7 +122,7 @@ export default function Canvas3() { drawLine(data.x0 * w, data.y0 * h, data.x1 * w, data.y1 * h, data.color); }; - socketRef.current = io.connect('http://localhost:4000', { + socketRef.current = io.connect(`${process.env.REACT_APP_API_SERVER}`, { transports: ['websocket', 'polling'], path: '/socket.io', }); diff --git a/src/GamePages/components/Chat.js b/src/GamePages/components/Chat.js index ac8a4e1..fa4c5b8 100644 --- a/src/GamePages/components/Chat.js +++ b/src/GamePages/components/Chat.js @@ -35,7 +35,7 @@ export default function Chat({ chat, onMessageSubmit, onTextChange, state }) {
- + {/* */}
{ - const url = `https://accounts.google.com/o/oauth2/auth?client_id=970331179604-upa291p2st8pmj3676qmnm4geurg21cb.apps.googleusercontent.com&redirect_uri=http://localhost:3000&response_type=code&scope=https://www.googleapis.com/auth/userinfo.profile email`; - + let redirect_uri = {s3:'http://mindcaptor.s3-website.ap-northeast-2.amazonaws.com',local:'http://localhost:3000'} + const url = `https://accounts.google.com/o/oauth2/auth?client_id=970331179604-upa291p2st8pmj3676qmnm4geurg21cb.apps.googleusercontent.com&redirect_uri=${redirect_uri.s3}&response_type=code&scope=https://www.googleapis.com/auth/userinfo.profile email`; window.location.assign(url); }; return ( diff --git a/src/MainPages/main.js b/src/MainPages/main.js index 9afa09e..7153ade 100644 --- a/src/MainPages/main.js +++ b/src/MainPages/main.js @@ -6,6 +6,7 @@ import SigninBtn from './components/SigninBtn'; import SignupBtn from './components/SignupBtn'; import Popup from 'reactjs-popup'; import 'reactjs-popup/dist/index.css'; +require('dotenv').config(); const axios = require('axios'); @@ -23,7 +24,7 @@ export default function Main({ loginHandler, handleGuestLogin }) { const guestLogIn = () => { axios - .get('http://localhost:4000/guest', + .get(`${process.env.REACT_APP_API_SERVER}/guest`, { withCredentials: true }) diff --git a/src/MyPages/MyPage.js b/src/MyPages/MyPage.js index 73d336e..6ebb760 100644 --- a/src/MyPages/MyPage.js +++ b/src/MyPages/MyPage.js @@ -9,6 +9,7 @@ import Character1 from '../images/Character1.png'; import Character2 from '../images/Character2.png'; import Character3 from '../images/Character3.png'; import Character4 from '../images/Character4.png'; +require('dotenv').config(); function MyPage({ accessToken, refreshTokenRequest, userInfo }) { const PhotoData = [Character1, Character2, Character3, Character4]; @@ -57,33 +58,6 @@ function MyPage({ accessToken, refreshTokenRequest, userInfo }) { console.log('photobox', isPhotoBoxOpen); }; -<<<<<<< HEAD - const MyPageSaveData = async (PhotoNum) => { - 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, - } - ); - }; -======= // const MyPageSaveData = async (PhotoNum) => { // await refreshTokenRequest(); // const SavePhoto = await axios.post( @@ -109,7 +83,6 @@ function MyPage({ accessToken, refreshTokenRequest, userInfo }) { // } // ); // }; ->>>>>>> a5771eaba281de9abd8e0bf97642c16df821de90 return (
@@ -118,11 +91,7 @@ function MyPage({ accessToken, refreshTokenRequest, userInfo }) { nowPhoto={nowPhoto} nickname={nickname} PhotoNum={PhotoNum} -<<<<<<< HEAD - MyPageSaveData={MyPageSaveData} -======= // MyPageSaveData={MyPageSaveData} ->>>>>>> a5771eaba281de9abd8e0bf97642c16df821de90 />
diff --git a/src/WaitingPages/components/CreateGame.js b/src/WaitingPages/components/CreateGame.js index 885b9b0..d6e1783 100644 --- a/src/WaitingPages/components/CreateGame.js +++ b/src/WaitingPages/components/CreateGame.js @@ -2,6 +2,7 @@ import axios from 'axios'; import { useHistory } from 'react-router-dom'; import React, { useEffect, useState } from 'react'; +require('dotenv').config() export default function CreateGame({ createModal, closeModal, accessToken }) { const [roomName, setRoomName] = useState(''); @@ -22,7 +23,7 @@ export default function CreateGame({ createModal, closeModal, accessToken }) { await axios .post( - 'http://localhost:4000/room/new', + `${process.env.REACT_APP_API_SERVER}/room/new`, { room_name, room_pw }, { headers: { diff --git a/src/WaitingPages/components/EntryGame.js b/src/WaitingPages/components/EntryGame.js index ebb0edf..546842e 100644 --- a/src/WaitingPages/components/EntryGame.js +++ b/src/WaitingPages/components/EntryGame.js @@ -1,13 +1,13 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; import axios from 'axios'; - +require('dotenv').config() function EntryGame({ accessToken }) { const history = useHistory(); const handleUrl = async () => { const result = await axios.post( - 'http://localhost:4000/room/join', + `${process.env.REACT_APP_API_SERVER}/room/join`, {}, { headers: { diff --git a/src/main.css b/src/main.css index dbb2e05..1943c4a 100644 --- a/src/main.css +++ b/src/main.css @@ -1072,18 +1072,15 @@ canvas { } .res_body { - border: 2px solid white; } .res_body_header { text-align: center; color: white; - border: 2px solid red; font-size: 20px; } .res_body_winner { - border: 2px solid green; color: white; text-align: center;