feat: 체크박스 토글 기능 연결

#270
boostcampwm-2024 · Dec 2, 2024 · e65f8ae · e65f8ae
1 parent 69026b9
commit e65f8ae
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 10 deletions.
diff --git a/client/src/features/editor/Editor.tsx b/client/src/features/editor/Editor.tsx
@@ -42,6 +42,7 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
     sendBlockInsertOperation,
     sendBlockDeleteOperation,
     sendBlockUpdateOperation,
+    sendBlockCheckboxOperation,
   } = useSocketStore();
   const { clientId } = useSocketStore();
   const [displayTitle, setDisplayTitle] = useState(pageTitle);
@@ -86,6 +87,7 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
     handleRemoteBlockReorder,
     handleRemoteCharUpdate,
     handleRemoteCursor,
+    handleRemoteBlockCheckbox,
     addNewBlock,
   } = useEditorOperation({ editorCRDT, pageId, setEditorState, isSameLocalChange });
 
@@ -121,14 +123,16 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
     sendCharInsertOperation,
   });
 
-  const { handleBlockClick, handleBlockInput, handleKeyDown } = useBlockOperation({
-    editorCRDT: editorCRDT.current,
-    setEditorState,
-    pageId,
-    onKeyDown,
-    handleHrInput,
-    isLocalChange,
-  });
+  const { handleBlockClick, handleBlockInput, handleKeyDown, handleCheckboxToggle } =
+    useBlockOperation({
+      editorCRDT: editorCRDT.current,
+      setEditorState,
+      pageId,
+      onKeyDown,
+      handleHrInput,
+      isLocalChange,
+      sendBlockCheckboxOperation,
+    });
 
   const { onTextStyleUpdate, onTextColorUpdate, onTextBackgroundColorUpdate } = useTextOptionSelect(
     {
@@ -275,6 +279,7 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
       onRemoteBlockReorder: handleRemoteBlockReorder,
       onRemoteCharUpdate: handleRemoteCharUpdate,
       onRemoteCursor: handleRemoteCursor,
+      onRemoteBlockCheckbox: handleRemoteBlockCheckbox,
       onBatchOperations: (batch) => {
         for (const item of batch) {
           switch (item.event) {
@@ -377,6 +382,7 @@ export const Editor = ({ onTitleChange, pageId, pageTitle, serializedEditorData
                 onTextColorUpdate={onTextColorUpdate}
                 onTextBackgroundColorUpdate={onTextBackgroundColorUpdate}
                 dragBlockList={dragBlockList}
+                onCheckboxToggle={handleCheckboxToggle}
               />
             ))}
           </SortableContext>

diff --git a/client/src/features/editor/components/block/Block.tsx b/client/src/features/editor/components/block/Block.tsx
@@ -66,6 +66,7 @@ interface BlockProps {
     blockId: BlockId,
     nodes: Array<Char>,
   ) => void;
+  onCheckboxToggle: (blockId: BlockId, isChecked: boolean) => void;
 }
 export const Block: React.FC<BlockProps> = memo(
   ({
@@ -88,6 +89,7 @@ export const Block: React.FC<BlockProps> = memo(
     onTextStyleUpdate,
     onTextColorUpdate,
     onTextBackgroundColorUpdate,
+    onCheckboxToggle,
   }: BlockProps) => {
     const blockRef = useRef<HTMLDivElement>(null);
     const { isOpen, openModal, closeModal } = useModal();
@@ -267,6 +269,10 @@ export const Block: React.FC<BlockProps> = memo(
       }
     };
 
+    const handleCheckboxClick = () => {
+      onCheckboxToggle(block.id, !block.isChecked);
+    };
+
     const Indicator = () => (
       <div
         className={dropIndicatorStyle({
@@ -306,7 +312,14 @@ export const Block: React.FC<BlockProps> = memo(
               onCopySelect={handleCopySelect}
               onDeleteSelect={handleDeleteSelect}
             />
-            <IconBlock type={block.type} index={block.listIndex} indent={block.indent} />
+
+            <IconBlock
+              type={block.type}
+              index={block.listIndex}
+              indent={block.indent}
+              isChecked={block.isChecked}
+              onCheckboxClick={handleCheckboxClick}
+            />
             <div
               ref={blockRef}
               onKeyDown={(e) => handleKeyDown(e, blockRef.current, block)}

diff --git a/client/src/features/editor/hooks/useBlockOperation.ts b/client/src/features/editor/hooks/useBlockOperation.ts
@@ -1,5 +1,5 @@
 import { EditorCRDT } from "@noctaCrdt/Crdt";
-import { RemoteCharInsertOperation } from "@noctaCrdt/Interfaces";
+import { RemoteBlockCheckboxOperation, RemoteCharInsertOperation } from "@noctaCrdt/Interfaces";
 import { Block } from "@noctaCrdt/Node";
 import { BlockId } from "@noctaCrdt/NodeId";
 import { useCallback } from "react";
@@ -15,6 +15,7 @@ interface UseBlockOperationProps {
   onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
   handleHrInput: (block: Block, content: string) => boolean;
   isLocalChange: React.MutableRefObject<boolean>;
+  sendBlockCheckboxOperation: (operation: RemoteBlockCheckboxOperation) => void;
 }
 
 export const useBlockOperation = ({
@@ -24,6 +25,7 @@ export const useBlockOperation = ({
   onKeyDown,
   handleHrInput,
   isLocalChange,
+  sendBlockCheckboxOperation,
 }: UseBlockOperationProps) => {
   const { sendCharInsertOperation, sendCharDeleteOperation } = useSocketStore();
 
@@ -257,9 +259,32 @@ export const useBlockOperation = ({
     [editorCRDT.LinkedList, sendCharDeleteOperation, pageId, onKeyDown],
   );
 
+  const handleCheckboxToggle = useCallback(
+    (blockId: BlockId, isChecked: boolean) => {
+      const operation = {
+        type: "blockCheckbox",
+        blockId,
+        pageId,
+        isChecked,
+      } as RemoteBlockCheckboxOperation;
+
+      sendBlockCheckboxOperation(operation);
+      const targetBlock = editorCRDT.LinkedList.nodeMap[JSON.stringify(blockId)];
+      if (targetBlock) {
+        targetBlock.isChecked = isChecked;
+        setEditorState({
+          clock: editorCRDT.clock,
+          linkedList: editorCRDT.LinkedList,
+        });
+      }
+    },
+    [editorCRDT, pageId, sendBlockCheckboxOperation],
+  );
+
   return {
     handleBlockClick,
     handleBlockInput,
     handleKeyDown,
+    handleCheckboxToggle,
   };
 };
diff --git a/client/src/features/editor/hooks/useEditorOperation.ts b/client/src/features/editor/hooks/useEditorOperation.ts
@@ -7,6 +7,7 @@ import {
   RemoteBlockReorderOperation,
   RemoteCharUpdateOperation,
   RemoteBlockInsertOperation,
+  RemoteBlockCheckboxOperation,
 } from "@noctaCrdt/Interfaces";
 import { TextLinkedList } from "@noctaCrdt/LinkedList";
 import { CharId } from "@noctaCrdt/NodeId";
@@ -151,6 +152,21 @@ export const useEditorOperation = ({
     [pageId, editorCRDT],
   );
 
+  const handleRemoteBlockCheckbox = useCallback(
+    (operation: RemoteBlockCheckboxOperation) => {
+      if (operation.pageId !== pageId) return;
+      const targetBlock = editorCRDT.current.LinkedList.nodeMap[JSON.stringify(operation.blockId)];
+      if (targetBlock) {
+        targetBlock.isChecked = operation.isChecked;
+        setEditorState({
+          clock: editorCRDT.current.clock,
+          linkedList: editorCRDT.current.LinkedList,
+        });
+      }
+    },
+    [pageId, editorCRDT],
+  );
+
   const handleRemoteCharUpdate = useCallback(
     (operation: RemoteCharUpdateOperation) => {
       if (!editorCRDT) return;
@@ -190,6 +206,7 @@ export const useEditorOperation = ({
     handleRemoteBlockReorder,
     handleRemoteCharUpdate,
     handleRemoteCursor,
+    handleRemoteBlockCheckbox,
     addNewBlock,
   };
 };