From 6daeb57dcd25036c19d29f33cd0ce96efb5f86e0 Mon Sep 17 00:00:00 2001
From: pipisebastian <yrt7998@pusan.ac.kr>
Date: Thu, 28 Nov 2024 04:49:49 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EB=B3=80=EC=88=98=EB=AA=85=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=ED=95=A8=EC=88=98=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#213
---
 client/src/features/editor/Editor.tsx            | 16 +++++++++++++---
 .../features/editor/components/block/Block.tsx   |  6 +++---
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/src/features/editor/Editor.tsx b/client/src/features/editor/Editor.tsx
index f888dc0b..7c09b277 100644
--- a/client/src/features/editor/Editor.tsx
+++ b/client/src/features/editor/Editor.tsx
@@ -1,4 +1,4 @@
-import { DndContext } from "@dnd-kit/core";
+import { DndContext, DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { EditorCRDT } from "@noctaCrdt/Crdt";
 import { BlockLinkedList } from "@noctaCrdt/LinkedList";
@@ -47,6 +47,7 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
   const [displayTitle, setDisplayTitle] = useState(
     pageTitle === "새로운 페이지" || pageTitle === "" ? "" : pageTitle,
   );
+  const [dragBlockList, setDragBlockList] = useState<string[]>([]);
 
   const editorCRDTInstance = useMemo(() => {
     let newEditorCRDT;
@@ -67,7 +68,7 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
     linkedList: editorCRDT.current.LinkedList,
   });
 
-  const { sensors, handleDragEnd } = useBlockDragAndDrop({
+  const { sensors, handleDragEnd, handleDragStart } = useBlockDragAndDrop({
     editorCRDT: editorCRDT.current,
     editorState,
     setEditorState,
@@ -324,7 +325,15 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
           className={editorTitle}
         />
         <div style={{ height: "36px" }}></div>
-        <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
+        <DndContext
+          onDragEnd={(event: DragEndEvent) => {
+            handleDragEnd(event, dragBlockList, () => setDragBlockList([]));
+          }}
+          onDragStart={(event) => {
+            handleDragStart(event, setDragBlockList);
+          }}
+          sensors={sensors}
+        >
           <SortableContext
             items={editorState.linkedList
               .spread()
@@ -350,6 +359,7 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
                 onTextStyleUpdate={onTextStyleUpdate}
                 onTextColorUpdate={onTextColorUpdate}
                 onTextBackgroundColorUpdate={onTextBackgroundColorUpdate}
+                dragBlockList={dragBlockList}
               />
             ))}
           </SortableContext>
diff --git a/client/src/features/editor/components/block/Block.tsx b/client/src/features/editor/components/block/Block.tsx
index 58626df7..9958f308 100644
--- a/client/src/features/editor/components/block/Block.tsx
+++ b/client/src/features/editor/components/block/Block.tsx
@@ -29,7 +29,7 @@ import {
 interface BlockProps {
   id: string;
   block: CRDTBlock;
-  draggingBlock: String[];
+  dragBlockList: string[];
   isActive: boolean;
   onInput: (e: React.FormEvent<HTMLDivElement>, block: CRDTBlock) => void;
   onCompositionEnd: (e: React.CompositionEvent<HTMLDivElement>, block: CRDTBlock) => void;
@@ -69,7 +69,7 @@ export const Block: React.FC<BlockProps> = memo(
   ({
     id,
     block,
-    draggingBlock,
+    dragBlockList,
     isActive,
     onInput,
     onCompositionEnd,
@@ -100,7 +100,7 @@ export const Block: React.FC<BlockProps> = memo(
       });
 
     // 현재 드래그 중인 부모 블록의 indent 확인
-    const isChildOfDragging = draggingBlock.some((item) => item === data.id);
+    const isChildOfDragging = dragBlockList.some((item) => item === data.id);
 
     // NOTE 드롭 인디케이터 위치 계산
     // 현재 over 중인 블럭 위치 + 위/아래로 모두 인디케이터 표시 + 부모요소는 자식요소 내부로는 이동하지 못함