From 0f3b8841ea1d46f04063e107eef0befed42adacc Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Fri, 10 Apr 2020 13:46:08 +0900
Subject: [PATCH 01/15] =?UTF-8?q?component=EA=B0=84=20=EC=9D=B8=EC=9E=90?=
 =?UTF-8?q?=20=EC=A0=84=EB=8B=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore               |   2 +
 .now/project.json        |   2 +-
 components/todo-input.js | 116 ++++++++++++++++++++++++++++++++++-----
 components/todo-item.js  |  62 +++++++++++++++++++--
 components/todo-list.js  |  11 ++--
 pages/_app.js            |   1 +
 pages/index.js           |  50 ++++++++++++++---
 7 files changed, 212 insertions(+), 32 deletions(-)

diff --git a/.gitignore b/.gitignore
index 20fccdd..fd07293 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,5 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+
+.now
\ No newline at end of file
diff --git a/.now/project.json b/.now/project.json
index c52546c..57fdaec 100644
--- a/.now/project.json
+++ b/.now/project.json
@@ -1 +1 @@
-{"orgId":"vC0ivr1sq0T0zKJytpWAmdFN","projectId":"QmU68M4LipQZeiFKBEhK7WmUX9o8wjXK3RGeuiZ8PSWDDK"}
\ No newline at end of file
+{"projectId":"QmafwEK3iPMVU8DtcfaHw2MH2wR9YwUNmTarDgEAk3aA2g","orgId":"xr2CldXR2AS9O2w9aQ48bloY"}
\ No newline at end of file
diff --git a/components/todo-input.js b/components/todo-input.js
index 1844e25..e2df66d 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -1,20 +1,110 @@
-import React from "react";
+import React, { useState } from 'react';
+
 import styled from "styled-components";
 
-export default function TodoInput() {
+export default function TodoInput({addTodo}){
+
+  const [newTodo, setNewTodo] = useState({});
+
+  const changeInputData = (e) => {
+    setNewTodo({...newTodo, [e.target.name]:e.target.value});
+  }
+
   return (
-    <Wrapper>
-      리액트-투두
-      <br />
-      시간을 입력하는 칸
-      <br />
-      Todo를 입력하는 칸
-    </Wrapper>
+    <InputWrapper>
+      <TimeBox>
+        <Time>시간</Time>
+        <InputDay name="date" type="number" placeholder="날짜를 입력하세요 (ex.20200404)" 
+        onInput = {(e) =>{e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,8)}}
+        onChange={changeInputData}
+        />
+      </TimeBox>
+      <TodoBox>
+        <Todo>TODO</Todo>
+        <InputTodo name="content" placeholder='할 일을 입력하세요' onChange={changeInputData}></InputTodo>
+      </TodoBox>
+      <EnterBtn onClick={() => addTodo({...newTodo})}>등록</EnterBtn>
+    </InputWrapper>
   );
 }
 
-const Wrapper = styled.div`
-  border: solid 1px;
-  font-size: 18px;
-  flex: 1;
+
+const InputWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  -webkit-box-align: center;
+  align-items: center;
+  height: 37rem;
+  flex: 1 1 0%;
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+  border-image: initial;
+  padding: 1rem 2rem;
+`;
+
+const TimeBox = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 3rem;
+`;
+
+const Time = styled.p`
+  font-size: 1.5rem;
+  padding: 0px;
+  margin: 0px;
 `;
+
+const InputDay= styled.input`
+  width: 80%;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgb(97, 97, 97);
+  border-image: initial;
+  padding: 0.5rem 0.8rem;
+`;
+
+const TodoBox= styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 3rem;
+`;
+
+const Todo = styled.p`
+  font-size: 1.5rem;
+  padding: 0px;
+  margin: 0px;
+`;
+
+const InputTodo = styled.textarea`
+  width: 80%;
+  height: 30vh;
+  resize: none;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgb(97, 97, 97);
+  border-image: initial;
+  padding: 0.5rem 0.8rem;
+`;
+
+const EnterBtn = styled.button`
+  color : white;
+  background-color: rgb(97, 97, 97);
+  font-size: 1.5rem;
+  outline: none;
+  border-width: initial;
+  border-style: none;
+  border-color: initial;
+  border-image: initial;
+  padding: 0.5rem 1rem;
+  border-radius: 0.3rem;
+`;
\ No newline at end of file
diff --git a/components/todo-item.js b/components/todo-item.js
index ef2dbe8..634855f 100644
--- a/components/todo-item.js
+++ b/components/todo-item.js
@@ -1,11 +1,63 @@
-import React from "react";
+import React, { useState } from 'react';
+
 import styled from "styled-components";
 
