feat: 소켓 데이터 수신하여 로컬 인스턴스 생성

boostcampwm-2024 · Nov 20, 2024 · 81f4767 · 81f4767
1 parent 9ab3021
commit 81f4767
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 39 deletions.
diff --git a/client/src/features/page/Page.tsx b/client/src/features/page/Page.tsx
@@ -1,3 +1,4 @@
+import { serializedEditorDataProps } from "@noctaCrdt/Interfaces";
 import { motion, AnimatePresence } from "framer-motion";
 import { Editor } from "@features/editor/Editor";
 import { Page as PageType } from "@src/types/page";
@@ -12,6 +13,7 @@ interface PageProps extends PageType {
   handlePageSelect: ({ pageId, isSidebar }: { pageId: string; isSidebar?: boolean }) => void;
   handlePageClose: (pageId: string) => void;
   handleTitleChange: (pageId: string, newTitle: string) => void;
+  serializedEditorData: serializedEditorDataProps;
 }
 
 export const Page = ({
@@ -24,7 +26,7 @@ export const Page = ({
   handlePageSelect,
   handlePageClose,
   handleTitleChange,
-  editorCRDT,
+  serializedEditorData,
 }: PageProps) => {
   const { position, size, pageDrag, pageResize, pageMinimize, pageMaximize } = usePage({ x, y });
 
@@ -66,7 +68,11 @@ export const Page = ({
             onPageMinimize={pageMinimize}
           />
         </div>
-        <Editor onTitleChange={onTitleChange} pageId="" crdt={editorCRDT} />
+        <Editor
+          onTitleChange={onTitleChange}
+          pageId={id}
+          serializedEditorData={serializedEditorData}
+        />
         <motion.div
           className={resizeHandle}
           onMouseDown={pageResize}

diff --git a/client/src/features/workSpace/WorkSpace.tsx b/client/src/features/workSpace/WorkSpace.tsx
@@ -1,4 +1,4 @@
-import { WorkSpaceSerializedProps } from "@noctaCrdt/Interfaces";
+import { WorkSpace as WorkSpaceClass } from "@noctaCrdt/WorkSpace";
 import { useState, useEffect } from "react";
 import { BottomNavigator } from "@components/bottomNavigator/BottomNavigator";
 import { ErrorModal } from "@components/modal/ErrorModal";
@@ -11,21 +11,33 @@ import { usePagesManage } from "./hooks/usePagesManage";
 import { useWorkspaceInit } from "./hooks/useWorkspaceInit";
 
 export const WorkSpace = () => {
+  const [workspace, setWorkspace] = useState<WorkSpaceClass | null>(null);
   const { isLoading, isInitialized, error } = useWorkspaceInit();
-  const { pages, addPage, selectPage, closePage, updatePageTitle, initPages } = usePagesManage([]);
-  const { socket, fetchWorkspaceData } = useSocket();
+  const { socket, fetchWorkspaceData } = useSocket(); // TODO zustand로 변경
+
+  const { pages, addPage, selectPage, closePage, updatePageTitle, initPages, initPagePosition } =
+    usePagesManage();
   const visiblePages = pages.filter((page) => page.isVisible);
-  const workspace = fetchWorkspaceData();
   useEffect(() => {
-    if (socket && workspace) {
-      initPages(workspace.pageList);
+    if (socket) {
+      const workspaceMetadata = fetchWorkspaceData();
+      if (workspaceMetadata) {
+        const newWorkspace = new WorkSpaceClass(workspaceMetadata.id, workspaceMetadata.pageList);
+        newWorkspace.deserialize(workspaceMetadata);
+        setWorkspace(newWorkspace);
+
+        initPages(newWorkspace.pageList);
+        initPagePosition();
+      }
     }
-  }, [socket, workspace]);
+  }, [socket]);
 
+  // 에러화면
   if (error) {
-    return <ErrorModal errorMessage="test" />;
+    return <ErrorModal errorMessage="서버와 연결할 수 없습니다." />;
   }
 
+  // 정상화면
   return (
     <>
       {isLoading && <IntroScreen />}
@@ -44,7 +56,6 @@ export const WorkSpace = () => {
               handlePageSelect={selectPage}
               handlePageClose={closePage}
               handleTitleChange={updatePageTitle}
-              editorCRDT={page.editorCRDT}
             />
           ))}
         </div>

diff --git a/client/src/features/workSpace/hooks/usePagesManage.ts b/client/src/features/workSpace/hooks/usePagesManage.ts
@@ -7,7 +7,7 @@ import { Page } from "@src/types/page";
 const INIT_ICON = "📄";
 const PAGE_OFFSET = 60;
 
-export const usePagesManage = (list: CRDTPage[]) => {
+export const usePagesManage = () => {
   const [pages, setPages] = useState<Page[]>([]);
 
   const getZIndex = () => {
@@ -16,10 +16,11 @@ export const usePagesManage = (list: CRDTPage[]) => {
 
   const addPage = () => {
     const newPageIndex = pages.length;
-    const crdt = new EditorCRDT(pages[0].editorCRDT.client);
-    const newPage = new CRDTPage(crdt);
-    // TODO: 생성한 페이지 서버로 전송
-    // uuid 수정 -> 지금은 id로 똑같이 들어와서 에러 발생함
+    const crdt = new EditorCRDT(0); // 0 등의 아무값이여도 상관없음.
+    const newPage = new CRDTPage(uuidv4(), "Untitled", INIT_ICON, crdt);
+    const serializedEditorData = crdt.serialize();
+    // const {page} = sendPageOperation
+
     setPages((prevPages) => [
       ...prevPages.map((page) => ({ ...page, isActive: false })),
       {
@@ -31,8 +32,8 @@ export const usePagesManage = (list: CRDTPage[]) => {
         zIndex: getZIndex(),
         isActive: true,
         isVisible: true,
-        editorCRDT: crdt,
-      },
+        serializedEditorData,
+      } as Page,
     ]);
   };
 
@@ -73,26 +74,25 @@ export const usePagesManage = (list: CRDTPage[]) => {
   };
 
   const initPages = (list: CRDTPage[]) => {
-    const pageList: Page[] = [];
-    list.forEach((page) => {
-      const newPage = {
-        id: page.id,
-        title: page.title,
-        icon: page.icon,
-        x: 0,
-        y: 0,
-        zIndex: 0,
-        isActive: false,
-        isVisible: false,
-        editorCRDT: page.crdt,
-      };
-      pageList.push(newPage);
-    });
-    setPages((prev) => [...prev, ...pageList]);
+    const pageList: Page[] = list.map(
+      (crdtPage, index) =>
+        ({
+          id: crdtPage.id,
+          title: crdtPage.title,
+          icon: crdtPage.icon || INIT_ICON,
+          x: PAGE_OFFSET * index,
+          y: PAGE_OFFSET * index,
+          zIndex: index,
+          isActive: index === 0, // 첫 번째 페이지를 활성화
+          isVisible: true,
+          serializedEditorData: crdtPage.crdt.serialize(),
+        }) as Page,
+    );
+    setPages(pageList);
   };
 
   useEffect(() => {
-    initPages(list);
+    initPages([]);
     initPagePosition();
   }, []);
 
@@ -103,5 +103,6 @@ export const usePagesManage = (list: CRDTPage[]) => {
     closePage,
     updatePageTitle,
     initPages,
+    initPagePosition,
   };
 };
diff --git a/client/src/features/workSpace/hooks/useWorkspaceInit.ts b/client/src/features/workSpace/hooks/useWorkspaceInit.ts
@@ -1,5 +1,4 @@
-import { WorkSpaceSerializedProps } from "@noctaCrdt/Interfaces";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { useSocket } from "@src/apis/useSocket";
 
 interface UseWorkspaceInitReturn {

diff --git a/client/src/types/page.ts b/client/src/types/page.ts
@@ -1,4 +1,4 @@
-import { EditorCRDT } from "@noctaCrdt/Crdt";
+import { serializedEditorDataProps } from "@noctaCrdt/Interfaces";
 
 export interface Page {
   id: string;
@@ -9,7 +9,7 @@ export interface Page {
   zIndex: number;
   isActive: boolean;
   isVisible: boolean;
-  editorCRDT: EditorCRDT;
+  serializedEditorData: serializedEditorDataProps;
 }
 
 export interface Position {