SWPP Practice 3

src/App.js

@@ -1,11 +1,21 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import TodoList from './containers/TodoList/TodoList';
+import NewTodo from './containers/NewTodo/NewTodo';
+import {BrowserRouter, Route, Redirect, Switch} from 'react-router-dom';
 
 function App() {
   return (
-    <div className="App">
-    </div>
+    <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>
   );
 }
 

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,27 @@
+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/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;
+                                                  }

src/containers/NewTodo/NewTodo.js

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

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

src/containers/TodoList/TodoList.js

@@ -0,0 +1,47 @@
+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 => {
+        console.log(123);
+        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;