refactor: 변수명 변경 및 함수 분리

#213
boostcampwm-2024 · Nov 27, 2024 · 6daeb57 · 6daeb57
1 parent f10ae2b
commit 6daeb57
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git 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
@@ -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 중인 블럭 위치 + 위/아래로 모두 인디케이터 표시 + 부모요소는 자식요소 내부로는 이동하지 못함