diff --git a/FE/frontend/src/components/login/Login.tsx b/FE/frontend/src/components/login/Login.tsx
index f6bd247da..6cc184c81 100644
--- a/FE/frontend/src/components/login/Login.tsx
+++ b/FE/frontend/src/components/login/Login.tsx
@@ -13,6 +13,7 @@ const Login = () => {
       <a href={url}>
         <GitHubLogin large>GitHub 계정으로 로그인</GitHubLogin>
       </a>
+      <GoogleLogin large>Google 계정으로 로그인</GoogleLogin>
       <TextInBetween sm>or</TextInBetween>
       <ManualLogin large>아이디</ManualLogin>
       <ManualLogin large>비밀번호</ManualLogin>
@@ -43,6 +44,10 @@ const GitHubLogin = styled(Buttons)`
   background-color: ${props => props.theme.greyscale.titleActive};
 `;
 
+const GoogleLogin = styled(Buttons)`
+  background-color: #4285f4;
+`;
+
 const TextInBetween = styled(Typos)`
   color: ${props => props.theme.greyscale.placeholer};
 `;
diff --git a/FE/frontend/src/components/login/Oauth.tsx b/FE/frontend/src/components/login/Oauth.tsx
index c2bf84b44..5d537d070 100644
--- a/FE/frontend/src/components/login/Oauth.tsx
+++ b/FE/frontend/src/components/login/Oauth.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import qs from 'qs';
 import axios from 'axios';
+import URL from '../../util/url';
 import Main from '../main/Main';
 import { RouteComponentProps } from 'react-router-dom';
 
@@ -15,11 +16,11 @@ const Oauth: React.FC<Props> = ({ history, location }) => {
 
       try {
         const response = await axios.get(
-          `http://52.78.35.48/api/login/github/web?code=${code}`
+          `${URL}/login/github/web?code=${code}`
         );
         localStorage.setItem('token', response.data.data.jwt);
 
-        axios.get('http://52.78.35.48/api/jwt', {
+        axios.get(`${URL}/jwt`, {
           headers: { Authorization: 'Bearer ' + localStorage.getItem('token') },
         });
         history.push('/main');
diff --git a/FE/frontend/src/util/url.ts b/FE/frontend/src/util/url.ts
new file mode 100644
index 000000000..a6cc386f7
--- /dev/null
+++ b/FE/frontend/src/util/url.ts
@@ -0,0 +1,3 @@
+const URL = 'http://52.78.35.48/api';
+
+export default URL;
diff --git a/FE/frontend/src/util/useFetch.ts b/FE/frontend/src/util/useFetch.ts
index ca606262a..70231e2c8 100644
--- a/FE/frontend/src/util/useFetch.ts
+++ b/FE/frontend/src/util/useFetch.ts
@@ -1,6 +1,6 @@
 import { useQuery } from 'react-query';
 import axios from 'axios';
-const url = 'http://52.78.35.48/api';
+import URL from './url';
 
 interface Props {
   id?: string;
@@ -23,24 +23,24 @@ const getData = async (type: string, action: string, filter?: Props) => {
     case 'user':
       switch (action) {
         case 'image':
-          const userData = await axios.get(`${url}/user`, axiosConfig);
+          const userData = await axios.get(`${URL}/user`, axiosConfig);
           return userData.data.data;
       }
       return;
     case 'issue':
       switch (action) {
         case 'getAllData':
-          const allData = await axios.get(`${url}/issues`);
+          const allData = await axios.get(`${URL}/issues`);
           return allData.data.data;
         case 'count':
-          const count = await axios.get(`${url}/issues/count`);
+          const count = await axios.get(`${URL}/issues/count`);
           return count.data.data;
         case 'detail':
-          const detail = await axios.get(`${url}${filter?.id}`);
+          const detail = await axios.get(`${URL}${filter?.id}`);
           return detail.data.data;
         case 'filter':
           const filteredData = await axios.get(
-            `${url}/issues?is_open=${filter?.isOpen}&filter=${filter?.specialFilter}&assignee=${filter?.assignee}&label=${filter?.label}&milestone=${filter?.milstone}&writer=${filter?.writer}`
+            `${URL}/issues?is_open=${filter?.isOpen}&filter=${filter?.specialFilter}&assignee=${filter?.assignee}&label=${filter?.label}&milestone=${filter?.milstone}&writer=${filter?.writer}`
           );
           return filteredData.data.data;
       }
@@ -48,21 +48,21 @@ const getData = async (type: string, action: string, filter?: Props) => {
     case 'label':
       switch (action) {
         case 'getAllData':
-          const allData = await axios.get(`${url}/labels`);
+          const allData = await axios.get(`${URL}/labels`);
           return allData.data.data;
       }
       return;
     case 'milestone':
       switch (action) {
         case 'getAllData':
-          const allData = await axios.get(`${url}/milestones`);
+          const allData = await axios.get(`${URL}/milestones`);
           return allData.data.data;
       }
       return;
     case 'common':
       switch (action) {
         case 'count':
-          const count = await axios.get(`${url}/count`);
+          const count = await axios.get(`${URL}/count`);
           return count.data.data;
       }
   }
diff --git a/FE/frontend/src/util/useMutate.ts b/FE/frontend/src/util/useMutate.ts
index e09c264ac..436505081 100644
--- a/FE/frontend/src/util/useMutate.ts
+++ b/FE/frontend/src/util/useMutate.ts
@@ -1,5 +1,5 @@
 import axios from 'axios';
-const url = 'http://52.78.35.48/api';
+import URL from './url';
 
 interface Props {
   data: unknown;
@@ -20,16 +20,16 @@ const useMutate =
       case 'issue':
         switch (action) {
           case 'add':
-            return axios.post(`${url}/issues`, data, axiosConfig);
+            return axios.post(`${URL}/issues`, data, axiosConfig);
           case 'close':
-            return axios.post(`${url}/issues/close`, data, axiosConfig);
+            return axios.post(`${URL}/issues/close`, data, axiosConfig);
           case 'open':
-            return axios.post(`${url}/issues/open`, data, axiosConfig);
+            return axios.post(`${URL}/issues/open`, data, axiosConfig);
           case 'delete':
-            return axios.delete(`${url}/issues/${id}`, axiosConfig);
+            return axios.delete(`${URL}/issues/${id}`, axiosConfig);
           case 'editTitle':
             return axios.patch(
-              `${url}/issues/${id}/title`,
+              `${URL}/issues/${id}/title`,
               {
                 title: data,
               },
@@ -37,15 +37,15 @@ const useMutate =
             );
           case 'editAssignees':
             return axios.patch(
-              `${url}/issues/${id}/assignees`,
+              `${URL}/issues/${id}/assignees`,
               data,
               axiosConfig
             );
           case 'editLabels':
-            return axios.patch(`${url}/issues/${id}/labels`, data, axiosConfig);
+            return axios.patch(`${URL}/issues/${id}/labels`, data, axiosConfig);
           case 'editMilestones':
             return axios.patch(
-              `${url}/issues/${id}/milestones`,
+              `${URL}/issues/${id}/milestones`,
               data,
               axiosConfig
             );
@@ -54,7 +54,7 @@ const useMutate =
       case 'label':
         switch (action) {
           case 'add':
-            return axios.post(`${url}/labels`, data, axiosConfig);
+            return axios.post(`${URL}/labels`, data, axiosConfig);
         }
         return;
       case 'milestone':
@@ -65,7 +65,7 @@ const useMutate =
         switch (action) {
           case 'add':
             return axios.post(
-              `${url}/issues/${id}/comments`,
+              `${URL}/issues/${id}/comments`,
               data,
               axiosConfig
             );