From 9a3a461e43d633527104986d7e67ff8b9e2c66db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=AF=E1=86=AB=E1=84=8B=E1=85=A7=E1=86=BC?=
 =?UTF-8?q?=E1=84=8B=E1=85=A5=E1=86=AB?= <kyu9341@naver.com>
Date: Fri, 13 Nov 2020 02:23:13 +0900
Subject: [PATCH] =?UTF-8?q?[FEAT]=20#48=20new=20label=20container=20?=
 =?UTF-8?q?=EC=9D=BC=EB=B6=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/containers/label/list.js |  9 ++-
 client/src/containers/label/new.js  | 87 +++++++++++++++++++++++++++++
 client/src/store/label/actions.js   |  5 +-
 client/src/store/label/reducer.js   | 11 +---
 4 files changed, 100 insertions(+), 12 deletions(-)
 create mode 100644 client/src/containers/label/new.js

diff --git a/client/src/containers/label/list.js b/client/src/containers/label/list.js
index a462d51..c09cf65 100644
--- a/client/src/containers/label/list.js
+++ b/client/src/containers/label/list.js
@@ -5,10 +5,12 @@ import MilestoneIcon from '@/styles/svgs/milestone';
 import { Button, Div } from '@/styles/styled';
 import { initState, LabelContext } from '@/store/label';
 
+import NewLabelConainer from '@/containers/label/new';
 import LabelItem from '@/components/label/item';
 import styled from 'styled-components';
 import color from '@/styles/colors';
 import size from '@/styles/sizes';
+import { TOGGEL } from '../../store/label/actions';
 
 const Container = styled.div`
   max-width: 1280px;
@@ -96,6 +98,10 @@ const LabelCount = styled.p`
 const LabelListContainer = () => {
   const { state, dispatch } = useContext(LabelContext);
 
+  const handleToggle = () => {
+    dispatch({ type: TOGGEL, create: !state.create });
+  };
+
   return (
     <Container>
       <ListHeader>
@@ -111,8 +117,9 @@ const LabelListContainer = () => {
             Milestones
           </MileStoneButton>
         </ButtonContainer>
-        <NewIssueButton>New label</NewIssueButton>
+        <NewIssueButton onClick={handleToggle}>New label</NewIssueButton>
       </ListHeader>
+      {state.create && <NewLabelConainer />}
       <ListBody>
         <ItemHeader>
           <LabelCount>{state.labels.length} labels</LabelCount>
diff --git a/client/src/containers/label/new.js b/client/src/containers/label/new.js
new file mode 100644
index 0000000..d9e39fe
--- /dev/null
+++ b/client/src/containers/label/new.js
@@ -0,0 +1,87 @@
+import React, { useState, useRef } from 'react';
+
+import styled from 'styled-components';
+import { Button, Div, Input } from '@/styles/styled';
+import color from '@/styles/colors';
+import size from '@/styles/sizes';
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 90%;
+  margin: 1rem auto;
+  padding-top: 1rem;
+  border: 1px solid ${color.LIGHT_GRAY2};
+  border-radius: 5px;
+  background-color: ${color.THIN_GRAY};
+`;
+
+const FormContainer = styled.div`
+  display: flex;
+  width: 100%;
+  padding: 10px;
+`;
+
+const ButtonContainer = styled.div`
+  width: 25%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+
+const NewIssueButton = styled(Button)``;
+
+const EditButton = styled(Button)`
+  background-color: ${color.GHOST_WHITE};
+  color: ${color.DARK_GRAY};
+  border: 1px solid ${color.LIGHT_GRAY};
+  margin-right: 10px;
+`;
+
+const NameConainer = styled(Div.column)`
+  width: 25%;
+  align-items: start;
+  padding: 10px;
+`;
+
+const DescriptionConainer = styled(NameConainer)`
+  width: 33%;
+  align-items: start;
+`;
+
+const LabelInput = styled(Input)`
+  width: 100%;
+  padding: 5px 12px;
+  font-size: ${size.DEFAULT_FONT_SIZE};
+  vertical-align: middle;
+  border-radius: 5px;
+`;
+
+const Label = styled.label`
+  font-weight: 700;
+  font-size: ${size.DEFAULT_FONT_SIZE};
+  margin-bottom: 10px;
+`;
+
+const NewLabelConainer = ({ state, dispatch }) => {
+  return (
+    <Container>
+      <FormContainer>
+        <NameConainer>
+          <Label>Label name</Label>
+          <LabelInput placeholder="Label name" />
+        </NameConainer>
+        <DescriptionConainer>
+          <Label>Description</Label>
+          <LabelInput placeholder="Description (optional)" />
+        </DescriptionConainer>
+        <ButtonContainer>
+          <EditButton>Edit</EditButton>
+          <NewIssueButton>New Issue</NewIssueButton>
+        </ButtonContainer>
+      </FormContainer>
+    </Container>
+  );
+};
+
+export default NewLabelConainer;
diff --git a/client/src/store/label/actions.js b/client/src/store/label/actions.js
index 23afa49..1c69653 100644
--- a/client/src/store/label/actions.js
+++ b/client/src/store/label/actions.js
@@ -1,8 +1,7 @@
-const NEW = 'NEW';
+const TOGGEL = 'TOGGEL';
 const ADD = 'ADD';
 const UPDATE = 'UPDATE';
 const DELETE = 'DELETE';
 const INIT = 'INIT';
-const CANCEL = 'CANCEL';
 
-export { NEW, ADD, UPDATE, INIT, DELETE, CANCEL };
+export { TOGGEL, ADD, UPDATE, INIT, DELETE };
diff --git a/client/src/store/label/reducer.js b/client/src/store/label/reducer.js
index c1972aa..9981b04 100644
--- a/client/src/store/label/reducer.js
+++ b/client/src/store/label/reducer.js
@@ -1,16 +1,11 @@
-import { NEW, ADD, CANCEL, INIT } from './actions';
+import { TOGGEL, ADD, INIT } from './actions';
 
 export default (state, action) => {
   switch (action.type) {
-    case NEW:
+    case TOGGEL:
       return {
         labels: state.labels,
-        create: true,
-      };
-    case CANCEL:
-      return {
-        labels: state.labels,
-        create: false,
+        create: action.create,
       };
     case ADD:
       return {