From e8d18a400296aed53b7323979f77cc2d437560e8 Mon Sep 17 00:00:00 2001 From: surinkwon Date: Tue, 6 Aug 2024 17:53:00 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=EB=93=9C=EB=9E=98=EA=B7=B8=20?= =?UTF-8?q?=EC=8B=9C=20=EC=9D=B8=EB=8D=B1=EC=8A=A4=EB=A5=BC=20=ED=86=B5?= =?UTF-8?q?=ED=95=B4=20=EC=A1=B0=EC=A0=95=ED=95=98=EB=8D=98=20=EA=B2=83?= =?UTF-8?q?=EC=9D=84=20id=20=EA=B0=92=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/backlog/UnfinishedStoryPage.tsx | 48 ++++++++++++++----- frontend/src/utils/getDragElementIndex.ts | 1 - 2 files changed, 37 insertions(+), 12 deletions(-) diff --git a/frontend/src/pages/backlog/UnfinishedStoryPage.tsx b/frontend/src/pages/backlog/UnfinishedStoryPage.tsx index 18eaa31..d2aa344 100644 --- a/frontend/src/pages/backlog/UnfinishedStoryPage.tsx +++ b/frontend/src/pages/backlog/UnfinishedStoryPage.tsx @@ -4,13 +4,14 @@ import { LexoRank } from "lexorank"; import { BacklogDTO } from "../../types/DTO/backlogDTO"; import StoryCreateButton from "../../components/backlog/StoryCreateButton"; import StoryCreateForm from "../../components/backlog/StoryCreateForm"; -import { DragEvent, useMemo, useRef, useState } from "react"; +import { DragEvent, useEffect, useMemo, useRef, useState } from "react"; import changeEpicListToStoryList from "../../utils/changeEpicListToStoryList"; import StoryBlock from "../../components/backlog/StoryBlock"; import TaskBlock from "../../components/backlog/TaskBlock"; import useShowDetail from "../../hooks/pages/backlog/useShowDetail"; import useStoryEmitEvent from "../../hooks/pages/backlog/useStoryEmitEvent"; import getDragElementIndex from "../../utils/getDragElementIndex"; +import { BacklogSocketData } from "../../types/common/backlog"; const UnfinishedStoryPage = () => { const { socket, backlog }: { socket: Socket; backlog: BacklogDTO } = @@ -18,7 +19,7 @@ const UnfinishedStoryPage = () => { const { showDetail, handleShowDetail } = useShowDetail(); const [storyElementIndex, setStoryElementIndex] = useState(); const storyComponentRefList = useRef([]); - const draggingComponentIndexRef = useRef(); + const draggingComponentIdRef = useRef(); const storyList = useMemo( () => changeEpicListToStoryList(backlog.epicList).sort((storyA, storyB) => { @@ -52,23 +53,26 @@ const UnfinishedStoryPage = () => { event.preventDefault(); const index = getDragElementIndex( storyComponentRefList.current, - draggingComponentIndexRef.current, + draggingComponentIdRef.current, event.clientY ); setStoryElementIndex(index); }; - const handleDragStart = (index: number) => { - draggingComponentIndexRef.current = index; + const handleDragStart = (id: number) => { + draggingComponentIdRef.current = id; }; const handleDragEnd = (event: DragEvent) => { event.stopPropagation(); + const targetIndex = storyList.findIndex( + ({ id }) => id === draggingComponentIdRef.current + ); let rankValue; - if (storyElementIndex === draggingComponentIndexRef.current) { - draggingComponentIndexRef.current = undefined; + if (storyElementIndex === targetIndex) { + draggingComponentIdRef.current = undefined; setStoryElementIndex(undefined); return; } @@ -90,14 +94,36 @@ const UnfinishedStoryPage = () => { } emitStoryUpdateEvent({ - id: storyList[draggingComponentIndexRef.current as number].id, + id: draggingComponentIdRef.current as number, rankValue, }); - draggingComponentIndexRef.current = undefined; + draggingComponentIdRef.current = undefined; setStoryElementIndex(undefined); }; + useEffect(() => { + const handleDragEvent = ({ + domain, + action, + content, + }: BacklogSocketData) => { + if ( + domain === "story" && + action === "delete" && + content.id === draggingComponentIdRef.current + ) { + setStoryElementIndex(undefined); + } + }; + + socket.on("backlog", handleDragEvent); + + return () => { + socket.off("backlog", handleDragEvent); + }; + }, []); + return (
@@ -116,7 +142,7 @@ const UnfinishedStoryPage = () => { className="relative" ref={setStoryComponentRef(index)} draggable={true} - onDragStart={() => handleDragStart(index)} + onDragStart={() => handleDragStart(id)} onDragEnd={handleDragEnd} >
{ ref={setStoryComponentRef(storyList.length)} className={`${ storyElementIndex === storyList.length - ? "w-full h-1 bg-blue-400" + ? "w-[67.9rem] h-1 bg-blue-400" : "" } absolute`} /> diff --git a/frontend/src/utils/getDragElementIndex.ts b/frontend/src/utils/getDragElementIndex.ts index 7f85be2..b518ad9 100644 --- a/frontend/src/utils/getDragElementIndex.ts +++ b/frontend/src/utils/getDragElementIndex.ts @@ -7,7 +7,6 @@ const getDragElementIndex = ( (closest, child, index) => { const box = child.getBoundingClientRect(); const offset = y - box.top - box.height / 2; - console.log(offset); if (offset < 0 && offset > closest.offset) { return { offset, index }; From 55aebf76a09fa0e9e8a31228cf2aa3ec7c2cf00c Mon Sep 17 00:00:00 2001 From: surinkwon Date: Tue, 6 Aug 2024 17:54:18 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=99=84=EB=A3=8C=EB=90=9C=20?= =?UTF-8?q?=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=8A=94=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B3=84=20=EB=B0=B1=EB=A1=9C=EA=B7=B8=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EB=B3=B4=EC=9D=B4=EC=A7=80=20=EC=95=8A=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/backlog/UnfinishedStoryPage.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/backlog/UnfinishedStoryPage.tsx b/frontend/src/pages/backlog/UnfinishedStoryPage.tsx index d2aa344..4847143 100644 --- a/frontend/src/pages/backlog/UnfinishedStoryPage.tsx +++ b/frontend/src/pages/backlog/UnfinishedStoryPage.tsx @@ -22,15 +22,17 @@ const UnfinishedStoryPage = () => { const draggingComponentIdRef = useRef(); const storyList = useMemo( () => - changeEpicListToStoryList(backlog.epicList).sort((storyA, storyB) => { - if (storyA.rankValue < storyB.rankValue) { - return -1; - } - if (storyA.rankValue > storyB.rankValue) { - return 1; - } - return 0; - }), + changeEpicListToStoryList(backlog.epicList) + .sort((storyA, storyB) => { + if (storyA.rankValue < storyB.rankValue) { + return -1; + } + if (storyA.rankValue > storyB.rankValue) { + return 1; + } + return 0; + }) + .filter(({ status }) => status !== "완료"), [backlog.epicList] ); const epicCategoryList = useMemo( From 307cb6943ce21eafa600d7b5808fdbc2a6319608 Mon Sep 17 00:00:00 2001 From: surinkwon Date: Tue, 6 Aug 2024 17:58:32 +0900 Subject: [PATCH 3/5] =?UTF-8?q?design:=20=EC=97=90=ED=94=BD=20=EB=93=9C?= =?UTF-8?q?=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EA=B8=B8=EC=9D=B4=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/backlog/EpicDropdown.tsx | 37 ++++++++++--------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/backlog/EpicDropdown.tsx b/frontend/src/components/backlog/EpicDropdown.tsx index fa46f74..cb1aac9 100644 --- a/frontend/src/components/backlog/EpicDropdown.tsx +++ b/frontend/src/components/backlog/EpicDropdown.tsx @@ -89,7 +89,7 @@ const EpicDropdown = ({ }, []); return ( -
+
{selectedEpic && (
@@ -109,27 +109,28 @@ const EpicDropdown = ({ ref={inputElementRef} />
-
    - {...epicList.map((epic) => ( -
  • { - handleEpicChange(epic.id); - }} - > - -
    • - ))} -
- {value && ( + {value ? (
생성
+ ) : ( +
    + {...epicList.map((epic) => ( +
  • { + handleEpicChange(epic.id); + }} + > + +
    • + ))} +
)}
); From 41d167611d368f75d49f3f0e816787b2045df903 Mon Sep 17 00:00:00 2001 From: surinkwon Date: Tue, 6 Aug 2024 18:12:21 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=EC=97=90=ED=94=BD=EC=9D=84=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=ED=95=9C=20=ED=9B=84=20=EB=8B=A4=EC=9D=8C=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1=ED=95=98=EB=8A=94=20=EC=97=90=ED=94=BD?= =?UTF-8?q?=EC=9D=98=20=EC=83=89=EC=83=81=EC=9D=B4=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=EB=90=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/backlog/EpicDropdown.tsx | 17 +++++++---------- frontend/src/utils/getNewColor.ts | 7 +++++++ 2 files changed, 14 insertions(+), 10 deletions(-) create mode 100644 frontend/src/utils/getNewColor.ts diff --git a/frontend/src/components/backlog/EpicDropdown.tsx b/frontend/src/components/backlog/EpicDropdown.tsx index cb1aac9..83d9ff8 100644 --- a/frontend/src/components/backlog/EpicDropdown.tsx +++ b/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(null); - const epicColor = useMemo(() => { - const colors = Object.keys(CATEGORY_COLOR); - return colors[ - getRandomNumber(0, colors.length - 1) - ] as BacklogCategoryColor; - }, []); const handleInputChange = ({ target }: ChangeEvent) => { 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))); } }; diff --git a/frontend/src/utils/getNewColor.ts b/frontend/src/utils/getNewColor.ts new file mode 100644 index 0000000..1e57d8b --- /dev/null +++ b/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; From bc286d958d12e9d8ceff9b95b4dad1cd55a4c0e1 Mon Sep 17 00:00:00 2001 From: surinkwon Date: Tue, 6 Aug 2024 21:45:27 +0900 Subject: [PATCH 5/5] =?UTF-8?q?design:=20=EC=97=90=ED=94=BD=20=EB=93=9C?= =?UTF-8?q?=EB=A1=AD=EB=8B=A4=EC=9A=B4=20height=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/backlog/EpicDropdown.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/backlog/EpicDropdown.tsx b/frontend/src/components/backlog/EpicDropdown.tsx index 83d9ff8..13645f5 100644 --- a/frontend/src/components/backlog/EpicDropdown.tsx +++ b/frontend/src/components/backlog/EpicDropdown.tsx @@ -86,7 +86,7 @@ const EpicDropdown = ({ }, []); return ( -
+
{selectedEpic && (
@@ -112,7 +112,7 @@ const EpicDropdown = ({
) : ( -
    +
      {...epicList.map((epic) => (