Upload

.env

@@ -0,0 +1,2 @@
+REACT_APP_API_SERVER=http://localhost:4000
+DB_USER=root

.env.production

@@ -0,0 +1 @@
+REACT_APP_API_SERVER=http://ec2-3-139-101-167.us-east-2.compute.amazonaws.com:80

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",

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,18 +67,15 @@ 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',
         },
         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,30 +135,22 @@ 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,
       },
       {
         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);
     }

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',
 });

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',
     });

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',
     });

src/GamePages/components/Chat.js

@@ -35,7 +35,7 @@ export default function Chat({ chat, onMessageSubmit, onTextChange, state }) {
       </div>
 
       <form onSubmit={onMessageSubmit}>
-        <input type="text"></input>
+        {/* <input type="text"></input> */}
         <div className="msgBtn">
           <input
             onKeyPress={handleKeyPress}

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.REACT_APP_API_SERVER}/login`,
           { email, password },
           {
             headers: { 'Content-Type': 'application/json' },

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.REACT_APP_API_SERVER}/signup`,
           { email, password, nickname },
           {
             headers: { 'Content-Type': 'application/json' },

src/MainPages/components/SocialLogin.js

@@ -2,8 +2,8 @@ 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`;
-
+    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 (

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
       })

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 (
     <div>
@@ -118,11 +91,7 @@ function MyPage({ accessToken, refreshTokenRequest, userInfo }) {
         nowPhoto={nowPhoto}
         nickname={nickname}
         PhotoNum={PhotoNum}
-<<<<<<< HEAD
-        MyPageSaveData={MyPageSaveData}
-=======
         // MyPageSaveData={MyPageSaveData}
->>>>>>> a5771eaba281de9abd8e0bf97642c16df821de90
       />
       <content className="container">
         <div className="pro_search_box">

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: {

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: {

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;