From 4ca6b970cc0f827bd140657657701ae679be9a4f Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Thu, 17 Jun 2021 16:28:17 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4?= =?UTF-8?q?=20css=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/DropDown.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/common/DropDown.tsx b/frontend/src/components/common/DropDown.tsx index 39348da23..4e5ea6b14 100644 --- a/frontend/src/components/common/DropDown.tsx +++ b/frontend/src/components/common/DropDown.tsx @@ -13,7 +13,7 @@ const DropDown = ({ info }) => { return ( - {info.name} + {info.icon && info.icon()}{info.name} {isClicked && @@ -40,11 +40,17 @@ const DropdownLayout = styled.div` `; const DropdownButton = styled.button` padding: 0 30px; - background: #F7F7FC; - border: 1px solid #D9DBE9; - border-radius: 11px 0px 0px 11px; + border: none; + background-color: rgba( 255, 255, 255, 0 ); + /* background: #F7F7FC; */ + /* border: 1px solid #D9DBE9; + border-radius: 11px 0px 0px 11px; */ + display: flex; flex-basis: 120px; + align-items: center; + + span { margin-left: 10px; white-space:nowrap; } `; const DropDownLayer = styled.div` @@ -54,7 +60,7 @@ const DropDownLayer = styled.div` /* background: #D9DBE9; */ border: 1px solid #D9DBE9; - border-radius: 16px; + border-radius: 16px !important; ul { list-style-type: none; @@ -93,6 +99,9 @@ const DropdownElement = styled.li` } `; +const DropdownButtonText = styled.span` + cursor: pointer; +`; const Radio = styled.input`` export default DropDown; \ No newline at end of file From f457f300c82e8a9f3f7b7316331b3870c7d859f4 Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Thu, 17 Jun 2021 16:28:37 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=EC=9D=B4=EC=8A=88=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/IssueList/IssueList.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/IssueList/IssueList.tsx b/frontend/src/components/IssueList/IssueList.tsx index 14e6ea827..45220e240 100644 --- a/frontend/src/components/IssueList/IssueList.tsx +++ b/frontend/src/components/IssueList/IssueList.tsx @@ -2,11 +2,13 @@ import { useState } from 'react'; import styled from 'styled-components'; import DropDown from 'components/common/DropDown'; +import ArrowIcon from 'components/common/icons/ArrowIcon'; const IssueManagerFilterInfo = { name: "담당자", header: "담당자 필터", alignment: "reverse", + icon: ArrowIcon, elements: [ {contents: "담당자가 없는 이슈", value: 0, options:{}}, // {} 동적 생성 @@ -17,6 +19,7 @@ const IssueLabelFilterInfo = { name: "레이블", header: "레이블 필터", alignment: "reverse", + icon: ArrowIcon, elements: [ {contents: "레이블이 없는 이슈", value: 0, options:{}}, {contents: "bug", value: 1, options:{color: "red"}}, @@ -29,6 +32,7 @@ const IssueMilestoneFilterInfo = { name: "마일스톤", header: "마일스톤 필터", alignment: "reverse", + icon: ArrowIcon, elements: [ {contents: "마일스톤이 없는 이슈", value: 0, options:{}}, {contents: "마스터즈 코스", value: 1, options:{}}, @@ -41,6 +45,7 @@ const IssueAuthorFilterInfo = { name: "작성자", header: "작성자 필터", alignment: "reverse", + icon: ArrowIcon, elements: [ {contents: "테스트 계정", value: 0, options:{}}, // {contents: "마스터즈 코스", value: 1, options:{}}, @@ -75,8 +80,8 @@ const IssueList = () => { - 디코 - 최고다 + 이슈 제목 + # 이슈 번호 ... profile img @@ -149,6 +154,8 @@ const IssueListDetailInfomationLayer = styled(IssueListLayer)` const DetailInformationTitle = styled(IssueListLayer)` margin-top: 10px; + font-weight: 700; + font-size: 1.89rem; `; const DetailInformationContents = styled(IssueListLayer)` margin-top: 10px; From f1ee972745f8f2473ae5ec6550b7223148507302 Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Thu, 17 Jun 2021 16:28:55 +0900 Subject: [PATCH 3/5] =?UTF-8?q?add:=20=EC=95=A0=EB=A1=9C=EC=9A=B0=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/icons/ArrowIcon.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 frontend/src/components/common/icons/ArrowIcon.tsx diff --git a/frontend/src/components/common/icons/ArrowIcon.tsx b/frontend/src/components/common/icons/ArrowIcon.tsx new file mode 100644 index 000000000..7c1d0973d --- /dev/null +++ b/frontend/src/components/common/icons/ArrowIcon.tsx @@ -0,0 +1,10 @@ +const ArrowIcon = () => { + + return ( + + + + ) +} + +export default ArrowIcon; \ No newline at end of file From cf46878d9ada6d3edeeba05049ebd333285f443c Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Thu, 17 Jun 2021 16:29:20 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=EB=B2=84=ED=8A=BC=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EA=B4=80=EB=A0=A8=20=EC=97=85=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/IssueCategoryFilter/IssueCategoryFilter.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx b/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx index de5a5c1a6..8021d7661 100644 --- a/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx +++ b/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx @@ -2,12 +2,14 @@ import { useState } from 'react'; import styled from 'styled-components'; import DropDown from 'components/common/DropDown'; +import ArrowIcon from 'components/common/icons/ArrowIcon'; const IssueCategoryFilter = () => { const [isClicked, setIsClicked] = useState(false); const IssueCategoryFilterInfo = { name: "필터", header: "이슈 필터", + icon: ArrowIcon, elements: [ {contents: "열린 이슈", value: "OPENED"}, {contents: "내가 작성한 이슈", value: "WRITTEN"}, From 2ac9377e2c9d3ab1a8761a7478470680e616681a Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Thu, 17 Jun 2021 17:50:00 +0900 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=EB=A8=B8=EC=A7=80=20=ED=95=AB?= =?UTF-8?q?=ED=94=BD=EC=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../IssueCategoryFilter.tsx | 12 +++++++--- .../src/components/IssueList/IssueList.tsx | 17 +++++++++---- frontend/src/components/common/DropDown.tsx | 6 ++--- frontend/src/components/common/Label.tsx | 24 +++++++++++++++++++ 4 files changed, 49 insertions(+), 10 deletions(-) create mode 100644 frontend/src/components/common/Label.tsx diff --git a/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx b/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx index 8021d7661..a8c3514ce 100644 --- a/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx +++ b/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx @@ -1,4 +1,5 @@ import { useState } from 'react'; +import { Link } from 'react-router-dom'; import styled from 'styled-components'; import DropDown from 'components/common/DropDown'; @@ -37,7 +38,8 @@ const IssueCategoryFilter = () => { 레이블 마일스톤 - ﹢ 이슈 작성 + + ﹢ 이슈 작성 ) @@ -61,10 +63,14 @@ const FilterCategoryButton = styled.button` flex-basis: 160px; `; const IssueCreateButton = styled.button` - padding: 0 30px; - margin-left: 15px; + height: 100%; color: white; background-color: #007AFF; + white-space: nowrap; + + padding: 0 30px; + margin-left: 15px; + border: none; border-radius: 11px; diff --git a/frontend/src/components/IssueList/IssueList.tsx b/frontend/src/components/IssueList/IssueList.tsx index 45220e240..5a278dd6b 100644 --- a/frontend/src/components/IssueList/IssueList.tsx +++ b/frontend/src/components/IssueList/IssueList.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components'; import DropDown from 'components/common/DropDown'; import ArrowIcon from 'components/common/icons/ArrowIcon'; +import Label from 'components/common/Label'; const IssueManagerFilterInfo = { name: "담당자", @@ -80,7 +81,10 @@ const IssueList = () => { - 이슈 제목 + + 이슈 제목 + # 이슈 번호 ... @@ -101,7 +105,7 @@ const IssueListLayout = styled.div` display: flex; flex-direction: column; - div:last-child { + & > div:last-child { border-radius: 0 0 16px 16px; } `; @@ -152,11 +156,16 @@ const IssueListDetailInfomationLayer = styled(IssueListLayer)` width: 100%; ` -const DetailInformationTitle = styled(IssueListLayer)` - margin-top: 10px; +const DetailInformationTitle = styled.span` font-weight: 700; font-size: 1.89rem; + margin-right: 10px; `; + +const DetailInformationTitleArea = styled(IssueListLayer)` + margin-top: 10px; +` + const DetailInformationContents = styled(IssueListLayer)` margin-top: 10px; `; diff --git a/frontend/src/components/common/DropDown.tsx b/frontend/src/components/common/DropDown.tsx index 4e5ea6b14..b286bdedf 100644 --- a/frontend/src/components/common/DropDown.tsx +++ b/frontend/src/components/common/DropDown.tsx @@ -20,9 +20,9 @@ const DropDown = ({ info }) => { {info.header} - {info.elements.map((element) => { + {info.elements.map((element, i) => { return ( - + {element.contents} ) @@ -60,7 +60,7 @@ const DropDownLayer = styled.div` /* background: #D9DBE9; */ border: 1px solid #D9DBE9; - border-radius: 16px !important; + border-radius: 16px; ul { list-style-type: none; diff --git a/frontend/src/components/common/Label.tsx b/frontend/src/components/common/Label.tsx new file mode 100644 index 000000000..d9e181995 --- /dev/null +++ b/frontend/src/components/common/Label.tsx @@ -0,0 +1,24 @@ +import styled from 'styled-components'; + +const Label = ({type, value}) => { + const palette = { + "DEFAULT": "#F7F7FC", + "BLUE": "#004DE3" + } + + return ( {value} ) +} + +const LabelLayout = styled.div` + padding: 0 16px; + font-size: 1rem; + background: ${(props) => props.type}; + + border: 1px solid ${(props) => props.type}; + border-radius: 30px; + + display: flex; + align-items: center; +` + +export default Label; \ No newline at end of file