refactor: page Title 업데이트를 낙관적 업데이트로 변경

- 유저에게는 바로 반영
- 실제 서버 저장은 title에서 focus 가 날아갈때 실행
- 현재 제목에 입력할시 caret이 editor로 날아가는 문제 있음

#196

client/src/features/editor/Editor.tsx

@@ -32,7 +32,7 @@ export interface EditorStateProps {
 }
 
 interface EditorProps {
-  onTitleChange: (title: string) => void;
+  onTitleChange: (title: string, syncWithServer: boolean) => void;
   pageId: string;
   serializedEditorData: serializedEditorDataProps;
   pageTitle: string;
@@ -113,11 +113,12 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
   );
 
   const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onTitleChange(e.target.value);
+    // 낙관적업데이트
+    onTitleChange(e.target.value, false);
   };
 
   const handleBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onTitleChange(e.target.value);
+    onTitleChange(e.target.value, true);
   };
   const handleBlockClick = (blockId: BlockId, e: React.MouseEvent<HTMLDivElement>) => {
     if (editorCRDT) {
@@ -490,7 +491,7 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
         <input
           type="text"
           placeholder="제목을 입력하세요..."
-          // onChange={handleTitleChange}
+          onChange={handleTitleChange}
           onBlur={handleBlur}
           defaultValue={pageTitle == "새로운 페이지" ? "" : pageTitle}
           className={editorTitle}

client/src/features/page/Page.tsx

@@ -11,7 +11,11 @@ import { DIRECTIONS, usePage } from "./hooks/usePage";
 interface PageProps extends PageType {
   handlePageSelect: ({ pageId, isSidebar }: { pageId: string; isSidebar?: boolean }) => void;
   handlePageClose: (pageId: string) => void;
-  handleTitleChange: (pageId: string, updates: { title?: string; icon?: string }) => void;
+  handleTitleChange: (
+    pageId: string,
+    updates: { title?: string; icon?: string },
+    syncWithServer: boolean,
+  ) => void;
   serializedEditorData: serializedEditorDataProps | null;
 }
 
@@ -31,8 +35,12 @@ export const Page = ({
   const [serializedEditorDatas, setSerializedEditorDatas] =
     useState<serializedEditorDataProps | null>(serializedEditorData);
 
-  const onTitleChange = (newTitle: string) => {
-    handleTitleChange(id, { title: newTitle });
+  const onTitleChange = (newTitle: string, syncWithServer: boolean) => {
+    if (syncWithServer) {
+      handleTitleChange(id, { title: newTitle }, true);
+    } else {
+      handleTitleChange(id, { title: newTitle }, false);
+    }
   };
 
   const handlePageClick = () => {

client/src/features/workSpace/hooks/usePagesManage.ts

@@ -182,19 +182,21 @@ export const usePagesManage = (workspace: WorkSpace | null, clientId: number | n
       ),
     );
   };
-
-  const updatePage = (pageId: string, updates: { title?: string; icon?: string }) => {
-    // UI 즉시 업데이트
+  const updatePage = (
+    pageId: string,
+    updates: { title?: string; icon?: string },
+    syncWithServer: boolean = true,
+  ) => {
     setPages((prevPages) =>
       prevPages.map((page) => (page.id === pageId ? { ...page, ...updates } : page)),
     );
 
-    if (clientId && workspace!.id) {
+    if (syncWithServer && clientId && workspace?.id) {
       sendPageUpdateOperation({
         pageId,
         ...updates,
         clientId,
-        workspaceId: workspace!.id,
+        workspaceId: workspace.id,
       });
     }
   };