Merge pull request #318 from boostcampwm2023/feature/backlogPage

surinkwon · web-flow · commit d9d44e955bcc · 2024-07-29T21:30:10.000+09:00
feat: 애픽 생성, 수정 추가 기능 구현
diff --git a/frontend/src/components/backlog/EpicDropdown.tsx b/frontend/src/components/backlog/EpicDropdown.tsx
@@ -1,12 +1,17 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useEffect, useMemo, useRef, useState } from "react";
 import { useOutletContext } from "react-router-dom";
 import { Socket } from "socket.io-client";
 import { EpicCategoryDTO } from "../../types/DTO/backlogDTO";
 import CategoryChip from "./CategoryChip";
 import useEpicEmitEvent from "../../hooks/pages/backlog/useEpicEmitEvent";
 import { CATEGORY_COLOR } from "../../constants/backlog";
 import getRandomNumber from "../../utils/getRandomNumber";
-import { BacklogCategoryColor } from "../../types/common/backlog";
+import {
+  BacklogCategoryColor,
+  BacklogSocketData,
+  BacklogSocketDomain,
+  BacklogSocketEpicAction,
+} from "../../types/common/backlog";
 import EpicDropdownOption from "./EpicDropdownOption";
 
 interface EpicDropdownProps {
@@ -23,6 +28,13 @@ const EpicDropdown = ({
   const { socket }: { socket: Socket } = useOutletContext();
   const { emitEpicCreateEvent } = useEpicEmitEvent(socket);
   const [value, setValue] = useState("");
+  const inputElementRef = useRef<HTMLInputElement | null>(null);
+  const epicColor = useMemo(() => {
+    const colors = Object.keys(CATEGORY_COLOR);
+    return colors[
+      getRandomNumber(0, colors.length - 1)
+    ] as BacklogCategoryColor;
+  }, []);
 
   const handleInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
     const { value } = target;
@@ -42,20 +54,35 @@ const EpicDropdown = ({
       }
 
       setValue("");
-      const colors = Object.keys(CATEGORY_COLOR);
-      const color = colors[
-        getRandomNumber(0, colors.length - 1)
-      ] as BacklogCategoryColor;
-      emitEpicCreateEvent({ name: value, color });
+      emitEpicCreateEvent({ name: value, color: epicColor });
     }
   };
 
   const handleEpicChange = (epicId: number | undefined) => {
     onEpicChange(epicId);
   };
 
+  const handleEpicEvent = ({ domain, action, content }: BacklogSocketData) => {
+    if (
+      domain === BacklogSocketDomain.EPIC &&
+      action === BacklogSocketEpicAction.CREATE &&
+      !selectedEpic
+    ) {
+      onEpicChange(content.id);
+    }
+  };
+
+  useEffect(() => {
+    socket.on("backlog", handleEpicEvent);
+    inputElementRef.current?.focus();
+
+    return () => {
+      socket.off("backlog", handleEpicEvent);
+    };
+  }, []);
+
   return (
-    <div className="absolute p-1 bg-white rounded-md w-72 shadow-box">
+    <div className="absolute z-10 p-1 bg-white rounded-md w-72 shadow-box">
       <div className="flex p-1 border-b-2">
         {selectedEpic && (
           <div className="min-w-[5rem]">
@@ -72,6 +99,7 @@ const EpicDropdown = ({
           value={value}
           onChange={handleInputChange}
           onKeyDown={handleEnterKeydown}
+          ref={inputElementRef}
         />
       </div>
       <ul className="pt-1">
@@ -90,6 +118,12 @@ const EpicDropdown = ({
           </li>
         ))}
       </ul>
+      {value && (
+        <div className="flex items-center gap-2 p-1">
+          <span>생성</span>
+          <CategoryChip content={value} bgColor={epicColor} />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/frontend/src/components/backlog/StoryBlock.tsx b/frontend/src/components/backlog/StoryBlock.tsx
@@ -50,12 +50,14 @@ const StoryBlock = ({
     handleUpdating: handleTitleUpdatingOpen,
     inputContainerRef: titleRef,
     inputElementRef: titleInputRef,
+    handleEnterKeyup: handleTitleEnterKeyup,
   } = useBacklogInputChange(updateTitle);
   const {
     updating: pointUpdating,
     handleUpdating: handlePointUpdatingOpen,
     inputContainerRef: pointRef,
     inputElementRef: pointInputRef,
+    handleEnterKeyup: handlePointEnterKeyup,
   } = useBacklogInputChange(updatePoint);
   const {
     open: statusUpdating,
@@ -91,16 +93,22 @@ const StoryBlock = ({
     emitStoryUpdateEvent({ id, title: data as string });
   }
   function updatePoint<T>(data: T) {
-    if ((!data && data !== 0) || data === point) {
+    const newPoint = Number(data);
+    if ((!data && data !== 0) || newPoint === point) {
       return;
     }
 
-    if ((data as number) < 0 || (data as number) > 100) {
+    if (newPoint < 0 || newPoint > 100) {
       alert("스토리 포인트는 0이상 100이하여야 합니다.");
       return;
     }
 
-    emitStoryUpdateEvent({ id, point: Number(data) });
+    if (!Number.isInteger(newPoint)) {
+      alert("포인트는 정수여야 합니다.");
+      return;
+    }
+
+    emitStoryUpdateEvent({ id, point: newPoint });
   }
 
   function updateStatus(data: BacklogStatusType) {
@@ -208,6 +216,7 @@ const StoryBlock = ({
               type="text"
               ref={titleInputRef}
               defaultValue={title}
+              onKeyUp={handleTitleEnterKeyup}
             />
           ) : (
             <span
@@ -225,13 +234,14 @@ const StoryBlock = ({
         >
           {pointUpdating ? (
             <input
-              className={`w-fit min-w-[1rem] max-w-[3.5rem] no-arrows text-right focus:outline-none rounded-sm bg-gray-200 hover:cursor-pointer`}
+              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>{point}</span>
+            <span className="min-w-[1.75rem] text-right">{point}</span>
           )}
 
           <span> POINT</span>
diff --git a/frontend/src/components/backlog/StoryCreateForm.tsx b/frontend/src/components/backlog/StoryCreateForm.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, FormEvent, useMemo, useState } from "react";
+import { ChangeEvent, FormEvent, useEffect, useMemo, useState } from "react";
 import Check from "../../assets/icons/check.svg?react";
 import Closed from "../../assets/icons/closed.svg?react";
 import CategoryChip from "./CategoryChip";
@@ -34,7 +34,8 @@ const StoryCreateForm = ({ onCloseClick, epicList }: StoryCreateFormProps) => {
 
   const handlePointChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
     const { value } = target;
-    setStoryFormData({ title, point: Number(value), epicId, status });
+    const newPoint = value === "" ? undefined : Number(value);
+    setStoryFormData({ title, point: newPoint, epicId, status });
   };
 
   const handleSubmit = (event: FormEvent) => {
@@ -90,6 +91,12 @@ const StoryCreateForm = ({ onCloseClick, epicList }: StoryCreateFormProps) => {
     [epicId, epicList]
   );
 
+  useEffect(() => {
+    if (!epicList.filter(({ id }) => id === epicId).length) {
+      setStoryFormData({ title, point, status, epicId: undefined });
+    }
+  }, [epicList]);
+
   return (
     <form
       className="flex items-center w-full py-1 border-t border-b"
@@ -102,8 +109,8 @@ const StoryCreateForm = ({ onCloseClick, epicList }: StoryCreateFormProps) => {
       >
         {epicId && (
           <CategoryChip
-            content={selectedEpic.name}
-            bgColor={selectedEpic.color}
+            content={selectedEpic?.name}
+            bgColor={selectedEpic?.color}
           />
         )}
         {open && (
diff --git a/frontend/src/components/backlog/TaskBlock.tsx b/frontend/src/components/backlog/TaskBlock.tsx
@@ -30,18 +30,21 @@ const TaskBlock = ({
     inputElementRef: titleInputRef,
     updating: titleUpdating,
     handleUpdating: handleTitleUpdating,
+    handleEnterKeyup: handleTitleKeyup,
   } = useBacklogInputChange(updateTitle);
   const {
     inputContainerRef: expectedTimeRef,
     inputElementRef: expectedTimeInputRef,
     updating: expectedTimeUpdating,
     handleUpdating: handleExpectedTimeUpdating,
+    handleEnterKeyup: handleExpectedTimeKeyup,
   } = useBacklogInputChange(updateExpectedTime);
   const {
     inputContainerRef: actualTimeRef,
     inputElementRef: actualTimeInputRef,
     updating: actualTimeUpdating,
     handleUpdating: handleActualTimeUpdating,
+    handleEnterKeyup: handleActualTimeKeyup,
   } = useBacklogInputChange(updateActualTime);
   const {
     open: assignedMemberUpdating,
@@ -78,7 +81,12 @@ const TaskBlock = ({
   }, [assignedMemberId, partialMemberList]);
 
   function updateTitle<T>(data: T) {
-    if (!data || data === title) {
+    if (data === title) {
+      return;
+    }
+
+    if (!data) {
+      alert("태스크 타이틀을 입력해주세요");
       return;
     }
 
@@ -189,7 +197,7 @@ const TaskBlock = ({
         onContextMenu={(event) => event.preventDefault()}
         ref={blockRef}
       >
-        <p className="w-[4rem]">Task-{displayId}</p>
+        <p className="w-[4rem] truncate">Task-{displayId}</p>
         <div
           className="w-[25rem] min-h-[1.5rem] hover:cursor-pointer truncate"
           ref={titleRef}
@@ -201,6 +209,7 @@ const TaskBlock = ({
               ref={titleInputRef}
               defaultValue={title}
               type="text"
+              onKeyUp={handleTitleKeyup}
             />
           ) : (
             <span title={title}>{title}</span>
@@ -232,6 +241,7 @@ const TaskBlock = ({
               ref={expectedTimeInputRef}
               defaultValue={expectedTime === null ? "" : expectedTime}
               type="number"
+              onKeyUp={handleExpectedTimeKeyup}
             />
           ) : (
             <p className="max-w-full text-right">{expectedTime}</p>
@@ -248,6 +258,7 @@ const TaskBlock = ({
               ref={actualTimeInputRef}
               defaultValue={actualTime === null ? "" : actualTime}
               type="number"
+              onKeyUp={handleActualTimeKeyup}
             />
           ) : (
             <p className="min-w-full text-right">{actualTime}</p>
diff --git a/frontend/src/components/backlog/TaskCreateForm.tsx b/frontend/src/components/backlog/TaskCreateForm.tsx
@@ -76,7 +76,7 @@ const TaskCreateForm = ({ onCloseClick, storyId }: TaskCreateFormProps) => {
   };
 
   return (
-    <form className="flex items-center justify-between px-1 py-1 border-b">
+    <form className="flex items-center justify-between py-1 border-b">
       <div className="w-[4rem]" />
       <input
         type="text"
diff --git a/frontend/src/hooks/pages/backlog/useBacklogInputChange.ts b/frontend/src/hooks/pages/backlog/useBacklogInputChange.ts
@@ -26,6 +26,21 @@ const useBacklogInputChange = (update: <T>(data: T) => void) => {
     }
   };
 
+  const handleEnterKeyup = (event: React.KeyboardEvent) => {
+    if (event.nativeEvent.isComposing) {
+      return;
+    }
+
+    if (!updating) {
+      return;
+    }
+
+    if (event.code === "Enter" && inputElementRef.current) {
+      update(inputElementRef.current.value);
+      setUpdating(false);
+    }
+  };
+
   useEffect(() => {
     window.addEventListener("mouseup", handleOutsideClick);
 
@@ -34,7 +49,19 @@ const useBacklogInputChange = (update: <T>(data: T) => void) => {
     };
   }, [updating]);
 
-  return { updating, inputContainerRef, inputElementRef, handleUpdating };
+  useEffect(() => {
+    if (updating) {
+      inputElementRef.current?.focus();
+    }
+  }, [updating]);
+
+  return {
+    updating,
+    inputContainerRef,
+    inputElementRef,
+    handleUpdating,
+    handleEnterKeyup,
+  };
 };
 
 export default useBacklogInputChange;
diff --git a/frontend/src/hooks/pages/backlog/useBacklogSocket.ts b/frontend/src/hooks/pages/backlog/useBacklogSocket.ts
@@ -76,23 +76,23 @@ const useBacklogSocket = (socket: Socket) => {
         break;
       case BacklogSocketStoryAction.UPDATE:
         if (content.epicId) {
-          let targetStory: StoryDTO | null = null;
-          backlog.epicList.some((epic) => {
-            const foundStory = epic.storyList.find(
-              (story) => story.id === content.id
-            );
-            if (foundStory) {
-              targetStory = { ...foundStory };
-              return true;
-            }
-            return false;
-          });
+          setBacklog((prevBacklog) => {
+            let targetStory: StoryDTO | null = null;
+            backlog.epicList.some((epic) => {
+              const foundStory = epic.storyList.find(
+                (story) => story.id === content.id
+              );
+              if (foundStory) {
+                targetStory = { ...foundStory };
+                return true;
+              }
+              return false;
+            });
 
-          if (!targetStory) {
-            break;
-          }
+            if (!targetStory) {
+              return prevBacklog;
+            }
 
-          setBacklog((prevBacklog) => {
             const newEpicList = prevBacklog.epicList.map((epic) => {
               const newStoryList = epic.storyList.filter((story) => {
                 if (story.id === content.id) {
diff --git a/frontend/src/pages/backlog/UnfinishedStoryPage.tsx b/frontend/src/pages/backlog/UnfinishedStoryPage.tsx
