작업사항 저장 추후 삭제

Co-authored-by: Yeonkyu Min <[email protected]>

@noctaCrdt/Crdt.ts

@@ -23,7 +23,7 @@ export class CRDT<T extends Node<NodeId>> {
 
   localInsert(index: number, value: string, blockId?: BlockId) {}
 
-  localDelete(index: number, blockId?: BlockId) {}
+  localDelete(index: number, blockId?: BlockId, pageId?: string) {}
 
   remoteInsert(operation: RemoteBlockInsertOperation | RemoteCharInsertOperation) {}
 
@@ -64,7 +64,7 @@ export class EditorCRDT extends CRDT<Block> {
     return { node: remoteInsertion.node } as RemoteBlockInsertOperation;
   }
 
-  localDelete(index: number): RemoteBlockDeleteOperation {
+  localDelete(index: number, blockId: undefined, pageId: string): RemoteBlockDeleteOperation {
     if (index < 0 || index >= this.LinkedList.spread().length) {
       throw new Error(`Invalid index: ${index}`);
     }
@@ -77,6 +77,7 @@ export class EditorCRDT extends CRDT<Block> {
     const operation: RemoteBlockDeleteOperation = {
       targetId: nodeToDelete.id,
       clock: this.clock + 1,
+      pageId,
     };
 
     this.LinkedList.deleteNode(nodeToDelete.id);
@@ -144,6 +145,9 @@ export class EditorCRDT extends CRDT<Block> {
       this.clock = clock + 1;
     }
   }
+  deserialize(): void {
+    return;
+  }
 }
 
 export class BlockCRDT extends CRDT<Char> {
@@ -212,4 +216,7 @@ export class BlockCRDT extends CRDT<Char> {
       this.clock = clock + 1;
     }
   }
+  deserialize(): void {
+    return;
+  }
 }

@noctaCrdt/Interfaces.ts

@@ -1,5 +1,6 @@
 import { NodeId, BlockId, CharId } from "./NodeId";
 import { Block, Char } from "./Node";
+import { Page } from "./Page";
 
 export type ElementType = "p" | "h1" | "h2" | "h3" | "ul" | "ol" | "li" | "checkbox" | "blockquote";
 
@@ -17,6 +18,7 @@ export interface RemoteBlockUpdateOperation {
 }
 export interface RemoteBlockInsertOperation {
   node: Block;
+  pageId: string;
 }
 
 export interface RemoteCharInsertOperation {
@@ -27,6 +29,7 @@ export interface RemoteCharInsertOperation {
 export interface RemoteBlockDeleteOperation {
   targetId: BlockId;
   clock: number;
+  pageId: string;
 }
 
 export interface RemoteCharDeleteOperation {
@@ -56,6 +59,11 @@ export interface ReorderNodesProps {
   afterId: BlockId | null;
 }
 
+export interface WorkSpaceSerializedProps {
+  id: string;
+  pageList: Page[];
+  authUser: Map<string, string>;
+}
 export interface RemoteReorderOperation {
   targetId: BlockId;
   beforeId: BlockId | null;

@noctaCrdt/LinkedList.ts

@@ -246,6 +246,14 @@ export class LinkedList<T extends Node<NodeId>> {
   }
 }
 
-export class BlockLinkedList extends LinkedList<Block> {}
+export class BlockLinkedList extends LinkedList<Block> {
+  deserialize(): void {
+    return;
+  }
+}
 
-export class TextLinkedList extends LinkedList<Char> {}
+export class TextLinkedList extends LinkedList<Char> {
+  deserialize(): void {
+    return;
+  }
+}

@noctaCrdt/Page.ts

@@ -1,5 +1,12 @@
 import { EditorCRDT } from "./Crdt";
 
+interface PageProps {
+  id: string;
+  title: string;
+  icon: string;
+  crdt: EditorCRDT;
+}
+
 export class Page {
   id: string;
   title: string;
@@ -13,4 +20,16 @@ export class Page {
     this.icon = "icon";
     this.crdt = editorCRDT;
   }
+
+  serialize(): PageProps {
+    return {
+      id: this.id,
+      title: this.title,
+      icon: this.icon,
+      crdt: this.crdt,
+    };
+  }
+  fromJSON(): void {
+    return;
+  }
 }

@noctaCrdt/WorkSpace.ts

@@ -1,14 +1,26 @@
 import { Page } from "./Page";
+import { WorkSpaceSerializedProps } from "./Interfaces";
 
 export class WorkSpace {
   id: string;
   pageList: Page[];
-  authUser: object;
+  authUser: Map<string, string>;
 
   constructor(id: string, pageList: Page[]) {
     this.id = id;
     this.pageList = pageList;
     this.authUser = new Map();
     // 직렬화, 역직렬화 메서드 추가
   }
+
+  serialize(): WorkSpaceSerializedProps {
+    return {
+      id: this.id,
+      pageList: this.pageList,
+      authUser: this.authUser,
+    };
+  }
+  deserialize(): void {
+    return;
+  }
 }

client/src/apis/useSocket.ts

@@ -5,10 +5,10 @@ import {
   RemoteCharDeleteOperation,
   RemoteBlockUpdateOperation,
   CursorPosition,
-  SerializedProps,
+  WorkSpaceSerializedProps,
 } from "@noctaCrdt/Interfaces";
-import { Block, Char } from "@noctaCrdt/Node";
-import { useEffect, useRef } from "react";
+
+import { useEffect, useRef, useState } from "react";
 import { io, Socket } from "socket.io-client";
 // 구독 핸들러들의 타입 정의
 interface RemoteOperationHandlers {
@@ -23,6 +23,7 @@ interface RemoteOperationHandlers {
 // 훅의 반환 타입을 명시적으로 정의
 interface UseSocketReturn {
   socket: Socket | null;
+  fetchWorkspaceData: () => WorkSpaceSerializedProps;
   sendBlockUpdateOperation: (operation: RemoteBlockUpdateOperation) => void;
   sendBlockInsertOperation: (operation: RemoteBlockInsertOperation) => void;
   sendCharInsertOperation: (operation: RemoteCharInsertOperation) => void;
@@ -35,7 +36,7 @@ interface UseSocketReturn {
 // 반환 타입을 명시적으로 지정
 export const useSocket = (): UseSocketReturn => {
   const socketRef = useRef<Socket | null>(null);
-
+  const [workspace, setWorkspace] = useState<WorkSpaceSerializedProps | null>(null);
   useEffect(() => {
     const SERVER_URL =
       process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://api.nocta.site";
@@ -52,9 +53,9 @@ export const useSocket = (): UseSocketReturn => {
       console.log("Assigned client ID:", clientId);
     });
 
-    socketRef.current.on("document", (document: SerializedProps<Block> | SerializedProps<Char>) => {
-      // 추후 확인 필요
-      console.log("Received initial document state:", document);
+    socketRef.current.on("workspace", (workspace: WorkSpaceSerializedProps) => {
+      console.log("Received initial workspace state:", workspace);
+      setWorkspace(workspace);
     });
 
     socketRef.current.on("connect", () => {
@@ -69,6 +70,8 @@ export const useSocket = (): UseSocketReturn => {
       console.error("Socket error:", error);
     });
 
+    console.log("소켓 이벤트 on");
+
     return () => {
       if (socketRef.current) {
         socketRef.current.disconnect();
@@ -129,7 +132,12 @@ export const useSocket = (): UseSocketReturn => {
     };
   };
 
+  const fetchWorkspaceData = (): WorkSpaceSerializedProps => {
+    return workspace!;
+  };
+
   return {
+    fetchWorkspaceData,
     socket: socketRef.current,
     sendBlockUpdateOperation,
     sendBlockInsertOperation,