diff --git a/src/App.js b/src/App.js
index e358583..1ae0b54 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'; // can omit .js
+import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
function App() {
return (
-
-
+
+
+
+ } />
+
+
+
+ Not Found
} />
+
+
+
);
}
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..22026f3
--- /dev/null
+++ b/src/components/Todo/Todo.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import "./Todo.css";
+
+const Todo = props => {
+ return (
+
+
+ {props.title}
+
+ {props.done &&
✓
}
+
+ );
+}
+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..2722d72
--- /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..86ff6c9
--- /dev/null
+++ b/src/components/TodoDetail/TodoDetail.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import './TodoDetail.css';
+
+const TodoDetail = (props) => {
+ return (
+
+
+ Name:
+
+
+ {props.title}
+
+
+
+
+ Content:
+
+
+ {props.content}
+
+
+
+ );
+};
+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..ba6acd5
--- /dev/null
+++ b/src/containers/TodoList/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/containers/TodoList/NewTodo/NewTodo.js b/src/containers/TodoList/NewTodo/NewTodo.js
new file mode 100644
index 0000000..932c4b5
--- /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: false,
+ }
+ render() {
+ if (this.state.submitted) {
+ return
+ }
+ return (
+
+
Add a Todo
+
+ this.setState({ title: event.target.value })} />
+
+
+ );
+ }
+ 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');
+ }
+};
+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..098a4cc
--- /dev/null
+++ b/src/containers/TodoList/TodoList.js
@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import Todo from '../../components/Todo/Todo';
+import "./TodoList.css";
+import TodoDetail from '../../components/TodoDetail/TodoDetail';
+import { NavLink } from 'react-router-dom';
+
+class TodoList extends Component {
+ // This acts as if this.state = {...} was inside constructor()
+ 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,
+ }
+ render() {
+ const todos = this.state.todos.map((td) => {
+ return ( this.clickTodoHandler(td)}/> );
+ });
+ return (
+
+
{this.props.title}
+
{todos}
+ {TodoDetail}
+
New Todo
+
+ );
+ let TodoDetail = null;
+ if (this.state.selectedTodo) {
+ TodoDetail =
+ }
+ }
+ clickTodoHandler = td => {
+ if (this.state.selectedTodo === td) {
+ this.setState({selectedTodo: null});
+ } else {
+ this.setState({selectedTodo: td});
+ }
+ }
+}
+export default TodoList;
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index b50eb28..fca6828 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7872,15 +7872,15 @@ 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"
@@ -7953,10 +7953,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"
@@ -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"