Merge pull request #322 from boostcampwm-2022/fix/#321-K

Fix/#321-K: 블럭 타입 선택 모달 닫는 기능에 dimmer 활용

Author: se030

client/src/components/Block/TextBlock.tsx

@@ -30,7 +30,6 @@ function TextBlock({
   registerRef,
 }: BlockProps) {
   const { momSocket: socket } = useSocketContext();
-  const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const {
     syncCRDT,
@@ -46,6 +45,9 @@ function TextBlock({
   const { offsetRef, setOffset, clearOffset, onArrowKeyDown, offsetHandlers } =
     useOffset(blockRef);
 
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const onClose = () => setIsOpen(false);
+
   // 리모트 연산 수행결과로 innerText 변경 시 커서의 위치 조정
   const updateCaretPosition = (updateOffset = 0) => {
     if (!blockRef.current || offsetRef.current === null) return;
@@ -212,18 +214,12 @@ function TextBlock({
     onHandleBlock(e);
   };
 
-  const onBlur = () => {
-    clearOffset();
-    setIsOpen(false);
-  };
-
   const commonHandlers = {
     onInput,
     onCompositionEnd,
     ...offsetHandlers,
     onKeyDown,
     onPaste,
-    onBlur,
   };
 
   const BLOCK_TYPES = Object.values(BlockType)
@@ -249,7 +245,7 @@ function TextBlock({
         },
         readCRDT(),
       )}
-      {isOpen && <BlockSelector onSelect={onSelect} />}
+      {isOpen && <BlockSelector onClose={onClose} onSelect={onSelect} />}
     </>
   );
 }

client/src/components/BlockSelector/index.tsx

@@ -5,22 +5,29 @@ import BlockItem from './BlockItem';
 import style from './style.module.scss';
 
 interface BlockSelectorProps {
+  onClose: () => void;
   onSelect: (arg: BlockType) => void;
 }
 
-function BlockSelector({ onSelect }: BlockSelectorProps) {
+function BlockSelector({ onClose, onSelect }: BlockSelectorProps) {
   return (
-    <div className={style['block-selector']}>
-      <div className={style['block-displayed']}>
-        <strong>블록</strong>
+    <>
+      <div className={style['block-selector']}>
+        <div className={style['block-displayed']}>
+          <strong>블록</strong>
 
-        <ul className={style['block-list']}>
-          {BLOCKS_TYPE.map(({ id, name, desc, thumbnail }) => (
-            <BlockItem key={id} {...{ id, name, desc, thumbnail, onSelect }} />
-          ))}
-        </ul>
+          <ul className={style['block-list']}>
+            {BLOCKS_TYPE.map(({ id, name, desc, thumbnail }) => (
+              <BlockItem
+                key={id}
+                {...{ id, name, desc, thumbnail, onSelect }}
+              />
+            ))}
+          </ul>
+        </div>
       </div>
-    </div>
+      <div className={style['dimmer']} onClick={onClose}></div>
+    </>
   );
 }
 

client/src/components/BlockSelector/style.module.scss

@@ -3,7 +3,7 @@
 .block-selector {
   position: absolute;
   z-index: 99;
-  height: 100%;
+  height: 280px;
   overflow: hidden;
 
   .block-displayed {
@@ -27,3 +27,11 @@
     }
   }
 }
+
+.dimmer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}

client/src/hooks/useOffset.tsx

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