[#35] feat : Add function which delete label

codesquad-members-2021 · Jun 25, 2021 · 8d59eed · 8d59eed
1 parent 1d80910
commit 8d59eed
Show file tree

Hide file tree

Showing 14 changed files with 217 additions and 43 deletions.
diff --git a/FE/frontend/src/App.js b/FE/frontend/src/App.js
@@ -9,6 +9,8 @@ import Login from './components/login/Login';
 import Main from './components/main/Main';
 import GoogleOauth from './components/login/GoogleOauth';
 import GitHubOauth from './components/login/GitHubOauth';
+import KakaoOauth from './components/login/KakaoOauth';
+import NaverOauth from './components/login/NaverOauth';
 
 const queryClient = new QueryClient();
 function App() {
@@ -29,6 +31,8 @@ function App() {
                 </Route>
                 <Route path="/login/github" component={GitHubOauth} />
                 <Route path="/login/google" component={GoogleOauth} />
+                <Route path="/login/kakao" component={KakaoOauth} />
+                <Route path="/login/naver" component={NaverOauth} />
                 <Route path="/main" component={Main} />
               </Switch>
             </BrowserRouter>

diff --git a/FE/frontend/src/components/login/KakaoOauth.tsx b/FE/frontend/src/components/login/KakaoOauth.tsx
@@ -0,0 +1,37 @@
+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';
+
+interface Props extends RouteComponentProps {}
+
+const KakaoOauth: React.FC<Props> = ({ history, location }) => {
+  useEffect(() => {
+    const getToken = async () => {
+      const { code } = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+      });
+
+      try {
+        const response = await axios.get(`${URL}/login/kakao?code=${code}`);
+        localStorage.setItem('token', response.data.data.jwt);
+
+        axios.get(`${URL}/jwt`, {
+          headers: { Authorization: 'Bearer ' + localStorage.getItem('token') },
+        });
+        history.push('/main');
+      } catch (error) {
+        alert(error);
+        history.push('/');
+      }
+    };
+
+    getToken();
+  }, [location, history]);
+
+  return <Main />;
+};
+
+export default KakaoOauth;
diff --git a/FE/frontend/src/components/login/Login.tsx b/FE/frontend/src/components/login/Login.tsx
@@ -5,18 +5,26 @@ import Buttons from '../../styles/atoms/Buttons';
 import { ReactComponent as Logo } from '../../icons/logoLarge.svg';
 
 const Login = () => {
-  const url = `https://github.com/login/oauth/authorize?client_id=8f053229e25de08ed09d&scope=user:email&redirect_uri=http://localhost:3000/login/github`;
+  const gitHuburl = `https://github.com/login/oauth/authorize?client_id=8f053229e25de08ed09d&scope=user:email&redirect_uri=http://localhost:3000/login/github`;
   const googleUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=195028719127-a5r87r9182sidvd6vjs9akod785k5t94.apps.googleusercontent.com&redirect_uri=http://localhost:3000/login/google&response_type=code&scope=https://www.googleapis.com/auth/userinfo.email+https://www.googleapis.com/auth/userinfo.profile&flowName=GeneralOAuthFlow`;
+  const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?client_id=9e5543492002f4b2a2853b92861bb134&redirect_uri=http://localhost:3000/login/kakao&response_type=code`;
+  const naverUrl = `https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=DhAPofnVzIKvhXOtMvY_&state=200&redirect_uri=http://localhost:3000/login/naver`;
 
   return (
     <LoginContainer>
       <Logo />
-      <a href={url}>
+      <a href={gitHuburl}>
         <GitHubLogin large>GitHub 계정으로 로그인</GitHubLogin>
       </a>
       <a href={googleUrl}>
         <GoogleLogin large>Google 계정으로 로그인</GoogleLogin>
       </a>
+      <a href={naverUrl}>
+        <NaverLogin large>Naver 계정으로 로그인</NaverLogin>
+      </a>
+      <a href={kakaoUrl}>
+        <KakaoLogin large>Kakao 계정으로 로그인</KakaoLogin>
+      </a>
       <TextInBetween sm>or</TextInBetween>
       <ManualLogin large>아이디</ManualLogin>
       <ManualLogin large>비밀번호</ManualLogin>
@@ -39,6 +47,7 @@ const LoginContainer = styled.div`
   flex-direction: column;
   & > * {
     margin-bottom: 20px;
+    text-decoration: none;
   }
 `;
 
@@ -51,6 +60,15 @@ const GoogleLogin = styled(Buttons)`
   background-color: #4285f4;
 `;
 
+const NaverLogin = styled(Buttons)`
+  background-color: #2db400;
+`;
+
+const KakaoLogin = styled(Buttons)`
+  background-color: #ffe812;
+  color: ${props => props.theme.greyscale.titleActive};
+`;
+
 const TextInBetween = styled(Typos)`
   color: ${props => props.theme.greyscale.placeholer};
 `;

diff --git a/FE/frontend/src/components/login/NaverOauth.tsx b/FE/frontend/src/components/login/NaverOauth.tsx
@@ -0,0 +1,37 @@
+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';
+
+interface Props extends RouteComponentProps {}
+
+const NaverOauth: React.FC<Props> = ({ history, location }) => {
+  useEffect(() => {
+    const getToken = async () => {
+      const { code } = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+      });
+
+      try {
+        const response = await axios.get(`${URL}/login/naver?code=${code}`);
+        localStorage.setItem('token', response.data.data.jwt);
+
+        axios.get(`${URL}/jwt`, {
+          headers: { Authorization: 'Bearer ' + localStorage.getItem('token') },
+        });
+        history.push('/main');
+      } catch (error) {
+        alert(error);
+        history.push('/');
+      }
+    };
+
+    getToken();
+  }, [location, history]);
+
+  return <Main />;
+};
+
+export default NaverOauth;
diff --git a/FE/frontend/src/components/main/issue/IssueDetail.tsx b/FE/frontend/src/components/main/issue/IssueDetail.tsx
@@ -1,33 +1,29 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 import moment from 'moment';
 import 'moment/locale/ko';
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation } from 'react-query';
+import { useRecoilValue } from 'recoil';
+import { filterOptionAtom } from '../../../recoil/atoms';
 import NewComment from './NewComment';
 import useMutate from '../../../util/useMutate';
 import useFetch from '../../../util/useFetch';
 import User from '../../../styles/atoms/User';
 import Buttons from '../../../styles/atoms/Buttons';
