From 0e7b560b8b572a5ac46da6f26a9ebffb279dc208 Mon Sep 17 00:00:00 2001 From: Seohyoung Date: Thu, 24 Jun 2021 11:22:47 +0900 Subject: [PATCH] [#35] feat : Add URL component to manage url in single source --- FE/frontend/src/components/login/Login.tsx | 5 +++++ FE/frontend/src/components/login/Oauth.tsx | 5 +++-- FE/frontend/src/util/url.ts | 3 +++ FE/frontend/src/util/useFetch.ts | 18 +++++++++--------- FE/frontend/src/util/useMutate.ts | 22 +++++++++++----------- 5 files changed, 31 insertions(+), 22 deletions(-) create mode 100644 FE/frontend/src/util/url.ts 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 = () => { GitHub 계정으로 로그인 + Google 계정으로 로그인 or 아이디 비밀번호 @@ -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 = ({ 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 );