diff --git a/client/src/features/editor/Editor.tsx b/client/src/features/editor/Editor.tsx index b7eebb2c..e8da5a63 100644 --- a/client/src/features/editor/Editor.tsx +++ b/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) => { - onTitleChange(e.target.value); + // 낙관적업데이트 + onTitleChange(e.target.value, false); }; const handleBlur = (e: React.ChangeEvent) => { - onTitleChange(e.target.value); + onTitleChange(e.target.value, true); }; const handleBlockClick = (blockId: BlockId, e: React.MouseEvent) => { if (editorCRDT) { @@ -490,7 +491,7 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData 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(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 = () => { diff --git a/client/src/features/workSpace/hooks/usePagesManage.ts b/client/src/features/workSpace/hooks/usePagesManage.ts index c3977fc2..b4cf2fef 100644 --- a/client/src/features/workSpace/hooks/usePagesManage.ts +++ b/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, }); } };