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

[FE] 이슈리스트 및 헤더 관련 추가

frontend/src/App.css

@@ -12,6 +12,9 @@ a {
 :root {
   --TitleFontSize: 4.2rem;
 }
+body {
+  min-width: 1046px;
+}
 
 /* ====== Custom CSS - Dico, ppamppam ====== */
 

frontend/src/App.js

@@ -7,6 +7,7 @@ import OAuthCallbackPage from 'pages/OAuthCallbackPage';
 import IssueListPage from 'pages/IssueListPage';
 import AddIssuePage from 'pages/AddIssuePage';
 
+import Header from 'components/common/Header';
 // import CountMyRecoil from './components/Count/CountMyRecoil';
 
 function App() {
@@ -18,6 +19,10 @@ function App() {
           <CountMyRecoil />
         </RecoilRoot>
       */}
+      { 
+        window.location.pathname !== "/signin" 
+        && <Header />
+      }
       <BrowserRouter>
         <Route exact path="/" component={AddIssuePage} />
         <Route path="/main" component={MainPage} />

frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx

@@ -0,0 +1,137 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+
+import DropDown from 'components/common/DropDown';
+
+const IssueCategoryFilter = () => {
+  const [isClicked, setIsClicked] = useState(false);
+  const IssueCategoryFilterInfo = {
+    name: "필터",
+    header: "이슈 필터",
+    elements: [
+      {contents: "열린 이슈", value: "OPENED"},
+      {contents: "내가 작성한 이슈", value: "WRITTEN"},
+      {contents: "나에게 할당된 이슈", value: "ASSIGNED"},
+      {contents: "내가 댓글을 남긴 이슈", value: "REPLIED"},
+      {contents: "닫힌 이슈", value: "CLOSED"},
+    ]
+  }
+
+  const handleFilterButtonClick = () => {
+    if (isClicked) setIsClicked(false);
+    else setIsClicked(true);
+  }
+
+  return (
+    <FilterHeaderLayer>
+      <FilterHeaderBlock>
+
+        {/* <FilterDropdownButton onClick={handleFilterButtonClick}> 필터 </FilterDropdownButton> */}
+        <DropDown info={IssueCategoryFilterInfo} />
+
+        <FilterSearchInput />
+      </FilterHeaderBlock>
+
+      <FilterHeaderBlock>
+        <FilterCategoryButton type={'left'}> 레이블 </FilterCategoryButton>
+        <FilterCategoryButton type={'right'}> 마일스톤 </FilterCategoryButton>
+        <IssueCreateButton> ﹢ 이슈 작성 </IssueCreateButton>
+      </FilterHeaderBlock>
+    </FilterHeaderLayer>
+  )
+}
+
+const FilterDropdownButton = styled.button`
+  padding: 0 30px;
+  background: #F7F7FC;
+  border: 1px solid #D9DBE9;
+  border-radius: 11px 0px 0px 11px;
+  
+  flex-basis: 120px;
+`;
+
+const FilterCategoryButton = styled.button<any>`
+  padding: 0 30px;
+  background: #F7F7FC;
+  border: 1px solid #D9DBE9;
+  border-radius: ${({type}) => type === "left" ? '11px 0px 0px 11px' : '0px 11px 11px 0px'}; 
+  
+  flex-basis: 160px;
+`;
+const IssueCreateButton = styled.button`
+  padding: 0 30px;
+  margin-left: 15px;
+  color: white;
+  background-color: #007AFF;
+  border: none;
+  border-radius: 11px;
+  
+  flex-basis: 160px;
+`;
+
+const FilterSearchInput = styled.input`
+  background: #EFF0F6;
+  border: 1px solid #D9DBE9;
+  border-radius: 0 11px 11px 0;
+
+  flex-grow: 1;
+`;
+
+const FilterRadio = styled.input``
+const FilterDropdownUnorderedList = styled.ul``;
+const FilterDropdownElement = styled.li`
+  height: 44px;
+  padding: 8px 16px;
+  border: 1px solid #D9DBE9;
+  background-color: #FEFEFE;
+
+  margin: -1px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+const FilterDropdownHeader = styled.header`
+  height: 48px;
+  padding: 8px 16px;
+  
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const FilterHeaderLayer = styled.div`
+  width: 100%;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+`;
+const FilterHeaderBlock = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+
+  & + & {
+    margin-left: 15px;
+  }
+`
+
+const FilterDropDownLayer = styled.div<any>`
+  width: 240px;
+  position: absolute;
+  margin-top: 50px;
+  
+  display: ${({isClicked}) => isClicked ? "block" : "none" };
+  background: #D9DBE9;
+  border: 1px solid #D9DBE9;
+  border-radius: 16px;
+
+  ul {
+    list-style-type: none;
+    margin-block: 0;
+    margin-inline: 0;
+    padding-inline: 0;
+  }
+`;
+
+export default IssueCategoryFilter;

frontend/src/components/IssueList/IssueList.tsx

@@ -0,0 +1,161 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+
+import DropDown from 'components/common/DropDown';
+
+const IssueManagerFilterInfo = {
+  name: "담당자",
+  header: "담당자 필터",
+  alignment: "reverse",
+  elements: [
+    {contents: "담당자가 없는 이슈", value: 0, options:{}},
+    // {} 동적 생성
+  ]
+}
+
+const IssueLabelFilterInfo = {
+  name: "레이블",
+  header: "레이블 필터",
+  alignment: "reverse",
+  elements: [
+    {contents: "레이블이 없는 이슈", value: 0, options:{}},
+    {contents: "bug", value: 1, options:{color: "red"}},
+    {contents: "documentation", value: 2, options:{color: "blue"}},
+    // {} 동적 생성
+  ]
+}
+
+const IssueMilestoneFilterInfo = {
+  name: "마일스톤",
+  header: "마일스톤 필터",
+  alignment: "reverse",
+  elements: [
+    {contents: "마일스톤이 없는 이슈", value: 0, options:{}},
+    {contents: "마스터즈 코스", value: 1, options:{}},
+
+    // {} 동적 생성
+  ]
+}
+
+const IssueAuthorFilterInfo = {
+  name: "작성자",
+  header: "작성자 필터",
+  alignment: "reverse",
+  elements: [
+    {contents: "테스트 계정", value: 0, options:{}},
+    // {contents: "마스터즈 코스", value: 1, options:{}},
+
+    // {} 동적 생성
+  ]
+}
+
+const IssueList = () => {
+  return (
+    <IssueListLayout>
+      <IssueListHeader>
+        <IssueListCheckBoxLayer>
+          <input type="checkbox" />
+        </IssueListCheckBoxLayer>
+        <IssueListButtonGroupLayer>
+          <button> 열린 이슈 </button>
+          <button> 닫힌 이슈 </button>
+        </IssueListButtonGroupLayer>
+        <IssueListFilterGroupLayer>
+          <DropDown info={IssueManagerFilterInfo} />
+          <DropDown info={IssueLabelFilterInfo} />
+          <DropDown info={IssueMilestoneFilterInfo} />
+          <DropDown info={IssueAuthorFilterInfo} />
+        </IssueListFilterGroupLayer>
+      </IssueListHeader>
+
+      {Array(3).fill(true).map((each) => {
+        return (
+          <IssueListContents>
+            <IssueListCheckBoxLayer>
+              <input type="checkbox" />
+            </IssueListCheckBoxLayer>
+            <IssueListDetailInfomationLayer>
+              <DetailInformationTitle>디코</DetailInformationTitle>
+              <DetailInformationContents>최고다</DetailInformationContents>
+            </IssueListDetailInfomationLayer>
+            <IssueListProfileLayer>
+              profile img
+            </IssueListProfileLayer>
+          </IssueListContents>
+        )
+      })}
+    </IssueListLayout>
+  )
+}
+
+const IssueListLayout = styled.div`
+  width: 100%;
+  border: 1px solid #D9DBE9;
+  border-radius: 16px;
+
+  display: flex;
+  flex-direction: column;
+  
+  div:last-child {
+    border-radius: 0 0 16px 16px;
+  }
+`;
+
+const IssueListHeader = styled.div`
+  width: 100%;
+  background: #F7F7FC;
+  
+  padding: 16px 32px;
+  border-radius: 16px 16px 0px 0px;
+  border-bottom: 1px solid #D9DBE9;
+  box-sizing: border-box;
+
+  display: flex;
+`;
+
+const IssueListContents = styled.div`
+  width: 100%;
+  background-color: white;
+  
+  padding: 16px 32px;
+  box-sizing: border-box;
+  
+  display: flex;
+
+  & + & {
+    border-top: 1px solid #D9DBE9;
+  } 
+  
+`;
+
+const IssueListLayer = styled.div`
+  display: flex;
+`;
+const IssueListCheckBoxLayer = styled(IssueListLayer)`
+  margin-right: 30px;
+  align-items: center;
+`;
+const IssueListButtonGroupLayer = styled(IssueListLayer)`
+  
+`;
+const IssueListFilterGroupLayer = styled(IssueListLayer)`
+  margin-left: auto;
+`;
+
+const IssueListDetailInfomationLayer = styled(IssueListLayer)`
+  flex-direction: column;
+  width: 100%;
+`
+
+const DetailInformationTitle = styled(IssueListLayer)`
+  margin-top: 10px;
+`;
+const DetailInformationContents = styled(IssueListLayer)`
+  margin-top: 10px;
+`;
+
+const IssueListProfileLayer = styled(IssueListLayer)`
+  margin-left: auto;
+`;
+
+export default IssueList;