done

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 (
-    <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;

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;
+}

src/components/Todo/Todo.js

@@ -0,0 +1,13 @@
+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;

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%;
+}

src/components/TodoDetail/TodoDetail.js

@@ -0,0 +1,19 @@
+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;

src/containers/TodoList/TodoList.css

@@ -0,0 +1,17 @@
+.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;
+}

src/containers/TodoList/TodoList.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { NavLink } from 'react-router-dom';
+import Todo from '../../components/Todo/Todo';
+import TodoDetail from '../../components/TodoDetail/TodoDetail';
+import './TodoList.css';
+
+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 = <TodoDetail 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;

yarn.lock

@@ -7872,15 +7872,15 @@ react-dev-utils@^9.0.3:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
-[email protected]:
-  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"
@@ -7953,10 +7953,10 @@ [email protected]:
   optionalDependencies:
     fsevents "2.0.7"
 
-[email protected]:
-  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"
@@ -8405,10 +8405,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"