-export default function TodoItem() {
-  return <Wrapper>Todo</Wrapper>;
+export default function TodoItem({content, day}) {
+  return (
+    <Wrapper>
+      <TodoItemBox>
+        <Todo></Todo>
+        <DayClear>
+          <ClearBtn>완료</ClearBtn>
+        </DayClear>
+      </TodoItemBox>
+    </Wrapper>
+    );
 }
 
 const Wrapper = styled.div`
-  font-size: 18px;
-  border: solid 1px;
+  display: flex;
+`;
+
+const TodoItemBox = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 3rem;
+  padding: 1rem 2rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+  border-image: initial;
+`;
+
+const Todo= styled.p`
+  font-size: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  margin: 0px;
+`;
+
+const DayClear= styled.p`
+  font-size: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  margin: 0px;
+`;
+
+const ClearBtn = styled.button`
+  color: white;
+  background-color: rgb(97, 97, 97);
+  font-size: 1.5rem;
+  outline: none;
+  border-width: initial;
+  border-style: none;
+  border-color: initial;
+  border-image: initial;
+  padding: 0.5rem 1rem;
+  border-radius: 0.3rem;
 `;
diff --git a/components/todo-list.js b/components/todo-list.js
index 68fded1..1eb1342 100644
--- a/components/todo-list.js
+++ b/components/todo-list.js
@@ -1,19 +1,18 @@
-import React from "react";
-import styled from "styled-components";
+import React, { useState } from 'react';
 
 import TodoItem from "./todo-item";
 
-export default function TodoList() {
+import styled from "styled-components";
+
+export default function TodoList({completeTodo}) {
   return (
     <Wrapper>
-      Todo list가 들어가는 자리입니다!
       <TodoItem />
     </Wrapper>
   );
 }
 
 const Wrapper = styled.div`
-  border: solid 1px;
   font-size: 18px;
-  flex: 1;
+  flex: 1 1 0%;
 `;
diff --git a/pages/_app.js b/pages/_app.js
index 3051a08..f85a8d2 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -23,6 +23,7 @@ class PickkApp extends App {
             font-size: 0.1rem;
             overflow-x: hidden;
             width: 100%;
+            color: white;
           }
           ::-webkit-scrollbar {
             display: none;
diff --git a/pages/index.js b/pages/index.js
index f494909..1138181 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from 'react';
 
 import TodoInput from "../components/todo-input";
 import TodoList from "../components/todo-list";
@@ -6,25 +6,61 @@ import TodoList from "../components/todo-list";
 import styled from "styled-components";
 
 export default function Home() {
+
+  const [todos, setTodos] = useState([]);
+
+  const addTodo = ({content, date}) => {
+    if ((content === undefined) && (date === undefined)) {
+      alert('모든 항목을 입력해주세요!');
+      return;
+    }
+
+    else if ((content !== undefined) && date.length != 8){
+      alert('날짜를 올바른 형식으로 입력해주세요!');
+      return;
+    }
+    
+    setTodos([...todos, {content, date}])
+
+    alert('입력 완료!')
+  }
+
+  const completeTodo = () => {
+    todo
+  }
+
   return (
     <Wrapper>
+      <Header>리액트-투두</Header>
       <Contents>
-        <TodoInput />
-        <TodoList />
+        <TodoInput addTodo = {addTodo}/>
+        <Space/>
+        <TodoList completeTodo = {completeTodo}/>
       </Contents>
     </Wrapper>
   );
 }
 
 const Wrapper = styled.div`
-  height: 100vh;
+  min-height: 100vh;
+  background-color: rgb(155, 197, 195);
+  padding: 4rem 5rem;
 `;
 
 const Contents = styled.div`
-  border: solid 1px black;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  padding: 10px 20px;
-  margin: 20px 10px;
+
+`;
+
+const Header = styled.p`
+  font-size: 3rem;
+  font-weight: 600;
+  padding: 0px;
+  margin: 0px 0px 3rem;
+`;
+
+const Space = styled.div`
+  flex: 0.3;
 `;

From c601aa0634f51b47800921906454f431b2484f35 Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Fri, 10 Apr 2020 19:24:55 +0900
Subject: [PATCH 02/15] 'todo-input.js'

---
 README.md               | 39 +++++++++------------------------------
 components/todo-item.js | 12 ++++++------
 components/todo-list.js |  6 ++++--
 pages/index.js          | 25 +++++--------------------
 4 files changed, 24 insertions(+), 58 deletions(-)

diff --git a/README.md b/README.md
index f53f3d3..1bf7aaf 100644
--- a/README.md
+++ b/README.md
@@ -1,30 +1,9 @@
-# react-todo-11th
-
-## 실행 방법
-
-```
-npm install
-npm run dev
-```
-
-- npm install : 필요한 모든 패키지를 설치합니다. 처음 1번만 실행하면 됩니다.
-- npm run dev : react 어플리케이션을 브라우저에서 실행합니다.
-
-## 배포 방법
-
-- now에 회원가입하고 now를 설치합니다.
-
-1. https://zeit.co 에서 회원가입합니다.
-2. 터미널에서 npm i -g now를 입력해 now를 글로벌로 설치합니다.
-3. 명령 프롬프트에서 프로젝트 폴더에 들어간 후 now를 입력합니다.
-4. ID/PW를 입력합니다.
-5. zeit 가입시 입력한 이메일에서 인증 링크를 클릭합니다. <인증완료>
-6. 다시 프로젝트 폴더에서 now를 입력하면 자동으로 생성된 url에 배포됩니다!
-
-## 미션 설명
-
-[미션 설명](./docs/mission-description/README.md)
-
-## 미션 제출 방법
-
-[미션 제출 방법](./docs/how-to-submit/README.md)
+ 확실히 저번 과제를 통해서 css구성은 매우 숙달됬지만 아직 props 전달은 미숙하다고 생각했습니다.
+특히 이번 과제에서 처음에는 input에서 data들을 바로 index로 올려주는 식으로 생각했다가 싹다 갈아엎고 다시 했습니다.
+index에서 input태그에 함수를 인자를 넣어주고 data를 받는 식으로 하니 확실히 전체적인 관리가 편해진 것 같습니다.
+또한 왜 구글링 할때마다 extend Component와 render()가 나오는지 궁금했었는데 지금까지 Hook를 사용하고 있는지 모르고 계속
+사용했네요... 
+
+확실히 Hook를 사용하니 전부다 function으로만 해결하게 되서 가독성도 올라가고 Hook자체 기능또한 다양하고 좋았던 것 같습니다.
+처음에 todoRemove를 구성할 때는 useRef를 id로 주고 filter로 처리하려 했는데 안돼서 하는 수 없이 map으로 구현했습니다.
+또 number타입 일때는 length기능들이 다 막혀서 String으로 변환하고 했는데 코드 돌아가는데는 딱히 상관없던 것 같습니다.
diff --git a/components/todo-item.js b/components/todo-item.js
index 634855f..43ea7b2 100644
--- a/components/todo-item.js
+++ b/components/todo-item.js
@@ -2,14 +2,14 @@ import React, { useState } from 'react';
 
 import styled from "styled-components";
 
-export default function TodoItem({content, day}) {
+export default function TodoItem({ id, content, date, todoRemove }) {
   return (
     <Wrapper>
       <TodoItemBox>
-        <Todo></Todo>
-        <DayClear>
-          <ClearBtn>완료</ClearBtn>
-        </DayClear>
+        <Todo>{content}</Todo>
+        <Day>{date}
+        <ClearBtn onClick={(() => {todoRemove(id)})}>완료</ClearBtn>
+        </Day>
       </TodoItemBox>
     </Wrapper>
     );
@@ -41,7 +41,7 @@ const Todo= styled.p`
   margin: 0px;
 `;
 
-const DayClear= styled.p`
+const Day= styled.p`
   font-size: 1.5rem;
   display: flex;
   flex-direction: column;
diff --git a/components/todo-list.js b/components/todo-list.js
index 1eb1342..5c09c09 100644
--- a/components/todo-list.js
+++ b/components/todo-list.js
@@ -4,10 +4,11 @@ import TodoItem from "./todo-item";
 
 import styled from "styled-components";
 
-export default function TodoList({completeTodo}) {
+export default function TodoList({todos, todoRemove}) {
+
   return (
     <Wrapper>
-      <TodoItem />
+  
     </Wrapper>
   );
 }
@@ -16,3 +17,4 @@ const Wrapper = styled.div`
   font-size: 18px;
   flex: 1 1 0%;
 `;
+
diff --git a/pages/index.js b/pages/index.js
index 1138181..74b4e93 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useRef, useState, useCallback } from 'react';
 
 import TodoInput from "../components/todo-input";
 import TodoList from "../components/todo-list";
@@ -8,26 +8,11 @@ import styled from "styled-components";
 export default function Home() {
 
   const [todos, setTodos] = useState([]);
+  const nextId = useRef(0);
 
-  const addTodo = ({content, date}) => {
-    if ((content === undefined) && (date === undefined)) {
-      alert('모든 항목을 입력해주세요!');
-      return;
-    }
-
-    else if ((content !== undefined) && date.length != 8){
-      alert('날짜를 올바른 형식으로 입력해주세요!');
-      return;
-    }
-    
-    setTodos([...todos, {content, date}])
+  const [counter, setCounter] = useState(1);
 
-    alert('입력 완료!')
-  }
-
-  const completeTodo = () => {
-    todo
-  }
+  const addTodo = ({content, date}) => {
 
   return (
     <Wrapper>
@@ -35,7 +20,7 @@ export default function Home() {
       <Contents>
         <TodoInput addTodo = {addTodo}/>
         <Space/>
-        <TodoList completeTodo = {completeTodo}/>
+        <TodoList todos={todos} todoRemove = {todoRemove}/>
       </Contents>
     </Wrapper>
   );

From d9ff6b3b3357ec6039834b7563809c1876c46a7a Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Fri, 10 Apr 2020 19:26:38 +0900
Subject: [PATCH 03/15] 'index.js-1'

---
 pages/index.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/pages/index.js b/pages/index.js
index 74b4e93..9d98697 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -13,6 +13,31 @@ export default function Home() {
   const [counter, setCounter] = useState(1);
 
   const addTodo = ({content, date}) => {
+    if ((content === undefined) || (date === undefined)) {
+      alert('모든 항목을 입력해주세요!');
+      return;
+    }
+
+    else if (String(date).length != 8){
+      alert('날짜를 올바른 형식으로 입력해주세요!');
+      return;
+    }
+
+    const todo = {
+      id: nextId,
+      content,
+      date,
+      checked: false
+    }
+    setTodos(todos.concat(todo)); 
+    nextId.current += 1;
+
+    alert('입력 완료!')
+  }
+  
+  const todoRemove = (id) => {
+    setTodos(todos.filter(todo => todo.id !== id))
+  }
 
   return (
     <Wrapper>

From 72ece245180226e1fe072f28c4b8dcc6f4b85828 Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Fri, 10 Apr 2020 19:32:59 +0900
Subject: [PATCH 04/15] 'index.js'

---
 components/todo-list.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/todo-list.js b/components/todo-list.js
index 5c09c09..11a7356 100644
--- a/components/todo-list.js
+++ b/components/todo-list.js
@@ -8,7 +8,7 @@ export default function TodoList({todos, todoRemove}) {
 
   return (
     <Wrapper>
-  
+    {todos.map(todo => <TodoItem key={todo.id} {...todo} todoRemove={todoRemove}/>)}
     </Wrapper>
   );
 }

From ed2b7d7310c132f8c4118e79b95eb1c62a85a844 Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Fri, 10 Apr 2020 19:54:51 +0900
Subject: [PATCH 05/15] using useRef

---
 README.md               | 11 ++++++-----
 components/todo-list.js |  3 +--
 pages/index.js          | 10 +++-------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 1bf7aaf..3b6f92a 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,10 @@
- 확실히 저번 과제를 통해서 css구성은 매우 숙달됬지만 아직 props 전달은 미숙하다고 생각했습니다.
+
+ 이번 미션을 통해서 느낀점은 확실히 저번 미션을 통해 CSS와 기본 틀짜기는 매우 숙달됬지만 아직 props 전달은 미숙하다고 생각했습니다.
 특히 이번 과제에서 처음에는 input에서 data들을 바로 index로 올려주는 식으로 생각했다가 싹다 갈아엎고 다시 했습니다.
 index에서 input태그에 함수를 인자를 넣어주고 data를 받는 식으로 하니 확실히 전체적인 관리가 편해진 것 같습니다.
-또한 왜 구글링 할때마다 extend Component와 render()가 나오는지 궁금했었는데 지금까지 Hook를 사용하고 있는지 모르고 계속
+또한 왜 구글링 할때마다 extend Component와 render()가 나오는지 궁금했었는데 지금까지 Hook를 사용하고 있는지도 모르고 계속
 사용했네요... 
 
-확실히 Hook를 사용하니 전부다 function으로만 해결하게 되서 가독성도 올라가고 Hook자체 기능또한 다양하고 좋았던 것 같습니다.
-처음에 todoRemove를 구성할 때는 useRef를 id로 주고 filter로 처리하려 했는데 안돼서 하는 수 없이 map으로 구현했습니다.
-또 number타입 일때는 length기능들이 다 막혀서 String으로 변환하고 했는데 코드 돌아가는데는 딱히 상관없던 것 같습니다.
+확실히 Hook에 대해서 알고 사용해보니 전부 function Component만 쓰므로 가독성도 올라가고 Hook자체 기능또한 다양하고 좋았던 것 같습니다.
+처음에 todoRemove를 구성할 때는 useRef를 id로 주고 filter로 처리하려 했는데 안돼서 하는 수 없이 새로운 state를 id를 주니까는 잘 되었습니다.
+왜 useRef로 id를 줬을 때는 안돌아가는지 궁금하네요 ㅠㅠㅜㅜㅠㅠ 또 number타입 일때는 length기능들이 다 막혀서 String으로 변환하고 했는데 코드 돌아가는데는 딱히 상관없던 것 같습니다. 
diff --git a/components/todo-list.js b/components/todo-list.js
index 11a7356..3aadcbd 100644
--- a/components/todo-list.js
+++ b/components/todo-list.js
@@ -8,7 +8,7 @@ export default function TodoList({todos, todoRemove}) {
 
   return (
     <Wrapper>
-    {todos.map(todo => <TodoItem key={todo.id} {...todo} todoRemove={todoRemove}/>)}
+        {todos.map(todo => <TodoItem key={todo.id} {...todo} todoRemove={todoRemove}/>)}
     </Wrapper>
   );
 }
@@ -17,4 +17,3 @@ const Wrapper = styled.div`
   font-size: 18px;
   flex: 1 1 0%;
 `;
-
diff --git a/pages/index.js b/pages/index.js
index 9d98697..3305a93 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback } from 'react';
+import React, { useRef, useState} from 'react';
 
 import TodoInput from "../components/todo-input";
 import TodoList from "../components/todo-list";
@@ -8,9 +8,7 @@ import styled from "styled-components";
 export default function Home() {
 
   const [todos, setTodos] = useState([]);
-  const nextId = useRef(0);
-
-  const [counter, setCounter] = useState(1);
+  const nextId = useRef(1);
 
   const addTodo = ({content, date}) => {
     if ((content === undefined) || (date === undefined)) {
@@ -30,11 +28,9 @@ export default function Home() {
       checked: false
     }
     setTodos(todos.concat(todo)); 
-    nextId.current += 1;
-
     alert('입력 완료!')
   }
-  
+
   const todoRemove = (id) => {
     setTodos(todos.filter(todo => todo.id !== id))
   }

From 11062096a4abe9afcb9eaf8f88df607f8ab29652 Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Fri, 10 Apr 2020 19:56:24 +0900
Subject: [PATCH 06/15] using state for index

---
 pages/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 3305a93..e38d01a 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -8,7 +8,7 @@ import styled from "styled-components";
 export default function Home() {
 
   const [todos, setTodos] = useState([]);
-  const nextId = useRef(1);
+  const [index, setIndex] = useState(1);
 
   const addTodo = ({content, date}) => {
     if ((content === undefined) || (date === undefined)) {
@@ -22,12 +22,13 @@ export default function Home() {
     }
 
     const todo = {
-      id: nextId,
+      id: index,
       content,
       date,
       checked: false
     }
     setTodos(todos.concat(todo)); 
+    setIndex(index + 1);
     alert('입력 완료!')
   }
 

From a8973c4ca94b62c17afef7853da39dd5214feb78 Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Sun, 12 Apr 2020 11:39:11 +0900
Subject: [PATCH 07/15] remove include #useRef

---
 pages/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/index.js b/pages/index.js
index e38d01a..ee0f83d 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,4 +1,4 @@
-import React, { useRef, useState} from 'react';
+import React, {useState} from 'react';
 
 import TodoInput from "../components/todo-input";
 import TodoList from "../components/todo-list";

From d3c7a30121c222b04a070ac00dce443a2819f2bb Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Sun, 12 Apr 2020 11:41:57 +0900
Subject: [PATCH 08/15] Modified inputWrapper -> wrapper

---
 components/todo-input.js | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/components/todo-input.js b/components/todo-input.js
index e2df66d..f9ec70b 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -11,7 +11,7 @@ export default function TodoInput({addTodo}){
   }
 
   return (
-    <InputWrapper>
+    <Wrapper>
       <TimeBox>
         <Time>시간</Time>
         <InputDay name="date" type="number" placeholder="날짜를 입력하세요 (ex.20200404)" 
@@ -24,23 +24,20 @@ export default function TodoInput({addTodo}){
         <InputTodo name="content" placeholder='할 일을 입력하세요' onChange={changeInputData}></InputTodo>
       </TodoBox>
       <EnterBtn onClick={() => addTodo({...newTodo})}>등록</EnterBtn>
-    </InputWrapper>
+    </Wrapper>
   );
 }
 
 
-const InputWrapper = styled.div`
+const Wrapper = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
   -webkit-box-align: center;
   align-items: center;
   height: 37rem;
-  flex: 1 1 0%;
-  border-width: 1px;
-  border-style: solid;
-  border-color: black;
-  border-image: initial;
+  flex: 1
+  border: 1px, solid, black;
   padding: 1rem 2rem;
 `;
 

From 0f781e5cbaf90cdfe4d69aa5a241be05ee734cef Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Sun, 12 Apr 2020 12:51:18 +0900
Subject: [PATCH 09/15] Modified css

---
 components/todo-input.js | 52 +++++++++++-----------------------------
 1 file changed, 14 insertions(+), 38 deletions(-)

diff --git a/components/todo-input.js b/components/todo-input.js
index f9ec70b..25417e4 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -12,17 +12,17 @@ export default function TodoInput({addTodo}){
 
   return (
     <Wrapper>
-      <TimeBox>
-        <Time>시간</Time>
-        <InputDay name="date" type="number" placeholder="날짜를 입력하세요 (ex.20200404)" 
+      <Row>
+        <Lable>시간</Lable>
+        <Input name="date" type="number" placeholder="날짜를 입력하세요 (ex.20200404)" 
         onInput = {(e) =>{e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,8)}}
         onChange={changeInputData}
         />
-      </TimeBox>
-      <TodoBox>
-        <Todo>TODO</Todo>
-        <InputTodo name="content" placeholder='할 일을 입력하세요' onChange={changeInputData}></InputTodo>
-      </TodoBox>
+      </Row>
+      <Row>
+        <Lable>TODO</Lable>
+        <Textarea name="content" placeholder='할 일을 입력하세요' onChange={changeInputData}></Textarea>
+      </Row>
       <EnterBtn onClick={() => addTodo({...newTodo})}>등록</EnterBtn>
     </Wrapper>
   );
@@ -41,55 +41,31 @@ const Wrapper = styled.div`
   padding: 1rem 2rem;
 `;
 
-const TimeBox = styled.div`
+const Row = styled.div`
   width: 100%;
   display: flex;
   flex-direction: row;
-  -webkit-box-pack: justify;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 3rem;
 `;
 
-const Time = styled.p`
+const Lable = styled.p`
   font-size: 1.5rem;
-  padding: 0px;
   margin: 0px;
 `;
 
-const InputDay= styled.input`
+const Input= styled.input`
   width: 80%;
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgb(97, 97, 97);
-  border-image: initial;
+  border: 1px, soild, rgb(97, 97, 97);
   padding: 0.5rem 0.8rem;
 `;
 
-const TodoBox= styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 3rem;
-`;
-
-const Todo = styled.p`
-  font-size: 1.5rem;
-  padding: 0px;
-  margin: 0px;
-`;
-
-const InputTodo = styled.textarea`
+const Textarea = styled.textarea`
   width: 80%;
   height: 30vh;
   resize: none;
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgb(97, 97, 97);
-  border-image: initial;
+  border: 1px, solid, rgb(97, 97, 97);
   padding: 0.5rem 0.8rem;
 `;
 

From 294ab06d1981b48f43b744748e9b2c11d9c792a2 Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Sun, 12 Apr 2020 12:57:49 +0900
Subject: [PATCH 10/15] Modifed css EnterBtn -> SubmitButton

---
 components/todo-input.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/components/todo-input.js b/components/todo-input.js
index 25417e4..a36f5bf 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -23,7 +23,7 @@ export default function TodoInput({addTodo}){
         <Lable>TODO</Lable>
         <Textarea name="content" placeholder='할 일을 입력하세요' onChange={changeInputData}></Textarea>
       </Row>
-      <EnterBtn onClick={() => addTodo({...newTodo})}>등록</EnterBtn>
+      <SunmitButton onClick={() => addTodo({...newTodo})}>등록</SunmitButton>
     </Wrapper>
   );
 }
