diff --git a/src/App.js b/src/App.js
index e358583..90ee770 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,22 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import TodoList from './containers/TodoList/TodoList';
+import {BrowserRouter, Route, Redirect, Switch} from 'react-router-dom';
+import NewTodo from './containers/TodoList/NewTodo/NewTodo';
 
 function App() {
   return (
+    <BrowserRouter>
     <div className="App">
+      <switch>
+      <Route path='/todos' exact render={()=><TodoList title="My Todos!"/>}/>
+      <Route path='/new-todo' exact component={NewTodo} />
+      <Redirect exact from='/' to='/todos' />
+      <Route render={() => <h1>Not Found</h1>} />
+      </switch>
     </div>
+    </BrowserRouter>
   );
 }
 
diff --git a/src/components/Todo/Todo.css b/src/components/Todo/Todo.css
new file mode 100644
index 0000000..41754d1
--- /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..ff8a6a3
--- /dev/null
+++ b/src/components/Todo/todo.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import './Todo.css'
+const Todo= props=>
+{
+    return(
+        <div className='Todo'>
+            <div className={`text ${props.done && 'done'}`} onClick={props.clicked} >{
+            props.title}
+            </div>
+        </div>
+    );
+}
+
+export default Todo;
\ No newline at end of file
diff --git a/src/components/TodoDetail/TodoDetail.css b/src/components/TodoDetail/TodoDetail.css
new file mode 100644
index 0000000..195d7af
--- /dev/null
+++ b/src/components/TodoDetail/TodoDetail.css
@@ -0,0 +1,16 @@
+.TodoDetail .row {
+    display: flex;
+    padding: 20px;
+    height: 30px;
+    text-align: left;
+  }
+  
+  .TodoDetail .left {
+    font-weight: bold;
+    flex: 25%
+  }
+  
+  .TodoDetail .right {
+    flex: 75%;
+  }
+  
\ No newline at end of file
diff --git a/src/components/TodoDetail/TodoDetail.js b/src/components/TodoDetail/TodoDetail.js
new file mode 100644
index 0000000..3ae3431
--- /dev/null
+++ b/src/components/TodoDetail/TodoDetail.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import './TodoDetail.css';
+
+const TodoDetail = (props) =>
+{
+    return(
+        <div className="TodoDetail">
+            <div className="row">
+                <div className="left">
+                    Name:
+                </div>
+                <div className="right">
+                    {props.title}
+                </div>
+                </div>
+                <div className="row">
+                    <div className="left">
+                        Content:
+                    </div>
+                    <div className="right">
+                        {props.content}
+                    </div>
+                </div>
+            
+        </div>
+    );
+
+};
+export default TodoDetail;
\ No newline at end of file
diff --git a/src/containers/TodoList/NewTodo/NewTodo.css b/src/containers/TodoList/NewTodo/NewTodo.css
new file mode 100644
index 0000000..51f2850
--- /dev/null
+++ b/src/containers/TodoList/NewTodo/NewTodo.css
@@ -0,0 +1,42 @@
+.NewTodo {
+    width: 80%;
+    margin: 20px auto;
+    border: 1px solid #eee;
+    box-shadow: 0 2px 3px #ccc;
+    text-align: center;
+  }
+  
+  .NewTodo label {
+    display: block;
+    margin: 10px auto;
+    text-align: center;
+    font-weight: bold;
+  }
+  
+  .NewTodo input,
+  .NewTodo textarea {
+    display: block;
+    width: 80%;
+    box-sizing: border-box;
+    border: 1px solid black;
+    outline: none;
+    font: inherit;
+    margin: auto;
+  }
+  
+  .NewTodo button {
+    margin: 5px 0;
+    padding: 10px;
+    font: inherit;
+    border: 1px solid #fa923f;
+    background-color: transparent;
+    color: #fa923f;
+    cursor: pointer;
+  }
+  
+  .NewTodo button:hover,
+  .NewTodo button:active {
+    color: white;
+    background-color: #fa923f;
+  }
+  
\ No newline at end of file
diff --git a/src/containers/TodoList/NewTodo/NewTodo.js b/src/containers/TodoList/NewTodo/NewTodo.js
new file mode 100644
index 0000000..7bf5fe8
--- /dev/null
+++ b/src/containers/TodoList/NewTodo/NewTodo.js
@@ -0,0 +1,36 @@
+import React,{Component} from 'react';
+import './NewTodo.css';
+import { Redirect } from 'react-router-dom';
+class NewTodo extends Component{
+    state={
+    title:'',
+    content:'',
+    submitted:''        
+    }
+     
+    postTodoHandler = () => {
+            const data ={ title: this.state.title, content: this.state.content }; 
+            alert('Submitted\n' + data.title + '\n' + data.content); 
+            this.setState( {submitted: true} );
+    }
+    render()
+    {
+        if (this.state.submitted) {
+            return <Redirect to='/todos' /> 
+        }
+        return(
+            <div className="NewTodo">
+                <h1>Add a Todo</h1>
+                <label>Title</label>
+                <textarea type="text" value={this.state.title} 
+                    onChange={(event)=>this.setState({title:event.target.value})}/>
+                <label>Content</label>
+                <textarea rows="4" type="text" value={this.state.content}
+                    onChange={(event)=>this.setState({content:event.target.value})}/>
+                <button onClick={() => this.postTodoHandler()}>Submit</button>
+            </div>
+        );
+    }
+}
+
+export default NewTodo;
\ No newline at end of file
diff --git a/src/containers/TodoList/TodoList.css b/src/containers/TodoList/TodoList.css
new file mode 100644
index 0000000..a1bfa68
--- /dev/null
+++ b/src/containers/TodoList/TodoList.css
@@ -0,0 +1,16 @@
+.TodoList {
+    background: white;
+    width: 512px;
+    box-shadow: 0 3px 9px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); /* 그림자 */ 
+    margin: auto; 
+    margin-top: 4rem;
+  }
+  
+  .TodoList .title {
+    padding: 2rem;
+    font-size: 2.5rem;
+    text-align: center;
+    font-weight: 500;
+    background: orange;
+    color: black;
+  }
\ No newline at end of file
diff --git a/src/containers/TodoList/TodoList.js b/src/containers/TodoList/TodoList.js
new file mode 100644
index 0000000..46d3f76
--- /dev/null
+++ b/src/containers/TodoList/TodoList.js
@@ -0,0 +1,51 @@
+import React,{Component} from 'react';
+import Todo from '../../components/Todo/todo';
+import './TodoList.css';
+import TodoDetail from '../../components/TodoDetail/TodoDetail';
+import NewTodo from '../TodoList/NewTodo/NewTodo';
+import { NavLink } from 'react-router-dom';
+class TodoList extends Component{
+   state={
+       todos:[
+          { id:1, title: 'SWPP', content:'take swpp class',done: true},
+          { id:2, title: 'Movie', content:'watch movie',done: false},
+          { id:3, title: 'Dinner', content:'eat dinner',done: false},
+       ],
+       selectedTodo:null,
+
+   }
+   clickTodoHandler = td=>
+   {
+        if(this.state.selectedTodo===td)
+        {
+            this.setState({selectedTodo:null});
+        }
+        else{
+            this.setState({selectedTodo:td});
+        }
+   }
+
+    render()
+    {
+        
+        const todos= this.state.todos.map((td)=>{
+            return (<Todo key={td.id} title={td.title} done={td.done} clicked={()=>this.clickTodoHandler(td)} />);
+        })
+        let todoDetail=null;
+        if(this.state.selectedTodo){
+            todoDetail=<NewTodo title={this.state.selectedTodo.title} content={this.state.selectedTodo.content}/>
+        }
+
+        return(
+        <div className='TodoList'>
+            <div className='title'>{this.props.title}</div>
+            <div className='todos'>{todos}</div>
+            {todoDetail}
+            <NavLink to='/new-todo' exact>New Todo</NavLink>
+        </div>
+        );
+    }
+
+}
+
+export default TodoList;
\ No newline at end of file