feat: 스토리를 닫힌 에픽으로 드롭하거나 태스크를 닫힌 스토리로 드롭할 시 가장 마지막에 추가되는 기능 추가

boostcampwm2023 · Sep 5, 2024 · a7c0b4e · a7c0b4e
1 parent e1758e9
commit a7c0b4e
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 73 deletions.
diff --git a/frontend/src/pages/backlog/EpicPage.tsx b/frontend/src/pages/backlog/EpicPage.tsx
@@ -221,12 +221,11 @@ const EpicPage = () => {
   };
 
   const handleEpicDragEnd = (event: DragEvent) => {
-    event.preventDefault();
-
     if (draggingTaskId || draggingStoryId) {
       return;
     }
 
+    event.preventDefault();
     const targetIndex = epicList.findIndex(({ id }) => id === draggingEpicId);
     let rankValue;
 
@@ -262,12 +261,11 @@ const EpicPage = () => {
   };
 
   const handleStoryDragOver = (event: DragEvent, epicIndex: number) => {
-    event.preventDefault();
-
     if (draggingTaskId || draggingEpicId) {
       return;
     }
 
+    event.preventDefault();
     const mouseIndex = epicList[epicIndex].storyList.findIndex(
       ({ id }) => id === draggingStoryId
     );
@@ -299,26 +297,26 @@ const EpicPage = () => {
     }
 
     const { epicId, storyIndex } = storyElementIndex;
-    const storyList = epicList.find(({ id }) => id === epicId)
-      ?.storyList as StoryDTO[];
+    const targetEpic = epicList.find(({ id }) => id === epicId);
+    const storyList = targetEpic?.storyList as StoryDTO[];
     const currentIndex = storyList?.findIndex(
       ({ id }) => id === draggingStoryId
     );
 
     let rankValue;
 
-    if (storyIndex === currentIndex) {
+    if (storyIndex !== -1 && storyIndex === currentIndex) {
       setDraggingStoryId(undefined);
       setStoryElementIndex({ epicId: undefined, storyIndex: undefined });
       return;
     }
 
-    if (storyIndex === 0 && !storyList.length) {
+    if ((storyIndex === -1 || storyIndex === 0) && !storyList.length) {
       rankValue = LexoRank.middle().toString();
     } else if (storyIndex === 0) {
       const firstStoryRank = storyList[0].rankValue;
       rankValue = LexoRank.parse(firstStoryRank).genPrev().toString();
-    } else if (storyIndex === storyList.length) {
+    } else if (storyIndex === -1 || storyIndex === storyList.length) {
       const lastStoryRank = storyList[storyList.length - 1].rankValue;
       rankValue = LexoRank.parse(lastStoryRank).genNext().toString();
     } else {
@@ -341,61 +339,16 @@ const EpicPage = () => {
     setStoryElementIndex({ epicId: undefined, storyIndex: undefined });
   };
 
-  useEffect(() => {
-    const handleDragEvent = ({
-      domain,
-      action,
-      content,
-    }: BacklogSocketData) => {
-      if (
-        domain === "epic" &&
-        action === "delete" &&
-        content.id === draggingEpicId
-      ) {
-        setEpicElementIndex(undefined);
-        return;
-      }
-
-      if (
-        domain === "story" &&
-        action === "delete" &&
-        content.id === draggingStoryId
-      ) {
-        setStoryElementIndex({ epicId: undefined, storyIndex: undefined });
-
-        return;
-      }
-
-      if (
-        domain === "task" &&
-        action === "delete" &&
-        content.id === draggingTaskId
-      ) {
-        setTaskElementIndex({
-          epicId: undefined,
-          storyId: undefined,
-          taskIndex: undefined,
-        });
-      }
-    };
-
-    socket.on("backlog", handleDragEvent);
-
-    return () => {
-      socket.off("backlog", handleDragEvent);
-    };
-  }, []);
-
   const handleTaskDragOver = (
     event: DragEvent,
     epicIndex: number,
     storyIndex: number
   ) => {
-    event.preventDefault();
-
     if (draggingStoryId || draggingEpicId) {
       return;
     }
+
+    event.preventDefault();
     const { storyList } = epicList[epicIndex];
 
     const mouseIndex = storyList[storyIndex].taskList.findIndex(
@@ -425,15 +378,14 @@ const EpicPage = () => {
 
   const handleTaskDragEnd = () => {
     const { epicId, storyId, taskIndex } = taskElementIndex;
-    const storyList = epicList.find(({ id }) => epicId === id)
-      ?.storyList as StoryDTO[];
-    const taskList = storyList.find(({ id }) => id === storyId)
-      ?.taskList as TaskDTO[];
+    const targetEpic = epicList.find(({ id }) => epicId === id);
+    const targetStory = targetEpic?.storyList.find(({ id }) => id === storyId);
+    const taskList = targetStory?.taskList as TaskDTO[];
     const currentIndex = taskList?.findIndex(({ id }) => id === draggingTaskId);
 
     let rankValue;
 
-    if (taskIndex === currentIndex) {
+    if (!taskIndex || (taskIndex !== -1 && taskIndex === currentIndex)) {
       setDraggingTaskId(undefined);
       setTaskElementIndex({
         epicId: undefined,
@@ -443,12 +395,12 @@ const EpicPage = () => {
       return;
     }
 
-    if (taskIndex === 0 && !taskList.length) {
+    if ((taskIndex === -1 || taskIndex === 0) && !taskList.length) {
       rankValue = LexoRank.middle().toString();
     } else if (taskIndex === 0) {
       const firstTaskRank = taskList[0].rankValue;
       rankValue = LexoRank.parse(firstTaskRank).genPrev().toString();
-    } else if (taskIndex === taskList.length) {
+    } else if (taskIndex === -1 || taskIndex === taskList.length) {
       const lastTaskRank = taskList[taskList.length - 1].rankValue;
       rankValue = LexoRank.parse(lastTaskRank).genNext().toString();
     } else {
@@ -475,6 +427,59 @@ const EpicPage = () => {
     });
   };
 
+  const handleDropTaskOnEpic = () => {
+    setTaskElementIndex({
+      epicId: undefined,
+      storyId: undefined,
+      taskIndex: undefined,
+    });
+  };
+
+  useEffect(() => {
+    const handleDragEvent = ({
+      domain,
+      action,
+      content,
+    }: BacklogSocketData) => {
+      if (
+        domain === "epic" &&
+        action === "delete" &&
+        content.id === draggingEpicId
+      ) {
+        setEpicElementIndex(undefined);
+        return;
+      }
+
+      if (
+        domain === "story" &&
+        action === "delete" &&
+        content.id === draggingStoryId
+      ) {
+        setStoryElementIndex({ epicId: undefined, storyIndex: undefined });
+
+        return;
+      }
+
+      if (
+        domain === "task" &&
+        action === "delete" &&
+        content.id === draggingTaskId
+      ) {
+        setTaskElementIndex({
+          epicId: undefined,
+          storyId: undefined,
+          taskIndex: undefined,
+        });
+      }
+    };
+
+    socket.on("backlog", handleDragEvent);
+
+    return () => {
+      socket.off("backlog", handleDragEvent);
+    };
+  }, []);
+
   return (
     <div className="gap-4 pb-10 border-t" onDragOver={handleEpicDragOver}>
       {!epicList.length && (
@@ -494,7 +499,11 @@ const EpicPage = () => {
           taskComponentRefList.current[epicIndex] = [];
 
           return (
-            <div className="py-2 border-t border-b">
+            <div
+              className="py-2 border-t border-b"
+              onDragOver={(event) => handleStoryDragOver(event, epicIndex)}
+              onDrop={handleDropTaskOnEpic}
+            >
               <EpicDragContainer
                 {...{ epicIndex }}
                 onDragStart={() => handleEpicDragStart(epicId)}
@@ -511,10 +520,7 @@ const EpicPage = () => {
                 />
               </EpicDragContainer>
               {showStory[epicId]?.showStoryList && (
-                <div
-                  className="w-[65rem] ml-auto"
-                  onDragOver={(event) => handleStoryDragOver(event, epicIndex)}
-                >
+                <div className="w-[65rem] ml-auto">
                   {...storyList.map(
                     (
                       { id: storyId, title, point, status, taskList },
@@ -536,6 +542,9 @@ const EpicPage = () => {
                           onDragOver={(event) =>
                             handleTaskDragOver(event, epicIndex, storyIndex)
                           }
+                          onDrop={(event) => {
+                            event.stopPropagation();
+                          }}
                         >
                           <EpicPageStoryDragContainer
                             {...{ epicIndex, storyIndex }}

diff --git a/frontend/src/pages/backlog/UnfinishedStoryPage.tsx b/frontend/src/pages/backlog/UnfinishedStoryPage.tsx
@@ -221,24 +221,24 @@ const UnfinishedStoryPage = () => {
 
   const handleTaskDragEnd = () => {
     const { storyId, taskIndex } = taskElementIndex;
-    const taskList = storyList.find(({ id }) => id === storyId)
-      ?.taskList as TaskDTO[];
+    const targetStory = storyList.find(({ id }) => id === storyId);
+    const taskList = targetStory?.taskList as TaskDTO[];
     const targetIndex = taskList?.findIndex(({ id }) => id === draggingTaskId);
 
     let rankValue;
 
-    if (taskIndex === targetIndex) {
+    if (taskIndex !== -1 && taskIndex === targetIndex) {
       setDraggingTaskId(undefined);
       setTaskElementIndex({ storyId: undefined, taskIndex: undefined });
       return;
     }
 
-    if (taskIndex === 0 && !taskList.length) {
+    if ((taskIndex === -1 || taskIndex === 0) && !taskList.length) {
       rankValue = LexoRank.middle().toString();
     } else if (taskIndex === 0) {
       const firstTaskRank = taskList[0].rankValue;
       rankValue = LexoRank.parse(firstTaskRank).genPrev().toString();
-    } else if (taskIndex === taskList.length) {
+    } else if (taskIndex === -1 || taskIndex === taskList.length) {
       const lastTaskRank = taskList[taskList.length - 1].rankValue;
       rankValue = LexoRank.parse(lastTaskRank).genNext().toString();
     } else {