Merge branch 'develop'

boostcamp-2020 · Nov 6, 2020 · 39e5fe8 · 39e5fe8
2 parents 4b7cf25 + 1e17f62
commit 39e5fe8
Show file tree

Hide file tree

Showing 75 changed files with 7,932 additions and 4,281 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -1,14 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created without using create-react-app"
     />
-    <title>React App</title>
+    <title>Issue-Tracker 24</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -2,11 +2,16 @@ import React from 'react';
 import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
 import { createGlobalStyle } from 'styled-components';
 import LoginPage from './pages/LoginPage';
-import IssueListPage from './pages/IssueListPage';
+import IssueListPage from './pages/issue-list/IssueListPage';
+import IssueNewPage from './pages/issue-new/IssueNewPage';
+import NotFoundPage from './pages/NotFoundPage';
 
 const GlobalStyle = createGlobalStyle`
   body{
-      background:#e9ecef;
+      background:#ffffff;
+      margin:0;
+      padding:0;
+      padding-bottom: 100px;
   }
 `;
 export default () => (
@@ -16,6 +21,8 @@ export default () => (
       <Switch>
         <Route exact path="/" component={LoginPage} />
         <Route exact path="/issues" component={IssueListPage} />
+        <Route exact path="/issues/new" component={IssueNewPage} />
+        <Route component={NotFoundPage} />
       </Switch>
     </Router>
   </>

diff --git a/client/src/assets/jinhyun.png b/client/src/assets/jinhyun.png
diff --git a/client/src/components/Header.jsx b/client/src/components/Header.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+const IssueHeaderWrapper = styled.div`
+   width:100%;
+   height:50px;
+   background-color:#24292F;
+   display:flex;
+   justify-content:center;
+   color:#fff;
+   padding-top:20px;
+   font-weight:bold;
+`;
+const IssueHeader = () =>{
+    return (
+      <>
+        <IssueHeaderWrapper>
+        <svg width="20" height="20" >
+        <path fill="#fff" fillRule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path>
+        </svg> 
+         ISSUES
+        </IssueHeaderWrapper>
+      </>
+    );
+}
+
+export default IssueHeader;
diff --git a/client/src/components/issue/CreateButton.jsx b/client/src/components/issue/CreateButton.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Link, Route, BrowserRouter as Router } from "react-router-dom";
+
+const CreateButtonWrapper = styled.div`
+  background-color: #2c974b;
+  color: #ffffff;
+  border-radius: 4px;
+  line-height: 35px;
+  font-size: 14px;
+  font-weight: bold;
+  padding: 0px 15px 0px 15px;
+  cursor: pointer;
+  &:hover {
+    background-color: #04c584;
+  }
+  .create-issue{
+    color:#ffffff;
+  }
+  .issue-new-btn{
+    text-decoration:none;
+  }
+`;
+
+const CreateButton = () => {
+  return (
+    <CreateButtonWrapper>
+      <Link to="/issues/new" className="issue-new-btn">
+        <div className="create-issue btn">New issue</div>
+      </Link>
+    </CreateButtonWrapper>
+  );
+};
+
+export default CreateButton;
diff --git a/client/src/components/issue/DropDownIcon.jsx b/client/src/components/issue/DropDownIcon.jsx
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+const DropDownWrapper = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+`;
+
+const DropDownIcon = () => {
+  return (
+    <DropDownWrapper className="material-icons">
+      arrow_drop_down
+    </DropDownWrapper>
+  );
+};
+
+export default DropDownIcon;
diff --git a/client/src/components/issue/IssueContainer.jsx b/client/src/components/issue/IssueContainer.jsx
@@ -0,0 +1,14 @@
+import React, { useContext } from 'react';
+import IssueItem from './IssueItem';
+import { IssuesContext } from '../../pages/issue-list/IssueListPage';
+
+const IssueContainer = () => {
+  const { state } = useContext(IssuesContext);
+  const { renderedIssues } = state;
+
+  return renderedIssues.map((issue) => (
+    <IssueItem key={issue.id} issue={issue} />
+  ));
+};
+
+export default IssueContainer;
diff --git a/client/src/components/issue/IssueContent.jsx b/client/src/components/issue/IssueContent.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+import Label from '../label/Label';
+import { getTimeInfo } from '../../utils/time';
+
+const IssueContentWrapper = styled.div`
+  .issue-title {
+    font-weight: bold;
+    font-size: 16px;
+    cursor: pointer;
+    margin-left: 20px;
+  }
+  .issue-content {
+    margin-left: 20px;
+    color: grey;
+  }
+`;
+
+const IssueContent = ({ issue }) => {
+  return (
+    <IssueContentWrapper>
+      <div>
+        <div>
+          <a className="issue-title">{issue.title}</a>
+          {issue.labels.map((label) => (
+            <Label key={label.id} label={label} />
+          ))}
+        </div>
+        <div className="issue-content">
+          <span>
+            {issue.state === 'open'
+              ? `#${issue.id} opened ${getTimeInfo(issue.created_at)} by ${
+                  issue.user.sns_id
+                }`
+              : `#${issue.id} by ${issue.user.sns_id} was closed ${getTimeInfo(
+                  issue.closed_at,
+                )}`}
+          </span>
+        </div>
+      </div>
+    </IssueContentWrapper>
+  );
+};
+export default IssueContent;
diff --git a/client/src/components/issue/IssueItem.jsx b/client/src/components/issue/IssueItem.jsx
@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import IssueLogo from './IssueLogo';
+import IssueContent from './IssueContent';
+import { IssuesContext } from '../../pages/issue-list/IssueListPage';
+import { CHECK_ISSUE, UNCHECK_ISSUE } from '../../pages/issue-list/reducer';
+
+const IssueItemWrapper = styled.div`
+  width: 80%;
+  height: 75px;
+  font-size: 14px;
+  display: flex;
+  margin: 0 auto;
+  padding: 20px;
+  &:hover {
+    background-color: #e9e9e9;
+  }
+  border: 1px solid #eaecef;
+  box-sizing: border-box;
+`;
+const IssueItem = ({ issue }) => {
+  const { dispatch } = useContext(IssuesContext);
+
+  const onCheckBoxChange = (e) => {
+    if (e.target.checked) {
+      dispatch({ type: CHECK_ISSUE, id: issue.id });
+    } else {
+      dispatch({ type: UNCHECK_ISSUE, id: issue.id });
+    }
+  };
+
+  return (
+    <>
+      <IssueItemWrapper>
+        <input
+          type="checkbox"
+          onChange={onCheckBoxChange}
+          checked={issue.checked}
+        />
+        <IssueLogo issue={issue} />
+        <IssueContent issue={issue} />
+      </IssueItemWrapper>
+    </>
+  );
+};
+
+export default IssueItem;
diff --git a/client/src/components/issue/IssueLogo.jsx b/client/src/components/issue/IssueLogo.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-components';
+import svg from '../../utils/svg';
+const IssueLogoWrapper = styled.div`
+  margin-left: 10px;
+  fill: green;
+  .close-logo {
+    fill: red;
+  }
+  .open-logo {
+    fill: green;
+  }
+`;
+
+const IssueLogo = ({ issue }) => {
+  return <IssueLogoWrapper>{svg[`${issue.state}Logo`]}</IssueLogoWrapper>;
+};
+
+export default IssueLogo;
diff --git a/client/src/components/issue/MenuContainer.jsx b/client/src/components/issue/MenuContainer.jsx
@@ -0,0 +1,38 @@
+import React, { useState, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+import FilterBar from './filter/FilterBar';
+import NavigationContainer from './NavigationContainer';
+import CreateButton from './CreateButton';
+import FilterMenuDropDown from './filter/FilterMenuDropDown';
+
+const Div = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 0 auto;
+  width: 80%;
+  margin-top: 70px;
+  margin-bottom: 40px;
+`;
+
+export const FilterMenuContext = React.createContext();
+
+const MenuContainer = () => {
+  const [showFilterMenu, setFilterMenu] = useState(false);
+  const onClickFilterButton = () => setFilterMenu(!showFilterMenu);
+
+  return (
+    <FilterMenuContext.Provider value={{ onClickFilterButton, setFilterMenu }}>
+      <Div>
+        <FilterBar
+          onClickFilterButton={onClickFilterButton}
+          setFilterMenu={setFilterMenu}
+        />
+        <NavigationContainer />
+        <CreateButton />
+      </Div>
+      {showFilterMenu && <FilterMenuDropDown />}
+    </FilterMenuContext.Provider>
+  );
+};
+
+export default MenuContainer;
diff --git a/client/src/components/issue/Navigation.jsx b/client/src/components/issue/Navigation.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+import svg from '../../utils/svg';
+
+const NavigationWrapper = styled.div`
+  display: flex;
+  overflow: hidden;
+  justify-content: center;
+  cursor: pointer;
+  padding: 5px 10px 5px 10px;
+  &:nth-child(1) {
+    border-right: 1px solid #e1e4e8;
+    width: 40%;
+  }
+  &:nth-child(2) {
+    width: 60%;
+  }
+
+  &:hover {
+    background-color: #f6f8fa;
+  }
+  svg {
+    margin-right: 5px;
+  }
+  .items-num {
+    border-radius: 20px;
+    background-color: #e4e7ea;
+    margin-top: 4px;
+    margin-left: 5px;
+    padding: 0px 8px 0px 8px;
+    font-size: 12px;
+  }
+`;
+
+const Navigation = ({ title, num }) => {
+  return (
+    <NavigationWrapper>
+      {svg[title]}
+      <div className="nav-title">{title}</div>
+      <div className="items-num">{num}</div>
+    </NavigationWrapper>
+  );
+};
+
+export default Navigation;
diff --git a/client/src/components/issue/NavigationContainer.jsx b/client/src/components/issue/NavigationContainer.jsx
@@ -0,0 +1,27 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { IssuesContext } from '../../pages/issue-list/IssueListPage';
+import Navigation from './Navigation';
+
+const NavigationContainerWrapper = styled.div`
+  display: flex;
+  border: 1px solid #eaecef;
+  border-radius: 4px;
+  width: 27%;
+`;
+
+const NavigationContainer = () => {
+  const { state } = useContext(IssuesContext);
+  const { labels, milestones } = state;
+
+  return (
+    <>
+      <NavigationContainerWrapper>
+        <Navigation title="Labels" num={labels.length} />
+        <Navigation title="Milestones" num={milestones.length} />
+      </NavigationContainerWrapper>
+    </>
+  );
+};
+
+export default NavigationContainer;
diff --git a/client/src/components/issue/ToolBarContainer.jsx b/client/src/components/issue/ToolBarContainer.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+import ToolBar from './toolbar/ToolBar';
+
+const Div = styled.div`
+  width: 80%;
+  height: 65px;
+  font-size: 14px;
+  display: flex;
+  margin: 0 auto;
+  padding: 20px;
+  background-color: #e9e9e9;
+  border: 1px solid #eaecef;
+  box-sizing: border-box;
+`;
+
+const ToolBarContainer = () => {
+  return (
+    <>
+      <Div>
+        <ToolBar />
+      </Div>
+    </>
+  );
+};
+
+export default ToolBarContainer;