+import Modal from '../../../styles/molcules/Modal';
 import Typos from '../../../styles/atoms/Typos';
 import { ReactComponent as AlertCircle } from '../../../icons/alertCircle.svg';
 import { ReactComponent as XSquare } from '../../../icons/xSquare.svg';
 import { ReactComponent as Edit } from '../../../icons/edit.svg';
+import { ReactComponent as Plus } from '../../../icons/plus.svg';
 
 const IssueDetail = () => {
-  const queryClient = useQueryClient();
   const location = useLocation();
   const { isLoading, data, error, refetch } = useFetch('issue', 'detail', {
     id: location.pathname,
   });
-
-  useEffect(() => {
-    console.log(data);
-    queryClient.setQueryData(['issue', 'detail', location.pathname], data);
-    // queryClient.invalidateQueries(['issue', 'detail', location.pathname]);
-    console.log(data);
-  }, [data]);
-
+  const filterOptions = useRecoilValue(filterOptionAtom);
   const { mutateAsync: MutateTitle, isSuccess: isEditSuccess } = useMutation(
     useMutate('issue', 'editTitle')
   );
@@ -148,7 +144,38 @@ const IssueDetail = () => {
                 })}
               <NewComment issueId={data.id} refetch={refetch} />
             </CommentsContainer>
-            <Assignees></Assignees>
+            <FilterContainer>
+              <Modal
+                options={filterOptions.assignee}
+                exceptedDiv="filterTitle"
+                type="image"
+                innerTitle="담당자 추가">
+                <Text link sm>
+                  담당자
+                  <Plus />
+                </Text>
+              </Modal>
+              <Modal
+                options={filterOptions.label}
+                exceptedDiv="filterTitle"
+                type="image"
+                innerTitle="레이블 추가">
+                <Text link sm>
+                  레이블
+                  <Plus />
+                </Text>
+              </Modal>
+              {/* <Modal
+                options={filterOptions.milestone}
+                exceptedDiv="filterTitle"
+                type="text"
+                innerTitle="마일스톤 추가">
+                <Text link sm>
+                  마일스톤
+                  <Plus />
+                </Text>
+              </Modal> */}
+            </FilterContainer>
             {/* <Typos xs>이슈 삭제</Typos> */}
           </MainContainer>
         </LabelListContainer>
@@ -306,14 +333,27 @@ const Comment = styled.div`
   border-radius: 0px 0px 16px 16px;
 `;
 
-const Assignees = styled.div`
+const FilterContainer = styled.div`
+  width: 308px;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  padding: 32px;
-  width: 308px;
   background: ${props => props.theme.greyscale.offWhite};
   border-radius: 16px 16px 0px 0px;
   margin: 1px 0px;
 `;
+
+const Text = styled(Typos)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  width: 100%;
+  height: 96px;
+  background: ${props => props.theme.greyscale.offWhite};
+  color: ${props => props.theme.greyscale.label};
+  svg {
+    stroke: ${props => props.theme.greyscale.label};
+    margin: 2px 0 0 10px;
+  }
+`;
 export default IssueDetail;
