[FEAT] #48 new label container 일부 구현

boostcamp-2020 · Nov 12, 2020 · 9a3a461 · 9a3a461
1 parent d87082e
commit 9a3a461
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {