Merge pull request #40 from ppamppamman/fe/feature/issues

Fe/feature/issues
codesquad-members-2021 · Jun 17, 2021 · 66cc19a · 66cc19a
2 parents af53225 + 2ac9377
commit 66cc19a
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 14 deletions.
diff --git a/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx b/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx
@@ -1,13 +1,16 @@
 import { useState } from 'react';
+import { Link } from 'react-router-dom';
 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"},
@@ -35,7 +38,8 @@ const IssueCategoryFilter = () => {
       <FilterHeaderBlock>
         <FilterCategoryButton type={'left'}> 레이블 </FilterCategoryButton>
         <FilterCategoryButton type={'right'}> 마일스톤 </FilterCategoryButton>
-        <IssueCreateButton> ﹢ 이슈 작성 </IssueCreateButton>
+
+        <Link to="/"> <IssueCreateButton> ﹢ 이슈 작성 </IssueCreateButton> </Link>
       </FilterHeaderBlock>
     </FilterHeaderLayer>
   )
@@ -59,10 +63,14 @@ const FilterCategoryButton = styled.button<any>`
   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
@@ -2,11 +2,14 @@ import { useState } from 'react';
 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: "담당자",
   header: "담당자 필터",
   alignment: "reverse",
+  icon: ArrowIcon,
   elements: [
     {contents: "담당자가 없는 이슈", value: 0, options:{}},
     // {} 동적 생성
@@ -17,6 +20,7 @@ const IssueLabelFilterInfo = {
   name: "레이블",
   header: "레이블 필터",
   alignment: "reverse",
+  icon: ArrowIcon,
   elements: [
     {contents: "레이블이 없는 이슈", value: 0, options:{}},
     {contents: "bug", value: 1, options:{color: "red"}},
@@ -29,6 +33,7 @@ const IssueMilestoneFilterInfo = {
   name: "마일스톤",
   header: "마일스톤 필터",
   alignment: "reverse",
+  icon: ArrowIcon,
   elements: [
     {contents: "마일스톤이 없는 이슈", value: 0, options:{}},
     {contents: "마스터즈 코스", value: 1, options:{}},
@@ -41,6 +46,7 @@ const IssueAuthorFilterInfo = {
   name: "작성자",
   header: "작성자 필터",
   alignment: "reverse",
+  icon: ArrowIcon,
   elements: [
     {contents: "테스트 계정", value: 0, options:{}},
     // {contents: "마스터즈 코스", value: 1, options:{}},
@@ -75,8 +81,11 @@ const IssueList = () => {
               <input type="checkbox" />
             </IssueListCheckBoxLayer>
             <IssueListDetailInfomationLayer>
-              <DetailInformationTitle>디코</DetailInformationTitle>
-              <DetailInformationContents>최고다</DetailInformationContents>
+              <DetailInformationTitleArea>
+                <DetailInformationTitle> 이슈 제목 </DetailInformationTitle>
+                <Label type={"DEFAULT"} value={"레이블 이름"} />
+              </DetailInformationTitleArea>
+              <DetailInformationContents># 이슈 번호 ... </DetailInformationContents>
             </IssueListDetailInfomationLayer>
             <IssueListProfileLayer>
               profile img
@@ -96,7 +105,7 @@ const IssueListLayout = styled.div`
   display: flex;
   flex-direction: column;
   
-  div:last-child {
+  & > div:last-child {
     border-radius: 0 0 16px 16px;
   }
 `;
@@ -147,9 +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
@@ -13,16 +13,16 @@ const DropDown = ({ info }) => {
   return (
     <DropdownLayout alignment={info.alignment}>
       <DropdownButton onClick={handleDropDownButtonClick}> 
-        {info.name}
+        {info.icon && info.icon()}<DropdownButtonText>{info.name}</DropdownButtonText>
       </DropdownButton>
       {isClicked && 
 
       <DropDownLayer isClicked={isClicked}>
         <DropdownHeader>{info.header}</DropdownHeader>
         <DropdownUnorderedList>
-          {info.elements.map((element) => {
+          {info.elements.map((element, i) => {
             return (
-              <DropdownElement>
+              <DropdownElement key={`dropdown-${i}`}>
                 {element.contents} <Radio type="radio" value={element.value} name={`dropdown-${info.name}`} />
               </DropdownElement>
             )
@@ -40,11 +40,17 @@ const DropdownLayout = styled.div<any>`
 `;
 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<any>`
@@ -93,6 +99,9 @@ const DropdownElement = styled.li`
   }
 `;
 
+const DropdownButtonText = styled.span`
+  cursor: pointer;
+`;
 const Radio = styled.input``
 
 export default DropDown;
diff --git a/frontend/src/components/common/Label.tsx 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 (<LabelLayout type={palette[type]}> {value} </LabelLayout>)
+}
+
+const LabelLayout = styled.div<any>`
+  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;
diff --git a/frontend/src/components/common/icons/ArrowIcon.tsx b/frontend/src/components/common/icons/ArrowIcon.tsx
@@ -0,0 +1,10 @@
+const ArrowIcon = () => {
+
+  return (
+    <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M1 1L5 5L9 1" stroke="#6E7191" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  )
+}
+
+export default ArrowIcon;