feat: 삭제 로직 구현

#162
boostcampwm-2024 · Nov 21, 2024 · e3980b9 · e3980b9
1 parent cd7954b
commit e3980b9
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 15 deletions.
diff --git a/client/src/features/editor/Editor.tsx b/client/src/features/editor/Editor.tsx
@@ -56,15 +56,16 @@ export const Editor = ({ onTitleChange, pageId, serializedEditorData }: EditorPr
     pageId,
   });
 
-  const { handleTypeSelect, handleAnimationSelect } = useBlockOptionSelect({
-    editorCRDT: editorCRDT.current,
-    editorState,
-    setEditorState,
-    pageId,
-    sendBlockUpdateOperation,
-    sendBlockDeleteOperation,
-    sendBlockInsertOperation,
-  });
+  const { handleTypeSelect, handleAnimationSelect, handleCopySelect, handleDeleteSelect } =
+    useBlockOptionSelect({
+      editorCRDT: editorCRDT.current,
+      editorState,
+      setEditorState,
+      pageId,
+      sendBlockUpdateOperation,
+      sendBlockDeleteOperation,
+      sendBlockInsertOperation,
+    });
 
   const { handleKeyDown } = useMarkdownGrammer({
     editorCRDT: editorCRDT.current,
@@ -288,6 +289,8 @@ export const Editor = ({ onTitleChange, pageId, serializedEditorData }: EditorPr
                 onClick={handleBlockClick}
                 onAnimationSelect={handleAnimationSelect}
                 onTypeSelect={handleTypeSelect}
+                onCopySelect={handleCopySelect}
+                onDeleteSelect={handleDeleteSelect}
               />
             ))}
           </SortableContext>

diff --git a/client/src/features/editor/components/MenuBlock/MenuBlock.tsx b/client/src/features/editor/components/MenuBlock/MenuBlock.tsx
@@ -10,13 +10,17 @@ export interface MenuBlockProps {
   listeners?: Record<string, any>;
   onAnimationSelect: (animation: AnimationType) => void;
   onTypeSelect: (type: ElementType) => void;
+  onCopySelect: () => void;
+  onDeleteSelect: () => void;
 }
 
 export const MenuBlock = ({
   attributes,
   listeners,
   onAnimationSelect,
   onTypeSelect,
+  onCopySelect,
+  onDeleteSelect,
 }: MenuBlockProps) => {
   const menuBlockRef = useRef<HTMLDivElement>(null);
 
@@ -74,11 +78,11 @@ export const MenuBlock = ({
       <OptionModal
         isOpen={isOpen}
         onClose={closeModal}
+        menuBlockPosition={menuBlockPosition}
         onAnimationSelect={onAnimationSelect}
         onTypeSelect={onTypeSelect}
-        menuBlockPosition={menuBlockPosition}
-        onDeleteSelect={() => {}}
-        onDuplicateSelect={() => {}}
+        onDeleteSelect={onDeleteSelect}
+        onCopySelect={onCopySelect}
       />
     </div>
   );

diff --git a/client/src/features/editor/components/OptionModal/OptionModal.tsx b/client/src/features/editor/components/OptionModal/OptionModal.tsx
@@ -15,7 +15,7 @@ interface OptionModalProps {
   onClose: () => void;
   onAnimationSelect: (id: AnimationType) => void;
   onTypeSelect: (label: ElementType) => void;
-  onDuplicateSelect: () => void;
+  onCopySelect: () => void;
   onDeleteSelect: () => void;
   menuBlockPosition: { top: number; right: number };
 }
@@ -25,7 +25,7 @@ export const OptionModal = ({
   onClose,
   onAnimationSelect,
   onTypeSelect,
-  onDuplicateSelect,
+  onCopySelect,
   onDeleteSelect,
   menuBlockPosition,
 }: OptionModalProps) => {
@@ -44,7 +44,7 @@ export const OptionModal = ({
   const handleCategoryClick = (category: OptionCategory) => {
     if (!OPTION_CATEGORIES[category].options) {
       if (category === "DUPLICATE") {
-        onDuplicateSelect();
+        onCopySelect();
       } else if (category === "DELETE") {
         onDeleteSelect();
       }

diff --git a/client/src/features/editor/components/block/Block.tsx b/client/src/features/editor/components/block/Block.tsx
@@ -20,6 +20,8 @@ interface BlockProps {
   onClick: (blockId: BlockId, e: React.MouseEvent<HTMLDivElement>) => void;
   onAnimationSelect: (blockId: BlockId, animation: AnimationType) => void;
   onTypeSelect: (blockId: BlockId, type: ElementType) => void;
+  onCopySelect: () => void;
+  onDeleteSelect: (blockId: BlockId) => void;
 }
 
 export const Block: React.FC<BlockProps> = memo(
@@ -32,6 +34,8 @@ export const Block: React.FC<BlockProps> = memo(
     onClick,
     onAnimationSelect,
     onTypeSelect,
+    onCopySelect,
+    onDeleteSelect,
   }: BlockProps) => {
     console.log("블록 초기화 상태", block);
     const blockRef = useRef<HTMLDivElement>(null);
@@ -83,6 +87,14 @@ export const Block: React.FC<BlockProps> = memo(
       onTypeSelect(block.id, type);
     };
 
+    const handleCopySelect = () => {
+      onCopySelect();
+    };
+
+    const handleDeleteSelect = () => {
+      onDeleteSelect(block.id);
+    };
+
     return (
       // TODO: eslint 규칙을 수정해야 할까?
       // TODO: ol일때 index 순서 처리
@@ -107,6 +119,8 @@ export const Block: React.FC<BlockProps> = memo(
             listeners={listeners}
             onAnimationSelect={handleAnimationSelect}
             onTypeSelect={handleTypeSelect}
+            onCopySelect={handleCopySelect}
+            onDeleteSelect={handleDeleteSelect}
           />
           <IconBlock type={block.type} index={1} />
           <div

diff --git a/client/src/features/editor/hooks/useBlockOption.ts b/client/src/features/editor/hooks/useBlockOption.ts
@@ -32,6 +32,8 @@ export const useBlockOptionSelect = ({
   setEditorState,
   pageId,
   sendBlockUpdateOperation,
+  sendBlockDeleteOperation,
+  sendBlockInsertOperation,
 }: useBlockOptionSelectProps) => {
   const handleTypeSelect = (blockId: BlockId, type: ElementType) => {
     const block = editorState.linkedList.getNode(blockId);
@@ -71,8 +73,26 @@ export const useBlockOptionSelect = ({
     }));
   };
 
+  // TODO 복제
+  const handleCopySelect = () => {};
+
+  const handleDeleteSelect = (blockId: BlockId) => {
+    const currentIndex = editorCRDT.LinkedList.spread().findIndex((block) =>
+      block.id.equals(blockId),
+    );
+    sendBlockDeleteOperation(editorCRDT.localDelete(currentIndex, undefined, pageId));
+
+    setEditorState((prev) => ({
+      clock: editorCRDT.clock,
+      linkedList: editorCRDT.LinkedList,
+      currentBlock: prev.currentBlock,
+    }));
+  };
+
   return {
     handleTypeSelect,
     handleAnimationSelect,
+    handleCopySelect,
+    handleDeleteSelect,
   };
 };