From 4f1eb9782a0692f121ae5701c97468ef02e1c350 Mon Sep 17 00:00:00 2001 From: ahyoon99 Date: Mon, 27 Jul 2020 23:10:38 +0900 Subject: [PATCH 1/5] =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EB=B2=84=ED=8A=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/.gitignore | 5 +++++ .idea/inspectionProfiles/Project_Default.xml | 6 ++++++ .idea/misc.xml | 6 ++++++ .idea/modules.xml | 8 ++++++++ .idea/todo-frontend.iml | 12 ++++++++++++ .idea/vcs.xml | 6 ++++++ 6 files changed, 43 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/misc.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/todo-frontend.iml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..03d9549 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..28a804d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..7f9b010 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/todo-frontend.iml b/.idea/todo-frontend.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/todo-frontend.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file From 6daac4432e706047e6f9c1aa9462e54bc2d1a217 Mon Sep 17 00:00:00 2001 From: ahyoon99 Date: Mon, 27 Jul 2020 23:35:27 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=EC=A7=84=EC=A7=9C=20=EC=82=AD=EC=A0=9C?= =?UTF-8?q?=EB=B2=84=ED=8A=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/src/component/board/card/index.jsx | 2 +- static/src/component/board/task/index.jsx | 22 ++++++-- static/src/page/Board.jsx | 63 ++++++++++++++++++----- static/src/page/Enrollment.jsx | 9 ++++ static/src/service/getCards.js | 5 +- 5 files changed, 81 insertions(+), 20 deletions(-) diff --git a/static/src/component/board/card/index.jsx b/static/src/component/board/card/index.jsx index 17931f6..1bccb2c 100644 --- a/static/src/component/board/card/index.jsx +++ b/static/src/component/board/card/index.jsx @@ -9,7 +9,7 @@ function Card(props) {
{subject}
{ tasks.map(task => { - return + return }) } diff --git a/static/src/component/board/task/index.jsx b/static/src/component/board/task/index.jsx index bc3abbf..8a551e1 100644 --- a/static/src/component/board/task/index.jsx +++ b/static/src/component/board/task/index.jsx @@ -5,22 +5,34 @@ import {isDone, isTodo, toToggledValue} from "../../../utility/status"; import Button from "../../atom/Button"; function Task(props) { - const {title, subject, id, move} = props; + const {title, subject, id, move, created} = props; const onClick = (event) => { event.stopPropagation(); const toggledValue = toToggledValue(subject); - move(id, toggledValue); + move(id, toggledValue); //board에서 정의해놓은 함수가 실행된다. }; + function handle(event) { + // x 클릭하면 task 삭제 하기 + const remove = props.remove; //props로 전달받은 remove를 받는다. + remove(id); + } + return (
{ - isTodo(subject) &&
); } diff --git a/static/src/page/Board.jsx b/static/src/page/Board.jsx index d6967d3..9d7f800 100644 --- a/static/src/page/Board.jsx +++ b/static/src/page/Board.jsx @@ -1,14 +1,14 @@ import React, {useEffect, useState} from 'react'; import Card from '../component/board/card'; -import getCards from "../service/getCards"; +import getCards from '../service/getCards'; import '../css/Board.css'; -import moveTo from "../service/moveTo"; -import {Link} from "react-router-dom"; +import moveTo from '../service/moveTo'; +import {Link} from 'react-router-dom'; import {toName, toToggleName} from '../utility/status'; function Board() { const [cards, updateCards] = useState({}); - useEffect(() => { + useEffect(() => { // 실행했을 때 딱 한번만 실행 (async () => { const cards = await getCards(); updateCards(cards); @@ -17,9 +17,9 @@ function Board() { const move = async (id, targetStatus) => { const result = await moveTo(id, targetStatus); - if (!!result) { + if (result) { const originStatus = toToggleName(targetStatus); - const index = cards[originStatus].findIndex(task => task.id === id); + const index = cards[originStatus].findIndex((task) => task.id === id); cards[originStatus].splice(index, 1); const changedStatus = toName(result.status); @@ -27,22 +27,59 @@ function Board() { updateCards({ todo: cards.todo, - done: cards.done + done: cards.done, }); } }; + function remove(id) { + console.log(id); + const todo = cards.todo; + const done = cards.done; + console.log(todo); + console.log(done); + + let index = todo.findIndex((value) => { //index 알아내기 + return value.id === id; + }) + + if (index !== -1) { //todod에서 찾았을 경우 + todo.splice(index,1); //(삭제 시작할 index, 삭제할 개수) + }else{ //todo에서 못찾았을 경우 done에서 찾는다. + index = done.findIndex((value) => { //index 알아내기 + return value.id === id; + }); + done.splice(index,1); + } + + console.log(todo); + console.log(done); + + //변경된 상태를 react에게 알려주어야한다. 아래 코드 안쓰면 x눌러도 화면에서 안사라짐. + updateCards({ + "todo" : todo, + "done":done + //todo, done + //이렇게 한줄로만 써도 된다. 똑같은것이다. + }); + + //updateCards 호출 + // react 해당 데이터가 변경이 됐구나! + // react 해당 데이터를 사용하는 모든 컴포넌트를 부라우저에서 다시 그려준다. + } + return ( -
-
+
+
{ - Object.entries(cards).map(([subject, tasks]) => { - return ; - }) + Object.entries(cards).map(([subject, tasks]) => // Object.entries(cards) : ㅏkey에 done, value에 해당값들. 즉 [todo,[{},{}]]로 만들어준다. + , // map(function) : function를 적용시켜서 변환 + //remove={remove} : 자식한테 props로 전달해준다. + ) }
- ADD + ADD
); } diff --git a/static/src/page/Enrollment.jsx b/static/src/page/Enrollment.jsx index e30a456..d38d3b9 100644 --- a/static/src/page/Enrollment.jsx +++ b/static/src/page/Enrollment.jsx @@ -6,12 +6,19 @@ import Input from "../component/atom/Input"; function Enrollment({history}) { const [title, setTitle] = useState(''); + // 다시 + const [assignee, setAssignee] = useState(''); const onChange = (event) => { event.stopPropagation(); setTitle(event.target.value); }; + //handle + function handle(event){ + setAssignee(event.target.value); + } + const onPreviousClick = (event) => { event.stopPropagation(); history.goBack(); @@ -48,6 +55,8 @@ function Enrollment({history}) {
+ // 다시 +
); } diff --git a/static/src/css/Task.css b/static/src/css/Task.css index cc680b0..933746e 100644 --- a/static/src/css/Task.css +++ b/static/src/css/Task.css @@ -7,6 +7,10 @@ margin-bottom: 1rem; padding: 1.5rem; } +.task-remove-btn{ + float:right; + margin : 0px 10px +} .task-left-btn { float: right; diff --git a/static/src/page/Board.jsx b/static/src/page/Board.jsx index 9d7f800..def7a31 100644 --- a/static/src/page/Board.jsx +++ b/static/src/page/Board.jsx @@ -5,6 +5,7 @@ import '../css/Board.css'; import moveTo from '../service/moveTo'; import {Link} from 'react-router-dom'; import {toName, toToggleName} from '../utility/status'; +import removeCard from "../service/removeCard"; function Board() { const [cards, updateCards] = useState({}); @@ -33,39 +34,46 @@ function Board() { }; function remove(id) { - console.log(id); - const todo = cards.todo; - const done = cards.done; - console.log(todo); - console.log(done); + // const isSuccesses = await removeCard(id); + const isSuccesses = removeCard(id); + if (isSuccesses) { + //history.goBack(); + console.log(id); + const todo = cards.todo; + const done = cards.done; + console.log(todo); + console.log(done); - let index = todo.findIndex((value) => { //index 알아내기 - return value.id === id; - }) - - if (index !== -1) { //todod에서 찾았을 경우 - todo.splice(index,1); //(삭제 시작할 index, 삭제할 개수) - }else{ //todo에서 못찾았을 경우 done에서 찾는다. - index = done.findIndex((value) => { //index 알아내기 + let index = todo.findIndex((value) => { //index 알아내기 return value.id === id; - }); - done.splice(index,1); - } + }) - console.log(todo); - console.log(done); + if (index !== -1) { //todod에서 찾았을 경우 + todo.splice(index,1); //(삭제 시작할 index, 삭제할 개수) + }else{ //todo에서 못찾았을 경우 done에서 찾는다. + index = done.findIndex((value) => { //index 알아내기 + return value.id === id; + }); + done.splice(index,1); + } - //변경된 상태를 react에게 알려주어야한다. 아래 코드 안쓰면 x눌러도 화면에서 안사라짐. - updateCards({ - "todo" : todo, - "done":done - //todo, done - //이렇게 한줄로만 써도 된다. 똑같은것이다. - }); + console.log(todo); + console.log(done); - //updateCards 호출 - // react 해당 데이터가 변경이 됐구나! - // react 해당 데이터를 사용하는 모든 컴포넌트를 부라우저에서 다시 그려준다. + //변경된 상태를 react에게 알려주어야한다. 아래 코드 안쓰면 x눌러도 화면에서 안사라짐. + updateCards({ + "todo" : todo, + "done":done + //todo, done + //이렇게 한줄로만 써도 된다. 똑같은것이다. + }); + + //updateCards 호출 + // react 해당 데이터가 변경이 됐구나! + // react 해당 데이터를 사용하는 모든 컴포넌트를 부라우저에서 다시 그려준다. + } else { + alert('카드 삭제에 실패했습니다.'); + } } return ( diff --git a/static/src/page/Enrollment.jsx b/static/src/page/Enrollment.jsx index d38d3b9..009a2ab 100644 --- a/static/src/page/Enrollment.jsx +++ b/static/src/page/Enrollment.jsx @@ -6,18 +6,12 @@ import Input from "../component/atom/Input"; function Enrollment({history}) { const [title, setTitle] = useState(''); - // 다시 - const [assignee, setAssignee] = useState(''); const onChange = (event) => { event.stopPropagation(); setTitle(event.target.value); }; - //handle - function handle(event){ - setAssignee(event.target.value); - } const onPreviousClick = (event) => { event.stopPropagation(); @@ -55,8 +49,6 @@ function Enrollment({history}) {
- // 다시 -
); } - export default Button; diff --git a/static/src/component/board/card/index.jsx b/static/src/component/board/card/index.jsx index 1bccb2c..0965816 100644 --- a/static/src/component/board/card/index.jsx +++ b/static/src/component/board/card/index.jsx @@ -9,7 +9,7 @@ function Card(props) {
{subject}
{ tasks.map(task => { - return + return }) } diff --git a/static/src/component/board/task/index.jsx b/static/src/component/board/task/index.jsx index 0235cd9..084c24c 100644 --- a/static/src/component/board/task/index.jsx +++ b/static/src/component/board/task/index.jsx @@ -5,7 +5,7 @@ import {isDone, isTodo, toToggledValue} from "../../../utility/status"; import Button from "../../atom/Button"; function Task(props) { - const {title, subject, id, move, created} = props; + const {title, subject, id, move, created, assignee} = props; const onClick = (event) => { event.stopPropagation(); const toggledValue = toToggledValue(subject); @@ -21,6 +21,7 @@ function Task(props) { return (
{title}
+ {assignee}
{created} { isDone(subject) diff --git a/static/src/page/Board.jsx b/static/src/page/Board.jsx index def7a31..967d376 100644 --- a/static/src/page/Board.jsx +++ b/static/src/page/Board.jsx @@ -34,7 +34,6 @@ function Board() { }; function remove(id) { - // const isSuccesses = await removeCard(id); const isSuccesses = removeCard(id); if (isSuccesses) { //history.goBack(); diff --git a/static/src/page/Enrollment.jsx b/static/src/page/Enrollment.jsx index 009a2ab..dea71da 100644 --- a/static/src/page/Enrollment.jsx +++ b/static/src/page/Enrollment.jsx @@ -6,12 +6,17 @@ import Input from "../component/atom/Input"; function Enrollment({history}) { const [title, setTitle] = useState(''); + const [assignee,setAssignee]=useState(''); const onChange = (event) => { event.stopPropagation(); setTitle(event.target.value); }; + const onChangeAssignee = (event) => { + event.stopPropagation(); + setAssignee(event.target.value); + }; const onPreviousClick = (event) => { event.stopPropagation(); @@ -19,7 +24,7 @@ function Enrollment({history}) { }; const add = async () => { - const isSuccesses = await createCard(title); + const isSuccesses = await createCard(title,assignee); if (isSuccesses) { history.goBack(); } else { @@ -42,6 +47,7 @@ function Enrollment({history}) { const onClearClick = (event) => { event.stopPropagation(); setTitle(''); + setAssignee(''); }; return ( @@ -49,6 +55,10 @@ function Enrollment({history}) {
+
+ + +