Merge pull request #114 from hiro032/fe/111

[FE] 마일스톤 페이지 UI

fe/client/src/App.tsx

@@ -10,14 +10,17 @@ 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 = [
   { path: '/issueList', component: IssueListLazy },
   { 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;

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 = () => {
       <Hr />
       <ContentsWrapper>
         <ImageTag src="https://user-images.githubusercontent.com/61257242/121417591-0d02b480-c9a5-11eb-9c7e-d926e8731bfb.png" />
-        <InputField />
+        <TitleInput />
         <Tabs />
       </ContentsWrapper>
       <Hr />

fe/client/src/Pages/LabelListPage.tsx

@@ -1,25 +1,30 @@
 import React from 'react'
 import styled from 'styled-components';
 import HeadContent from '@components/labelList/HeadContent';
-import { ListWrapper } from '@components/common/baseStyle/baseStyle';
+import LabelCreate from '@/components/labelList/LabelCreate';
 import LabelSwitching from '@components/labelList/LabelSwitching';
 import { LabelSwitchType } from '@components/common/types/LabelType';
+import { ListWrapper } from '@components/common/baseStyle/baseStyle';
 import { labelMilestoneCountAtom } from '@components/common/atoms/labelMilestoneAtom';
 import API from '@/utils/API';
 import { useRecoilState } from '@/utils/myRecoil/useRecoilState';
 import useFetch, { AsyncState } from '@/utils/hook/useFetch';
+import useToggle from '@/utils/hook/useToggle';
 
 type LabelsType = LabelSwitchType & {
   id: number;
 }
 
 const LabelListPage = () => {
   const [labelMilestoneCount] = useRecoilState(labelMilestoneCountAtom);
+  const [isShowCreate, setShowCreate] = useToggle(false);
   const [labelListState] = useFetch(API.get.labels);
   const { data, loading, error }: AsyncState<any, any> = labelListState;
+
   return (
     <>
-      <HeadContent />
+      <HeadContent {...{isShowCreate, setShowCreate}}/>
+      {isShowCreate && <LabelCreate />} 
       <ListWrapper wrapWidth="100%">
         <ListHeader>{labelMilestoneCount.label}개의 레이블</ListHeader>
         {data && data.map(({ id, description, name, color }: LabelsType) => {

fe/client/src/Pages/MilestoneListPage.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import styled from 'styled-components';
+import HeadContent from '@components/milestoneList/HeadContent';
+import MilestoneCreate from '@components/milestoneList/MilestoneCreate';
+import MilestoneSwitching from '@components/milestoneList/MilestoneSwitching';
+import IconButton from '@components/common/IconButton';
+import { ListWrapper } from '@components/common/baseStyle/baseStyle';
+import useToggle from '@/utils/hook/useToggle';
+
+const MilestoneListPage = () => {
+  const [isShowCreate, setShowCreate] = useToggle(false);
+  return (
+    <>
+      <HeadContent {...{ isShowCreate, setShowCreate }} />
+      {isShowCreate && <MilestoneCreate />}
+      <ListWrapper wrapWidth="100%">
+        <ListHeader>
+          <IconButton icon='milestone'>
+            <ToggleItem>
+              <RadioButton type="radio" name="milestoneToggle" defaultChecked={true} />
+              <span>열린 이슈</span>
+            </ToggleItem>
+          </IconButton>
+          <IconButton icon='closeBox'>
+            <ToggleItem>
+              <RadioButton type="radio" name="milestoneToggle" />
+              <span>닫힌 이슈</span>
+            </ToggleItem>
+          </IconButton>
+        </ListHeader>
+        <MilestoneSwitching />
+      </ListWrapper>
+    </>
+  )
+}
+
+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;

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<string, any> = {
   whitePlus: WhitePlusIcon,
@@ -19,6 +20,7 @@ const iconKinds: Record<string, any> = {
   clip: ClipIcon,
   edit: EditIcon,
   trash: TrashIcon,
+  milestone: MilestoneIcon,
 }
 
 type IconButtonType = {

fe/client/src/components/common/TitleInput.tsx → 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 (
     <TextField
@@ -27,4 +27,4 @@ const TitleInput = ({ defaultValue, label, width, ...props }: TitleInputType) =>
   )
 }
 
-export default TitleInput;
+export default InputField;

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<any, any> = labelState;
@@ -24,18 +27,22 @@ const LabelMilestoneToggle = () => {
 
   return (
     <ToggleWrapper>
-      <ToggleItem>
-        <RadioButton type="radio" name="labelMilestone" />
-        <LabelBelongSpan> <img src={LabelIcon} alt="" /> &nbsp; 레이블
-          {labelData && ` (${labelData.count})`}
-        </LabelBelongSpan>
-      </ToggleItem>
-      <ToggleItem>
-        <RadioButton type="radio" name="labelMilestone" />
-        <LabelBelongSpan>  <img src={MilestoneIcon} alt="" /> &nbsp; 마일스톤
-          {milestoneData && ` (${milestoneData.count})`}
-        </LabelBelongSpan>
-      </ToggleItem>
+      <Link to="/labelList">
+        <ToggleItem>
+          <RadioButton type="radio" name="labelMilestone" defaultChecked={defaultChecked} />
+          <LabelBelongSpanLeft> <img src={LabelIcon} alt="" /> &nbsp; 레이블
+            {labelData && ` (${labelData.count})`}
+          </LabelBelongSpanLeft>
+        </ToggleItem>
+      </Link>
+      <Link to="/milestoneList">
+        <ToggleItem>
+          <RadioButton type="radio" name="labelMilestone" defaultChecked={!defaultChecked} />
+          <LabelBelongSpanRight>  <img src={MilestoneIcon} alt="" /> &nbsp; 마일스톤
+            {milestoneData && ` (${milestoneData.count})`}
+          </LabelBelongSpanRight>
+        </ToggleItem>
+      </Link>
     </ToggleWrapper>
   );
 };
@@ -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,17 +72,24 @@ const RadioButton = styled.input`
   }
 `;
 
-const LabelBelongSpan = styled.span`
+const LabelBelongSpanLeft = styled.span`
   height: 100%;
   width: 100%;
   background: #f5f5f7;
   display: inline-flex;
   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;

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 (
+    <PrimaryProgressBar {...props} />
+  )
+}
+
+const PrimaryProgressBar = styled(LinearProgress)`
+  height: 8px;
+  border-radius: 10px;
+  background:#EFF0F6;
+  > div{
+  background:#017AFF;
+  }
+`;
+export default ProgressBar;

fe/client/src/components/common/baseStyle/baseStyle.ts

@@ -35,12 +35,16 @@ export const inputStyles = makeStyles({
     width: '100%',
     marginBottom: '16px',
     border: '1px solid #fff',
+    '& > div' :{
+      borderRadius:'10px',
+    },
     '& input': {
       background: '#EFF0F6',
+      borderRadius:'10px',
       '&:focus': {
         background: '#FEFEFE',
         boxShadow: '0 0 0 1px #14142B',
-        borderRadius: '4px'
+        borderRadius: '10px'
       }
     }
   },

fe/client/src/components/common/types/LabelType.ts

@@ -5,5 +5,5 @@ export type LabelSwitchType = {
 }
 
 export type LabelItemType = LabelSwitchType & {
-  setToggleItem: any;
+  setToggleLabel: any;
 }

fe/client/src/components/common/types/MilestoneType.ts

@@ -0,0 +1,6 @@
+export type MilestoneSwitchType = {
+}
+
+export type MilestoneItemType = MilestoneSwitchType & {
+  setToggleMilestone: any;
+}

fe/client/src/components/createIssue/HeadContent.tsx

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 const HeadContent = () => {
   return (
-      <HeadContentWrapper>
-        새로운 이슈작성
-      </HeadContentWrapper>
+    <HeadContentWrapper>
+      새로운 이슈작성
+    </HeadContentWrapper>
   )
 }
 

fe/client/src/components/createIssue/InputField.tsx → 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<number>(0, { start: 500, end: 2000 });
   const handleChangeTyping = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
@@ -29,7 +29,7 @@ const InputField = () => {
 
   return (
     <InputWrapper>
-      <TitleInput />
+      <InputField />
       <TextAreaWrapper>
         <TextField
           label="코멘트를 입력하세요"
@@ -89,4 +89,4 @@ const TypingCountWrapper = styled.div`
   font-size: 12px;
   color:#6E7191;
 `;
-export default InputField;
+export default TitleInput;