From fca35ed4b0cb70f5f42dcd614b5274ff5dc7b88d Mon Sep 17 00:00:00 2001 From: jeonyeonkyu Date: Thu, 17 Jun 2021 01:01:13 +0900 Subject: [PATCH 1/2] =?UTF-8?q?Feat:=20=EB=A7=88=EC=9D=BC=EC=8A=A4?= =?UTF-8?q?=ED=86=A4=20=EC=95=84=EC=9D=B4=ED=85=9C=20=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20UI=20=EA=B5=AC=ED=98=84=20#111?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/client/src/App.tsx | 16 +++- fe/client/src/Icons/Calendar.svg | 6 ++ fe/client/src/Pages/CreateIssuePage.tsx | 4 +- fe/client/src/Pages/MilestoneListPage.tsx | 52 ++++++++++ .../src/components/common/IconButton.tsx | 2 + .../common/{TitleInput.tsx => InputField.tsx} | 6 +- .../common/LabelMilestoneToggle.tsx | 51 +++++----- .../src/components/common/ProgressBar.tsx | 19 ++++ .../components/createIssue/HeadContent.tsx | 6 +- .../{InputField.tsx => TitleInput.tsx} | 8 +- .../components/issueDetail/HeadContent.tsx | 4 +- .../src/components/issueList/IssueDesc.tsx | 1 + .../src/components/issueList/ListItem.tsx | 3 +- .../components/labelList/LabelEditItem.tsx | 8 +- .../components/milestoneList/HeadContent.tsx | 24 +++++ .../milestoneList/MilestoneEditItem.tsx | 23 +++++ .../milestoneList/MilestoneItem.tsx | 95 +++++++++++++++++++ .../milestoneList/MilestoneSwitching.tsx | 14 +++ 18 files changed, 296 insertions(+), 46 deletions(-) create mode 100644 fe/client/src/Icons/Calendar.svg create mode 100644 fe/client/src/Pages/MilestoneListPage.tsx rename fe/client/src/components/common/{TitleInput.tsx => InputField.tsx} (80%) create mode 100644 fe/client/src/components/common/ProgressBar.tsx rename fe/client/src/components/createIssue/{InputField.tsx => TitleInput.tsx} (94%) create mode 100644 fe/client/src/components/milestoneList/HeadContent.tsx create mode 100644 fe/client/src/components/milestoneList/MilestoneEditItem.tsx create mode 100644 fe/client/src/components/milestoneList/MilestoneItem.tsx create mode 100644 fe/client/src/components/milestoneList/MilestoneSwitching.tsx diff --git a/fe/client/src/App.tsx b/fe/client/src/App.tsx index c68cdfba4..f32bd9b7c 100644 --- a/fe/client/src/App.tsx +++ b/fe/client/src/App.tsx @@ -10,6 +10,7 @@ const IssueListLazy = React.lazy(() => import('@/Pages/IssueListPage')); const CreateIssueLazy = React.lazy(() => import('@/Pages/CreateIssuePage')); const IssueDetailLazy = React.lazy(() => import('@/Pages/IssueDetailPage')); const LabelListLazy = React.lazy(() => import('@/Pages/LabelListPage')); +const MilestoneLazy = React.lazy(() => import('@/Pages/MilestoneListPage')); const Page404Lazy = React.lazy(() => import('@/Pages/Page404')); const routeArray = [ @@ -17,7 +18,9 @@ const routeArray = [ { path: '/createIssue', component: CreateIssueLazy }, { path: '/issueDetail', component: IssueDetailLazy }, { path: '/labelList', component: LabelListLazy }, + { path: '/milestoneList', component: MilestoneLazy } ]; + const routePaths = routeArray.map(({ path }) => path); function App() { return ( @@ -40,10 +43,15 @@ function App() { const GlobalStyle = createGlobalStyle` - body{ - background: #F7F7FC; - padding: 27px 80px 0; + body { + background: #F7F7FC; + padding: 27px 80px 0; + } + a { + width: inherit; + text-decoration: none; + color: inherit; } - ` +`; export default App; \ No newline at end of file diff --git a/fe/client/src/Icons/Calendar.svg b/fe/client/src/Icons/Calendar.svg new file mode 100644 index 000000000..629ab3b70 --- /dev/null +++ b/fe/client/src/Icons/Calendar.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/fe/client/src/Pages/CreateIssuePage.tsx b/fe/client/src/Pages/CreateIssuePage.tsx index beb9fbca3..66dee12a0 100644 --- a/fe/client/src/Pages/CreateIssuePage.tsx +++ b/fe/client/src/Pages/CreateIssuePage.tsx @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; import styled from 'styled-components'; import Button from '@material-ui/core/Button'; import Tabs from '@components/createIssue/Tabs'; -import InputField from '@components/createIssue/InputField'; +import TitleInput from '@components/createIssue/TitleInput'; import IconButton from '@components/common/IconButton'; import { inputStyles } from '@components/common/baseStyle/baseStyle'; @@ -16,7 +16,7 @@ const CreateIssuePage = () => {
- +
diff --git a/fe/client/src/Pages/MilestoneListPage.tsx b/fe/client/src/Pages/MilestoneListPage.tsx new file mode 100644 index 000000000..38986bc32 --- /dev/null +++ b/fe/client/src/Pages/MilestoneListPage.tsx @@ -0,0 +1,52 @@ +import React from 'react' +import styled from 'styled-components'; +import HeadContent from '@components/milestoneList/HeadContent'; +import MilestoneSwitching from '@components/milestoneList/MilestoneSwitching'; +import IconButton from '@components/common/IconButton'; +import { ListWrapper } from '@components/common/baseStyle/baseStyle'; + +const MilestoneListPage = () => { + return ( + <> + + + + + + + 열린 이슈 + + + + + + 닫힌 이슈 + + + + + + + ) +} + +const ListHeader = styled.div` + +`; + +const RadioButton = styled.input` + display:none; + &:checked + span { + color: #000; + } +`; + +const ToggleItem = styled.label` + color: #6e7191; + font-weight:700; + &:hover{ + cursor:pointer; + } +`; + +export default MilestoneListPage; diff --git a/fe/client/src/components/common/IconButton.tsx b/fe/client/src/components/common/IconButton.tsx index 8d3548d09..c3dd29806 100644 --- a/fe/client/src/components/common/IconButton.tsx +++ b/fe/client/src/components/common/IconButton.tsx @@ -9,6 +9,7 @@ import CloseBoxIcon from '@/Icons/CloseBox.svg'; import ClipIcon from '@/Icons/Clip.svg'; import EditIcon from '@/Icons/Edit.svg'; import TrashIcon from '@/Icons/Trash.svg'; +import MilestoneIcon from '@/Icons/Milestone.svg'; const iconKinds: Record = { whitePlus: WhitePlusIcon, @@ -19,6 +20,7 @@ const iconKinds: Record = { clip: ClipIcon, edit: EditIcon, trash: TrashIcon, + milestone: MilestoneIcon, } type IconButtonType = { diff --git a/fe/client/src/components/common/TitleInput.tsx b/fe/client/src/components/common/InputField.tsx similarity index 80% rename from fe/client/src/components/common/TitleInput.tsx rename to fe/client/src/components/common/InputField.tsx index 17b0066a3..e95961915 100644 --- a/fe/client/src/components/common/TitleInput.tsx +++ b/fe/client/src/components/common/InputField.tsx @@ -2,14 +2,14 @@ import React from 'react' import TextField from '@material-ui/core/TextField'; import { inputStyles } from './baseStyle/baseStyle'; -type TitleInputType = { +type InputFieldType = { defaultValue?: string; label?: string; width?: string; [x: string]: any; } -const TitleInput = ({ defaultValue, label, width, ...props }: TitleInputType) => { +const InputField = ({ defaultValue, label, width, ...props }: InputFieldType) => { const classes = inputStyles(); return ( ) } -export default TitleInput; +export default InputField; diff --git a/fe/client/src/components/common/LabelMilestoneToggle.tsx b/fe/client/src/components/common/LabelMilestoneToggle.tsx index c13e3e5ef..2a6ee56f3 100644 --- a/fe/client/src/components/common/LabelMilestoneToggle.tsx +++ b/fe/client/src/components/common/LabelMilestoneToggle.tsx @@ -1,4 +1,5 @@ import { useEffect } from 'react'; +import { Link, useLocation } from 'react-router-dom'; import styled from "styled-components"; import { labelMilestoneCountAtom } from "@components/common/atoms/labelMilestoneAtom"; import useFetch, { AsyncState } from "@/utils/hook/useFetch"; @@ -8,6 +9,8 @@ import LabelIcon from '@/Icons/Label.svg'; import MilestoneIcon from '@/Icons/Milestone.svg'; const LabelMilestoneToggle = () => { + const location = useLocation(); + const defaultChecked = location.pathname === '/labelList'; const [labelState] = useFetch(API.get.labelsCount); const [milestoneState] = useFetch(API.get.milestonesCount); const { data: labelData }: AsyncState = labelState; @@ -24,18 +27,22 @@ const LabelMilestoneToggle = () => { return ( - - -   레이블 - {labelData && ` (${labelData.count})`} - - - - -   마일스톤 - {milestoneData && ` (${milestoneData.count})`} - - + + + +   레이블 + {labelData && ` (${labelData.count})`} + + + + + + +   마일스톤 + {milestoneData && ` (${milestoneData.count})`} + + + ); }; @@ -52,19 +59,10 @@ const ToggleItem = styled.label` width: 160px; height: 100%; text-align: center; - + &:hover > span { background: #eff0f6; } - :first-child > span { - border-radius: 11px 0 0 11px; - border: 1px solid #d9dbe9; - } - :last-child > span { - border-radius: 0 11px 11px 0; - border: 1px solid #d9dbe9; - border-left:0; - } `; const RadioButton = styled.input` @@ -74,7 +72,7 @@ const RadioButton = styled.input` } `; -const LabelBelongSpan = styled.span` +const LabelBelongSpanLeft = styled.span` height: 100%; width: 100%; background: #f5f5f7; @@ -82,9 +80,16 @@ const LabelBelongSpan = styled.span` justify-content: center; align-items: center; box-shadow:0px 1px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%); + border-radius: 11px 0 0 11px; + border: 1px solid #d9dbe9; &:hover { cursor: pointer; } `; +const LabelBelongSpanRight = styled(LabelBelongSpanLeft)` + border-radius: 0 11px 11px 0; + border-left:0; +`; + export default LabelMilestoneToggle; diff --git a/fe/client/src/components/common/ProgressBar.tsx b/fe/client/src/components/common/ProgressBar.tsx new file mode 100644 index 000000000..c9bffc99c --- /dev/null +++ b/fe/client/src/components/common/ProgressBar.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import LinearProgress from '@material-ui/core/LinearProgress'; +import styled from 'styled-components'; + +const ProgressBar = ({ ...props }) => { + return ( + + ) +} + +const PrimaryProgressBar = styled(LinearProgress)` + height: 8px; + border-radius: 10px; + background:#EFF0F6; + > div{ + background:#017AFF; + } +`; +export default ProgressBar; diff --git a/fe/client/src/components/createIssue/HeadContent.tsx b/fe/client/src/components/createIssue/HeadContent.tsx index 20fc2ea53..c6b25db00 100644 --- a/fe/client/src/components/createIssue/HeadContent.tsx +++ b/fe/client/src/components/createIssue/HeadContent.tsx @@ -3,9 +3,9 @@ import styled from 'styled-components'; const HeadContent = () => { return ( - - 새로운 이슈작성 - + + 새로운 이슈작성 + ) } diff --git a/fe/client/src/components/createIssue/InputField.tsx b/fe/client/src/components/createIssue/TitleInput.tsx similarity index 94% rename from fe/client/src/components/createIssue/InputField.tsx rename to fe/client/src/components/createIssue/TitleInput.tsx index eea49904d..2e40a870a 100644 --- a/fe/client/src/components/createIssue/InputField.tsx +++ b/fe/client/src/components/createIssue/TitleInput.tsx @@ -2,13 +2,13 @@ import React, { useCallback } from 'react' import styled from 'styled-components'; import TextField from '@material-ui/core/TextField'; import Button from '@material-ui/core/Button'; -import TitleInput from '@components/common/TitleInput'; +import InputField from '@/components/common/InputField'; import { inputStyles } from '@components/common/baseStyle/baseStyle'; import API from '@/utils/API'; import useDebounceTyping from '@/utils/hook/useDebounce'; import ClipIcon from '@/Icons/Clip.svg'; -const InputField = () => { +const TitleInput = () => { const classes = inputStyles(); const [debouncedCount, setDebounceCount] = useDebounceTyping(0, { start: 500, end: 2000 }); const handleChangeTyping = useCallback((event: React.ChangeEvent) => { @@ -29,7 +29,7 @@ const InputField = () => { return ( - + { return ( <> - + 편집 취소 diff --git a/fe/client/src/components/issueList/IssueDesc.tsx b/fe/client/src/components/issueList/IssueDesc.tsx index 16f7e9947..41669e79e 100644 --- a/fe/client/src/components/issueList/IssueDesc.tsx +++ b/fe/client/src/components/issueList/IssueDesc.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components'; import { IssueListItemType } from '@components/common/types/APIType'; import { getTimeTaken } from '@/utils/serviceUtils'; import MilestoneIcon from '@/Icons/Milestone.svg'; + type IssueDescType = { issueItem: IssueListItemType } diff --git a/fe/client/src/components/issueList/ListItem.tsx b/fe/client/src/components/issueList/ListItem.tsx index 0bb9faf33..f9ad0bc6a 100644 --- a/fe/client/src/components/issueList/ListItem.tsx +++ b/fe/client/src/components/issueList/ListItem.tsx @@ -6,6 +6,7 @@ import { IssueListItemType } from '@components/common/types/APIType'; import { issueCheckedItemAtom, CheckBoxItemType, issueCheckedAllItemAtom } from '@components/common/atoms/checkBoxAtom'; import { useRecoilState } from '@/utils/myRecoil/useRecoilState'; import AlertCircleIcon from '@/Icons/AlertCircle.svg'; + type ListItemType = { issueItem: IssueListItemType } @@ -24,10 +25,10 @@ const ListItem = ({ issueItem }: ListItemType) => { }) }, []); - useEffect(() => { setCheckedState(isAllIssueChecked); }, [isAllIssueChecked]) + return ( diff --git a/fe/client/src/components/labelList/LabelEditItem.tsx b/fe/client/src/components/labelList/LabelEditItem.tsx index 922b2813f..0be245e6b 100644 --- a/fe/client/src/components/labelList/LabelEditItem.tsx +++ b/fe/client/src/components/labelList/LabelEditItem.tsx @@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect } from 'react' import styled from 'styled-components'; import { InputAdornment } from '@material-ui/core'; import Label from '@components/common/Label'; -import TitleInput from '@components/common/TitleInput'; +import InputField from '@/components/common/InputField'; import IconButton from '@components/common/IconButton'; import { LabelItemType } from '@components/common/types/LabelType'; import { getRandomColor } from '@/utils/serviceUtils'; @@ -33,9 +33,9 @@ const LabelEditItem = ({ name, color, description, setToggleItem }: LabelItemTyp