fix: 에픽을 생성한 후 다음 생성하는 에픽의 색상이 변경되도록 수정

Author: surinkwon

frontend/src/components/backlog/EpicDropdown.tsx

@@ -1,19 +1,18 @@
-import { ChangeEvent, useEffect, useMemo, useRef, useState } from "react";
+import { ChangeEvent, useEffect, 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,
   BacklogSocketData,
   BacklogSocketDomain,
   BacklogSocketEpicAction,
 } from "../../types/common/backlog";
 import EpicDropdownOption from "./EpicDropdownOption";
 import { LexoRank } from "lexorank";
+import getNewColor from "../../utils/getNewColor";
 
 interface EpicDropdownProps {
   selectedEpic?: EpicCategoryDTO;
@@ -29,13 +28,10 @@ const EpicDropdown = ({
   const { socket }: { socket: Socket } = useOutletContext();
   const { emitEpicCreateEvent } = useEpicEmitEvent(socket);
   const [value, setValue] = useState("");
+  const [epicColor, setEpicColor] = useState(
+    getNewColor(Object.keys(CATEGORY_COLOR))
+  );
   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;
@@ -60,8 +56,9 @@ const EpicDropdown = ({
             .toString()
         : LexoRank.middle().toString();
 
-      setValue("");
       emitEpicCreateEvent({ name: value, color: epicColor, rankValue });
+      setValue("");
+      setEpicColor(getNewColor(Object.keys(CATEGORY_COLOR)));
     }
   };
 

frontend/src/utils/getNewColor.ts

@@ -0,0 +1,7 @@
+import { BacklogCategoryColor } from "../types/common/backlog";
+import getRandomNumber from "./getRandomNumber";
+
+const getNewColor = (colors: string[]) =>
+  colors[getRandomNumber(0, colors.length - 1)] as BacklogCategoryColor;
+
+export default getNewColor;