diff --git a/.env b/.env new file mode 100644 index 0000000..287a055 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +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..5f0bd2d 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.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.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; }) @@ -99,9 +99,9 @@ export default function App() { }, [userInfo]); const refreshTokenRequest = () => { - // ! 일정 주기로 함수 계속 보냄 + // ! 일정 주기로 함수 계속 보냄http://ec2-3-139-101-167.us-east-2.compute.amazonaws.com:80 axios - .get('http://localhost:4000/refreshTokenHandler', { + .get(`${process.env.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, @@ -145,7 +136,7 @@ export default function App() { const getAccessToken = async (authorizationCode) => { // ! 구글 로그인 let resp = await axios.post( - 'http://localhost:4000/googlelogin', + `${process.env.SERVER}/googlelogin`, { authorizationCode: authorizationCode, }, @@ -153,21 +144,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..bc338e1 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.SERVER}`, { transports: ['websocket'], path: '/socket.io', }); diff --git a/src/GamePages/components/Canvas.js b/src/GamePages/components/Canvas.js index 9135c65..9827ad2 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.SERVER}`, { transports: ['websocket', 'polling'], path: '/socket.io', }); diff --git a/src/GamePages/components/Canvas3.js b/src/GamePages/components/Canvas3.js index b7b1a24..9330cfc 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.SERVER}`, { transports: ['websocket', 'polling'], path: '/socket.io', }); diff --git a/src/MainPages/components/Signin.js b/src/MainPages/components/Signin.js index 0ebd9a8..0675ca9 100644 --- a/src/MainPages/components/Signin.js +++ b/src/MainPages/components/Signin.js @@ -3,6 +3,7 @@ import '../../main.css'; import logo from '../../images/mindcaptor_logo_login.png'; import { useHistory } from 'react-router-dom'; import SocialLogin from './SocialLogin'; +require('dotenv').config(); const axios = require('axios'); @@ -24,7 +25,7 @@ export default function Signin({ isOpen, close, loginHandler }) { if (e.key === 'Enter' || e.type === 'click') { axios .post( - 'http://localhost:4000/login', + `${process.env.SERVER}/login`, { email, password }, { headers: { 'Content-Type': 'application/json' }, diff --git a/src/MainPages/components/Signup.js b/src/MainPages/components/Signup.js index a64facf..5531107 100644 --- a/src/MainPages/components/Signup.js +++ b/src/MainPages/components/Signup.js @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import '../../main.css'; import logo from '../../images/mindcaptor_logo_sign.png'; const axios = require('axios'); - +require('dotenv').config(); export default function Signup({ isOpen, close, idCreatedOk }) { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); @@ -26,7 +26,7 @@ export default function Signup({ isOpen, close, idCreatedOk }) { if (e.key === 'Enter' || e.type === 'click') { try { const data = await axios.post( - 'http://localhost:4000/signup', + `${process.env.SERVER}`, { email, password, nickname }, { headers: { 'Content-Type': 'application/json' }, diff --git a/src/MainPages/components/SocialLogin.js b/src/MainPages/components/SocialLogin.js index 1180437..d654f47 100644 --- a/src/MainPages/components/SocialLogin.js +++ b/src/MainPages/components/SocialLogin.js @@ -2,7 +2,7 @@ import React from 'react'; export default function SocialLogin() { const socialLoginHandler = () => { - 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`; + const url = `https://accounts.google.com/o/oauth2/auth?client_id=970331179604-upa291p2st8pmj3676qmnm4geurg21cb.apps.googleusercontent.com&redirect_uri=http://mindcaptor.s3-website.ap-northeast-2.amazonaws.com&response_type=code&scope=https://www.googleapis.com/auth/userinfo.profile email`; window.location.assign(url); }; diff --git a/src/MainPages/main.js b/src/MainPages/main.js index 9afa09e..416a67d 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.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 (