Merge branch 'dev' into style/#271-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 변경 시 커서의 위치 조정
@@ -205,19 +205,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)

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

@@ -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;
@@ -205,7 +205,7 @@ function Mom() {
               key={id}
               id={id}
               index={index}
-              onKeyDown={onKeyDown}
+              onHandleBlock={onHandleBlock}
               registerRef={(ref: React.RefObject<HTMLElement>) => {
                 blockRefs.current[index] = ref;
               }}

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';
 
@@ -58,15 +58,14 @@ export function useOffset(blockRef: React.RefObject<HTMLParagraphElement>) {
       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,
   };
 }