@@ -69,15 +69,12 @@ const Textarea = styled.textarea`
   padding: 0.5rem 0.8rem;
 `;
 
-const EnterBtn = styled.button`
+const SunmitButton = styled.button`
   color : white;
   background-color: rgb(97, 97, 97);
   font-size: 1.5rem;
   outline: none;
-  border-width: initial;
-  border-style: none;
-  border-color: initial;
-  border-image: initial;
+  border: none;
   padding: 0.5rem 1rem;
   border-radius: 0.3rem;
 `;
\ No newline at end of file

From cf27bb921bff89dd607d49c75359e01dc78a6c0d Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Sun, 12 Apr 2020 13:03:44 +0900
Subject: [PATCH 11/15] Modified changeInputData -> handleFormChange

---
 components/todo-input.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/todo-input.js b/components/todo-input.js
index a36f5bf..14fcd57 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -6,7 +6,7 @@ export default function TodoInput({addTodo}){
 
   const [newTodo, setNewTodo] = useState({});
 
-  const changeInputData = (e) => {
+  const handleFormChange = (e) => {
     setNewTodo({...newTodo, [e.target.name]:e.target.value});
   }
 
@@ -16,12 +16,12 @@ export default function TodoInput({addTodo}){
         <Lable>시간</Lable>
         <Input name="date" type="number" placeholder="날짜를 입력하세요 (ex.20200404)" 
         onInput = {(e) =>{e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,8)}}
-        onChange={changeInputData}
+        onChange={handleFormChange}
         />
       </Row>
       <Row>
         <Lable>TODO</Lable>
-        <Textarea name="content" placeholder='할 일을 입력하세요' onChange={changeInputData}></Textarea>
+        <Textarea name="content" placeholder='할 일을 입력하세요' onChange={handleFormChange}></Textarea>
       </Row>
       <SunmitButton onClick={() => addTodo({...newTodo})}>등록</SunmitButton>
     </Wrapper>

From 2d09456069bea1b1c5af7b229b197f86526423b5 Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Sun, 12 Apr 2020 18:13:16 +0900
Subject: [PATCH 12/15] Modified index.js

---
 components/todo-input.js | 15 +++++++++++----
 components/todo-item.js  | 29 +++++++++++------------------
 components/todo-list.js  |  4 ++--
 pages/index.js           | 30 +++++++++++++++---------------
 4 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/components/todo-input.js b/components/todo-input.js
index 14fcd57..ac6150e 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -14,14 +14,21 @@ export default function TodoInput({addTodo}){
     <Wrapper>
       <Row>
         <Lable>시간</Lable>
-        <Input name="date" type="number" placeholder="날짜를 입력하세요 (ex.20200404)" 
-        onInput = {(e) =>{e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,8)}}
-        onChange={handleFormChange}
+        <Input 
+          name="date" 
+          type="number" 
+          placeholder="날짜를 입력하세요 (ex.20200404)" 
+          onInput = {(e) => { e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,8)}}
+          onChange={handleFormChange}
         />
       </Row>
       <Row>
         <Lable>TODO</Lable>
-        <Textarea name="content" placeholder='할 일을 입력하세요' onChange={handleFormChange}></Textarea>
+        <Textarea 
+          name="content" 
+          placeholder='할 일을 입력하세요' 
+          onChange={handleFormChange}
+        />
       </Row>
       <SunmitButton onClick={() => addTodo({...newTodo})}>등록</SunmitButton>
     </Wrapper>
diff --git a/components/todo-item.js b/components/todo-item.js
index 43ea7b2..015d79d 100644
--- a/components/todo-item.js
+++ b/components/todo-item.js
@@ -2,15 +2,14 @@ import React, { useState } from 'react';
 
 import styled from "styled-components";
 
-export default function TodoItem({ id, content, date, todoRemove }) {
+export default function TodoItem({ todo ,onDelete}) {
   return (
     <Wrapper>
-      <TodoItemBox>
+      <Row>
         <Todo>{content}</Todo>
-        <Day>{date}
-        <ClearBtn onClick={(() => {todoRemove(id)})}>완료</ClearBtn>
-        </Day>
-      </TodoItemBox>
+        <Date>{date}</Date>
+      </Row>
+        <DeleteButton onClick={onDelete}> 완료 </DeleteButton>
     </Wrapper>
     );
 }
@@ -19,18 +18,14 @@ const Wrapper = styled.div`
   display: flex;
 `;
 
-const TodoItemBox = styled.div`
+const Row = styled.div`
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  align-items: flex-start;
   margin-bottom: 3rem;
   padding: 1rem 2rem;
-  border-width: 1px;
-  border-style: solid;
-  border-color: black;
-  border-image: initial;
+  border: 1px, solid, black;
 `;
 
 const Todo= styled.p`
@@ -41,7 +36,7 @@ const Todo= styled.p`
   margin: 0px;
 `;
 
-const Day= styled.p`
+const Date= styled.p`
   font-size: 1.5rem;
   display: flex;
   flex-direction: column;
@@ -49,15 +44,13 @@ const Day= styled.p`
   margin: 0px;
 `;
 
-const ClearBtn = styled.button`
+const DeleteButton = styled.button`
   color: white;
   background-color: rgb(97, 97, 97);
   font-size: 1.5rem;
   outline: none;
-  border-width: initial;
-  border-style: none;
-  border-color: initial;
-  border-image: initial;
   padding: 0.5rem 1rem;
+  border: none;
   border-radius: 0.3rem;
+  margin-left: auto;
 `;
