From a48b0ac68166d76780523b565a1e8b6d54a0d5ff Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Fri, 10 Apr 2020 15:19:34 +0900
Subject: [PATCH 01/29] commit index.js

---
 pages/index.js | 76 ++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 55 insertions(+), 21 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index f494909..1f65697 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,30 +1,64 @@
-import React from "react";
+import React, { Component } from 'react';
+import styled from 'styled-components';
 
-import TodoInput from "../components/todo-input";
-import TodoList from "../components/todo-list";
+import TodoInput from '../components/todo-input';
+import TodoList from '../components/todo-list';
 
-import styled from "styled-components";
+export default class Home extends Component {
+	id = 0;
+	state = {
+		todos: [],
+	};
 
-export default function Home() {
-  return (
-    <Wrapper>
-      <Contents>
-        <TodoInput />
-        <TodoList />
-      </Contents>
-    </Wrapper>
-  );
+	handleCreate = (data) => {
+		const { todos } = this.state;
+		this.setState({
+			todos: todos.concat({ id: this.id++, ...data }),
+		});
+	};
+	handleRemove = (id) => {
+		const { todos } = this.state;
+		this.setState({
+			todos: todos.filter((info) => info.id !== id),
+		});
+	};
+
+	render() {
+		const { todos } = this.state;
+
+		return (
+			<Wrapper>
+				<Subject>리액트-투두</Subject>
+				<Contents>
+					<TodoInput onCreate={this.handleCreate}></TodoInput>
+					<Space />
+					<TodoList data={todos} onRemove={this.handleRemove} />
+				</Contents>
+			</Wrapper>
+		);
+	}
 }
+const Space = styled.div`
+	flex: 0.3;
+`;
 
 const Wrapper = styled.div`
-  height: 100vh;
+	height: 100vh;
+	font-size: 20px;
+	background-color: rgb(155, 197, 195);
+	padding: 4rem 5rem;
+`;
+const Subject = styled.div`
+	font-size: 3rem;
+	font-weight: 600;
+	padding: 0px;
+	margin: 0px 0px 3rem;
+	color: white;
 `;
-
 const Contents = styled.div`
-  border: solid 1px black;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 10px 20px;
-  margin: 20px 10px;
+	font-size: 0.1rem;
+
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
 `;

From 78602bfa869fd2de83283303cf7ed335291104ac Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Fri, 10 Apr 2020 15:21:30 +0900
Subject: [PATCH 02/29] commit todo-input.js

---
 components/todo-input.js | 136 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 120 insertions(+), 16 deletions(-)

diff --git a/components/todo-input.js b/components/todo-input.js
index 1844e25..32f90d0 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -1,20 +1,124 @@
-import React from "react";
-import styled from "styled-components";
+import React, { Component } from 'react';
+import styled from 'styled-components';
 
-export default function TodoInput() {
-  return (
-    <Wrapper>
-      리액트-투두
-      <br />
-      시간을 입력하는 칸
-      <br />
-      Todo를 입력하는 칸
-    </Wrapper>
-  );
+export default class TodoInput extends Component {
+	state = {
+		date: '',
+		todo: '',
+	};
+	handleChange = (e) => {
+		this.setState({
+			[e.target.name]: e.target.value,
+		});
+	};
+	handleSubmit = (e) => {
+		e.preventDefault();
+		// 페이지 리로딩 방지
+		if (this.state.todo === '' || this.state.date === '') {
+			alert('모든 항목을 입력해주세요!');
+			return false;
+		} else if (this.state.date.length != 8) {
+			alert('날짜를 올바른 형식으로 입력해주세요!');
+			return false;
+		} else alert('입력되었습니다!');
+		this.props.onCreate(this.state);
+		// 상태값을 onCreate 를 통하여 부모에게 전달
+		this.setState({ date: '', todo: '' });
+		// 상태 초기화
+	};
+	maxLengthCheck = (object) => {
+		if (object.value.length > object.maxLength) {
+			object.value = object.value.slice(0, object.maxLength);
+		}
+	};
+	render() {
+		const { date, todo } = this.state;
+		return (
+			<Form onSubmit={this.handleSubmit}>
+				<InputSection>
+					<P>시간</P>
+					<Input
+						maxlength="4"
+						oninput="maxLengthCheck(this)"
+						type="number"
+						placeholder="날짜를 입력하세요 (ex.20200404)"
+						value={date}
+						onChange={this.handleChange}
+						name="date"
+					/>
+				</InputSection>
+
+				<InputSection>
+					<P>TODO</P>
+					<TextArea
+						placeholder="할 일을 입력하세요"
+						value={todo}
+						onChange={this.handleChange}
+						name="todo"
+					/>
+				</InputSection>
+				<Button type="submit" onClick={this.warn}>
+					등록
+				</Button>
+			</Form>
+		);
+	}
 }
 
-const Wrapper = styled.div`
-  border: solid 1px;
-  font-size: 18px;
-  flex: 1;
+const Input = 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 TextArea = styled.textarea`
+	width: 80%;
+	height: 30vh;
+	resize: none;
+	border-width: 1px;
+	border-style: solid;
+	border-color: rgb(97, 97, 97);
+	padding: 0.5rem 0.8rem;
+`;
+const P = styled.p`
+	font-size: 1.5rem;
+	color: white;
+	margin: 0;
+`;
+const InputSection = styled.div`
+	color: white;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	-webkit-box-pack: justify;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-bottom: 3rem;
+`;
+const Form = styled.form`
+	font-size: 18px;
+
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	height: 37rem;
+	flex: 1;
+	border-width: 1px;
+	border-style: solid;
+	padding: 1rem 2rem;
+`;
+const Button = 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;
 `;

From d32f6c6bdce9707b0c63c2cf94e730a77c9db605 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Fri, 10 Apr 2020 15:22:40 +0900
Subject: [PATCH 03/29] commit todo-list

---
 components/todo-list.js | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/components/todo-list.js b/components/todo-list.js
index 68fded1..9e37b49 100644
--- a/components/todo-list.js
+++ b/components/todo-list.js
@@ -1,19 +1,19 @@
-import React from "react";
-import styled from "styled-components";
+import React, { Component } from 'react';
+import styled from 'styled-components';
 
-import TodoItem from "./todo-item";
+import TodoItem from './todo-item';
 
-export default function TodoList() {
-  return (
-    <Wrapper>
-      Todo list가 들어가는 자리입니다!
-      <TodoItem />
-    </Wrapper>
-  );
+export default class TodoList extends Component {
+	render() {
+		const { data, onRemove } = this.props;
+		const list = data.map((todolist) => (
+			<TodoItem key={todolist.id} todolist={todolist} onRemove={onRemove} />
+		));
+		return <TodoListWrapper> {list} </TodoListWrapper>;
+	}
 }
 
-const Wrapper = styled.div`
-  border: solid 1px;
-  font-size: 18px;
-  flex: 1;
+const TodoListWrapper = styled.div`
+	font-size: 18px;
+	flex: 1;
 `;

From c6b4eb06d45e2d2eda0c78c0683798bbaa2b92da Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Fri, 10 Apr 2020 15:24:04 +0900
Subject: [PATCH 04/29] commit todo-item

---
 components/todo-item.js | 60 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 53 insertions(+), 7 deletions(-)

diff --git a/components/todo-item.js b/components/todo-item.js
index ef2dbe8..faf809c 100644
--- a/components/todo-item.js
+++ b/components/todo-item.js
@@ -1,11 +1,57 @@
-import React from "react";
-import styled from "styled-components";
+import React, { Component } from 'react';
+import styled from 'styled-components';
 
-export default function TodoItem() {
-  return <Wrapper>Todo</Wrapper>;
+export default class TodoItem extends Component {
+	handleRemove = () => {
+		const { todolist, onRemove } = this.props;
+		onRemove(todolist.id);
+	};
+
+	render() {
+		const { date, todo } = this.props.todolist;
+
+		return (
+			<TodoItemWrapper>
+				<Todo>{todo}</Todo>
+				<Date>
+					{date}
+					<Button onClick={this.handleRemove}>완료</Button>
+				</Date>
+			</TodoItemWrapper>
+		);
+	}
 }
+const Date = styled.div`
+	font-size: 1.5rem;
+	display: flex;
+	color: white;
+	flex-direction: column;
+`;
+const Todo = styled.div`
+	font-size: 1.5rem;
+	color: white;
+	display: flex;
+	flex-direction: column;
+`;
+const Button = styled.button`
+	color: white;
+	background-color: rgb(97, 97, 97);
+	font-size: 1.5rem;
+	outline: none;
+	border-width: initial;
+	border-style: none;
+	padding: 0.5rem 1rem;
+	border-radius: 0.3rem;
+`;
+const TodoItemWrapper = styled.div`
+	font-size: 18px;
+	border: solid 1px black;
 
-const Wrapper = styled.div`
-  font-size: 18px;
-  border: solid 1px;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-bottom: 3rem;
+	padding: 1rem 2rem;
 `;

From 4fcb6a2a6c49ca5a58a1660cb3778964715e39f9 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Fri, 10 Apr 2020 18:34:00 +0900
Subject: [PATCH 05/29] removed annotation from todo-input

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

diff --git a/components/todo-input.js b/components/todo-input.js
index 32f90d0..b32feba 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -13,7 +13,6 @@ export default class TodoInput extends Component {
 	};
 	handleSubmit = (e) => {
 		e.preventDefault();
-		// 페이지 리로딩 방지
 		if (this.state.todo === '' || this.state.date === '') {
 			alert('모든 항목을 입력해주세요!');
 			return false;
@@ -22,15 +21,14 @@ export default class TodoInput extends Component {
 			return false;
 		} else alert('입력되었습니다!');
 		this.props.onCreate(this.state);
-		// 상태값을 onCreate 를 통하여 부모에게 전달
 		this.setState({ date: '', todo: '' });
-		// 상태 초기화
 	};
-	maxLengthCheck = (object) => {
+	maxLengthCheck(object) {
 		if (object.value.length > object.maxLength) {
 			object.value = object.value.slice(0, object.maxLength);
 		}
-	};
+	}
+
 	render() {
 		const { date, todo } = this.state;
 		return (
@@ -38,7 +36,7 @@ export default class TodoInput extends Component {
 				<InputSection>
 					<P>시간</P>
 					<Input
-						maxlength="4"
+						maxlength="8"
 						oninput="maxLengthCheck(this)"
 						type="number"
 						placeholder="날짜를 입력하세요 (ex.20200404)"

From 24701f000a17587b57bee1438678a4cb0f2ca104 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 15:39:09 +0900
Subject: [PATCH 06/29] modified todo-input into Functionform

---
 components/todo-input.js | 86 ++++++++++++++--------------------------
 1 file changed, 30 insertions(+), 56 deletions(-)

diff --git a/components/todo-input.js b/components/todo-input.js
index b32feba..2016379 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -1,66 +1,40 @@
-import React, { Component } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
-export default class TodoInput extends Component {
-	state = {
-		date: '',
-		todo: '',
-	};
-	handleChange = (e) => {
-		this.setState({
-			[e.target.name]: e.target.value,
-		});
-	};
-	handleSubmit = (e) => {
-		e.preventDefault();
-		if (this.state.todo === '' || this.state.date === '') {
-			alert('모든 항목을 입력해주세요!');
-			return false;
-		} else if (this.state.date.length != 8) {
-			alert('날짜를 올바른 형식으로 입력해주세요!');
-			return false;
-		} else alert('입력되었습니다!');
-		this.props.onCreate(this.state);
-		this.setState({ date: '', todo: '' });
-	};
-	maxLengthCheck(object) {
+export default function TodoInput(props) {
+	const { date, todo, onChangeTodo, onChangeDate, onSubmit } = props;
+
+	const maxLengthCheck = (object) => {
 		if (object.value.length > object.maxLength) {
 			object.value = object.value.slice(0, object.maxLength);
 		}
-	}
+	};
 
-	render() {
-		const { date, todo } = this.state;
-		return (
-			<Form onSubmit={this.handleSubmit}>
-				<InputSection>
-					<P>시간</P>
-					<Input
-						maxlength="8"
-						oninput="maxLengthCheck(this)"
-						type="number"
-						placeholder="날짜를 입력하세요 (ex.20200404)"
-						value={date}
-						onChange={this.handleChange}
-						name="date"
-					/>
-				</InputSection>
+	return (
+		<Form>
+			<InputSection>
+				<P>시간</P>
+				<Input
+					maxlength="8"
+					oninput="maxLengthCheck(this)"
+					type="number"
+					placeholder="날짜를 입력하세요 (ex.20200404)"
+					value={date}
+					onChange={onChangeDate}
+				/>
+			</InputSection>
 
-				<InputSection>
-					<P>TODO</P>
-					<TextArea
-						placeholder="할 일을 입력하세요"
-						value={todo}
-						onChange={this.handleChange}
-						name="todo"
-					/>
-				</InputSection>
-				<Button type="submit" onClick={this.warn}>
-					등록
-				</Button>
-			</Form>
-		);
-	}
+			<InputSection>
+				<P>TODO</P>
+				<TextArea
+					placeholder="할 일을 입력하세요"
+					value={todo}
+					onChange={onChangeTodo}
+				/>
+			</InputSection>
+			<Button onClick={onSubmit}>등록</Button>
+		</Form>
+	);
 }
 
 const Input = styled.input`

From da8849969841f1a5a799a45c4086e2ed2fa14717 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 15:40:39 +0900
Subject: [PATCH 07/29] modified todo-item into Functionform

---
 components/todo-item.js | 31 ++++++++++++-------------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/components/todo-item.js b/components/todo-item.js
index faf809c..b657082 100644
--- a/components/todo-item.js
+++ b/components/todo-item.js
@@ -1,25 +1,18 @@
-import React, { Component } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
-export default class TodoItem extends Component {
-	handleRemove = () => {
-		const { todolist, onRemove } = this.props;
-		onRemove(todolist.id);
-	};
+export default function TodoItem(props) {
+	const { id, date, todo, onRemove } = props;
 
-	render() {
-		const { date, todo } = this.props.todolist;
-
-		return (
-			<TodoItemWrapper>
-				<Todo>{todo}</Todo>
-				<Date>
-					{date}
-					<Button onClick={this.handleRemove}>완료</Button>
-				</Date>
-			</TodoItemWrapper>
-		);
-	}
+	return (
+		<TodoItemWrapper>
+			<Todo>{todo}</Todo>
+			<Date>
+				{date}
+				<Button onClick={() => onRemove(id)}>완료</Button>
+			</Date>
+		</TodoItemWrapper>
+	);
 }
 const Date = styled.div`
 	font-size: 1.5rem;

From 36ca813874e6bc87a66b4b37d7bb44f1cc9d78de Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 15:41:04 +0900
Subject: [PATCH 08/29] modified todo-list into Functionform

---
 components/todo-list.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/components/todo-list.js b/components/todo-list.js
index 9e37b49..6b44aef 100644
--- a/components/todo-list.js
+++ b/components/todo-list.js
@@ -1,16 +1,19 @@
-import React, { Component } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import TodoItem from './todo-item';
 
-export default class TodoList extends Component {
-	render() {
-		const { data, onRemove } = this.props;
-		const list = data.map((todolist) => (
-			<TodoItem key={todolist.id} todolist={todolist} onRemove={onRemove} />
+export default function TodoList(props) {
+	const { data, onRemove } = props;
+
+	const list = data
+		.sort((todo1, todo2) => {
+			return todo1.date - todo2.date;
+		})
+		.map((todolist) => (
+			<TodoItem key={todolist.id} {...todolist} onRemove={onRemove} />
 		));
-		return <TodoListWrapper> {list} </TodoListWrapper>;
-	}
+	return <TodoListWrapper> {list} </TodoListWrapper>;
 }
 
 const TodoListWrapper = styled.div`

From 6a43e90c1489c74cc616f1569637c621b86d6071 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 15:41:34 +0900
Subject: [PATCH 09/29] modified index into functionform

---
 pages/index.js | 75 ++++++++++++++++++++++++++++++--------------------
 1 file changed, 45 insertions(+), 30 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 1f65697..2279c75 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,42 +1,58 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import TodoInput from '../components/todo-input';
 import TodoList from '../components/todo-list';
 
-export default class Home extends Component {
-	id = 0;
-	state = {
-		todos: [],
-	};
+export default function Home() {
+	const [date, setDate] = useState();
+	const [todo, setTodo] = useState();
+	const [todos, setTodos] = useState([]);
+	const [id, setID] = useState(0);
 
-	handleCreate = (data) => {
-		const { todos } = this.state;
-		this.setState({
-			todos: todos.concat({ id: this.id++, ...data }),
-		});
+	const changeTodo = (e) => {
+		setTodo(e.target.value);
 	};
-	handleRemove = (id) => {
-		const { todos } = this.state;
-		this.setState({
-			todos: todos.filter((info) => info.id !== id),
-		});
+
+	const changeDate = (e) => {
+		setDate(e.target.value);
 	};
 
-	render() {
-		const { todos } = this.state;
+	const removeTodo = (id) => {
+		const newTodos = [...todos];
+		setTodos(newTodos.filter((info) => info.id !== id));
+	};
+	const submitTodo = (e) => {
+		e.preventDefault();
+		if (todo === '' || date === '') {
+			alert('모든 항목을 입력해주세요!');
+			return false;
+		} else if (date.length != 8) {
+			alert('날짜를 올바른 형식으로 입력해주세요!');
+			return false;
+		} else alert('입력되었습니다!');
+		setTodos(todos.concat({ id: id, date: date, todo: todo }));
+		setTodo('');
+		setDate('');
+		setID(id + 1);
+	};
 
-		return (
-			<Wrapper>
-				<Subject>리액트-투두</Subject>
-				<Contents>
-					<TodoInput onCreate={this.handleCreate}></TodoInput>
-					<Space />
-					<TodoList data={todos} onRemove={this.handleRemove} />
-				</Contents>
-			</Wrapper>
-		);
-	}
+	return (
+		<Wrapper>
+			<Subject>리액트-투두</Subject>
+			<Contents>
+				<TodoInput
+					date={date}
+					todo={todo}
+					onChangeDate={changeDate}
+					onChangeTodo={changeTodo}
+					onSubmit={submitTodo}
+				/>
+				<Space />
+				<TodoList data={todos} onRemove={removeTodo} />
+			</Contents>
+		</Wrapper>
+	);
 }
 const Space = styled.div`
 	flex: 0.3;
@@ -57,7 +73,6 @@ const Subject = styled.div`
 `;
 const Contents = styled.div`
 	font-size: 0.1rem;
-
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;

From 7214305add422b8ac9f947b319ae4927f02b0749 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 15:43:12 +0900
Subject: [PATCH 10/29] remainders

---
 .gitignore        | 2 ++
 .now/project.json | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

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..964a3b9 100644
--- a/.now/project.json
+++ b/.now/project.json
@@ -1 +1 @@
-{"orgId":"vC0ivr1sq0T0zKJytpWAmdFN","projectId":"QmU68M4LipQZeiFKBEhK7WmUX9o8wjXK3RGeuiZ8PSWDDK"}
\ No newline at end of file
+{"orgId":"RZuBNQFBfWtPw3WJZD7K3bSt","projectId":"QmeT1xUQTCRFLjVdW4RXLX6vVPW9baLYyyMnnGcDXeTqtp"}
\ No newline at end of file

From c9275e015c3eb0f015819b2100cbff55ec427198 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:27:11 +0900
Subject: [PATCH 11/29] =?UTF-8?q?index.js=20=ED=83=9C=EA=B7=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/pages/index.js b/pages/index.js
index 2279c75..1d4a19c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -39,7 +39,7 @@ export default function Home() {
 
 	return (
 		<Wrapper>
-			<Subject>리액트-투두</Subject>
+			<Title>리액트-투두</Title>
 			<Contents>
 				<TodoInput
 					date={date}
@@ -64,11 +64,10 @@ const Wrapper = styled.div`
 	background-color: rgb(155, 197, 195);
 	padding: 4rem 5rem;
 `;
-const Subject = styled.div`
+const Title = styled.h1`
 	font-size: 3rem;
 	font-weight: 600;
-	padding: 0px;
-	margin: 0px 0px 3rem;
+	margin-bottom: 3rem;
 	color: white;
 `;
 const Contents = styled.div`

From a9facbbf0ef6a531c7253fd4d2d3a6db01ed037b Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:28:27 +0900
Subject: [PATCH 12/29] =?UTF-8?q?index.js=20Contents=ED=83=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/pages/index.js b/pages/index.js
index 1d4a19c..440141f 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -74,5 +74,4 @@ const Contents = styled.div`
 	font-size: 0.1rem;
 	display: flex;
 	flex-direction: row;
-	justify-content: space-between;
 `;

From f3bb657b032d9ae233a7ddce8835a1d19a407bd5 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:34:11 +0900
Subject: [PATCH 13/29] =?UTF-8?q?index.js=20Space=ED=83=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/pages/index.js b/pages/index.js
index 440141f..08cdcbe 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -55,7 +55,7 @@ export default function Home() {
 	);
 }
 const Space = styled.div`
-	flex: 0.3;
+	flex: 1;
 `;
 
 const Wrapper = styled.div`

From c373a6259d2bc6ba5a9250389ebeb36e32e0a071 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:36:09 +0900
Subject: [PATCH 14/29] =?UTF-8?q?index.js=20useState=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 08cdcbe..1db1323 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,10 +5,7 @@ import TodoInput from '../components/todo-input';
 import TodoList from '../components/todo-list';
 
 export default function Home() {
-	const [date, setDate] = useState();
-	const [todo, setTodo] = useState();
 	const [todos, setTodos] = useState([]);
-	const [id, setID] = useState(0);
 
 	const changeTodo = (e) => {
 		setTodo(e.target.value);

From cbd796a783b338090dbb5eb4a10612e44d0415ef Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:37:40 +0900
Subject: [PATCH 15/29] =?UTF-8?q?index.js=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?=
 =?UTF-8?q?=ED=95=B8=EB=93=A4=EB=9F=AC=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 1db1323..2570043 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -7,14 +7,6 @@ import TodoList from '../components/todo-list';
 export default function Home() {
 	const [todos, setTodos] = useState([]);
 
-	const changeTodo = (e) => {
-		setTodo(e.target.value);
-	};
-
-	const changeDate = (e) => {
-		setDate(e.target.value);
-	};
-
 	const removeTodo = (id) => {
 		const newTodos = [...todos];
 		setTodos(newTodos.filter((info) => info.id !== id));

From ee2c9a7d3bb1fe66fa4d9fee8f1558c71648cbbd Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:39:15 +0900
Subject: [PATCH 16/29] =?UTF-8?q?handleDelete=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/pages/index.js b/pages/index.js
index 2570043..d6b8808 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -7,9 +7,11 @@ import TodoList from '../components/todo-list';
 export default function Home() {
 	const [todos, setTodos] = useState([]);
 
-	const removeTodo = (id) => {
-		const newTodos = [...todos];
-		setTodos(newTodos.filter((info) => info.id !== id));
+	const handleDelete = (index) => () => {
+		setTodos([
+			...todos.slice(0, index),
+			...todo.slice(index + 1, todos.length),
+		]);
 	};
 	const submitTodo = (e) => {
 		e.preventDefault();

From 642f327a90f5c8fea40e26b7b3472154ee75b74f Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:40:48 +0900
Subject: [PATCH 17/29] =?UTF-8?q?handleAdd=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.js | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index d6b8808..82a8a23 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -13,19 +13,18 @@ export default function Home() {
 			...todo.slice(index + 1, todos.length),
 		]);
 	};
-	const submitTodo = (e) => {
-		e.preventDefault();
+	const handleAdd = (newtodo) => {
+		const { todo, date } = newtodo;
 		if (todo === '' || date === '') {
 			alert('모든 항목을 입력해주세요!');
-			return false;
-		} else if (date.length != 8) {
+			return;
+		} else if (date.length !== 8) {
 			alert('날짜를 올바른 형식으로 입력해주세요!');
-			return false;
-		} else alert('입력되었습니다!');
-		setTodos(todos.concat({ id: id, date: date, todo: todo }));
-		setTodo('');
-		setDate('');
-		setID(id + 1);
+			return;
+		} else {
+			setTodos(todos.concat({ date, todo }));
+			alert('입력되었습니다!');
+		}
 	};
 
 	return (

From bdcce6712e582f461ff36e2000010f80766bda60 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:42:55 +0900
Subject: [PATCH 18/29] =?UTF-8?q?index.js=20return=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/pages/index.js b/pages/index.js
index 82a8a23..05e20cc 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -31,15 +31,9 @@ export default function Home() {
 		<Wrapper>
 			<Title>리액트-투두</Title>
 			<Contents>
-				<TodoInput
-					date={date}
-					todo={todo}
-					onChangeDate={changeDate}
-					onChangeTodo={changeTodo}
-					onSubmit={submitTodo}
-				/>
+				<TodoInput onSubmit={handleAdd} />
 				<Space />
-				<TodoList data={todos} onRemove={removeTodo} />
+				<TodoList {...{ todos }} onDelete={handleDelete} />
 			</Contents>
 		</Wrapper>
 	);

From 0a2afa5a1704cf7e3c51f534e9ddff667a840622 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:45:15 +0900
Subject: [PATCH 19/29] =?UTF-8?q?todo-input=20useState=20=EB=B0=8F=20?=
 =?UTF-8?q?=ED=95=B8=EB=93=A4=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/components/todo-input.js b/components/todo-input.js
index 2016379..9b56512 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -2,7 +2,12 @@ import React from 'react';
 import styled from 'styled-components';
 
 export default function TodoInput(props) {
-	const { date, todo, onChangeTodo, onChangeDate, onSubmit } = props;
+	const [newTodo, setNewTodo] = useState({ date: '', todo: '' });
+	const { onSubmit } = props;
+
+	const handleFormChange = (e) => {
+		setNewTodo({ ...newTodo, [e.target.name]: e.target.value });
+	};
 
 	const maxLengthCheck = (object) => {
 		if (object.value.length > object.maxLength) {

From e296564bed3ff966596da84099dab568f797a0e8 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:46:48 +0900
Subject: [PATCH 20/29] =?UTF-8?q?todo-input=20Input=20=EB=B0=8F=20Textarea?=
 =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/components/todo-input.js b/components/todo-input.js
index 9b56512..869d980 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -44,19 +44,14 @@ export default function TodoInput(props) {
 
 const Input = styled.input`
 	width: 80%;
-	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;
 `;
 const TextArea = styled.textarea`
 	width: 80%;
 	height: 30vh;
 	resize: none;
-	border-width: 1px;
-	border-style: solid;
-	border-color: rgb(97, 97, 97);
+	border: 1px solid rgb(97, 97, 97);
 	padding: 0.5rem 0.8rem;
 `;
 const P = styled.p`

From 9a75af3a54676ccb9762bdcd129d1ab4ed1e8145 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:48:06 +0900
Subject: [PATCH 21/29] =?UTF-8?q?todo-input=20Label=ED=83=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 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 869d980..d732db3 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -18,7 +18,7 @@ export default function TodoInput(props) {
 	return (
 		<Form>
 			<InputSection>
-				<P>시간</P>
+				<Label>시간</Label>
 				<Input
 					maxlength="8"
 					oninput="maxLengthCheck(this)"
@@ -30,7 +30,7 @@ export default function TodoInput(props) {
 			</InputSection>
 
 			<InputSection>
-				<P>TODO</P>
+				<Label>TODO</Label>
 				<TextArea
 					placeholder="할 일을 입력하세요"
 					value={todo}
@@ -54,7 +54,7 @@ const TextArea = styled.textarea`
 	border: 1px solid rgb(97, 97, 97);
 	padding: 0.5rem 0.8rem;
 `;
-const P = styled.p`
+const Label = styled.label`
 	font-size: 1.5rem;
 	color: white;
 	margin: 0;

From 125ec5f2126797c4dce254c01a753d1a9ed97569 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:49:20 +0900
Subject: [PATCH 22/29] =?UTF-8?q?todo-input=20Row=20=ED=83=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/components/todo-input.js b/components/todo-input.js
index d732db3..1f40972 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -17,7 +17,7 @@ export default function TodoInput(props) {
 
 	return (
 		<Form>
-			<InputSection>
+			<Row>
 				<Label>시간</Label>
 				<Input
 					maxlength="8"
@@ -27,16 +27,16 @@ export default function TodoInput(props) {
 					value={date}
 					onChange={onChangeDate}
 				/>
-			</InputSection>
+			</Row>
 
-			<InputSection>
+			<Row>
 				<Label>TODO</Label>
 				<TextArea
 					placeholder="할 일을 입력하세요"
 					value={todo}
 					onChange={onChangeTodo}
 				/>
-			</InputSection>
+			</Row>
 			<Button onClick={onSubmit}>등록</Button>
 		</Form>
 	);
@@ -59,14 +59,12 @@ const Label = styled.label`
 	color: white;
 	margin: 0;
 `;
-const InputSection = styled.div`
+const Row = styled.div`
 	color: white;
 	width: 100%;
 	display: flex;
 	flex-direction: row;
-	-webkit-box-pack: justify;
 	justify-content: space-between;
-	align-items: flex-start;
 	margin-bottom: 3rem;
 `;
 const Form = styled.form`

From 80fb44326ff2ef9ac7747e23eb8fbf11d42f35a6 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:50:31 +0900
Subject: [PATCH 23/29] =?UTF-8?q?SubmitButton=20=ED=83=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 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 1f40972..47cd759 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -37,7 +37,7 @@ export default function TodoInput(props) {
 					onChange={onChangeTodo}
 				/>
 			</Row>
-			<Button onClick={onSubmit}>등록</Button>
+			<SubmitButton onClick={onSubmit}>등록</SubmitButton>
 		</Form>
 	);
 }
@@ -80,15 +80,12 @@ const Form = styled.form`
 	border-style: solid;
 	padding: 1rem 2rem;
 `;
-const Button = styled.button`
+const SubmitButton = 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;
 `;

From 4010002363eaa4e6dd4901704e61ef51d22663c4 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:51:48 +0900
Subject: [PATCH 24/29] =?UTF-8?q?todo-input=20Wrapper=20=ED=83=9C=EA=B7=B8?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/todo-input.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/components/todo-input.js b/components/todo-input.js
index 47cd759..084d485 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -16,7 +16,7 @@ export default function TodoInput(props) {
 	};
 
 	return (
-		<Form>
+		<Wrapper>
 			<Row>
 				<Label>시간</Label>
 				<Input
@@ -38,7 +38,7 @@ export default function TodoInput(props) {
 				/>
 			</Row>
 			<SubmitButton onClick={onSubmit}>등록</SubmitButton>
-		</Form>
+		</Wrapper>
 	);
 }
 
@@ -67,17 +67,14 @@ const Row = styled.div`
 	justify-content: space-between;
 	margin-bottom: 3rem;
 `;
-const Form = styled.form`
+const Wrapper = styled.form`
 	font-size: 18px;
-
 	width: 100%;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	height: 37rem;
-	flex: 1;
-	border-width: 1px;
-	border-style: solid;
+	border: 1px solid black;
 	padding: 1rem 2rem;
 `;
 const SubmitButton = styled.button`

From bd4a2d4c6e4f8c8057cfe69202d2ec18691a4c15 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:54:26 +0900
Subject: [PATCH 25/29] =?UTF-8?q?todo-input=20return=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 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 084d485..2521ccf 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -20,24 +20,21 @@ export default function TodoInput(props) {
 			<Row>
 				<Label>시간</Label>
 				<Input
-					maxlength="8"
-					oninput="maxLengthCheck(this)"
 					type="number"
+					name="date"
 					placeholder="날짜를 입력하세요 (ex.20200404)"
-					value={date}
-					onChange={onChangeDate}
+					onChange={handleFormChange}
 				/>
 			</Row>
-
 			<Row>
 				<Label>TODO</Label>
 				<TextArea
+					name="todo"
 					placeholder="할 일을 입력하세요"
-					value={todo}
-					onChange={onChangeTodo}
+					onChange={handleFormChange}
 				/>
 			</Row>
-			<SubmitButton onClick={onSubmit}>등록</SubmitButton>
+			<Button onClick={onSubmit}>등록</Button>
 		</Wrapper>
 	);
 }

From bf2bf80d266165627f834386d0f952dbae8b3f5f Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sat, 11 Apr 2020 23:58:21 +0900
Subject: [PATCH 26/29] =?UTF-8?q?todo-list.js=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/todo-list.js | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/components/todo-list.js b/components/todo-list.js
index 6b44aef..aa6deab 100644
--- a/components/todo-list.js
+++ b/components/todo-list.js
@@ -4,19 +4,26 @@ import styled from 'styled-components';
 import TodoItem from './todo-item';
 
 export default function TodoList(props) {
-	const { data, onRemove } = props;
+	const { todos, onDelete } = props;
 
-	const list = data
-		.sort((todo1, todo2) => {
-			return todo1.date - todo2.date;
-		})
-		.map((todolist) => (
-			<TodoItem key={todolist.id} {...todolist} onRemove={onRemove} />
-		));
-	return <TodoListWrapper> {list} </TodoListWrapper>;
+	return (
+		<Wrapper>
+			{todos
+				.sort((todo1, todo2) => {
+					return todo1.date - todo2.date;
+				})
+				.map((todoObj, index) => (
+					<TodoItem
+						key={JSON.stringify(todo)}
+						{...{ todoObj }}
+						onDelete={onDelete(index)}
+					/>
+				))}
+		</Wrapper>
+	);
 }
 
-const TodoListWrapper = styled.div`
+const Wrapper = styled.div`
 	font-size: 18px;
 	flex: 1;
 `;

From 14e8e6214e2b38223265d0aab00c09f221568867 Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sun, 12 Apr 2020 00:01:01 +0900
Subject: [PATCH 27/29] =?UTF-8?q?todo-item.js=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/todo-item.js | 40 +++++++++++++++++++---------------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/components/todo-item.js b/components/todo-item.js
index b657082..0066914 100644
--- a/components/todo-item.js
+++ b/components/todo-item.js
@@ -2,41 +2,39 @@ import React from 'react';
 import styled from 'styled-components';
 
 export default function TodoItem(props) {
-	const { id, date, todo, onRemove } = props;
-
+	const { todo, onDelete } = props;
+	const { date, todo } = todo;
 	return (
-		<TodoItemWrapper>
-			<Todo>{todo}</Todo>
-			<Date>
-				{date}
-				<Button onClick={() => onRemove(id)}>완료</Button>
-			</Date>
-		</TodoItemWrapper>
+		<Wrapper>
+			<Row>
+				<P>{todo}</P>
+				<P>{date}</P>
+			</Row>
+			<DeleteButton onClick={onDelete}>??</DeleteButton>
+		</Wrapper>
 	);
 }
-const Date = styled.div`
-	font-size: 1.5rem;
+const Row = styled.div`
 	display: flex;
-	color: white;
-	flex-direction: column;
+	flex-direction: row;
+	justify-content: space-between;
 `;
-const Todo = styled.div`
+const P = styled.p`
 	font-size: 1.5rem;
 	color: white;
-	display: flex;
-	flex-direction: column;
 `;
-const Button = 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;
-	padding: 0.5rem 1rem;
+	border: none;
 	border-radius: 0.3rem;
+	padding: 0.5rem 1rem;
+	width: fit-content;
+	margin-left: auto;
 `;
-const TodoItemWrapper = styled.div`
+const Wrapper = styled.div`
 	font-size: 18px;
 	border: solid 1px black;
 

From 56d65b93dfb46b3fc6f5a3541ff1ae0ae636093d Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Sun, 12 Apr 2020 00:21:36 +0900
Subject: [PATCH 28/29] =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=95=88=EB=A7=9E?=
 =?UTF-8?q?=EB=8A=94=20=EB=B6=80=EB=B6=84=EB=93=A4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/components/todo-input.js b/components/todo-input.js
index 2521ccf..5960c12 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 export default function TodoInput(props) {
@@ -9,12 +9,6 @@ export default function TodoInput(props) {
 		setNewTodo({ ...newTodo, [e.target.name]: e.target.value });
 	};
 
-	const maxLengthCheck = (object) => {
-		if (object.value.length > object.maxLength) {
-			object.value = object.value.slice(0, object.maxLength);
-		}
-	};
-
 	return (
 		<Wrapper>
 			<Row>
@@ -34,7 +28,7 @@ export default function TodoInput(props) {
 					onChange={handleFormChange}
 				/>
 			</Row>
-			<Button onClick={onSubmit}>등록</Button>
+			<SubmitButton onClick={onSubmit}>등록</SubmitButton>
 		</Wrapper>
 	);
 }

From bd5bf70c9262d31503a1f4cbafb325bc078b33ed Mon Sep 17 00:00:00 2001
From: EunKo <koeun0529@gmail.com>
Date: Mon, 13 Apr 2020 00:43:52 +0900
Subject: [PATCH 29/29] =?UTF-8?q?=EC=98=A4=EB=A5=98...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/todo-input.js |   6 ++-
 components/todo-item.js  |   5 +-
 components/todo-list.js  |   3 +-
 pages/_app.js            | 100 +++++++++++++++++++--------------------
 pages/index.js           |  10 ++--
 5 files changed, 66 insertions(+), 58 deletions(-)

diff --git a/components/todo-input.js b/components/todo-input.js
index 5960c12..501c038 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -5,6 +5,8 @@ export default function TodoInput(props) {
 	const [newTodo, setNewTodo] = useState({ date: '', todo: '' });
 	const { onSubmit } = props;
 
+	console.log(newTodo);
+
 	const handleFormChange = (e) => {
 		setNewTodo({ ...newTodo, [e.target.name]: e.target.value });
 	};
@@ -28,7 +30,7 @@ export default function TodoInput(props) {
 					onChange={handleFormChange}
 				/>
 			</Row>
-			<SubmitButton onClick={onSubmit}>등록</SubmitButton>
+			<SubmitButton onClick={() => onSubmit(newTodo)}>등록</SubmitButton>
 		</Wrapper>
 	);
 }
@@ -60,7 +62,7 @@ const Row = styled.div`
 `;
 const Wrapper = styled.form`
 	font-size: 18px;
-	width: 100%;
+	width: 40%;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
diff --git a/components/todo-item.js b/components/todo-item.js
index 0066914..79593b4 100644
--- a/components/todo-item.js
+++ b/components/todo-item.js
@@ -2,8 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 
 export default function TodoItem(props) {
-	const { todo, onDelete } = props;
-	const { date, todo } = todo;
+	const { todoObj, onDelete } = props;
+	const { todo, date } = todoObj;
 	return (
 		<Wrapper>
 			<Row>
@@ -24,6 +24,7 @@ const P = styled.p`
 	color: white;
 `;
 const DeleteButton = styled.button`
+	display: block;
 	color: white;
 	background-color: rgb(97, 97, 97);
 	font-size: 1.5rem;
diff --git a/components/todo-list.js b/components/todo-list.js
index aa6deab..b92863e 100644
--- a/components/todo-list.js
+++ b/components/todo-list.js
@@ -14,7 +14,7 @@ export default function TodoList(props) {
 				})
 				.map((todoObj, index) => (
 					<TodoItem
-						key={JSON.stringify(todo)}
+						key={JSON.stringify(todoObj)}
 						{...{ todoObj }}
 						onDelete={onDelete(index)}
 					/>
@@ -24,6 +24,7 @@ export default function TodoList(props) {
 }
 
 const Wrapper = styled.div`
+	width:40%
 	font-size: 18px;
 	flex: 1;
 `;
diff --git a/pages/_app.js b/pages/_app.js
index 3051a08..2770663 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,55 +1,55 @@
-import React from "react";
-import App from "next/app";
-import Head from "next/head";
+import React from 'react';
+import App from 'next/app';
+import Head from 'next/head';
 
 class PickkApp extends App {
-  render() {
-    const { Component, pageProps } = this.props;
-    return (
-      <>
-        <Head>
-          <title>리액트 Todo</title>
-        </Head>
-        <Component {...pageProps} />
-        <style jsx global>{`
-          html {
-            margin: 0;
-            padding: 0;
-            position: relative;
-          }
-          body {
-            margin: 0;
-            padding: 0;
-            font-size: 0.1rem;
-            overflow-x: hidden;
-            width: 100%;
-          }
-          ::-webkit-scrollbar {
-            display: none;
-          }
-          input {
-            -webkit-appearance: none;
-            -webkit-border-radius: 0;
-          }
-          html,
-          body,
-          body > div:nth-child(2) {
-            height: 100%;
-          }
-          *,
-          ::after,
-          ::before {
-            -webkit-box-sizing: border-box;
-            -moz-box-sizing: border-box;
-            box-sizing: border-box;
-          }
-          html {
-            font-size: 10px;
-          }
-        `}</style>
-      </>
-    );
-  }
+	render() {
+		const { Component, pageProps } = this.props;
+		return (
+			<>
+				<Head>
+					<title>Todo</title>
+				</Head>
+				<Component {...pageProps} />
+				<style jsx global>{`
+					html {
+						margin: 0;
+						padding: 0;
+						position: relative;
+					}
+					body {
+						margin: 0;
+						padding: 0;
+						font-size: 0.1rem;
+						overflow-x: hidden;
+						width: 100%;
+					}
+					::-webkit-scrollbar {
+						display: none;
+					}
+					input {
+						-webkit-appearance: none;
+						-webkit-border-radius: 0;
+					}
+					html,
+					body,
+					body > div:nth-child(2) {
+						height: 100%;
+					}
+					*,
+					::after,
+					::before {
+						-webkit-box-sizing: border-box;
+						-moz-box-sizing: border-box;
+						box-sizing: border-box;
+					}
+					html {
+						font-size: 10px;
+					}
+				`}</style>
+			</>
+		);
+	}
 }
 
 export default PickkApp;
diff --git a/pages/index.js b/pages/index.js
index 05e20cc..4ab0fbc 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -6,11 +6,13 @@ import TodoList from '../components/todo-list';
 
 export default function Home() {
 	const [todos, setTodos] = useState([]);
+	console.log(todos);
 
 	const handleDelete = (index) => () => {
+		console.log('hi');
 		setTodos([
 			...todos.slice(0, index),
-			...todo.slice(index + 1, todos.length),
+			...todos.slice(index + 1, todos.length),
 		]);
 	};
 	const handleAdd = (newtodo) => {
@@ -22,7 +24,8 @@ export default function Home() {
 			alert('날짜를 올바른 형식으로 입력해주세요!');
 			return;
 		} else {
-			setTodos(todos.concat({ date, todo }));
+			console.log(newtodo);
+			setTodos([...todos, newtodo]);
 			alert('입력되었습니다!');
 		}
 	};
@@ -48,12 +51,13 @@ const Wrapper = styled.div`
 	background-color: rgb(155, 197, 195);
 	padding: 4rem 5rem;
 `;
-const Title = styled.h1`
+const Title = styled.p`
 	font-size: 3rem;
 	font-weight: 600;
 	margin-bottom: 3rem;
 	color: white;
 `;
+
 const Contents = styled.div`
 	font-size: 0.1rem;
 	display: flex;