Merge branch 'dev' of https://github.com/boostcampwm-2022/web27-Wabinar into feat/#300-K

Author: se030

.github/workflows/ci.yml

@@ -25,6 +25,7 @@ jobs:
       - name: Cache dependencies
         id: cache
         uses: actions/cache@v3
+        if: runner.os != 'Windows'
         with:
           path: '**/node_modules'
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

client/src/components/Block/TextBlock.tsx

@@ -15,7 +15,7 @@ import ee from '../Mom/EventEmitter';
 interface BlockProps {
   id: string;
   index: number;
-  onKeyDown: React.KeyboardEventHandler;
+  onHandleBlock: React.KeyboardEventHandler;
   type: BlockType;
   setType: (arg: BlockType) => void;
   registerRef: (arg: React.RefObject<HTMLElement>) => void;
@@ -24,7 +24,7 @@ interface BlockProps {
 function TextBlock({
   id,
   index,
-  onKeyDown,
+  onHandleBlock,
   type,
   setType,
   registerRef,
@@ -43,7 +43,7 @@ function TextBlock({
 
   const blockRef = useRef<HTMLParagraphElement>(null);
 
-  const { offsetRef, setOffset, clearOffset, offsetHandlers } =
+  const { offsetRef, setOffset, clearOffset, onArrowKeyDown, offsetHandlers } =
     useOffset(blockRef);
 
   // 리모트 연산 수행결과로 innerText 변경 시 커서의 위치 조정
@@ -110,8 +110,6 @@ function TextBlock({
 
   // crdt의 초기화와 소켓을 통해 전달받는 리모트 연산 처리
   useEffect(() => {
-    registerRef(blockRef);
-
     socket.emit(BLOCK_EVENT.INIT_TEXT, id);
 
     ee.on(`${BLOCK_EVENT.INIT_TEXT}-${id}`, onInitialize);
@@ -127,6 +125,10 @@ function TextBlock({
     };
   }, []);
 
+  useEffect(() => {
+    registerRef(blockRef);
+  }, [index]);
+
   useEffect(() => {
     updateCaretPosition();
   }, [isOpen]);
@@ -205,19 +207,23 @@ function TextBlock({
     updateCaretPosition(pastedText.length);
   };
 
-  const onKeyDownComposite: React.KeyboardEventHandler<HTMLParagraphElement> = (
-    e,
-  ) => {
-    offsetHandlers.onKeyDown(e);
-    onKeyDown(e);
+  const onKeyDown: React.KeyboardEventHandler<HTMLParagraphElement> = (e) => {
+    onArrowKeyDown(e);
+    onHandleBlock(e);
+  };
+
+  const onBlur = () => {
+    clearOffset();
+    setIsOpen(false);
   };
 
   const commonHandlers = {
     onInput,
     onCompositionEnd,
     ...offsetHandlers,
-    onKeyDown: onKeyDownComposite,
+    onKeyDown,
     onPaste,
+    onBlur,
   };
 
   const BLOCK_TYPES = Object.values(BlockType)
@@ -236,7 +242,7 @@ function TextBlock({
         {
           ref: blockRef,
           'data-id': id,
-          'date-index': index,
+          'data-index': index,
           ...commonHandlers,
           contentEditable: true,
           suppressContentEditableWarning: true,

client/src/components/Block/index.tsx

@@ -19,11 +19,11 @@ export enum BlockType {
 interface BlockProps {
   id: string;
   index: number;
-  onKeyDown: React.KeyboardEventHandler;
+  onHandleBlock: React.KeyboardEventHandler;
   registerRef: (arg: React.RefObject<HTMLElement>) => void;
 }
 
-function Block({ id, index, onKeyDown, registerRef }: BlockProps) {
+function Block({ id, index, onHandleBlock, registerRef }: BlockProps) {
   const { momSocket: socket } = useSocketContext();
 
   const [type, setType] = useState<BlockType>();
@@ -58,7 +58,7 @@ function Block({ id, index, onKeyDown, registerRef }: BlockProps) {
         <TextBlock
           id={id}
           index={index}
-          onKeyDown={onKeyDown}
+          onHandleBlock={onHandleBlock}
           type={type}
           setType={setBlockType}
           registerRef={registerRef}

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();
@@ -71,7 +71,7 @@ function Mom() {
     range.collapse();
   };
 
-  const onKeyDown: React.KeyboardEventHandler = (e) => {
+  const onHandleBlock: React.KeyboardEventHandler = (e) => {
     const target = e.target as HTMLParagraphElement;
 
     const { index: indexString } = target.dataset;
@@ -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']}>
@@ -205,10 +210,8 @@ function Mom() {
               key={id}
               id={id}
               index={index}
-              onKeyDown={onKeyDown}
-              registerRef={(ref: React.RefObject<HTMLElement>) => {
-                blockRefs.current[index] = ref;
-              }}
+              onHandleBlock={onHandleBlock}
+              registerRef={registerRef(index)}
             />
           ))}
         </div>

client/src/hooks/useOffset.tsx

@@ -29,7 +29,7 @@ export function useOffset(blockRef: React.RefObject<HTMLParagraphElement>) {
   };
 
   // keydown 이벤트는 키 입력의 내용 반영 이전에 발생
-  const onKeyDown: React.KeyboardEventHandler = (e) => {
+  const onArrowKeyDown: React.KeyboardEventHandler = (e) => {
     const ARROW_LEFT = 'ArrowLeft';
     const ARROW_RIGHT = 'ArrowRight';
 
@@ -43,8 +43,8 @@ export function useOffset(blockRef: React.RefObject<HTMLParagraphElement>) {
     }
   };
 
-  // 위 아래 방향키 이동은 핸들링하지 않음
-  const onKeyUp: React.KeyboardEventHandler = (e) => {
+  // 위 아래 방향키 이동은 keyDown에서 핸들링하지 않음
+  const onArrowKeyup: React.KeyboardEventHandler = (e) => {
     const ARROW_DOWN = 'ArrowDown';
     const ARROW_UP = 'ArrowUp';
 
@@ -54,19 +54,16 @@ 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>,
-    onBlur: clearOffset,
-    onKeyDown,
-    onKeyUp,
+    onKeyUp: onArrowKeyup,
   };
 
   return {
     offsetRef,
     setOffset,
     clearOffset,
+    onArrowKeyDown,
     offsetHandlers,
   };
 }