Fix/#303-B: 블록 추가시 포커스 잡히지 않는 버그 해결 (#308)

* fix: 오타 수정

Resolve: #303

* fix: 블록 추가 시 focus 안되는 버그 해결

Resolve: #303

* fix: 블럭 사이에 블럭 추가 시 버그 해결

블럭 사이에 추가할 때 index에 바로 ref를 넣기 때문에 뒤에 있던 ref위에 덮어씌워짐

index가 바뀌면 registerRef를 실행하게하여 blockRefs 갱신

Resolve: #303

* feat: focus잡으려는 블럭일때 포커스 변경

Resolve: #303

* refactor: 무조건 index를 넘기게 리팩토링

Resolve: #303

* fix: 타입 에러 수정

* fix: focusIndex가 0일 때 포커스 잡히게 조건문 수정

Resolve: #303

Author: dohun31

client/src/components/Block/TextBlock.tsx

@@ -110,8 +110,6 @@ function TextBlock({
 
   // crdt의 초기화와 소켓을 통해 전달받는 리모트 연산 처리
   useEffect(() => {
-    registerRef(blockRef);
-
     socket.emit(BLOCK_EVENT.INIT, id);
 
     ee.on(`${BLOCK_EVENT.INIT}-${id}`, onInitialize);
@@ -127,6 +125,10 @@ function TextBlock({
     };
   }, []);
 
+  useEffect(() => {
+    registerRef(blockRef);
+  }, [index]);
+
   useEffect(() => {
     updateCaretPosition();
   }, [isOpen]);
@@ -240,7 +242,7 @@ function TextBlock({
         {
           ref: blockRef,
           'data-id': id,
-          'date-index': index,
+          'data-index': index,
           ...commonHandlers,
           contentEditable: true,
           suppressContentEditableWarning: true,

client/src/components/Mom/index.tsx

@@ -27,7 +27,7 @@ function Mom() {
   const titleRef = useRef<HTMLHeadingElement>(null);
 
   const onTitleUpdate: React.FormEventHandler<HTMLHeadingElement> = useDebounce(
-    (e) => {
+    () => {
       if (!titleRef.current) return;
 
       const title = titleRef.current.innerText;
@@ -46,13 +46,13 @@ function Mom() {
     focusIndex.current = idx;
   };
 
-  const setBlockFocus = () => {
+  const setBlockFocus = (index: number) => {
     if (!blockRefs.current || focusIndex.current === undefined) return;
 
     const idx = focusIndex.current;
+    if (index === undefined || index !== idx) return;
 
     const targetBlock = blockRefs.current[idx];
-
     if (!targetBlock || !targetBlock.current) return;
 
     targetBlock.current.focus();
@@ -104,17 +104,16 @@ function Mom() {
       updateBlockFocus(index - 1);
 
       setBlocks(spreadCRDT());
-      setBlockFocus();
+
+      if (focusIndex.current === undefined) return;
+      setBlockFocus(focusIndex.current);
+
       setCaretToEnd();
 
       socket.emit(MOM_EVENT.DELETE_BLOCK, id, remoteDeletion);
     }
   };
 
-  useEffect(() => {
-    setBlockFocus();
-  }, [blocks]);
-
   useEffect(() => {
     if (!selectedMom) return;
 
@@ -184,6 +183,12 @@ function Mom() {
     };
   }, [selectedMom]);
 
+  const registerRef =
+    (index: number) => (ref: React.RefObject<HTMLElement>) => {
+      blockRefs.current[index] = ref;
+      setBlockFocus(index);
+    };
+
   return selectedMom ? (
     <div className={style['mom-container']}>
       <div className={style['mom']}>
@@ -206,9 +211,7 @@ function Mom() {
               id={id}
               index={index}
               onHandleBlock={onHandleBlock}
-              registerRef={(ref: React.RefObject<HTMLElement>) => {
-                blockRefs.current[index] = ref;
-              }}
+              registerRef={registerRef(index)}
             />
           ))}
         </div>

client/src/hooks/useOffset.tsx

@@ -54,8 +54,6 @@ export function useOffset(blockRef: React.RefObject<HTMLParagraphElement>) {
   };
 
   const offsetHandlers = {
-    onFocus:
-      setOffset as unknown as React.FocusEventHandler<HTMLParagraphElement>,
     onClick:
       setOffset as unknown as React.MouseEventHandler<HTMLParagraphElement>,
     onKeyUp: onArrowKeyup,