Feature/#147_CRDT라이브러리_local_및_remoteReOrder추가

@noctaCrdt/Crdt.ts

@@ -1,7 +1,12 @@
 import { LinkedList } from "./LinkedList";
 import { CharId, BlockId, NodeId } from "./NodeId";
 import { Node, Char, Block } from "./Node";
-import { RemoteDeleteOperation, RemoteInsertOperation, SerializedProps } from "./Interfaces";
+import {
+  RemoteDeleteOperation,
+  RemoteInsertOperation,
+  SerializedProps,
+  RemoteReorderOperation,
+} from "./Interfaces";
 
 export class CRDT<T extends Node<NodeId>> {
   clock: number;
@@ -72,6 +77,37 @@ export class CRDT<T extends Node<NodeId>> {
     }
   }
 
+  localReorder(params: {
+    targetId: NodeId;
+    beforeId: NodeId | null;
+    afterId: NodeId | null;
+  }): RemoteReorderOperation {
+    const operation: RemoteReorderOperation = {
+      ...params,
+      clock: this.clock + 1,
+      client: this.client,
+    };
+
+    this.LinkedList.reorderNodes(params);
+    this.clock += 1;
+
+    return operation;
+  }
+
+  remoteReorder(operation: RemoteReorderOperation): void {
+    const { targetId, beforeId, afterId, clock } = operation;
+
+    this.LinkedList.reorderNodes({
+      targetId,
+      beforeId,
+      afterId,
+    });
+
+    if (this.clock <= clock) {
+      this.clock = clock + 1;
+    }
+  }
+
   read(): string {
     return this.LinkedList.stringify();
   }

@noctaCrdt/Interfaces.ts

@@ -36,43 +36,16 @@ export interface SerializedProps<T> {
   };
 }
 
-// export interface WorkSpace {
-//   id: string;
-//   pageList: Page[];
-//   authUser: object;
-// }
-
-// export interface Page {
-//   id: string;
-//   title: string;
-//   icon: string; // 추후 수정
-//   crdt: EditorCRDT;
-// }
-// export interface LinkedList {
-//   head: NodeId | null;
-//   nodeMap: { [key: string]: Block | Char };
-// }
-
-// export interface Block {
-//   id: BlockId;
-//   icon: string; // 추후 수정
-//   type: ElementType;
-//   animation: string;
-//   crdt: BlockCRDT;
-//   indent: number;
-//   next: NodeId;
-//   prev: NodeId;
-//   style: string[];
-// }
-
-// export interface Char {
-//   id: NodeId;
-//   value: string;
-//   next: NodeId | null;
-//   prev: NodeId | null;
-// }
+export interface ReorderNodesProps {
+  targetId: BlockId;
+  beforeId: BlockId | null;
+  afterId: BlockId | null;
+}
 
-// export interface BlockId {
-//   clock: number;
-//   client: number;
-// }
+export interface RemoteReorderOperation {
+  targetId: NodeId;
+  beforeId: NodeId | null;
+  afterId: NodeId | null;
+  clock: number;
+  client: number;
+}

@noctaCrdt/LinkedList.ts

@@ -1,6 +1,6 @@
 import { Node, Char, Block } from "./Node";
 import { NodeId } from "./NodeId";
