diff --git a/FE/frontend/package-lock.json b/FE/frontend/package-lock.json index 746789d89..3fbae740d 100644 --- a/FE/frontend/package-lock.json +++ b/FE/frontend/package-lock.json @@ -16,6 +16,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", @@ -13723,6 +13724,14 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==", + "engines": { + "node": "*" + } + }, "node_modules/move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", @@ -32760,6 +32769,11 @@ "minimist": "^1.2.5" } }, + "moment": { + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", + "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==" + }, "move-concurrently": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", diff --git a/FE/frontend/package.json b/FE/frontend/package.json index 72f6dc455..ad2dea125 100644 --- 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 index 59235e85a..3c99027e2 100644 --- 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 index 735c11ba1..d0aedc4e4 100644 --- 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 ( - - -
{issue.title}
- {issue.labels.map((label: any) => { - return <>; - })} + + + +
{issue.title}
+ + {issue.labels.map( + (label: { id: number; title: string; color: string }) => { + return ( + + + +
{issue.id}
+
+ {issue.writer.username}가 {issue.created_time}에 + 만들었습니다 +
+
{issue.milestone.title}
+
-
{issue.id}
-
- {issue.writer.username}가 {issue.created_time}에 만들었습니다 -
-
{issue.milestone.title}
-
{issue.writer.profile_image}
+ ); })} @@ -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 new file mode 100644 index 000000000..fa90883cc --- /dev/null +++ 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 {props.title}; +}; + +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 new file mode 100644 index 000000000..c43fd83d9 --- /dev/null +++ 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 ; +}; + +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;