diff --git a/components/todo-list.js b/components/todo-list.js
index 3aadcbd..3f6a9ba 100644
--- a/components/todo-list.js
+++ b/components/todo-list.js
@@ -4,11 +4,11 @@ import TodoItem from "./todo-item";
 
 import styled from "styled-components";
 
-export default function TodoList({todos, todoRemove}) {
+export default function TodoList({todos, onDelete}) {
 
   return (
     <Wrapper>
-        {todos.map(todo => <TodoItem key={todo.id} {...todo} todoRemove={todoRemove}/>)}
+      {todos.map((todo, index) => <TodoItem key={JSON.stringify(todo)} {...todo} onDelete={onDelete(index)} />)}
     </Wrapper>
   );
 }
diff --git a/pages/index.js b/pages/index.js
index ee0f83d..9e11d14 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -10,8 +10,11 @@ export default function Home() {
   const [todos, setTodos] = useState([]);
   const [index, setIndex] = useState(1);
 
-  const addTodo = ({content, date}) => {
-    if ((content === undefined) || (date === undefined)) {
+  const handleAdd = (todo) => {
+
+    const {content, date} = todo;
+
+    if (content === "" || date === "") {
       alert('모든 항목을 입력해주세요!');
       return;
     }
@@ -21,28 +24,26 @@ export default function Home() {
       return;
     }
 
-    const todo = {
-      id: index,
+    const newTodo = {
       content,
-      date,
-      checked: false
+      date
     }
-    setTodos(todos.concat(todo)); 
-    setIndex(index + 1);
+
+    setTodos(todos.concat(newTodo)); 
     alert('입력 완료!')
   }
 
-  const todoRemove = (id) => {
-    setTodos(todos.filter(todo => todo.id !== id))
+  const handleDelete = (index) = ()=> {
+    setTodos([...todo.slice(0,index), ...todo.slice(index+1, todo.length)]);
   }
 
   return (
     <Wrapper>
       <Header>리액트-투두</Header>
       <Contents>
-        <TodoInput addTodo = {addTodo}/>
+        <TodoInput onSubmit = {handleAdd}/>
         <Space/>
-        <TodoList todos={todos} todoRemove = {todoRemove}/>
+        <TodoList {...{todos}} onDelete = {handleDelete}/>
       </Contents>
     </Wrapper>
   );
@@ -61,13 +62,12 @@ const Contents = styled.div`
 
 `;
 
-const Header = styled.p`
+const Header = styled.h1`
   font-size: 3rem;
   font-weight: 600;
-  padding: 0px;
   margin: 0px 0px 3rem;
 `;
 
 const Space = styled.div`
-  flex: 0.3;
+  flex: 1;
 `;

From 5792c81ebc2e46a9960da7843e2690c80acda269 Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Sun, 12 Apr 2020 18:30:31 +0900
Subject: [PATCH 13/15] Modified index.js

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index 3b6f92a..ac8a251 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,3 @@
-
  이번 미션을 통해서 느낀점은 확실히 저번 미션을 통해 CSS와 기본 틀짜기는 매우 숙달됬지만 아직 props 전달은 미숙하다고 생각했습니다.
 특히 이번 과제에서 처음에는 input에서 data들을 바로 index로 올려주는 식으로 생각했다가 싹다 갈아엎고 다시 했습니다.
 index에서 input태그에 함수를 인자를 넣어주고 data를 받는 식으로 하니 확실히 전체적인 관리가 편해진 것 같습니다.

From a4d9fa2c987a137249f89ebc307e7cae8b096f10 Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Sun, 12 Apr 2020 18:36:45 +0900
Subject: [PATCH 14/15] Modified input.js

---
 components/todo-input.js | 6 ++----
 pages/index.js           | 1 -
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/components/todo-input.js b/components/todo-input.js
index ac6150e..ccf7634 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import styled from "styled-components";
 
-export default function TodoInput({addTodo}){
+export default function TodoInput({onSubmit}){
 
   const [newTodo, setNewTodo] = useState({});
 
@@ -18,7 +18,6 @@ export default function TodoInput({addTodo}){
           name="date" 
           type="number" 
           placeholder="날짜를 입력하세요 (ex.20200404)" 
-          onInput = {(e) => { e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,8)}}
           onChange={handleFormChange}
         />
       </Row>
@@ -30,7 +29,7 @@ export default function TodoInput({addTodo}){
           onChange={handleFormChange}
         />
       </Row>
-      <SunmitButton onClick={() => addTodo({...newTodo})}>등록</SunmitButton>
+      <SunmitButton onClick={() => onSubmit({...newTodo})}>등록</SunmitButton>
     </Wrapper>
   );
 }
@@ -40,7 +39,6 @@ const Wrapper = styled.div`
   width: 100%;
   display: flex;
   flex-direction: column;
-  -webkit-box-align: center;
   align-items: center;
   height: 37rem;
   flex: 1
diff --git a/pages/index.js b/pages/index.js
index 9e11d14..0c0b2a7 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -8,7 +8,6 @@ import styled from "styled-components";
 export default function Home() {
 
   const [todos, setTodos] = useState([]);
-  const [index, setIndex] = useState(1);
 
   const handleAdd = (todo) => {
 

From 732ba71f5836752bda78c1d3605e83a73687a2e6 Mon Sep 17 00:00:00 2001
From: Namil Kim <simyeen@naver.com>
Date: Sun, 12 Apr 2020 19:06:09 +0900
Subject: [PATCH 15/15] Modified All

---
 components/todo-item.js | 2 +-
 components/todo-list.js | 2 +-
 pages/index.js          | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/todo-item.js b/components/todo-item.js
index 015d79d..a361a3f 100644
--- a/components/todo-item.js
+++ b/components/todo-item.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 
 import styled from "styled-components";
 
-export default function TodoItem({ todo ,onDelete}) {
+export default function TodoItem({todo ,onDelete}) {
   return (
     <Wrapper>
       <Row>
diff --git a/components/todo-list.js b/components/todo-list.js
index 3f6a9ba..78c0c6f 100644
--- a/components/todo-list.js
+++ b/components/todo-list.js
@@ -8,7 +8,7 @@ export default function TodoList({todos, onDelete}) {
 
   return (
     <Wrapper>
-      {todos.map((todo, index) => <TodoItem key={JSON.stringify(todo)} {...todo} onDelete={onDelete(index)} />)}
+      {todos.map((todo, index) => <TodoItem key={JSON.stringify(todo)} {...{todo}} onDelete={onDelete(index)} />)}
     </Wrapper>
   );
 }
diff --git a/pages/index.js b/pages/index.js
index 0c0b2a7..9d89cce 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -27,12 +27,12 @@ export default function Home() {
       content,
       date
     }
-
+  
     setTodos(todos.concat(newTodo)); 
     alert('입력 완료!')
   }
 
-  const handleDelete = (index) = ()=> {
+  const handleDelete = (index) = () => {
     setTodos([...todo.slice(0,index), ...todo.slice(index+1, todo.length)]);
   }