Merge pull request #120 from boostcamp-2020/feat/118

BlockContent 서버 동기화

frontend/src/components/atoms/BlockContent/BlockContent.tsx

@@ -1,11 +1,12 @@
 /** @jsx jsx */
 /** @jsxRuntime classic */
 import { jsx, css, SerializedStyles } from '@emotion/react';
-import { useEffect, useRef, FormEvent, KeyboardEvent } from 'react';
+import { useEffect, useRef, FormEvent, KeyboardEvent, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { blockRefState, throttleState, blockMapState } from '@/stores';
 import { Block, BlockType } from '@/schemes';
+import { updateBlock } from '@/utils';
 import {
   regex,
   fontSize,
@@ -57,6 +58,7 @@ function BlockContent(blockDTO: Block) {
   const caretRef = useRef(0);
   const listCnt = useRef(1);
   const [Dispatcher] = useCommand();
+  const [isBlur, setIsBlur] = useState(false);
 
   const indexInSibling: number = blockMap[
     blockDTO.parentId
@@ -167,6 +169,13 @@ function BlockContent(blockDTO: Block) {
     }
   };
 
+  useEffect(() => {
+    (async () => {
+      const { block: updatedBlock } = await updateBlock(blockDTO);
+      setBlockMap({ ...blockMap, [blockDTO.id]: updatedBlock });
+    })();
+  }, [isBlur]);
+
   useEffect(() => {
     blockRefState[blockDTO.id] = contentEditableRef;
     return () => {
@@ -210,6 +219,7 @@ function BlockContent(blockDTO: Block) {
         placeholder={placeHolder[blockDTO.type]}
         onInput={handleValue}
         onKeyUp={handleKeyUp}
+        onBlur={() => setIsBlur(!isBlur)}
       >
         {blockDTO.value}
       </div>

frontend/src/components/molecules/Title/Title.tsx

@@ -39,12 +39,11 @@ const titleCss = () => css`
 
   font-family: inter, Helvetica, 'Apple Color Emoji', Arial, sans-serif,
     'Segoe UI Emoji', 'Segoe UI Symbol';
-  
+
   &:empty:before {
     content: 'Untitled';
     color: rgba(55, 53, 47, 0.15);
   }
-}
 `;
 
 function Title(): JSX.Element {