Ahyoon

static/src/component/atom/Button.jsx

@@ -15,5 +15,4 @@ function Button(props) {
             </button>
     );
 }
-
 export default Button;

static/src/component/board/card/index.jsx

@@ -9,7 +9,7 @@ function Card(props) {
             <div className='title'>{subject}</div>
             {
                 tasks.map(task => {
-                    return <Task key={task.id} title={task.title} subject={subject} id={task.id} move={move}/>
+                    return <Task remove={props.remove} key={task.id} title={task.title} subject={subject} id={task.id} move={move} created={task.created} assignee={task.assignee} priority={task.priority}/>
                 })
             }
 

static/src/component/board/task/index.jsx

@@ -5,22 +5,36 @@ 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, assignee, priority} = 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 (
         <div className='task'>
+            title : {title}<br/>
+            {priority}순위<br/>
+            assignee : {assignee}<br/>
+            date : {created}
             {
-                isTodo(subject) && <Button className='task-left-btn' onClick={onClick} value='>'/>
+                isDone(subject)
+                && <Button className='task-right-btn' onClick={onClick} value='<'/>
             }
-            {title}
+            {<Button className='task-remove-btn' onClick={handle} value='X'/>}
             {
-                isDone(subject) && <Button className='task-right-btn' onClick={onClick} value='<'/>
+                isTodo(subject)
+                && <Button className='task-left-btn' onClick={onClick} value='>'/>
+
             }
+
         </div>
     );
 }

static/src/css/Enrollment.css

@@ -31,4 +31,8 @@ label {
     display: inline-block;
 }
 
+select {
+    padding: 12px 12px 12px 0;
+    width:950px;
+}
 

static/src/css/Input.css

@@ -4,3 +4,10 @@
     border: 1px solid #ccc;
     border-radius: 4px;
 }
+
+.select{
+    width: 50%;
+    padding: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}

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;

static/src/page/Board.jsx

@@ -1,14 +1,15 @@
 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';
+import removeCard from "../service/removeCard";
 
 function Board() {
     const [cards, updateCards] = useState({});
-    useEffect(() => {
+    useEffect(() => { // 실행했을 때 딱 한번만 실행
         (async () => {
             const cards = await getCards();
             updateCards(cards);
@@ -17,32 +18,79 @@ 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);
             cards[changedStatus].push(result);
 
             updateCards({
-                todo: cards.todo,
-                done: cards.done
+                todo: cards.todo.sort(function(a,b){
+                    return a.priority<b.priority?-1:a.priority>b.priority?1:0;
+                }),
+                done: cards.done.sort(function(a,b){
+                    return a.priority<b.priority?-1:a.priority>b.priority?1:0;
+                }),
             });
         }
     };
 
+    function remove(id) {
+        const isSuccesses = removeCard(id);
+        if (isSuccesses) {
+            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 해당 데이터를 사용하는 모든 컴포넌트를 부라우저에서 다시 그려준다.
+        } else {
+            alert('카드 삭제에 실패했습니다.');
+        }
+    }
+
     return (
-        <div className='board'>
-            <div className='board-list'>
+        <div className="board">
+            <div className="board-list">
                 {
-                    Object.entries(cards).map(([subject, tasks]) => {
-                        return <Card key={subject} subject={subject} tasks={tasks} move={move}/>;
-                    })
+                    Object.entries(cards).map(([subject, tasks]) =>
+                            // Object.entries(cards) : ㅏkey에 done, value에 해당값들. 즉 [todo,[{},{}]]로 만들어준다.
+                            <Card remove={remove} key={subject} subject={subject} tasks={tasks} move={move}/>, // map(function) : function를 적용시켜서 변환
+                        //remove={remove} : 자식한테 props로 전달해준다.
+                    )
                 }
             </div>
 
-            <Link className='board-link' to="/enrollment">ADD</Link>
+            <Link className="board-link" to="/enrollment">ADD</Link>
         </div>
     );
 }

static/src/page/Enrollment.jsx

@@ -6,19 +6,35 @@ import Input from "../component/atom/Input";
 
 function Enrollment({history}) {
     const [title, setTitle] = useState('');
+    const [assignee, setAssignee] = useState('');
+    const [priority, setPriority]=useState(2);
 
     const onChange = (event) => {
         event.stopPropagation();
         setTitle(event.target.value);
     };
 
+    const onChangeAssignee = (event) => {
+        event.stopPropagation();
+        setAssignee(event.target.value);
+    };
+
+    const onChangePriority = (event) => {
+        event.stopPropagation();
+        setPriority(event.target.value);
+    };
+
+    function onDisplayPriority(){
+        document.getElementById("priority").selectedIndex="1";
+    }
+
     const onPreviousClick = (event) => {
         event.stopPropagation();
         history.goBack();
     };
 
     const add = async () => {
-        const isSuccesses = await createCard(title);
+        const isSuccesses = await createCard(title, assignee, priority);
         if (isSuccesses) {
             history.goBack();
         } else {
@@ -41,13 +57,29 @@ function Enrollment({history}) {
     const onClearClick = (event) => {
         event.stopPropagation();
         setTitle('');
+        setAssignee('');
+        setPriority(2);
+        onDisplayPriority();
+
     };
 
+
     return (
         <div className='enrollment'>
             <div className='enrollment-title'>
                 <label htmlFor="title">Title</label>
                 <Input id='title' onChange={onChange} onKeyPress={onEnterPress} value={title}/>
+                <br/>
+                <label htmlFor="title">Assignee</label>
+                <Input id='assignee' onChange={onChangeAssignee} value={assignee}/>
+                <br/>
+                <label htmlFor="title">Priority</label>
+                <select name="priority" id="priority" onChange={onChangePriority}>
+                    <option value="1">1순위</option>
+                    <option value="2" selected="selected">2순위</option>
+                    <option value="3">3순위</option>
+                </select>
+
             </div>
             <div className='enrollment-btn-grp'>
                 <Button className='enrollment-btn' onClick={onPreviousClick} value='이전'/>

static/src/service/createCard.js

@@ -1,4 +1,4 @@
-async function createCard(title) {
+async function createCard(title, assignee, priority) {
   try {
     const response = await fetch('/todo/cards', {
       method: 'POST',
@@ -7,7 +7,7 @@ async function createCard(title) {
       headers: {
         'Content-Type': 'application/json; charset=utf-8',
       },
-      body: JSON.stringify({ title }),
+      body: JSON.stringify({ title, assignee, priority }),
     });
 
     return response.status === 201;
@@ -16,4 +16,4 @@ async function createCard(title) {
   }
 }
 
-export default createCard;
+export default createCard;

static/src/service/getCards.js

@@ -10,9 +10,12 @@ async function getCards() {
     });
 
     const cards = await response.json();
+    //console.log(cards); //todo done 상관없이 출력
     const todo = cards.filter((card) => card.status === 'TODO');
     const done = cards.filter((card) => card.status === 'DONE');
-    return {
+    //console.log(todo,done);
+
+    return {  //객체로 반환, ㅅtodo:[{},{}]
       todo, done,
     };
   } catch (e) {

static/src/service/removeCard.js

@@ -0,0 +1,19 @@
+async function removeCard(id) {
+    try {
+        const response = await fetch('/todo/cards/${id}', {
+            method: 'DELETE',
+            credentials: 'include',
+            mode: 'cors',
+            headers: {
+                'Content-Type': 'application/json; charset=utf-8',
+            },
+            body: JSON.stringify({ id }),
+        });
+
+        return response.status === 201;
+    } catch (e) {
+        return false;
+    }
+}
+
+export default removeCard;