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
diff --git a/components/todo-input.js b/components/todo-input.js
index 1844e25..501c038 100644
--- a/components/todo-input.js
+++ b/components/todo-input.js
@@ -1,20 +1,81 @@
-import React from "react";
-import styled from "styled-components";
+import React, { useState } from 'react';
+import styled from 'styled-components';
 
-export default function TodoInput() {
-  return (
-    <Wrapper>
-      리액트-투두
-      <br />
-      시간을 입력하는 칸
-      <br />
-      Todo를 입력하는 칸
-    </Wrapper>
-  );
+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 });
+	};
+
+	return (
+		<Wrapper>
+			<Row>
+				<Label>시간</Label>
+				<Input
+					type="number"
+					name="date"
+					placeholder="날짜를 입력하세요 (ex.20200404)"
+					onChange={handleFormChange}
+				/>
+			</Row>
+			<Row>
+				<Label>TODO</Label>
+				<TextArea
+					name="todo"
+					placeholder="할 일을 입력하세요"
+					onChange={handleFormChange}
+				/>
+			</Row>
+			<SubmitButton onClick={() => onSubmit(newTodo)}>등록</SubmitButton>
+		</Wrapper>
+	);
 }
 
-const Wrapper = styled.div`
-  border: solid 1px;
-  font-size: 18px;
-  flex: 1;
+const Input = styled.input`
+	width: 80%;
+	border: 1px solid rgb(97, 97, 97);
+	padding: 0.5rem 0.8rem;
+`;
+const TextArea = styled.textarea`
+	width: 80%;
+	height: 30vh;
+	resize: none;
+	border: 1px solid rgb(97, 97, 97);
+	padding: 0.5rem 0.8rem;
+`;
+const Label = styled.label`
+	font-size: 1.5rem;
+	color: white;
+	margin: 0;
+`;
+const Row = styled.div`
+	color: white;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin-bottom: 3rem;
+`;
+const Wrapper = styled.form`
+	font-size: 18px;
+	width: 40%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	height: 37rem;
+	border: 1px solid black;
+	padding: 1rem 2rem;
+`;
+const SubmitButton = styled.button`
+	color: white;
+	background-color: rgb(97, 97, 97);
+	font-size: 1.5rem;
+	outline: none;
+	border: none;
+	padding: 0.5rem 1rem;
+	border-radius: 0.3rem;
 `;
diff --git a/components/todo-item.js b/components/todo-item.js
index ef2dbe8..79593b4 100644
--- a/components/todo-item.js
+++ b/components/todo-item.js
@@ -1,11 +1,49 @@
-import React from "react";
-import styled from "styled-components";
+import React from 'react';
+import styled from 'styled-components';
 
-export default function TodoItem() {
-  return <Wrapper>Todo</Wrapper>;
+export default function TodoItem(props) {
+	const { todoObj, onDelete } = props;
+	const { todo, date } = todoObj;
+	return (
+		<Wrapper>
+			<Row>
+				<P>{todo}</P>
+				<P>{date}</P>
+			</Row>
+			<DeleteButton onClick={onDelete}>??</DeleteButton>
+		</Wrapper>
+	);
 }
-
+const Row = styled.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+`;
+const P = styled.p`
+	font-size: 1.5rem;
+	color: white;
+`;
+const DeleteButton = styled.button`
+	display: block;
+	color: white;
+	background-color: rgb(97, 97, 97);
+	font-size: 1.5rem;
+	outline: none;
+	border: none;
+	border-radius: 0.3rem;
+	padding: 0.5rem 1rem;
+	width: fit-content;
+	margin-left: auto;
+`;
 const Wrapper = styled.div`
-  font-size: 18px;
-  border: solid 1px;
+	font-size: 18px;
+	border: solid 1px black;
+
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-bottom: 3rem;
+	padding: 1rem 2rem;
 `;
diff --git a/components/todo-list.js b/components/todo-list.js
index 68fded1..b92863e 100644
--- a/components/todo-list.js
+++ b/components/todo-list.js
@@ -1,19 +1,30 @@
-import React from "react";
-import styled from "styled-components";
+import React 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 function TodoList(props) {
+	const { todos, onDelete } = props;
+
+	return (
+		<Wrapper>
+			{todos
+				.sort((todo1, todo2) => {
+					return todo1.date - todo2.date;
+				})
+				.map((todoObj, index) => (
+					<TodoItem
+						key={JSON.stringify(todoObj)}
+						{...{ todoObj }}
+						onDelete={onDelete(index)}
+					/>
+				))}
+		</Wrapper>
+	);
 }
 
 const Wrapper = styled.div`
-  border: solid 1px;
-  font-size: 18px;
-  flex: 1;
+	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 f494909..4ab0fbc 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,30 +1,65 @@
-import React from "react";
+import React, { useState } from 'react';
+import styled from 'styled-components';
 
-import TodoInput from "../components/todo-input";
-import TodoList from "../components/todo-list";
-
-import styled from "styled-components";
+import TodoInput from '../components/todo-input';
+import TodoList from '../components/todo-list';
 
 export default function Home() {
-  return (
-    <Wrapper>
-      <Contents>
-        <TodoInput />
-        <TodoList />
-      </Contents>
-    </Wrapper>
-  );
+	const [todos, setTodos] = useState([]);
+	console.log(todos);
+
+	const handleDelete = (index) => () => {
+		console.log('hi');
+		setTodos([
+			...todos.slice(0, index),
+			...todos.slice(index + 1, todos.length),
+		]);
+	};
+	const handleAdd = (newtodo) => {
+		const { todo, date } = newtodo;
+		if (todo === '' || date === '') {
+			alert('모든 항목을 입력해주세요!');
+			return;
+		} else if (date.length !== 8) {
+			alert('날짜를 올바른 형식으로 입력해주세요!');
+			return;
+		} else {
+			console.log(newtodo);
+			setTodos([...todos, newtodo]);
+			alert('입력되었습니다!');
+		}
+	};
+
+	return (
+		<Wrapper>
+			<Title>리액트-투두</Title>
+			<Contents>
+				<TodoInput onSubmit={handleAdd} />
+				<Space />
+				<TodoList {...{ todos }} onDelete={handleDelete} />
+			</Contents>
+		</Wrapper>
+	);
 }
+const Space = styled.div`
+	flex: 1;
+`;
 
 const Wrapper = styled.div`
-  height: 100vh;
+	height: 100vh;
+	font-size: 20px;
+	background-color: rgb(155, 197, 195);
+	padding: 4rem 5rem;
+`;
+const Title = styled.p`
+	font-size: 3rem;
+	font-weight: 600;
+	margin-bottom: 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;
 `;