feat: Task 수정 및 삭제 처리(#59)

dnd-side-project · Mar 2, 2023 · ef642d9 · ef642d9
1 parent d414d5f
commit ef642d9
Showing 1 changed file with 41 additions and 7 deletions.
diff --git a/src/components/Block/Task/index.tsx b/src/components/Block/Task/index.tsx
@@ -4,6 +4,13 @@ import TaskCheckBox, { OnChange } from '@/components/TaskCheckBox'
 import type { Task as TaskType } from '@/types/block'
 import useDebounce from '@/hooks/useDebounce'
 import { dayBlockAPI } from '@/api'
+import useHttpRequest from '@/hooks/useHttpRequest'
+import {
+  DeleteTaskInBlockParams,
+  UpdateTaskInBlockParams,
+  UpdateTaskStatusParams,
+} from '@/api/types/base.types'
+import useBlockListStore from '@/store/blocks'
 
 const Task = ({
   isDone,
@@ -12,24 +19,50 @@ const Task = ({
   blockId,
 }: TaskType & { blockId: number }) => {
   const [isChecked, setIsChecked] = useState(isDone)
-  const [taskValue, setTaskValue] = useState<string>('')
+  const [taskValue, setTaskValue] = useState<string>(task)
   const debouncedValue = useDebounce<string>(taskValue, 500)
+  const deleteTaskStore = useBlockListStore((state) => state.deleteTask)
+  const updateTaskStore = useBlockListStore((state) => state.updateTask)
+  const updateTaskStatusStore = useBlockListStore(
+    (state) => state.updateTaskStatus,
+  )
+
+  const [, updateTask] = useHttpRequest((params: UpdateTaskInBlockParams) =>
+    dayBlockAPI.updateTaskInBlock(params).then(({ data }) => data),
+  )
+  const [, updateTaskStatus] = useHttpRequest(
+    (params: UpdateTaskStatusParams) =>
+      dayBlockAPI.updateTaskStatus(params).then(({ data }) => data),
+  )
+  const [, deleteTask] = useHttpRequest((params: DeleteTaskInBlockParams) =>
+    dayBlockAPI.deleteTaskInBlock(params).then(({ data }) => data),
+  )
 
   const handleCheckTask: OnChange = ({ selected }) => {
     setIsChecked(selected)
+    updateTaskStatus({ taskId })
+    updateTaskStatusStore(blockId, taskId, selected)
   }
 
   const handleTaskChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setTaskValue(e.target.value)
   }
 
+  const handleDelete = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (taskValue.length === 0 && e.key.toLowerCase() === 'backspace') {
+      deleteTask({ taskId })
+      deleteTaskStore(blockId, taskId)
+    }
+  }
+
   useEffect(() => {
-    debouncedValue &&
-      dayBlockAPI.updateTaskInBlock({
-        taskId,
-        content: debouncedValue,
-      })
-  }, [taskId, debouncedValue])
+    if (!debouncedValue) return
+    updateTask({
+      taskId,
+      content: debouncedValue,
+    })
+    updateTaskStore(blockId, taskId, debouncedValue)
+  }, [debouncedValue])
 
   return (
     <div className="flex mb-3">
@@ -56,6 +89,7 @@ const Task = ({
           },
         )}
         disabled={!!isChecked}
+        onKeyDown={handleDelete}
       />
     </div>
   )