Kwon ye kyeong

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

@@ -3,13 +3,14 @@ import Task from "../task";
 import '../../../css/Card.css';
 
 function Card(props) {
-    const {subject, tasks, move} = props;
+    const {subject, tasks, move, remove} = props;
     return (
         <div className='card'>
             <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 key={task.id} title={task.title} priority={task.priority} assignee={task.assignee}
+                                 subject={subject} id={task.id} created={task.created} move={move} remove={remove}/>
                 })
             }
 

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

@@ -5,22 +5,27 @@ 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, priority, assignee, created, move, remove} = props;
     const onClick = (event) => {
         event.stopPropagation();
         const toggledValue = toToggledValue(subject);
         move(id, toggledValue);
     };
+    function handle(event) {
+        remove(id);
+    }
 
     return (
         <div className='task'>
             {
                 isTodo(subject) && <Button className='task-left-btn' onClick={onClick} value='>'/>
             }
-            {title}
+            {title} {String(priority)+'순위'} <br/>
+            {assignee} {created}
             {
                 isDone(subject) && <Button className='task-right-btn' onClick={onClick} value='<'/>
             }
+            <Button className='task-remove-btn' onClick={handle} value='X'/>
         </div>
     );
 }

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 deleteCard from "../service/deleteCard";
 
 function Board() {
     const [cards, updateCards] = useState({});
@@ -25,19 +26,64 @@ function Board() {
             const changedStatus = toName(result.status);
             cards[changedStatus].push(result);
 
+            // case 1:
+            // const changedCards = await getCards();
+            // updateCards({
+            //     todo: changedCards.todo,
+            //     done: changedCards.done
+            // });
+
+            // case 2:
+            cards.todo.sort(function (a, b) {
+                return a.priority-b.priority;
+            });
+            cards.done.sort(function (a, b) {
+                return a.priority-b.priority;
+            });
+
             updateCards({
                 todo: cards.todo,
                 done: cards.done
             });
         }
     };
+    function remove(id) {
+        const todo = cards.todo;
+        const done = cards.done;
+
+        let index = todo.findIndex((value) => {
+            return value.id === id;
+        });
+        if(index!==-1) {
+            todo.splice(index, 1);
+            const isSuccesses = deleteCard(id);
+            if (!isSuccesses) {
+                alert('NotFound(todo)');
+            }
+        }
+        else{
+            index = done.findIndex((value) => {
+                return value.id === id;
+            });
+            done.splice(index, 1);
+            const isSuccesses = deleteCard(id);
+            if (!isSuccesses) {
+                alert('NotFound(done)');
+            }
+        }
+
+        updateCards({
+            "todo": cards.todo,
+            "done": cards.done
+        });
+    }
 
     return (
         <div className='board'>
             <div className='board-list'>
                 {
                     Object.entries(cards).map(([subject, tasks]) => {
-                        return <Card key={subject} subject={subject} tasks={tasks} move={move}/>;
+                        return <Card key={subject} subject={subject} tasks={tasks} move={move} remove={remove}/>;
                     })
                 }
             </div>

static/src/page/Enrollment.jsx

@@ -6,19 +6,31 @@ 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) => {
+    const onChangeTitle = (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);
+    }
+
     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 +53,26 @@ function Enrollment({history}) {
     const onClearClick = (event) => {
         event.stopPropagation();
         setTitle('');
+        setAssignee('');
+        document.getElementById("priority").value = 2;
+        setPriority('2');
     };
 
     return (
         <div className='enrollment'>
             <div className='enrollment-title'>
                 <label htmlFor="title">Title</label>
-                <Input id='title' onChange={onChange} onKeyPress={onEnterPress} value={title}/>
+                <Input id='title' onChange={onChangeTitle} onKeyPress={onEnterPress} value={title}/> <br/>
+                <label htmlFor="assignee">담당자</label>
+                <Input id='assignee' onChange={onChangeAssignee} onKeyPress={onEnterPress} value={assignee}/> <br/>
+                <label>
+                    우선순위
+                    <select id='priority' onChange={onChangePriority}>
+                        <option value="1">1순위</option>
+                        <option selected value="2">2순위</option>
+                        <option value="3">3순위</option>
+                    </select>
+                </label>
             </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;

static/src/service/deleteCard.js

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