diff --git a/FE/frontend/src/components/main/issue/IssueTable.tsx b/FE/frontend/src/components/main/issue/IssueTable.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import { useQueryClient } from 'react-query';
 import useFetch from '../../../util/useFetch';
 import ListFilters from './ListFilters';
 import Issues from './Issues';

diff --git a/FE/frontend/src/components/main/issue/ListFilters.tsx b/FE/frontend/src/components/main/issue/ListFilters.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
+import { useRecoilState } from 'recoil';
+import { filterOptionAtom } from '../../../recoil/atoms';
 import useFetch from '../../../util/useFetch';
 import AssigneeFilter from './AssigneeFilter';
 import LabelFilter from './LabelFilter';
@@ -8,6 +10,7 @@ import AuthorFilter from './AuthorFilter';
 
 const ListFilters = () => {
   const { data } = useFetch('issue', 'getAllData');
+  const [filterOption, setFilterOption] = useRecoilState<any>(filterOptionAtom);
 
   const assignees = data
     ?.flatMap(({ assignees }: any) => {
@@ -57,6 +60,8 @@ const ListFilters = () => {
       return { id: val.id, optionName: val.username, image: val.profile_image };
     });
 
+  useEffect(() => {}, [data]);
+
   return (
     <FilterContainer>
       {assignees && <AssigneeFilter filteredAssignee={assignees} />}
@@ -69,6 +74,14 @@ const ListFilters = () => {
 
 const FilterContainer = styled.div`
   display: flex;
+  & > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    width: 128px;
+    background: ${props => props.theme.greyscale.background};
+    border-radius: 11px 0px 0px 11px;
+  }
 `;
 
 export default ListFilters;
diff --git a/FE/frontend/src/components/main/issue/NewComment.tsx b/FE/frontend/src/components/main/issue/NewComment.tsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
-import { Link, useHistory } from 'react-router-dom';
-import { useMutation, useQueryClient } from 'react-query';
+import { useHistory } from 'react-router-dom';
+import { useMutation } from 'react-query';
 import useMutate from '../../../util/useMutate';
 import Typos from '../../../styles/atoms/Typos';
 import User from '../../../styles/atoms/User';
@@ -28,7 +28,6 @@ const NewComment = (props: Props) => {
   });
 
   let debounceTimeoutId: ReturnType<typeof setTimeout>;
-  let history = useHistory();
 
   const { mutateAsync } = useMutation(useMutate('comment', 'add'), {
     onSuccess: () => {

diff --git a/FE/frontend/src/components/main/issue/SearchFilter.tsx b/FE/frontend/src/components/main/issue/SearchFilter.tsx
@@ -58,6 +58,12 @@ const Search = styled.input`
 `;
 
 const Text = styled(Typos)`
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  width: 128px;
+  background: ${props => props.theme.greyscale.background};
+  border-radius: 11px 0px 0px 11px;
   color: ${props => props.theme.greyscale.label};
   svg {
     margin: 2px 6px 0 6px;

diff --git a/FE/frontend/src/components/main/label/LabelList.tsx b/FE/frontend/src/components/main/label/LabelList.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
+import { useMutation } from 'react-query';
+import useMutate from '../../../util/useMutate';
 import useFetch from '../../../util/useFetch';
 import Tabs from '../../../styles/molcules/Tabs';
 import Buttons from '../../../styles/atoms/Buttons';
@@ -12,13 +14,29 @@ import { ReactComponent as Trash } from '../../../icons/trash.svg';
 import { ReactComponent as XSquare } from '../../../icons/xSquare.svg';
 
 const LabelList = () => {
-  const { isLoading, data, error } = useFetch('label', 'getAllData');
+  const { isLoading, data, error, refetch } = useFetch('label', 'getAllData');
   const [isNewLabelOpened, setIsNewLabelOpened] = useState(false);
+  const { mutateAsync: DeleteAsync, isSuccess: isDeleteSuccess } = useMutation(
+    useMutate('label', 'delete'),
+    {
+      onSuccess: () => {
+        refetch();
+      },
+    }
+  );
 
   const setAddLabel = () => {
     setIsNewLabelOpened(!isNewLabelOpened);
   };
 
+  const deleteLabel = async (id: number) => {
+    await DeleteAsync({ id: id });
+
+    if (isDeleteSuccess) {
+      refetch();
+    }
+  };
+
   return (
     <LabelListContainer>
       <LabelTab>
@@ -64,7 +82,12 @@ const LabelList = () => {
                   <EditWrapper link sm>
                     <Edit /> 편집
                   </EditWrapper>
-                  <TrashWrapper link sm>
+                  <TrashWrapper
+                    link
+                    sm
+                    onClick={() => {
+                      deleteLabel(label.id);
+                    }}>
                     <Trash /> 삭제
                   </TrashWrapper>
                 </RightCellContainer>