Merge pull request #330 from boostcampwm2023/refactor/backlog-page

refactor: 백로그 페이지 컴포넌트 리팩토링

Author: surinkwon

frontend/src/components/backlog/StoryBlock.tsx

@@ -15,6 +15,8 @@ import ChevronDown from "../../assets/icons/chevron-down.svg?react";
 import TrashCan from "../../assets/icons/trash-can.svg?react";
 import { MOUSE_KEY } from "../../constants/event";
 import { BacklogStatusType, EpicCategoryDTO } from "../../types/DTO/backlogDTO";
+import TextInputColumn from "./common/TextInputColumn";
+import NumberInputColumn from "./common/NumberInputColumn";
 
 interface StoryBlockProps {
   id: number;
@@ -210,40 +212,24 @@ const StoryBlock = ({
               />
             )}
           </button>
-          {titleUpdating ? (
-            <input
-              className={`w-full rounded-sm focus:outline-none bg-gray-200 hover:cursor-pointer`}
-              type="text"
-              ref={titleInputRef}
-              defaultValue={title}
-              onKeyUp={handleTitleEnterKeyup}
-            />
-          ) : (
-            <span
-              title={title}
-              className="w-full overflow-hidden hover:cursor-pointer text-ellipsis whitespace-nowrap"
-            >
-              {title}
-            </span>
-          )}
+          <TextInputColumn
+            updating={titleUpdating}
+            inputRef={titleInputRef}
+            value={title}
+            onKeyUp={handleTitleEnterKeyup}
+          />
         </div>
         <div
           className="flex items-center gap-1 w-[4rem] mr-[2.76rem] text-right hover:cursor-pointer"
           onClick={() => handlePointUpdatingOpen(true)}
           ref={pointRef}
         >
-          {pointUpdating ? (
-            <input
-              className={`min-w-[1.75rem] no-arrows text-right focus:outline-none rounded-sm bg-gray-200 hover:cursor-pointer`}
-              type="number"
-              ref={pointInputRef}
-              defaultValue={point !== 0 && !point ? 0 : point}
-              onKeyUp={handlePointEnterKeyup}
-            />
-          ) : (
-            <span className="min-w-[1.75rem] text-right">{point}</span>
-          )}
-
+          <NumberInputColumn
+            updating={pointUpdating}
+            inputRef={pointInputRef}
+            value={point}
+            onKeyUp={handlePointEnterKeyup}
+          />
           <span> POINT</span>
         </div>
         <div className="w-[4rem] mr-[2.76rem] text-right">

frontend/src/components/backlog/TaskBlock.tsx

@@ -14,6 +14,8 @@ import { MOUSE_KEY } from "../../constants/event";
 import ConfirmModal from "../common/ConfirmModal";
 import TrashCan from "../../assets/icons/trash-can.svg?react";
 import isIntegerOrOneDecimalPlace from "../../utils/isIntegerOrOneDecimalPlace";
+import TextInputColumn from "./common/TextInputColumn";
+import NumberInputColumn from "./common/NumberInputColumn";
 
 const TaskBlock = ({
   id,
@@ -203,17 +205,12 @@ const TaskBlock = ({
           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"
-              onKeyUp={handleTitleKeyup}
-            />
-          ) : (
-            <span title={title}>{title}</span>
-          )}
+          <TextInputColumn
+            inputRef={titleInputRef}
+            value={title}
+            onKeyUp={handleTitleKeyup}
+            updating={titleUpdating}
+          />
         </div>
         <div
           className="w-12 min-h-[1.5rem] hover:cursor-pointer relative"
@@ -235,34 +232,24 @@ const TaskBlock = ({
           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"
-              onKeyUp={handleExpectedTimeKeyup}
-            />
-          ) : (
-            <p className="max-w-full text-right">{expectedTime}</p>
-          )}
+          <NumberInputColumn
+            updating={expectedTimeUpdating}
+            inputRef={expectedTimeInputRef}
+            value={expectedTime}
+            onKeyUp={handleExpectedTimeKeyup}
+          />
         </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"
-              onKeyUp={handleActualTimeKeyup}
-            />
-          ) : (
-            <p className="min-w-full text-right">{actualTime}</p>
-          )}
+          <NumberInputColumn
+            updating={actualTimeUpdating}
+            inputRef={actualTimeInputRef}
+            value={actualTime}
+            onKeyUp={handleActualTimeKeyup}
+          />
         </div>
         <div
           className="w-[6.25rem] hover:cursor-pointer relative"

frontend/src/components/backlog/common/NumberInputColumn.tsx

@@ -0,0 +1,29 @@
+interface NumberInputColumnProps {
+  updating: boolean;
+  inputRef: React.MutableRefObject<HTMLInputElement | null>;
+  value: number | null;
+  onKeyUp: (event: React.KeyboardEvent) => void;
+}
+
+const NumberInputColumn = ({
+  updating,
+  inputRef,
+  value,
+  onKeyUp,
+}: NumberInputColumnProps) => {
+  if (updating) {
+    return (
+      <input
+        className="w-full min-w-[1.75rem] no-arrows text-right focus:outline-none rounded-sm bg-gray-200 hover:cursor-pointer"
+        type="number"
+        ref={inputRef}
+        defaultValue={value === null ? "" : value}
+        onKeyUp={onKeyUp}
+      />
+    );
+  }
+
+  return <span className="w-full text-right truncate">{value}</span>;
+};
+
+export default NumberInputColumn;

frontend/src/components/backlog/common/TextInputColumn.tsx

@@ -0,0 +1,33 @@
+interface TextInputColumnProps {
+  updating: boolean;
+  inputRef: React.MutableRefObject<HTMLInputElement | null>;
+  value: string;
+  onKeyUp: (event: React.KeyboardEvent) => void;
+}
+
+const TextInputColumn = ({
+  updating,
+  inputRef,
+  value,
+  onKeyUp,
+}: TextInputColumnProps) => {
+  if (updating) {
+    return (
+      <input
+        className="w-full min-w-[1rem] focus:outline-none rounded-sm bg-gray-200 hover:cursor-pointer"
+        type="text"
+        ref={inputRef}
+        defaultValue={value}
+        onKeyUp={onKeyUp}
+      />
+    );
+  }
+
+  return (
+    <span title={value} className="w-full truncate hover:cursor-pointer">
+      {value}
+    </span>
+  );
+};
+
+export default TextInputColumn;

frontend/src/pages/backlog/EpicPage.tsx

@@ -335,12 +335,35 @@ const EpicPage = () => {
       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,
+        });
       }
     };
 

frontend/src/pages/backlog/UnfinishedStoryPage.tsx

@@ -168,6 +168,15 @@ const UnfinishedStoryPage = () => {
         content.id === draggingStoryId
       ) {
         setStoryElementIndex(undefined);
+        return;
+      }
+
+      if (
+        domain === "task" &&
+        action === "delete" &&
+        content.id === draggingTaskId
+      ) {
+        setTaskElementIndex({ storyId: undefined, taskIndex: undefined });
       }
     };