diff --git a/src/App.js b/src/App.js
index e358583..a43d407 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,23 @@
import React from 'react';
+import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
+import TodoList from './containers/TodoList/TodoList';
+import NewTodo from './containers/TodoList/NewTodo/NewTodo';
function App() {
- return (
-
-
- );
-}
+ return (
+
+
+
+ } />
+
+
+ Not Found
} />
+
+
+
+ );
+};
export default App;
diff --git a/src/components/Todo/Todo.css b/src/components/Todo/Todo.css
new file mode 100644
index 0000000..340b434
--- /dev/null
+++ b/src/components/Todo/Todo.css
@@ -0,0 +1,31 @@
+.Todo {
+ border-top: 1px solid #f1f3f5;
+ padding: 1rem;
+ display: flex;
+ align-items: center;
+ transition: all 0.15s;
+}
+
+.Todo .text {
+ flex: 1;
+ text-align: left;
+ word-break: break-all;
+ cursor: pointer;
+}
+
+.Todo .text:hover {
+ color: orange;
+}
+
+.Todo .done {
+ text-decoration: line-through;
+ color: #adb5bd;
+}
+
+.Todo .done-mark {
+ font-size: 1.5rem;
+ line-height: 1rem;
+ margin-left: 1rem;
+ color: orange;
+ font-weight: 800;
+}
\ No newline at end of file
diff --git a/src/components/Todo/Todo.js b/src/components/Todo/Todo.js
new file mode 100644
index 0000000..da28c5e
--- /dev/null
+++ b/src/components/Todo/Todo.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import './Todo.css';
+
+const Todo = (props) => {
+ return (
+
+
{props.title}
+ {props.done &&
✓
}
+
+
+
Name:
+
{props.title}
+
+
+
Content:
+
{props.content}
+
+
+
{this.props.title}
+
{todos}
+ {todoDetail}
+
New Todo
+