From bd8ba01d3962deb52f33e78d4214ede26c80f1d4 Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Wed, 8 Apr 2020 19:20:50 +0900 Subject: [PATCH 01/15] =?UTF-8?q?todo-input=20=ED=94=84=EB=A1=A0=ED=8A=B8?= =?UTF-8?q?=20=EA=B8=B0=EB=B3=B8=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/todo-input.js | 85 ++++++++++++++++++++++++++++++++++++---- components/todo-item.js | 2 +- components/todo-list.js | 19 +++++++-- pages/index.js | 16 ++++++-- 4 files changed, 106 insertions(+), 16 deletions(-) diff --git a/components/todo-input.js b/components/todo-input.js index 1844e25..220e468 100644 --- a/components/todo-input.js +++ b/components/todo-input.js @@ -4,17 +4,86 @@ import styled from "styled-components"; export default function TodoInput() { return ( - 리액트-투두 -
- 시간을 입력하는 칸 -
- Todo를 입력하는 칸 + + + + + + TODO + + + 등록 ); } +const Submit = styled.button` + color: white; + background-color: rgb(97, 97, 97); + font-size: 1.5rem; + outline: none; + border-width: initial; + border-style: none; + border-color: initial; + border-image: initial; + padding: 0.5rem 1rem; + border-radius: 0.3rem; +`; +const Time = styled.p` + font-size: 1.5rem; + padding: 0px; + margin: 0px; +`; +const TimeInputArea = styled.input` + width: 80%; + border-width: 1px; + border-style: solid; + border-color: rgb(97, 97, 97); + border-image: initial; + padding: 0.5rem 0.8rem; +`; +const Todo = styled.p` + font-size: 1.5rem; + padding: 0px; + margin: 0px; +`; +const TaskTextArea = styled.textarea` + width: 80%; + height: 30vh; + resize: none; + border-width: 1px; + border-style: solid; + border-color: rgb(97, 97, 97); + border-image: initial; + padding: 0.5rem 0.8rem; +`; +const TimeInput = styled.div` + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 3rem; +`; + +const TaskInput = styled.div` + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 3rem; +`; const Wrapper = styled.div` - border: solid 1px; - font-size: 18px; - flex: 1; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + height: 37rem; + flex: 1 1 0%; + border-width: 1px; + border-style: solid; + border-color: black; + border-image: initial; + padding: 1rem 2rem; `; diff --git a/components/todo-item.js b/components/todo-item.js index ef2dbe8..3341577 100644 --- a/components/todo-item.js +++ b/components/todo-item.js @@ -7,5 +7,5 @@ export default function TodoItem() { const Wrapper = styled.div` font-size: 18px; - border: solid 1px; + flex: 1 1 0%; `; diff --git a/components/todo-list.js b/components/todo-list.js index 68fded1..3b09d49 100644 --- a/components/todo-list.js +++ b/components/todo-list.js @@ -7,13 +7,26 @@ export default function TodoList() { return ( Todo list가 들어가는 자리입니다! + ); } +const Indentation = styled.div` + flex: 0.3; +`; + const Wrapper = styled.div` - border: solid 1px; - font-size: 18px; - flex: 1; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + height: 37rem; + flex: 1 1 0%; + border-width: 1px; + border-style: solid; + border-color: black; + border-image: initial; + padding: 1rem 2rem; `; diff --git a/pages/index.js b/pages/index.js index f494909..a91b0b2 100644 --- a/pages/index.js +++ b/pages/index.js @@ -8,6 +8,7 @@ import styled from "styled-components"; export default function Home() { return ( + 리액트-투두 @@ -16,15 +17,22 @@ export default function Home() { ); } +const Title = styled.p` + font-size: 3rem; + font-weight: 600; + padding: 0px; + margin: 0px 0px 3rem; +`; const Wrapper = styled.div` - height: 100vh; + min-height: 100vh; + background-color: rgb(155, 197, 195); + padding: 4rem 5rem; + font-size: 0.1rem; + color: white; `; const Contents = styled.div` - border: solid 1px black; display: flex; flex-direction: row; justify-content: space-between; - padding: 10px 20px; - margin: 20px 10px; `; From 2a02c2ce56273819d4c4776c3f01cedf02d3a903 Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Wed, 8 Apr 2020 19:50:24 +0900 Subject: [PATCH 02/15] =?UTF-8?q?=ED=94=84=EB=A1=A0=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=EC=84=B1=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/todo-item.js | 50 +++++++++++++++++++++++++++++++++++++---- components/todo-list.js | 17 +------------- pages/index.js | 4 ++++ 3 files changed, 51 insertions(+), 20 deletions(-) diff --git a/components/todo-item.js b/components/todo-item.js index 3341577..c4d3f2f 100644 --- a/components/todo-item.js +++ b/components/todo-item.js @@ -2,10 +2,52 @@ import React from "react"; import styled from "styled-components"; export default function TodoItem() { - return Todo; + return ( + + 내용 + + 날짜 + 완료 + + + ); } - +const Complete = styled.button` + color: white; + background-color: rgb(97, 97, 97); + font-size: 1.5rem; + outline: none; + border-width: initial; + border-style: none; + border-color: initial; + border-image: initial; + padding: 0.5rem 1rem; + border-radius: 0.3rem; +`; +const CompleteSection = styled.p` + font-size: 1.5rem; + display: flex; + flex-direction: column; + padding: 0px; + margin: 0px; +`; +const TodoContents = styled.p` + font-size: 1.5rem; + display: flex; + flex-direction: column; + padding: 0px; + margin: 0px; +`; const Wrapper = styled.div` - font-size: 18px; - flex: 1 1 0%; + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 3rem; + padding: 1rem 2rem; + border-width: 1px; + border-style: solid; + border-color: black; + border-image: initial; `; diff --git a/components/todo-list.js b/components/todo-list.js index 3b09d49..e2dd599 100644 --- a/components/todo-list.js +++ b/components/todo-list.js @@ -6,27 +6,12 @@ import TodoItem from "./todo-item"; export default function TodoList() { return ( - Todo list가 들어가는 자리입니다! - ); } -const Indentation = styled.div` - flex: 0.3; -`; - const Wrapper = styled.div` - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - height: 37rem; + font-size: 18px; flex: 1 1 0%; - border-width: 1px; - border-style: solid; - border-color: black; - border-image: initial; - padding: 1rem 2rem; `; diff --git a/pages/index.js b/pages/index.js index a91b0b2..ee9c02a 100644 --- a/pages/index.js +++ b/pages/index.js @@ -11,12 +11,16 @@ export default function Home() { 리액트-투두 + ); } +const BlankSpace = styled.div` + flex: 0.3; +`; const Title = styled.p` font-size: 3rem; font-weight: 600; From 75737fae399fa42ddac9060754ee2834603013c1 Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Fri, 10 Apr 2020 11:56:58 +0900 Subject: [PATCH 03/15] =?UTF-8?q?hooks=EC=82=AC=EC=9A=A9=ED=95=B4=EC=84=9C?= =?UTF-8?q?=20value=EC=A0=80=EC=9E=A5=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/todo-input.js | 48 ++++++++++++++++++++++++++++++---------- components/todo-item.js | 6 ++--- components/todo-list.js | 6 ++--- 3 files changed, 42 insertions(+), 18 deletions(-) diff --git a/components/todo-input.js b/components/todo-input.js index 220e468..5e69f5e 100644 --- a/components/todo-input.js +++ b/components/todo-input.js @@ -1,21 +1,45 @@ -import React from "react"; +import React, { useState } from "react"; import styled from "styled-components"; +import TodoList from "./todo-list.js"; + export default function TodoInput() { + const [todo, setTodo] = useState(""); + const [date, setDate] = useState(""); + return ( - - - - + + 날짜 + { + setDate(e.target.value); + }} + /> + - TODO - + TODO + { + setTodo(e.target.value); + }} + /> - 등록 + { + e.preventDefault(); + }} + > + 등록 + ); } +//배열에 담아서 List에게 통으로 넘기기 const Submit = styled.button` color: white; background-color: rgb(97, 97, 97); @@ -28,12 +52,12 @@ const Submit = styled.button` padding: 0.5rem 1rem; border-radius: 0.3rem; `; -const Time = styled.p` +const DateLabel = styled.p` font-size: 1.5rem; padding: 0px; margin: 0px; `; -const TimeInputArea = styled.input` +const DateInputArea = styled.input` width: 80%; border-width: 1px; border-style: solid; @@ -41,7 +65,7 @@ const TimeInputArea = styled.input` border-image: initial; padding: 0.5rem 0.8rem; `; -const Todo = styled.p` +const TodoLabel = styled.p` font-size: 1.5rem; padding: 0px; margin: 0px; @@ -56,7 +80,7 @@ const TaskTextArea = styled.textarea` border-image: initial; padding: 0.5rem 0.8rem; `; -const TimeInput = styled.div` +const DateInput = styled.div` width: 100%; display: flex; flex-direction: row; diff --git a/components/todo-item.js b/components/todo-item.js index c4d3f2f..c9a2eb0 100644 --- a/components/todo-item.js +++ b/components/todo-item.js @@ -1,12 +1,12 @@ import React from "react"; import styled from "styled-components"; -export default function TodoItem() { +export default function TodoItem(props) { return ( - 내용 + {props.task} - 날짜 + {props.date} 완료 diff --git a/components/todo-list.js b/components/todo-list.js index e2dd599..9e59257 100644 --- a/components/todo-list.js +++ b/components/todo-list.js @@ -3,14 +3,14 @@ import styled from "styled-components"; import TodoItem from "./todo-item"; -export default function TodoList() { +export default function TodoList(props) { return ( - + ); } - +//map으로 잘라서 Item으로 넘기기 const Wrapper = styled.div` font-size: 18px; flex: 1 1 0%; From ae7c34317657c4da44996932726611c6ec1adf6d Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Fri, 10 Apr 2020 12:48:54 +0900 Subject: [PATCH 04/15] =?UTF-8?q?=EB=93=B1=EB=A1=9D=20=EC=8B=9C=20todo=20?= =?UTF-8?q?=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/todo-input.js | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/components/todo-input.js b/components/todo-input.js index 5e69f5e..6bf66dc 100644 --- a/components/todo-input.js +++ b/components/todo-input.js @@ -4,9 +4,23 @@ import styled from "styled-components"; import TodoList from "./todo-list.js"; export default function TodoInput() { - const [todo, setTodo] = useState(""); + const [task, setTask] = useState(""); const [date, setDate] = useState(""); + const [todos, setInputTodo] = useState([]); + + const addTodo = () => { + setInputTodo([ + ...todos, + { + id: todos.length, + task: { task }, + date: { date }, + }, + ]); + console.log(todos); + }; + return ( @@ -23,19 +37,13 @@ export default function TodoInput() { TODO { - setTodo(e.target.value); + setTask(e.target.value); }} /> - { - e.preventDefault(); - }} - > - 등록 - + 등록 ); } From 167d79d86f0ab227b4cb9dc3dd6de561d4c80ea7 Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Fri, 10 Apr 2020 16:34:04 +0900 Subject: [PATCH 05/15] =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0,=20404=EC=97=90=EB=9F=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/todo-input.js | 38 ++++++++++------------------------- components/todo-item.js | 6 +++--- components/todo-list.js | 8 +++++--- pages/index.js | 43 +++++++++++++++++++++++++++++++++++++--- 4 files changed, 59 insertions(+), 36 deletions(-) diff --git a/components/todo-input.js b/components/todo-input.js index 6bf66dc..9644118 100644 --- a/components/todo-input.js +++ b/components/todo-input.js @@ -1,36 +1,22 @@ import React, { useState } from "react"; import styled from "styled-components"; -import TodoList from "./todo-list.js"; - -export default function TodoInput() { - const [task, setTask] = useState(""); - const [date, setDate] = useState(""); - - const [todos, setInputTodo] = useState([]); - - const addTodo = () => { - setInputTodo([ - ...todos, - { - id: todos.length, - task: { task }, - date: { date }, - }, - ]); - console.log(todos); - }; - +export default function TodoInput({ + date, + task, + addTodo, + onChangeDate, + onChangeTask, +}) { return ( 날짜 { - setDate(e.target.value); - }} + onChange={onChangeDate} /> @@ -38,16 +24,14 @@ export default function TodoInput() { { - setTask(e.target.value); - }} + onChange={onChangeTask} /> 등록 ); } -//배열에 담아서 List에게 통으로 넘기기 + const Submit = styled.button` color: white; background-color: rgb(97, 97, 97); diff --git a/components/todo-item.js b/components/todo-item.js index c9a2eb0..945d10d 100644 --- a/components/todo-item.js +++ b/components/todo-item.js @@ -1,12 +1,12 @@ import React from "react"; import styled from "styled-components"; -export default function TodoItem(props) { +export default function TodoItem({ task, date }) { return ( - {props.task} + {task} - {props.date} + {date} 완료 diff --git a/components/todo-list.js b/components/todo-list.js index 9e59257..4f2613a 100644 --- a/components/todo-list.js +++ b/components/todo-list.js @@ -3,14 +3,16 @@ import styled from "styled-components"; import TodoItem from "./todo-item"; -export default function TodoList(props) { +export default function TodoList({ todos }) { return ( - + {todos.map((todo) => ( + + ))} ); } -//map으로 잘라서 Item으로 넘기기 + const Wrapper = styled.div` font-size: 18px; flex: 1 1 0%; diff --git a/pages/index.js b/pages/index.js index ee9c02a..02e0d3a 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import TodoInput from "../components/todo-input"; import TodoList from "../components/todo-list"; @@ -6,13 +6,50 @@ import TodoList from "../components/todo-list"; import styled from "styled-components"; export default function Home() { + const [date, setDate] = useState(); + const [task, setTask] = useState(); + const [todos, setTodoList] = useState([]); + let taskFlag, + dateFlag = 0; + + const onChangeTask = (e) => { + setTask(e.target.value); + taskFlag++; + console.log(taskFlag); + }; + const onChangeDate = (e) => { + setDate(e.target.value); + dateFlag++; + console.log(dateFlag); + }; + + const addTodo = () => { + setTodoList([ + ...todos, + { + id: todos.length, + task: { task }, + date: { date }, + }, + ]); + alert("입력 완료!"); + console.log(todos); + }; + return ( 리액트-투두 - + - + ); From f347be2e7376aea25cd3ffd0c0c14555026859af Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Fri, 10 Apr 2020 17:21:01 +0900 Subject: [PATCH 06/15] =?UTF-8?q?=EB=B0=B0=EC=97=B4=20=EA=B5=AC=EC=84=B1?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/pages/index.js b/pages/index.js index 02e0d3a..e3473f0 100644 --- a/pages/index.js +++ b/pages/index.js @@ -9,8 +9,9 @@ export default function Home() { const [date, setDate] = useState(); const [task, setTask] = useState(); const [todos, setTodoList] = useState([]); - let taskFlag, - dateFlag = 0; + + let taskFlag = 0; + let dateFlag = 0; const onChangeTask = (e) => { setTask(e.target.value); @@ -23,17 +24,19 @@ export default function Home() { console.log(dateFlag); }; - const addTodo = () => { + const addTodo = (e) => { setTodoList([ ...todos, { id: todos.length, - task: { task }, - date: { date }, + date, + task, }, ]); alert("입력 완료!"); console.log(todos); + setDate(""); + setTask(""); }; return ( From 58b9f5fad99a63a42a13d5d8d8d598ea41e2fce7 Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Fri, 10 Apr 2020 17:34:41 +0900 Subject: [PATCH 07/15] =?UTF-8?q?alert=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index.js | 41 ++++++++++++++++++++++++++--------------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/pages/index.js b/pages/index.js index e3473f0..3a5bb04 100644 --- a/pages/index.js +++ b/pages/index.js @@ -5,14 +5,19 @@ import TodoList from "../components/todo-list"; import styled from "styled-components"; +let taskFlag = 0; +let dateFlag = 0; export default function Home() { const [date, setDate] = useState(); const [task, setTask] = useState(); const [todos, setTodoList] = useState([]); - let taskFlag = 0; - let dateFlag = 0; - + const stateReset = (e) => { + dateFlag = 0; + taskFlag = 0; + setDate(""); + setTask(""); + }; const onChangeTask = (e) => { setTask(e.target.value); taskFlag++; @@ -25,18 +30,24 @@ export default function Home() { }; const addTodo = (e) => { - setTodoList([ - ...todos, - { - id: todos.length, - date, - task, - }, - ]); - alert("입력 완료!"); - console.log(todos); - setDate(""); - setTask(""); + if (dateFlag === 0 || taskFlag === 0) { + console.log(dateFlag + taskFlag); + alert("모든 항목을 입력해주세요!"); + } else { + setTodoList([ + ...todos, + { + id: todos.length, + date, + task, + }, + ]); + + stateReset(e); + alert("입력 완료!"); + + console.log(todos); + } }; return ( From d974eba3d24f56c66865c37a8ff9279612dda7f2 Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Fri, 10 Apr 2020 17:38:47 +0900 Subject: [PATCH 08/15] =?UTF-8?q?alert=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index.js | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/pages/index.js b/pages/index.js index 3a5bb04..f8fd62d 100644 --- a/pages/index.js +++ b/pages/index.js @@ -34,19 +34,23 @@ export default function Home() { console.log(dateFlag + taskFlag); alert("모든 항목을 입력해주세요!"); } else { - setTodoList([ - ...todos, - { - id: todos.length, - date, - task, - }, - ]); + if (date.length === 8 && date > 20200101) { + setTodoList([ + ...todos, + { + id: todos.length, + date, + task, + }, + ]); - stateReset(e); - alert("입력 완료!"); + stateReset(e); + alert("입력 완료!"); - console.log(todos); + console.log(todos); + } else { + alert("날짜를 올바른 형식으로 입력해주세요!"); + } } }; From 224f5fa7405589dba8adbfe8c21e293e41bb6c40 Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Fri, 10 Apr 2020 19:04:15 +0900 Subject: [PATCH 09/15] =?UTF-8?q?complete=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/todo-item.js | 6 +++--- components/todo-list.js | 4 ++-- pages/index.js | 11 +++++++---- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/components/todo-item.js b/components/todo-item.js index 945d10d..e26e2a7 100644 --- a/components/todo-item.js +++ b/components/todo-item.js @@ -1,19 +1,19 @@ import React from "react"; import styled from "styled-components"; -export default function TodoItem({ task, date }) { +export default function TodoItem({ id, task, date, onClickComplete }) { return ( {task} {date} - 완료 + 완료 ); } const Complete = styled.button` - color: white; + )color: white; background-color: rgb(97, 97, 97); font-size: 1.5rem; outline: none; diff --git a/components/todo-list.js b/components/todo-list.js index 4f2613a..0571e5b 100644 --- a/components/todo-list.js +++ b/components/todo-list.js @@ -3,11 +3,11 @@ import styled from "styled-components"; import TodoItem from "./todo-item"; -export default function TodoList({ todos }) { +export default function TodoList({ todos, onClickComplete }) { return ( {todos.map((todo) => ( - + ))} ); diff --git a/pages/index.js b/pages/index.js index f8fd62d..71e6c8f 100644 --- a/pages/index.js +++ b/pages/index.js @@ -21,17 +21,14 @@ export default function Home() { const onChangeTask = (e) => { setTask(e.target.value); taskFlag++; - console.log(taskFlag); }; const onChangeDate = (e) => { setDate(e.target.value); dateFlag++; - console.log(dateFlag); }; const addTodo = (e) => { if (dateFlag === 0 || taskFlag === 0) { - console.log(dateFlag + taskFlag); alert("모든 항목을 입력해주세요!"); } else { if (date.length === 8 && date > 20200101) { @@ -53,6 +50,12 @@ export default function Home() { } } }; + const onClickComplete = (id) => { + const newTodos = [...todos]; + newTodos.splice(id, 1); + setTodoList(newTodos); + console.log("완료클릭"); + }; return ( @@ -67,7 +70,7 @@ export default function Home() { addTodo={addTodo} /> - + ); From b490c4569307795f7bddd4f0bf5b68170b9ce4c3 Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Fri, 10 Apr 2020 19:36:11 +0900 Subject: [PATCH 10/15] =?UTF-8?q?=EC=99=84=EB=A3=8C=20=EC=98=A4=EB=A5=98?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/todo-item.js | 4 ++-- pages/index.js | 4 ---- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/components/todo-item.js b/components/todo-item.js index e26e2a7..e578e01 100644 --- a/components/todo-item.js +++ b/components/todo-item.js @@ -7,13 +7,13 @@ export default function TodoItem({ id, task, date, onClickComplete }) { {task} {date} - 완료 + onClickComplete(id)}>완료 ); } const Complete = styled.button` - )color: white; + color: white; background-color: rgb(97, 97, 97); font-size: 1.5rem; outline: none; diff --git a/pages/index.js b/pages/index.js index 71e6c8f..f143cd8 100644 --- a/pages/index.js +++ b/pages/index.js @@ -40,11 +40,8 @@ export default function Home() { task, }, ]); - stateReset(e); alert("입력 완료!"); - - console.log(todos); } else { alert("날짜를 올바른 형식으로 입력해주세요!"); } @@ -54,7 +51,6 @@ export default function Home() { const newTodos = [...todos]; newTodos.splice(id, 1); setTodoList(newTodos); - console.log("완료클릭"); }; return ( From 43902fae58f2fb7b864b5b27b59f2c2d0baa02c9 Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Fri, 10 Apr 2020 19:51:43 +0900 Subject: [PATCH 11/15] =?UTF-8?q?split=20=EC=97=90=EB=9F=AC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/todo-input.js | 2 +- pages/index.js | 17 +++++++++-------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/components/todo-input.js b/components/todo-input.js index 9644118..2fd7145 100644 --- a/components/todo-input.js +++ b/components/todo-input.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import styled from "styled-components"; export default function TodoInput({ diff --git a/pages/index.js b/pages/index.js index f143cd8..c8ffffb 100644 --- a/pages/index.js +++ b/pages/index.js @@ -12,12 +12,6 @@ export default function Home() { const [task, setTask] = useState(); const [todos, setTodoList] = useState([]); - const stateReset = (e) => { - dateFlag = 0; - taskFlag = 0; - setDate(""); - setTask(""); - }; const onChangeTask = (e) => { setTask(e.target.value); taskFlag++; @@ -27,6 +21,12 @@ export default function Home() { dateFlag++; }; + const stateReset = (e) => { + dateFlag = 0; + taskFlag = 0; + setDate(""); + setTask(""); + }; const addTodo = (e) => { if (dateFlag === 0 || taskFlag === 0) { alert("모든 항목을 입력해주세요!"); @@ -47,10 +47,11 @@ export default function Home() { } } }; + const onClickComplete = (id) => { const newTodos = [...todos]; - newTodos.splice(id, 1); - setTodoList(newTodos); + setTodoList(newTodos.filter((todo) => todo.id !== id)); + console.log(newTodos); }; return ( From 07cfe0bc5e8a428da9d4dde49805f62361a7f269 Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Fri, 10 Apr 2020 21:05:32 +0900 Subject: [PATCH 12/15] =?UTF-8?q?readme=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 ++ .now/project.json | 2 +- README.md | 38 +++++++++++++++----------------------- 3 files changed, 18 insertions(+), 24 deletions(-) diff --git a/.gitignore b/.gitignore index 20fccdd..fd07293 100644 --- a/.gitignore +++ b/.gitignore @@ -28,3 +28,5 @@ yarn-error.log* .env.development.local .env.test.local .env.production.local + +.now \ No newline at end of file diff --git a/.now/project.json b/.now/project.json index c52546c..2ec18cf 100644 --- a/.now/project.json +++ b/.now/project.json @@ -1 +1 @@ -{"orgId":"vC0ivr1sq0T0zKJytpWAmdFN","projectId":"QmU68M4LipQZeiFKBEhK7WmUX9o8wjXK3RGeuiZ8PSWDDK"} \ No newline at end of file +{"orgId":"Zo3Q3h9F77k7oPOVf5QNEp0q","projectId":"QmVYdcpYkTHLrGcnjr7PaRHw7HPc4ufUWHRCmRJ8W5de6H"} \ No newline at end of file diff --git a/README.md b/README.md index f53f3d3..4af18ad 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,22 @@ # react-todo-11th -## 실행 방법 +## 구성 파악 -``` -npm install -npm run dev -``` +1. 첫 화면에 날짜와 업무를 입력하는 부분이 있다 +2. 날짜와 업무를 입력하면 오른쪽에 투두 리스트가 쌓인다 +3. 투두 리스트에는 완료 버튼이 있고, 완료 버튼을 누르면 해당 업무가 사라진다. +4. 투두 입력과 제출시 alert으로 정해진 값 입력을 안내한다. -- npm install : 필요한 모든 패키지를 설치합니다. 처음 1번만 실행하면 됩니다. -- npm run dev : react 어플리케이션을 브라우저에서 실행합니다. +## 구현 방법 -## 배포 방법 +1. 프론트 구성(배경색, 글자크기와 색 및 위치 등) 완성 +2. index에 투두 배열 생성 후 값을 받아오고, 뿌린다 +3. index에서 TodoInput부분과 TodoList부분을 구성해놓는다 +4. TodoInput에서 받아온 배열을 TodoList로 보낸다 +5. TodoList에서 배열을 map으로 파싱하여 TodoItem으로 보내 내용을 띄운다 +6. TodoItem에서 완료 클릭 시 index에서 해당 배열을 id값으로 삭제한다 -- now에 회원가입하고 now를 설치합니다. +## 어려웠던 점 -1. https://zeit.co 에서 회원가입합니다. -2. 터미널에서 npm i -g now를 입력해 now를 글로벌로 설치합니다. -3. 명령 프롬프트에서 프로젝트 폴더에 들어간 후 now를 입력합니다. -4. ID/PW를 입력합니다. -5. zeit 가입시 입력한 이메일에서 인증 링크를 클릭합니다. <인증완료> -6. 다시 프로젝트 폴더에서 now를 입력하면 자동으로 생성된 url에 배포됩니다! - -## 미션 설명 - -[미션 설명](./docs/mission-description/README.md) - -## 미션 제출 방법 - -[미션 제출 방법](./docs/how-to-submit/README.md) +1. useState을 이용해 배열을 할당해본 경험이 없어서 원하는대로 배열 내부를 구성해서 사용하기까지 어려움이 있었습니다. +2. class형이 아닌 함수형으로 구현한 react에서 TodoItem에서 id값을 끌어오는 것이 조금 힘들었습니다. From 5a6f980b3e88095dc50503394456ab728b638a13 Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Sun, 12 Apr 2020 10:03:21 +0900 Subject: [PATCH 13/15] =?UTF-8?q?style=20initial,=20none=20=EB=B6=88?= =?UTF-8?q?=ED=95=84=EC=9A=94=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/todo-input.js | 7 ------- components/todo-item.js | 5 ----- 2 files changed, 12 deletions(-) diff --git a/components/todo-input.js b/components/todo-input.js index 2fd7145..316b8a8 100644 --- a/components/todo-input.js +++ b/components/todo-input.js @@ -37,10 +37,6 @@ const Submit = styled.button` background-color: rgb(97, 97, 97); font-size: 1.5rem; outline: none; - border-width: initial; - border-style: none; - border-color: initial; - border-image: initial; padding: 0.5rem 1rem; border-radius: 0.3rem; `; @@ -54,7 +50,6 @@ const DateInputArea = styled.input` border-width: 1px; border-style: solid; border-color: rgb(97, 97, 97); - border-image: initial; padding: 0.5rem 0.8rem; `; const TodoLabel = styled.p` @@ -69,7 +64,6 @@ const TaskTextArea = styled.textarea` border-width: 1px; border-style: solid; border-color: rgb(97, 97, 97); - border-image: initial; padding: 0.5rem 0.8rem; `; const DateInput = styled.div` @@ -100,6 +94,5 @@ const Wrapper = styled.div` border-width: 1px; border-style: solid; border-color: black; - border-image: initial; padding: 1rem 2rem; `; diff --git a/components/todo-item.js b/components/todo-item.js index e578e01..54aed50 100644 --- a/components/todo-item.js +++ b/components/todo-item.js @@ -17,10 +17,6 @@ const Complete = styled.button` background-color: rgb(97, 97, 97); font-size: 1.5rem; outline: none; - border-width: initial; - border-style: none; - border-color: initial; - border-image: initial; padding: 0.5rem 1rem; border-radius: 0.3rem; `; @@ -49,5 +45,4 @@ const Wrapper = styled.div` border-width: 1px; border-style: solid; border-color: black; - border-image: initial; `; From 1bb449950d4bb748aecf6ba35b9651d731906ca4 Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Sun, 12 Apr 2020 10:09:53 +0900 Subject: [PATCH 14/15] =?UTF-8?q?style=20border=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=ED=95=A9=EC=B9=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/todo-input.js | 13 ++++--------- components/todo-item.js | 4 +--- 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/components/todo-input.js b/components/todo-input.js index 316b8a8..387f817 100644 --- a/components/todo-input.js +++ b/components/todo-input.js @@ -37,6 +37,7 @@ const Submit = styled.button` background-color: rgb(97, 97, 97); font-size: 1.5rem; outline: none; + border-style: none; padding: 0.5rem 1rem; border-radius: 0.3rem; `; @@ -47,9 +48,7 @@ const DateLabel = styled.p` `; const DateInputArea = styled.input` width: 80%; - border-width: 1px; - border-style: solid; - border-color: rgb(97, 97, 97); + border: 1px solid rgb(97, 97, 97); padding: 0.5rem 0.8rem; `; const TodoLabel = styled.p` @@ -61,9 +60,7 @@ const TaskTextArea = styled.textarea` width: 80%; height: 30vh; resize: none; - border-width: 1px; - border-style: solid; - border-color: rgb(97, 97, 97); + border: 1px solid rgb(97, 97, 97); padding: 0.5rem 0.8rem; `; const DateInput = styled.div` @@ -91,8 +88,6 @@ const Wrapper = styled.div` align-items: center; height: 37rem; flex: 1 1 0%; - border-width: 1px; - border-style: solid; - border-color: black; + border: 1px solid black; padding: 1rem 2rem; `; diff --git a/components/todo-item.js b/components/todo-item.js index 54aed50..0ca1f64 100644 --- a/components/todo-item.js +++ b/components/todo-item.js @@ -42,7 +42,5 @@ const Wrapper = styled.div` align-items: flex-start; margin-bottom: 3rem; padding: 1rem 2rem; - border-width: 1px; - border-style: solid; - border-color: black; + border: 1px solid rgb(97, 97, 97); `; From 4240c7dfba7d8e5d52c8a10618bfc849ee211662 Mon Sep 17 00:00:00 2001 From: seungwon2 Date: Sun, 12 Apr 2020 10:23:43 +0900 Subject: [PATCH 15/15] =?UTF-8?q?validate=20check=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC,=20Flag=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index.js | 47 ++++++++++++++++++++++++----------------------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/pages/index.js b/pages/index.js index c8ffffb..978da00 100644 --- a/pages/index.js +++ b/pages/index.js @@ -5,8 +5,6 @@ import TodoList from "../components/todo-list"; import styled from "styled-components"; -let taskFlag = 0; -let dateFlag = 0; export default function Home() { const [date, setDate] = useState(); const [task, setTask] = useState(); @@ -14,38 +12,41 @@ export default function Home() { const onChangeTask = (e) => { setTask(e.target.value); - taskFlag++; }; const onChangeDate = (e) => { setDate(e.target.value); - dateFlag++; }; const stateReset = (e) => { - dateFlag = 0; - taskFlag = 0; setDate(""); setTask(""); }; - const addTodo = (e) => { - if (dateFlag === 0 || taskFlag === 0) { + + const validateTodo = () => { + let isValid = false; + let isDateValid = date.length === 8 && date > 20200101; + let isTaskValid = task.length > 0; + if (!isDateValid) { + alert("날짜를 올바른 형식으로 입력해주세요!"); + } else if (!isTaskValid) { alert("모든 항목을 입력해주세요!"); - } else { - if (date.length === 8 && date > 20200101) { - setTodoList([ - ...todos, - { - id: todos.length, - date, - task, - }, - ]); - stateReset(e); - alert("입력 완료!"); - } else { - alert("날짜를 올바른 형식으로 입력해주세요!"); - } } + isValid = isDateValid && isTaskValid; + return isValid; + }; + + const addTodo = (e) => { + if (!validateTodo()) return; + setTodoList([ + ...todos, + { + id: todos.length, + date, + task, + }, + ]); + stateReset(e); + alert("입력 완료!"); }; const onClickComplete = (id) => {