-import { InsertOperation } from "./Interfaces";
+import { InsertOperation, ReorderNodesProps } from "./Interfaces";
 
 export class LinkedList<T extends Node<NodeId>> {
   head: T["id"] | null;
@@ -55,16 +55,9 @@ export class LinkedList<T extends Node<NodeId>> {
     delete this.nodeMap[JSON.stringify(id)];
   }
 
-  reorderNodes(oldIndex: number, newIndex: number): LinkedList<T> {
-    if (oldIndex === newIndex) return this;
-
-    const nodes = this.spread();
-    if (oldIndex < 0 || oldIndex >= nodes.length || newIndex < 0 || newIndex >= nodes.length) {
-      throw new Error("Invalid index for reordering");
-    }
-
-    // 이동할 노드
-    const targetNode = nodes[oldIndex];
+  reorderNodes({ targetId, beforeId, afterId }: ReorderNodesProps): void {
+    const targetNode = this.getNode(targetId);
+    if (!targetNode) return;
 
     // 1. 기존 연결 해제
     if (targetNode.prev) {
@@ -84,54 +77,42 @@ export class LinkedList<T extends Node<NodeId>> {
     }
 
     // 2. 새로운 위치에 연결
-    // oldIndex가 newIndex보다 큰 경우(위로 이동)와 작은 경우(아래로 이동)를 구분
-    if (oldIndex < newIndex) {
-      // 아래로 이동하는 경우
-      if (newIndex === nodes.length - 1) {
-        // 맨 끝으로 이동
-        const lastNode = nodes[nodes.length - 1];
-        lastNode.next = targetNode.id;
-        targetNode.prev = lastNode.id;
+    if (!beforeId) {
+      // 맨 앞으로 이동
+      const oldHead = this.head;
+      this.head = targetId;
+      targetNode.prev = null;
+      targetNode.next = oldHead;
+
+      if (oldHead) {
+        const headNode = this.getNode(oldHead);
+        if (headNode) {
+          headNode.prev = targetId;
+        }
+      }
+    } else if (!afterId) {
+      // 맨 끝으로 이동
+      const beforeNode = this.getNode(beforeId);
+      if (beforeNode) {
+        beforeNode.next = targetId;
+        targetNode.prev = beforeId;
         targetNode.next = null;
-      } else {
-        const afterNode = nodes[newIndex + 1];
-        const beforeNode = nodes[newIndex];
-
-        targetNode.prev = beforeNode.id;
-        targetNode.next = afterNode.id;
-        beforeNode.next = targetNode.id;
-        afterNode.prev = targetNode.id;
       }
     } else {
-      // 위로 이동하는 경우
-      if (newIndex === 0) {
-        // 맨 앞으로 이동
-        const oldHead = this.head;
-        this.head = targetNode.id;
-        targetNode.prev = null;
-        targetNode.next = oldHead;
-
-        if (oldHead) {
-          const headNode = this.getNode(oldHead);
-          if (headNode) {
-            headNode.prev = targetNode.id;
-          }
-        }
-      } else {
-        const beforeNode = nodes[newIndex - 1];
-        const afterNode = nodes[newIndex];
-
-        targetNode.prev = beforeNode.id;
-        targetNode.next = afterNode.id;
-        beforeNode.next = targetNode.id;
-        afterNode.prev = targetNode.id;
+      // 중간으로 이동
+      const beforeNode = this.getNode(beforeId);
+      const afterNode = this.getNode(afterId);
+
+      if (beforeNode && afterNode) {
+        targetNode.prev = beforeId;
+        targetNode.next = afterId;
+        beforeNode.next = targetId;
+        afterNode.prev = targetId;
       }
     }
 
     // 노드맵 갱신
-    this.setNode(targetNode.id, targetNode);
-
-    return this;
+    this.setNode(targetId, targetNode);
   }
 
   findByIndex(index: number): T {

client/src/features/editor/hooks/useBlockDragAndDrop.ts

@@ -1,7 +1,6 @@
 // hooks/useBlockDragAndDrop.ts
 import { DragEndEvent, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { EditorCRDT } from "@noctaCrdt/Crdt";
-import { BlockLinkedList } from "@noctaCrdt/LinkedList";
 import { EditorStateProps } from "../Editor";
 
 interface UseBlockDragAndDropProps {
@@ -29,19 +28,58 @@ export const useBlockDragAndDrop = ({
     if (!over || active.id === over.id) return;
 
     try {
-      const oldIndex = editorState.linkedList
-        .spread()
-        .findIndex((block) => `${block.id.client}-${block.id.clock}` === active.id);
-      const newIndex = editorState.linkedList
-        .spread()
-        .findIndex((block) => `${block.id.client}-${block.id.clock}` === over.id);
-
-      // EditorCRDT 업데이트
-      editorCRDT.LinkedList = new BlockLinkedList(editorState.linkedList);
-      editorCRDT.LinkedList.reorderNodes(oldIndex, newIndex);
-      editorCRDT.clock += 1;
-
-      // 상태 업데이트
+      const nodes = editorState.linkedList.spread();
+
+      // ID 문자열에서 client와 clock 추출
+      const parseNodeId = (idString: string): { client: number; clock: number } => {
+        const [client, clock] = idString.split("-").map(Number);
+        return { client, clock };
+      };
+
+      // 파싱된 ID 정보로 실제 노드 찾기
+      const targetInfo = parseNodeId(active.id as string);
+      const overInfo = parseNodeId(over.id as string);
+
+      // 기존 블록의 ID로 노드 찾기
+      const targetNode = nodes.find(
+        (block) => block.id.client === targetInfo.client && block.id.clock === targetInfo.clock,
+      );
+      const overNode = nodes.find(
+        (block) => block.id.client === overInfo.client && block.id.clock === overInfo.clock,
+      );
+
+      if (!targetNode || !overNode) {
+        throw new Error("Unable to find target or destination node");
+      }
+
+      const targetIndex = nodes.indexOf(targetNode);
+      const overIndex = nodes.indexOf(overNode);
+
+      // 드래그 방향 결정
+      const isMoveDown = targetIndex < overIndex;
+
+      // 드래그 방향에 따라 beforeNode와 afterNode 결정
+      let beforeNode;
+      let afterNode;
+
+      if (isMoveDown) {
+        // 아래로 드래그할 때
+        beforeNode = overNode;
+        afterNode = overIndex < nodes.length - 1 ? nodes[overIndex + 1] : null;
+      } else {
+        // 위로 드래그할 때
+        beforeNode = overIndex > 0 ? nodes[overIndex - 1] : null;
+        afterNode = overNode;
+      }
+
+      // EditorCRDT의 현재 상태로 작업
+      editorCRDT.localReorder({
+        targetId: targetNode.id,
+        beforeId: beforeNode?.id || null,
+        afterId: afterNode?.id || null,
+      });
+
+      // EditorState 업데이트
       setEditorState({
         clock: editorCRDT.clock,
         linkedList: editorCRDT.LinkedList,