[#35] feat : Add label component

codesquad-members-2021 · Jun 15, 2021 · 064ad4a · 064ad4a
1 parent cfe8a31
commit 064ad4a
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 20 deletions.
diff --git a/FE/frontend/package-lock.json b/FE/frontend/package-lock.json
diff --git a/FE/frontend/package.json b/FE/frontend/package.json
@@ -12,6 +12,7 @@
     "@types/react": "^17.0.9",
     "@types/react-dom": "^17.0.6",
     "axios": "^0.21.1",
+    "moment": "^2.29.1",
     "qs": "^6.7.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

diff --git a/FE/frontend/src/components/main/Header.tsx b/FE/frontend/src/components/main/Header.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import User from '../../styles/atoms/User';
 import { ReactComponent as Logo } from '../../icons/logoMedium.svg';
 
 const Header = () => {
@@ -17,12 +18,4 @@ const HeaderWrapper = styled.div`
   padding: 24px 48px;
 `;
 
-const User = styled.div`
-  width: 44px;
-  height: 44px;
-  border-radius: 22px;
-  border: ${props => `1px solid ${props.theme.greyscale.line}`};
-  box-sizing: border-box;
-`;
-
 export default Header;
diff --git a/FE/frontend/src/components/main/issue/IssueTable.tsx b/FE/frontend/src/components/main/issue/IssueTable.tsx
@@ -6,6 +6,8 @@ import { ReactComponent as AlertCircle } from '../../../icons/alertCircle.svg';
 import { ReactComponent as Archive } from '../../../icons/archive.svg';
 import ListFilters from './ListFilters';
 import useFetch from '../../../util/useFetch';
+import Label from '../../../styles/atoms/Label';
+import User from '../../../styles/atoms/User';
 
 const IssueTable = () => {
   const { isLoading, data, error } = useFetch('issue', 'getAllData');
@@ -29,20 +31,31 @@ const IssueTable = () => {
         {data?.map((issue: any) => {
           return (
             <IssueCell>
-              <CheckBox />
-              <AlertCircle />
-              <div>{issue.title}</div>
               <div>
-                {issue.labels.map((label: any) => {
-                  return <></>;
-                })}
+                <UpperCell>
+                  <CheckBox />
+                  <AlertCircle />
+                  <div>{issue.title}</div>
+                  <Labels>
+                    {issue.labels.map(
+                      (label: { id: number; title: string; color: string }) => {
+                        return (
+                          <Label title={label.title} color={label.color} />
+                        );
+                      }
+                    )}
+                  </Labels>
+                </UpperCell>
+                <LowerCell>
+                  <div>{issue.id}</div>
+                  <div>
+                    {issue.writer.username}가 {issue.created_time}에
+                    만들었습니다
+                  </div>
+                  <div>{issue.milestone.title}</div>
+                </LowerCell>
               </div>
-              <div>{issue.id}</div>
-              <div>
-                {issue.writer.username}가 {issue.created_time}에 만들었습니다
-              </div>
-              <div>{issue.milestone.title}</div>
-              <div>{issue.writer.profile_image}</div>
+              <User imageURL={issue.writer.profile_image} />
             </IssueCell>
           );
         })}
@@ -77,6 +90,9 @@ const LeftHeaderWrapper = styled.div`
 
 const IssueCell = styled.div`
   height: 100px;
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 24px;
   background: ${props => props.theme.greyscale.offWhite};
   margin: 1px 0px;
   svg {
@@ -85,6 +101,18 @@ const IssueCell = styled.div`
   }
 `;
 
+const UpperCell = styled.div`
+  display: flex;
+`;
+
+const Labels = styled.div`
+  display: flex;
+`;
+
+const LowerCell = styled.div`
+  display: flex;
+`;
+
 const Text = styled(Typo)`
   svg {
     margin: 2px 6px 0 6px;

diff --git a/FE/frontend/src/styles/atoms/Label.tsx b/FE/frontend/src/styles/atoms/Label.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+interface Props {
+  title: string;
+  color: string;
+}
+
+const Label = (props: Props) => {
+  return <LabelWrapper color={props.color}>{props.title}</LabelWrapper>;
+};
+
+const LabelWrapper = styled.div<{ color: string }>`
+  ${props => props.theme.alignCenter}
+  padding: 0px 16px;
+
+  background: ${props => props.color};
+  border-radius: 30px;
+`;
+export default Label;
diff --git a/FE/frontend/src/styles/atoms/User.tsx b/FE/frontend/src/styles/atoms/User.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface Props {
+  imageURL?: string;
+}
+
+const User = (props: Props) => {
+  return <UserWrapper imageURL={props.imageURL} />;
+};
+
+const UserWrapper = styled.div<{ imageURL?: string | undefined }>`
+  width: 44px;
+  height: 44px;
+  border-radius: 22px;
+  background-image: ${props =>
+    props.imageURL
+      ? `url(${props.imageURL})`
+      : `url('https://avatars.githubusercontent.com/u/46085281?s=400&u=5eb6eef34df137b4e1a8c4f5802c43b9e14b5ed5&v=4')`};
+  border: ${props => `1px solid ${props.theme.greyscale.line}`};
+  box-sizing: border-box;
+`;
+
+export default User;