feat: 에픽별 페이지에 에픽이 없을 경우 에픽 생성 버튼 표시

Author: surinkwon

frontend/src/components/backlog/EpicCreateButton.tsx

@@ -0,0 +1,18 @@
+import Plus from "../../assets/icons/plus.svg?react";
+
+interface EpicCreateButtonProps {
+  onClick: () => void;
+}
+
+const EpicCreateButton = ({ onClick }: EpicCreateButtonProps) => (
+  <button
+    type="button"
+    className="flex items-center justify-center w-full gap-2 py-1 rounded-md bg-middle-green"
+    onClick={onClick}
+  >
+    <Plus width={24} height={24} stroke="white" />
+    <span className="text-white">Epic 생성하기</span>
+  </button>
+);
+
+export default EpicCreateButton;

frontend/src/components/backlog/EpicCreateForm.tsx

@@ -0,0 +1,72 @@
+import { ChangeEvent, useRef, useState } from "react";
+import { useOutletContext } from "react-router-dom";
+import { Socket } from "socket.io-client";
+import { LexoRank } from "lexorank";
+import useEpicEmitEvent from "../../hooks/pages/backlog/useEpicEmitEvent";
+import { CATEGORY_COLOR } from "../../constants/backlog";
+import getNewColor from "../../utils/getNewColor";
+import Check from "../../assets/icons/check.svg?react";
+import Closed from "../../assets/icons/closed.svg?react";
+
+interface EpicCreateFormProps {
+  onCloseClick: () => void;
+}
+
+const EpicCreateForm = ({ onCloseClick }: EpicCreateFormProps) => {
+  const [value, setValue] = useState("");
+  const [epicColor] = useState(getNewColor(Object.keys(CATEGORY_COLOR)));
+  const { socket }: { socket: Socket } = useOutletContext();
+  const { emitEpicCreateEvent } = useEpicEmitEvent(socket);
+
+  const inputElementRef = useRef<HTMLInputElement | null>(null);
+
+  const handleInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+    const { value } = target;
+
+    setValue(value);
+  };
+
+  const handleSubmit = () => {
+    if (value.length > 10) {
+      alert("에픽 이름은 10자 이하여야 합니다.");
+      return;
+    }
+
+    emitEpicCreateEvent({
+      name: value,
+      color: epicColor,
+      rankValue: LexoRank.middle().toString(),
+    });
+    setValue("");
+    onCloseClick();
+  };
+
+  return (
+    <form className="flex items-center w-full py-1" onSubmit={handleSubmit}>
+      <input
+        className="w-full mr-3 bg-gray-200 rounded-sm focus:outline-none hover:cursor-pointer"
+        type="text"
+        ref={inputElementRef}
+        onChange={handleInputChange}
+      />
+      <div className="flex items-center gap-2">
+        <button
+          className="flex items-center justify-center w-6 h-6 rounded-md bg-confirm-green"
+          type="button"
+          onClick={handleSubmit}
+        >
+          <Check width={20} height={20} stroke="white" />
+        </button>
+        <button
+          className="flex items-center justify-center w-6 h-6 rounded-md bg-error-red"
+          type="button"
+          onClick={onCloseClick}
+        >
+          <Closed stroke="white" />
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default EpicCreateForm;

frontend/src/pages/backlog/EpicPage.tsx

@@ -1,24 +1,27 @@
 import { DragEvent, useEffect, useMemo, useRef, useState } from "react";
 import { useOutletContext } from "react-router-dom";
-import { BacklogDTO, StoryDTO, TaskDTO } from "../../types/DTO/backlogDTO";
+import { Socket } from "socket.io-client";
+import { LexoRank } from "lexorank";
+import useStoryEmitEvent from "../../hooks/pages/backlog/useStoryEmitEvent";
+import useTaskEmitEvent from "../../hooks/pages/backlog/useTaskEmitEvent";
+import getDragElementIndex from "../../utils/getDragElementIndex";
+import useEpicEmitEvent from "../../hooks/pages/backlog/useEpicEmitEvent";
+import useShowDetail from "../../hooks/pages/backlog/useShowDetail";
 import StoryCreateButton from "../../components/backlog/StoryCreateButton";
 import StoryCreateForm from "../../components/backlog/StoryCreateForm";
 import StoryBlock from "../../components/backlog/StoryBlock";
 import TaskBlock from "../../components/backlog/TaskBlock";
 import EpicBlock from "../../components/backlog/EpicBlock";
 import TaskContainer from "../../components/backlog/TaskContainer";
 import TaskHeader from "../../components/backlog/TaskHeader";
-import { Socket } from "socket.io-client";
-import useStoryEmitEvent from "../../hooks/pages/backlog/useStoryEmitEvent";
-import useTaskEmitEvent from "../../hooks/pages/backlog/useTaskEmitEvent";
-import getDragElementIndex from "../../utils/getDragElementIndex";
-import { LexoRank } from "lexorank";
-import useEpicEmitEvent from "../../hooks/pages/backlog/useEpicEmitEvent";
-import { BacklogSocketData } from "../../types/common/backlog";
 import EpicPageStoryDragContainer from "../../components/backlog/EpicPageStoryDragContainer";
 import EpicPageTaskDragContainer from "../../components/backlog/EpicPageTaskDragContainer";
 import EpicDragContainer from "../../components/backlog/EpicDragContainer";
 import TaskCreateBlock from "../../components/backlog/TaskCreateBlock";
+import EpicCreateButton from "../../components/backlog/EpicCreateButton";
+import { BacklogSocketData } from "../../types/common/backlog";
+import { BacklogDTO, StoryDTO, TaskDTO } from "../../types/DTO/backlogDTO";
+import EpicCreateForm from "../../components/backlog/EpicCreateForm";
 
 const EpicPage = () => {
   const { socket, backlog }: { socket: Socket; backlog: BacklogDTO } =
@@ -29,6 +32,10 @@ const EpicPage = () => {
   const [showStory, setShowStory] = useState<{
     [key: number]: { showStoryList: boolean; showStoryForm: boolean };
   }>({});
+  const {
+    showDetail: showEpicCreateForm,
+    handleShowDetail: handleShowEpicCreateForm,
+  } = useShowDetail();
 
   useEffect(() => {
     setShowStory((prevShowStory) => {
@@ -469,7 +476,18 @@ const EpicPage = () => {
   };
 
   return (
-    <div className="gap-4 pb-10" onDragOver={handleEpicDragOver}>
+    <div className="gap-4 pb-10 border-t" onDragOver={handleEpicDragOver}>
+      {!epicList.length && (
+        <div className="mt-4">
+          {showEpicCreateForm ? (
+            <EpicCreateForm
+              onCloseClick={() => handleShowEpicCreateForm(false)}
+            />
+          ) : (
+            <EpicCreateButton onClick={() => handleShowEpicCreateForm(true)} />
+          )}
+        </div>
+      )}
       {...epicList.map(
         ({ id: epicId, name, color, rankValue, storyList }, epicIndex) => {
           storyComponentRefList.current[epicIndex] = [];