FIRE-387-fe-env-깔끔하게-수정하기

.env

@@ -1,10 +1,2 @@
 SKIP_PREFLIGHT_CHECK=true
-REACT_APP_SERVER=https://172.16.101.93:3333/rooms
-REACT_APP_SOCKET_URL=https://xn--hq1br4kwqt.com/socket/room
-REACT_APP_ROOM=http://172.16.101.93:8282/room
-REACT_APP_SEND_USER_INFORMATION_URL=https://모도코.com/api/v1/users
-REACT_APP_SOCKET_CHAT_URL=https://모도코.com/socket/chat
-REACT_APP_SOCKET_VIDEO_URL=https://모도코.com/socket/video
-REACT_APP_SOCKET_ROOM_URL=https://모도코.com/socket/room
-REACT_APP_SOCKET_TEST=http://localhost:3001/socket/room
-REACT_APP_GET_USER_INFO=https://모도코.com/api/v1/users/
+REACT_APP_BASE_URL=https://모도코.com

.env.test

@@ -0,0 +1,2 @@
+SKIP_PREFLIGHT_CHECK=true
+REACT_APP_BASE_URL=https://localhost:3001

src/adapters/roomConnection.ts

@@ -3,6 +3,7 @@ import axios from 'axios';
 import connectedUsersStore from '../stores/connectedUsersStore';
 import roomSocket from './roomSocket';
 import messageStore from '../stores/messagesStore';
+import { API } from '../config';
 
 export const roomConnection = (roomId) => {
   const { connectedUsers, appendUser, removeUser, findUser } =
@@ -38,22 +39,20 @@ export const roomConnection = (roomId) => {
     });
 
     roomSocket.off('newUser').on('newUser', ({ sid, uid }) => {
-      axios
-        .get((process.env.REACT_APP_GET_USER_INFO as string) + uid)
-        .then((res) => {
-          setConnected({ sid, uid }, res);
-          console.log('new', res.data.nickname, 'joined');
-          appendMessages({
-            uid,
-            nickname: res.data.nickname,
-            avatar: res.data.avatar,
-            message: `${res.data.nickname}님이 입장하셨습니다.`,
-            createdAt: '',
-            type: 'join',
-            isHideTime: false,
-            isHideNicknameAndAvatar: false,
-          });
+      axios.get((API.USER as string) + uid).then((res) => {
+        setConnected({ sid, uid }, res);
+        console.log('new', res.data.nickname, 'joined');
+        appendMessages({
+          uid,
+          nickname: res.data.nickname,
+          avatar: res.data.avatar,
+          message: `${res.data.nickname}님이 입장하셨습니다.`,
+          createdAt: '',
+          type: 'join',
+          isHideTime: false,
+          isHideNicknameAndAvatar: false,
         });
+      });
     });
 
     roomSocket
@@ -62,11 +61,9 @@ export const roomConnection = (roomId) => {
         console.log('existing users', users);
         console.log('i am ', current.sid);
         users.map((user) => {
-          axios
-            .get((process.env.REACT_APP_GET_USER_INFO as string) + user.uid)
-            .then((res) => {
-              setConnected(user, res);
-            });
+          axios.get((API.USER as string) + user.uid).then((res) => {
+            setConnected(user, res);
+          });
           return user;
         });
       });

src/adapters/roomSocket.ts

@@ -1,5 +1,6 @@
 import { io } from 'socket.io-client';
+import { API } from '../config';
 
-const roomSocket = io(process.env.REACT_APP_SOCKET_ROOM_URL as string);
+const roomSocket = io(API.SOCKET as string);
 
 export default roomSocket;

src/components/login/UserInput.tsx

@@ -7,6 +7,7 @@ import UserStore from '../../stores/userStore';
 import Avater from './Avatar';
 import Nickname from './Nickname';
 import userInterface from '../../interface/user.interface';
+import { API } from '../../config';
 
 let type: string;
 
@@ -40,11 +41,9 @@ export default function UserInput({
   }, []);
 
   const userRequest = async (newUser: userInterface) => {
-    const API_URL: string = process.env
-      .REACT_APP_SEND_USER_INFORMATION_URL as string;
     const { data } = await axios({
       method: type,
-      url: API_URL,
+      url: API.USER,
       data: newUser,
     });
     return data;

src/config.ts

@@ -0,0 +1,11 @@
+const BASE_URL = process.env.REACT_APP_BASE_URL;
+const API_VER = '/api/v1';
+const USER = '/users/';
+const ROOM = '/rooms/';
+const SOCKET = '/socket/room';
+
+export const API = {
+  SOCKET: `${BASE_URL}${SOCKET}`,
+  ROOM: `${BASE_URL}${API_VER}${ROOM}`,
+  USER: `${BASE_URL}${API_VER}${USER}`,
+};