feat: 태스크 삭제, 수정 API 연동

frontend/src/components/backlog/AssignedMemberDropdown.tsx

@@ -13,11 +13,11 @@ const AssignedMemberDropdown = ({
   const memberList = [myInfo, ...partialMemberList];
 
   return (
-    <div className="rounded-md w-fit shadow-box">
+    <div className="absolute top-0 bg-white rounded-md w-fit shadow-box">
       <ul>
         {...memberList.map((member: LandingMemberDTO) => (
           <li
-            className="p-2 hover:cursor-pointer hover:bg-gray-100"
+            className="p-3 overflow-hidden rounded-md hover:cursor-pointer hover:bg-gray-100 text-ellipsis whitespace-nowrap"
             key={member.id}
             onClick={() => onOptionClick(member.id)}
           >

frontend/src/components/backlog/TaskBlock.tsx

@@ -1,33 +1,266 @@
-import { TaskDTO } from "../../types/DTO/backlogDTO";
+import { MouseEvent, useMemo } from "react";
+import { useOutletContext } from "react-router-dom";
+import { Socket } from "socket.io-client";
+import useDropdownState from "../../hooks/common/dropdown/useDropdownState";
+import useBacklogInputChange from "../../hooks/pages/backlog/useBacklogInputChange";
+import useTaskEmitEvent from "../../hooks/pages/backlog/useTaskEmitEvent";
+import AssignedMemberDropdown from "./AssignedMemberDropdown";
 import BacklogStatusChip from "./BacklogStatusChip";
-import CategoryChip from "./CategoryChip";
+import BacklogStatusDropdown from "./BacklogStatusDropdown";
+import useMemberStore from "../../stores/useMemberStore";
+import { BacklogStatusType, TaskDTO } from "../../types/DTO/backlogDTO";
+import { useModal } from "../../hooks/common/modal/useModal";
+import { MOUSE_KEY } from "../../constants/event";
+import ConfirmModal from "../common/ConfirmModal";
+import TrashCan from "../../assets/icons/trash-can.svg?react";
 
 const TaskBlock = ({
+  id,
   displayId,
   title,
   assignedMemberId,
   expectedTime,
   actualTime,
   status,
-}: TaskDTO) => (
-  <div className="flex items-center justify-between py-1 border-b">
-    <p className="w-[4rem]">Task-{displayId}</p>
-    <p className="w-[25rem]">{title}</p>
-    <div className="w-12">
-      {assignedMemberId && (
-        <CategoryChip content={`${assignedMemberId}`} bgColor="green" />
+}: TaskDTO) => {
+  const { socket }: { socket: Socket } = useOutletContext();
+  const {
+    inputContainerRef: titleRef,
+    inputElementRef: titleInputRef,
+    updating: titleUpdating,
+    handleUpdating: handleTitleUpdating,
+  } = useBacklogInputChange(updateTitle);
+  const {
+    inputContainerRef: expectedTimeRef,
+    inputElementRef: expectedTimeInputRef,
+    updating: expectedTimeUpdating,
+    handleUpdating: handleExpectedTimeUpdating,
+  } = useBacklogInputChange(updateExpectedTime);
+  const {
+    inputContainerRef: actualTimeRef,
+    inputElementRef: actualTimeInputRef,
+    updating: actualTimeUpdating,
+    handleUpdating: handleActualTimeUpdating,
+  } = useBacklogInputChange(updateActualTime);
+  const {
+    open: assignedMemberUpdating,
+    handleOpen: handleAssignedMemberUpdateOpen,
+    dropdownRef: assignedMemberRef,
+  } = useDropdownState();
+  const {
+    open: statusUpdating,
+    handleOpen: handleStatusUpdateOpen,
+    dropdownRef: statusRef,
+  } = useDropdownState();
+  const myInfo = useMemberStore((state) => state.myInfo);
+  const partialMemberList = useMemberStore((state) => state.memberList);
+  const { emitTaskUpdateEvent, emitTaskDeleteEvent } = useTaskEmitEvent(socket);
+  const {
+    open: deleteMenuOpen,
+    handleOpen: handleDeleteMenuOpen,
+
+    dropdownRef: blockRef,
+  } = useDropdownState();
+  const { open, close } = useModal();
+
+  const assignedMemberName = useMemo(() => {
+    if (assignedMemberId === null) {
+      return "";
+    }
+
+    if (myInfo.id === assignedMemberId) {
+      return myInfo.username;
+    }
+
+    return partialMemberList.filter(({ id }) => id === assignedMemberId)[0]
+      .username;
+  }, [assignedMemberId, partialMemberList]);
+
+  function updateTitle<T>(data: T) {
+    if (!data || data === title) {
+      return;
+    }
+
+    if ((data as string).length > 100) {
+      alert("태스크 타이틀은 100자 이하여야 합니다.");
+      return;
+    }
+
+    emitTaskUpdateEvent({ id, title: data as string });
+  }
+  function updateExpectedTime<T>(data: T) {
+    if (!data || data === String(expectedTime)) {
+      return;
+    }
+
+    if (data === "") {
+      emitTaskUpdateEvent({ id, expectedTime: null });
+      return;
+    }
+
+    if (!isNaN(Number(data)) && (Number(data) >= 100 || Number(data) < 0)) {
+      alert(
+        "예상 시간은 0이상, 100미만의 정수 또는 소수점 한 자릿수여야 합니다."
+      );
+      return;
+    }
+
+    emitTaskUpdateEvent({ id, expectedTime: Number(data) });
+  }
+  function updateActualTime<T>(data: T) {
+    if (!data || data === String(actualTime)) {
+      return;
+    }
+
+    if (data === "") {
+      emitTaskUpdateEvent({ id, actualTime: null });
+      return;
+    }
+
+    if (!isNaN(Number(data)) && (Number(data) >= 100 || Number(data) < 0)) {
+      alert(
+        "실제 시간은 0이상, 100미만의 정수 또는 소수점 한 자릿수여야 합니다."
+      );
+      return;
+    }
+    emitTaskUpdateEvent({ id, actualTime: Number(data) });
+  }
+  function updateAssignedMember(data: number) {
+    if (data === assignedMemberId) {
+      return;
+    }
+
+    emitTaskUpdateEvent({ id, assignedMemberId: data });
+  }
+
+  function updateStatus(data: BacklogStatusType) {
+    if (data === status) {
+      return;
+    }
+
+    emitTaskUpdateEvent({ id, status: data });
+  }
+
+  const handleRightButtonClick = (event: MouseEvent) => {
+    if (event.button === MOUSE_KEY.RIGHT) {
+      handleDeleteMenuOpen();
+    }
+  };
+
+  const handleTaskDelete = () => {
+    emitTaskDeleteEvent({ id });
+    close();
+  };
+
+  const handleDeleteButtonClick = () => {
+    open(
+      <ConfirmModal
+        title="태스크 삭제"
+        body="태스크가 삭제됩니다."
+        confirmText="삭제"
+        cancelText="취소"
+        confirmColor="#E33535"
+        cancelColor="#C6C6C6"
+        onCancelButtonClick={close}
+        onConfirmButtonClick={handleTaskDelete}
+      />
+    );
+  };
+
+  return (
+    <>
+      <div
+        className="flex items-center justify-between py-1 border-b"
+        onMouseUp={handleRightButtonClick}
+        onContextMenu={(event) => event.preventDefault()}
+        ref={blockRef}
+      >
+        <p className="w-[4rem]">Task-{displayId}</p>
+        <div
+          className="w-[25rem] min-h-[1.5rem] hover:cursor-pointer"
+          ref={titleRef}
+          onClick={() => handleTitleUpdating(true)}
+        >
+          {titleUpdating ? (
+            <input
+              className="w-full min-w-[1rem] focus:outline-none rounded-sm bg-gray-200 hover:cursor-pointer"
+              ref={titleInputRef}
+              defaultValue={title}
+              type="text"
+            />
+          ) : (
+            <span>{title}</span>
+          )}
+        </div>
+        <div
+          className="w-12 min-h-[1.5rem] hover:cursor-pointer relative"
+          onClick={handleAssignedMemberUpdateOpen}
+        >
+          <div className="w-full min-h-[1.5rem]" ref={assignedMemberRef}>
+            {assignedMemberId && <p>{assignedMemberName}</p>}
+          </div>
+          {assignedMemberUpdating && (
+            <AssignedMemberDropdown onOptionClick={updateAssignedMember} />
+          )}
+        </div>
+        <div
+          className="w-16 min-h-[1.5rem] hover:cursor-pointer"
+          ref={expectedTimeRef}
+          onClick={() => handleExpectedTimeUpdating(true)}
+        >
+          {expectedTimeUpdating ? (
+            <input
+              className="w-full min-w-[1rem] no-arrows text-right focus:outline-none rounded-sm bg-gray-200 hover:cursor-pointer"
+              ref={expectedTimeInputRef}
+              defaultValue={expectedTime === null ? "" : expectedTime}
+              type="number"
+            />
+          ) : (
+            <p className="max-w-full text-right">{expectedTime}</p>
+          )}
+        </div>
+        <div
+          className="w-16 min-h-[1.5rem] hover:cursor-pointer"
+          ref={actualTimeRef}
+          onClick={() => handleActualTimeUpdating(true)}
+        >
+          {actualTimeUpdating ? (
+            <input
+              className="w-full min-w-[1rem] no-arrows text-right focus:outline-none rounded-sm bg-gray-200 hover:cursor-pointer"
+              ref={actualTimeInputRef}
+              defaultValue={actualTime === null ? "" : actualTime}
+              type="number"
+            />
+          ) : (
+            <p className="min-w-full text-right">{actualTime}</p>
+          )}
+        </div>
+        <div
+          className="w-[6.25rem] hover:cursor-pointer relative"
+          onClick={handleStatusUpdateOpen}
+        >
+          <div ref={statusRef}>
+            <BacklogStatusChip status={status} />
+          </div>
+          {statusUpdating && (
+            <BacklogStatusDropdown onOptionClick={updateStatus} />
+          )}
+        </div>
+      </div>
+      {deleteMenuOpen && (
+        <div className="absolute px-2 py-1 bg-white rounded-md shadow-box">
+          <button
+            className="flex items-center w-full gap-3"
+            type="button"
+            onClick={handleDeleteButtonClick}
+          >
+            <TrashCan width={20} height={20} fill="red" />
+            <span>삭제</span>
+          </button>
+        </div>
       )}
-    </div>
-    <div className="w-16 ">
-      <p className="max-w-full text-right">{expectedTime}</p>
-    </div>
-    <div className="w-16 ">
-      <p className="max-w-full text-right">{actualTime}</p>
-    </div>
-    <div className="w-[6.25rem]">
-      <BacklogStatusChip status={status} />
-    </div>
-  </div>
-);
+    </>
+  );
+};
 
 export default TaskBlock;

frontend/src/components/backlog/TaskCreateForm.tsx

@@ -41,7 +41,6 @@ const TaskCreateForm = ({ onCloseClick, storyId }: TaskCreateFormProps) => {
   const handleSubmit = (event: FormEvent) => {
     event.preventDefault();
     let { title, actualTime, expectedTime } = taskFormData;
-    console.log(taskFormData);
 
     if (title.length > 100) {
       alert("제목은 100자 이내여야 합니다.");

frontend/src/hooks/pages/backlog/useBacklogSocket.ts

@@ -62,7 +62,10 @@ const useBacklogSocket = (socket: Socket) => {
         setBacklog((prevBacklog) => {
           const newEpicList = prevBacklog.epicList.map((epic) => {
             if (epic.id === content.epicId) {
-              const newStoryList = [...epic.storyList, content];
+              const newStoryList = [
+                ...epic.storyList,
+                { ...content, taskList: [] },
+              ];
               return { ...epic, storyList: newStoryList };
             }
 
@@ -127,6 +130,43 @@ const useBacklogSocket = (socket: Socket) => {
           return { epicList: newEpicList };
         });
         break;
+      case BacklogSocketTaskAction.UPDATE:
+        setBacklog((prevBacklog) => {
+          const newEpicList = prevBacklog.epicList.map((epic) => {
+            const newStoryList = epic.storyList.map((story) => {
+              const newTaskList = story.taskList.map((task) => {
+                if (task.id === content.id) {
+                  return { ...task, ...content };
+                }
+
+                return task;
+              });
+
+              return { ...story, taskList: newTaskList };
+            });
+            return { ...epic, storyList: newStoryList };
+          });
+
+          return { epicList: newEpicList };
+        });
+
+        break;
+      case BacklogSocketTaskAction.DELETE:
+        setBacklog((prevBacklog) => {
+          const newEpicList = prevBacklog.epicList.map((epic) => {
+            const newStoryList = epic.storyList.map((story) => {
+              const newTaskList = story.taskList.filter(
+                ({ id }) => id !== content.id
+              );
+
+              return { ...story, taskList: newTaskList };
+            });
+            return { ...epic, storyList: newStoryList };
+          });
+
+          return { epicList: newEpicList };
+        });
+        break;
     }
   };
 

frontend/src/hooks/pages/backlog/useTaskEmitEvent.ts

@@ -1,12 +1,29 @@
 import { Socket } from "socket.io-client";
 import { TaskForm } from "../../../types/common/backlog";
+import { BacklogStatusType } from "../../../types/DTO/backlogDTO";
 
 const useTaskEmitEvent = (socket: Socket) => {
   const emitTaskCreateEvent = (content: TaskForm) => {
     socket.emit("task", { action: "create", content });
   };
 
-  return { emitTaskCreateEvent };
+  const emitTaskUpdateEvent = (content: {
+    id: number;
+    title?: string;
+    expectedTime?: number | null;
+    actualTime?: number | null;
+    assignedMemberId?: number;
+    storyId?: number;
+    status?: BacklogStatusType;
+  }) => {
+    socket.emit("task", { action: "update", content });
+  };
+
+  const emitTaskDeleteEvent = (content: {id: number}) => {
+    socket.emit("task", {action: "delete", content})
+  }
+
+  return { emitTaskCreateEvent, emitTaskUpdateEvent, emitTaskDeleteEvent };
 };
 
 export default useTaskEmitEvent;