feat: 드래그 앤 드랍시 서버로 연산 전송

boostcampwm-2024 · Nov 21, 2024 · f5c8906 · f5c8906
1 parent f80740c
commit f5c8906
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/client/src/features/editor/Editor.tsx b/client/src/features/editor/Editor.tsx
@@ -28,16 +28,6 @@ export interface EditorStateProps {
 }
 // TODO: pageId, editorCRDT를 props로 받아와야함
 export const Editor = ({ onTitleChange, pageId, serializedEditorData }: EditorProps) => {
-  /*
-  const {
-    sendCharInsertOperation,
-    sendCharDeleteOperation,
-    subscribeToRemoteOperations,
-    sendBlockInsertOperation,
-    sendBlockDeleteOperation,
-    sendBlockUpdateOperation,
-  } = useSocket();
-  */
   const {
     sendCharInsertOperation,
     sendCharDeleteOperation,
@@ -62,6 +52,7 @@ export const Editor = ({ onTitleChange, pageId, serializedEditorData }: EditorPr
     editorCRDT: editorCRDT.current,
     editorState,
     setEditorState,
+    pageId,
   });
 
   const { handleKeyDown } = useMarkdownGrammer({
@@ -222,6 +213,18 @@ export const Editor = ({ onTitleChange, pageId, serializedEditorData }: EditorPr
           currentBlock: prev.currentBlock,
         }));
       },
+
+      onRemoteBlockReorder: (operation) => {
+        console.log(operation, "block : 재정렬 확인합니다이");
+        if (!editorCRDT.current) return;
+        editorCRDT.current.remoteReorder(operation);
+        setEditorState((prev) => ({
+          clock: editorCRDT.current.clock,
+          linkedList: editorCRDT.current.LinkedList,
+          currentBlock: prev.currentBlock,
+        }));
+      },
+
       onRemoteCursor: (position) => {
         console.log(position, "커서위치 수신");
       },

diff --git a/client/src/features/editor/hooks/useBlockDragAndDrop.ts b/client/src/features/editor/hooks/useBlockDragAndDrop.ts
@@ -1,18 +1,21 @@
 // hooks/useBlockDragAndDrop.ts
 import { DragEndEvent, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { EditorCRDT } from "@noctaCrdt/Crdt";
+import { useSocketStore } from "@src/stores/useSocketStore.ts";
 import { EditorStateProps } from "../Editor";
 
 interface UseBlockDragAndDropProps {
   editorCRDT: EditorCRDT;
   editorState: EditorStateProps;
   setEditorState: React.Dispatch<React.SetStateAction<EditorStateProps>>;
+  pageId: string;
 }
 
 export const useBlockDragAndDrop = ({
   editorCRDT,
   editorState,
   setEditorState,
+  pageId,
 }: UseBlockDragAndDropProps) => {
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -22,6 +25,8 @@ export const useBlockDragAndDrop = ({
     }),
   );
 
+  const { sendBlockReorderOperation } = useSocketStore();
+
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
 
@@ -73,12 +78,15 @@ export const useBlockDragAndDrop = ({
       }
 
       // EditorCRDT의 현재 상태로 작업
-      editorCRDT.localReorder({
+      const operation = editorCRDT.localReorder({
         targetId: targetNode.id,
         beforeId: beforeNode?.id || null,
         afterId: afterNode?.id || null,
+        pageId,
       });
 
+      sendBlockReorderOperation(operation);
+
       // EditorState 업데이트
       setEditorState({
         clock: editorCRDT.clock,