From 3a00a2ba9f3bbe77aef6c6b2ec0c59bf69140b3a Mon Sep 17 00:00:00 2001
From: Lemarais <goehd4551@gmail.com>
Date: Thu, 17 Sep 2020 20:01:24 +0900
Subject: [PATCH 1/2] create todolist page and add todo page

---
 package.json                             |   2 +
 src/App.js                               |  20 +++-
 src/components/NewTodo/NewTodo.css       |  41 +++++++
 src/components/NewTodo/NewTodo.js        |  37 +++++++
 src/components/Todo/Todo.css             |  31 ++++++
 src/components/Todo/Todo.js              |  14 +++
 src/components/TodoDetail/TodoDetail.css |  15 +++
 src/components/TodoDetail/TodoDetail.js  |  23 ++++
 src/containers/TodoList/TodoList.css     |  16 +++
 src/containers/TodoList/TodoList.js      |  46 ++++++++
 yarn.lock                                | 133 ++++++++++++++++++++---
 11 files changed, 359 insertions(+), 19 deletions(-)
 create mode 100644 src/components/NewTodo/NewTodo.css
 create mode 100644 src/components/NewTodo/NewTodo.js
 create mode 100644 src/components/Todo/Todo.css
 create mode 100644 src/components/Todo/Todo.js
 create mode 100644 src/components/TodoDetail/TodoDetail.css
 create mode 100644 src/components/TodoDetail/TodoDetail.js
 create mode 100644 src/containers/TodoList/TodoList.css
 create mode 100644 src/containers/TodoList/TodoList.js

diff --git a/package.json b/package.json
index 6c050f8..47ab41c 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
   "dependencies": {
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.1.1"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.js
index e358583..466369c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,22 @@
 import React from 'react';
-import logo from './logo.svg';
+import TodoList from './containers/TodoList/TodoList';
+import NewTodo from './components/NewTodo/NewTodo'
+import {BrowserRouter, Route, Redirect, Switch} from 'react-router-dom'
 import './App.css';
 
 function App() {
-  return (
-    <div className="App">
-    </div>
-  );
+    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>
+    );
 }
 
 export default App;
