Feat/#319-K: 블럭 타입 변경 이후 입력된 / 제거 (#323)

* feat: 텍스트 블럭으로 변경 시 입력한 / 제거

props.type이 변경된 경우 readCRDT() 길이가 존재한다면 localDeleteCRDT(0) 실행

Resolves #319

* feat: / 지우는 로직에 타입 변경을 현재 유저가 했는지 확인하는 조건 추가

Author: se030

client/src/components/Block/TextBlock.tsx

@@ -18,6 +18,7 @@ interface BlockProps {
   onHandleBlock: React.KeyboardEventHandler;
   type: BlockType;
   setType: (arg: BlockType) => void;
+  isLocalTypeUpdate: boolean;
   registerRef: (arg: React.RefObject<HTMLElement>) => void;
 }
 
@@ -27,6 +28,7 @@ function TextBlock({
   onHandleBlock,
   type,
   setType,
+  isLocalTypeUpdate,
   registerRef,
 }: BlockProps) {
   const { momSocket: socket } = useSocketContext();
@@ -135,6 +137,18 @@ function TextBlock({
     updateCaretPosition();
   }, [isOpen]);
 
+  useEffect(() => {
+    if (isLocalTypeUpdate && readCRDT().length) {
+      const remoteDeletion = localDeleteCRDT(0);
+      socket.emit(BLOCK_EVENT.DELETE_TEXT, id, remoteDeletion);
+
+      if (!blockRef.current) return;
+
+      blockRef.current.innerText = readCRDT();
+      blockRef.current.focus();
+    }
+  }, [type]);
+
   // 로컬에서 일어나는 작성 - 삽입과 삭제 연산
   const onInput: React.FormEventHandler = (e) => {
     setOffset();

client/src/components/Block/index.tsx

@@ -61,6 +61,7 @@ function Block({ id, index, onHandleBlock, registerRef }: BlockProps) {
           onHandleBlock={onHandleBlock}
           type={type}
           setType={setBlockType}
+          isLocalTypeUpdate={localUpdateFlagRef.current}
           registerRef={registerRef}
         />
       );