diff --git a/src/components/NewTodo/NewTodo.css b/src/components/NewTodo/NewTodo.css
new file mode 100644
index 0000000..9b81330
--- /dev/null
+++ b/src/components/NewTodo/NewTodo.css
@@ -0,0 +1,41 @@
+.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/components/NewTodo/NewTodo.js b/src/components/NewTodo/NewTodo.js
new file mode 100644
index 0000000..b47b20e
--- /dev/null
+++ b/src/components/NewTodo/NewTodo.js
@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+import {Redirect} from 'react-router-dom'
+import './NewTodo.css'
+
+class NewTodo extends Component {
+    state = {
+        title: '',
+        content: '',
+        submitted: false,
+    }
+
+    postTodoHandler = () => {
+        const data =
+            {title: this.state.title, content: this.state.content };
+        alert('Submitted\n' + data.title + '\n' + data.content);
+        this.setState({submitted: true});
+        this.props.history.push('/todos');
+    }
+    render() {
+        if (this.state.submitted) {
+            return <Redirect to={'/todos'}/>
+        }
+        return (
+            <div className="NewTodo">
+                <h1>Add a Todo</h1>
+                <label>Title</label>
+                <input 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/components/Todo/Todo.css b/src/components/Todo/Todo.css
new file mode 100644
index 0000000..c762969
--- /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..233e442
--- /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>
+            {props.done && <div className={'done-mark'}>&#x2713;</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..deab75d
--- /dev/null
+++ b/src/components/TodoDetail/TodoDetail.css
@@ -0,0 +1,15 @@
+.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..02e2119
--- /dev/null
+++ b/src/components/TodoDetail/TodoDetail.js
@@ -0,0 +1,23 @@
+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/TodoList.css b/src/containers/TodoList/TodoList.css
new file mode 100644
index 0000000..e1a57f4
--- /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..7d69450
--- /dev/null
+++ b/src/containers/TodoList/TodoList.js
@@ -0,0 +1,46 @@
+import React, {Component} from 'react';
+import Todo from '../../components/Todo/Todo'
+import TodoDetail from '../../components/TodoDetail/TodoDetail'
+import "./TodoList.css"
+import {NavLink} from 'react-router-dom';
+
+class TodoList extends Component {
+    state = {
+        todos: [
+            {id: 1, title: 'SWPP', content: 'task 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() {
+        let todoDetail = null;
+        if (this.state.selectedTodo) {
+            todoDetail = <TodoDetail title={this.state.selectedTodo.title}
+                        content={this.state.selectedTodo.content}/>
+        }
+        const todos = this.state.todos.map((td) => {
+            return (<Todo key={td.id} title={td.title}
+                    done={td.done} clicked={() => this.clickTodoHandler(td)}/> )
+        })
+        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
diff --git a/yarn.lock b/yarn.lock
index b50eb28..d4adf45 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -763,6 +763,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.5.5":
+  version "7.11.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
+  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
@@ -4389,6 +4396,18 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    loose-envify "^1.2.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -4398,6 +4417,13 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.1.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^2.1.4:
   version "2.8.4"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.4.tgz#44119abaf4bc64692a16ace34700fed9c03e2546"
@@ -5028,6 +5054,11 @@ is-wsl@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
   integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -5848,7 +5879,7 @@ loglevel@^1.4.1:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.3.tgz#77f2eb64be55a404c9fd04ad16d57c1d6d6b1280"
   integrity sha512-LoEDv5pgpvWgPF4kNYuIp0qqSJVWak/dML0RY74xlzMZiT9w77teNAwKYKWBTYjlokMirg+o3jBwp+vlLrcfAA==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -6042,6 +6073,14 @@ mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+mini-create-react-context@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz#df60501c83151db69e28eac0ef08b4002efab040"
+  integrity sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz#ac0059b02b9692515a637115b0cc9fed3a35c7b0"
@@ -6827,6 +6866,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
@@ -7872,26 +7918,60 @@ react-dev-utils@^9.0.3:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
-react-dom@16.9.0:
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
-  integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
+react-dom@^16.9.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
+  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.15.0"
+    scheduler "^0.19.1"
 
 react-error-overlay@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.1.tgz#b8d3cf9bb991c02883225c48044cb3ee20413e0f"
   integrity sha512-V9yoTr6MeZXPPd4nV/05eCBvGH9cGzc52FN8fs0O0TVQ3HYYf1n7EgZVtHbldRq5xU9zEzoXIITjYNIfxDDdUw==
 
+react-is@^16.6.0, react-is@^16.7.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 react-is@^16.8.1, react-is@^16.8.4:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
   integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
 
+react-router-dom@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
+  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.0, react-router@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
+  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
 react-scripts@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.1.1.tgz#1796bc92447f3a2d3072c3b71ca99f88d099c48d"
@@ -7953,10 +8033,10 @@ react-scripts@3.1.1:
   optionalDependencies:
     fsevents "2.0.7"
 
-react@16.9.0:
-  version "16.9.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
-  integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==
+react@^16.9.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -8063,6 +8143,11 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
+regenerator-runtime@^0.13.4:
+  version "0.13.7"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+
 regenerator-transform@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
@@ -8227,6 +8312,11 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url-loader@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.0.tgz#54d8181d33cd1b66a59544d05cadf8e4aa7d37cc"
@@ -8405,10 +8495,10 @@ saxes@^3.1.9:
   dependencies:
     xmlchars "^2.1.1"
 
-scheduler@^0.15.0:
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e"
-  integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==
+scheduler@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -9136,6 +9226,16 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -9483,6 +9583,11 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"

From 626ece07c24aaaddbc1abb1f4d412001699ff99e Mon Sep 17 00:00:00 2001
From: Lemarais <goehd4551@gmail.com>
Date: Thu, 17 Sep 2020 20:15:38 +0900
Subject: [PATCH 2/2] fix a typo

---
 src/App.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/App.js b/src/App.js
index 466369c..dbf0333 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import TodoList from './containers/TodoList/TodoList';
 import NewTodo from './components/NewTodo/NewTodo'
+import TodoDetail from './components/TodoDetail/TodoDetail'
 import {BrowserRouter, Route, Redirect, Switch} from 'react-router-dom'
 import './App.css';
 
@@ -10,6 +11,7 @@ function App() {
             <div className="App">
                 <Switch>
                     <Route path='/todos' exact render={() => <TodoList title="My TODOs!"/>}/>
+                    <Route path='/todos/:id' exact component={TodoDetail}/>
                     <Route path='/new-todo' exact component={NewTodo}/>
                     <Redirect exact from='/' to='/todos'/>
                     <Route render={() => <h1>Not Found</h1>} />