Merge pull request #119 from boostcamp-2020/feat/115

Block drag & drop 구현

Author: skid901

frontend/.eslintrc

@@ -38,7 +38,8 @@
     "import/no-unresolved": 0,
     "import/prefer-default-export": "off",
     "jsx-a11y/no-static-element-interactions": 0,
-    "@typescript-eslint/indent": 0
+    "@typescript-eslint/indent": 0,
+    "no-param-reassign": 0
   },
   "settings": {
     "import/resolver": {

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

@@ -1,29 +1,41 @@
 /** @jsx jsx */
 /** @jsxRuntime classic */
-import { jsx, css, SerializedStyles } from '@emotion/react';
-import { useEffect, useRef, FormEvent, KeyboardEvent, useState } from 'react';
+import { jsx, css } from '@emotion/react';
+import React, {
+  useEffect,
+  useRef,
+  FormEvent,
+  KeyboardEvent,
+  useState,
+} from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { blockRefState, throttleState, blockMapState } from '@/stores';
+import {
+  blockMapState,
+  blockRefState,
+  draggingBlockState,
+  throttleState,
+} from '@/stores';
 import { Block, BlockType } from '@/schemes';
-import { updateBlock } from '@/utils';
 import {
   regex,
   fontSize,
   placeHolder,
   listBlockType,
 } from '@utils/blockContent';
-import { useCommand } from '@/hooks';
+import { useCommand, useManager } from '@/hooks';
 import { focusState } from '@/stores/page';
+import { moveBlock, updateBlock } from '@/utils';
 
 const isGridOrColumn = (block: Block): boolean =>
   block.type === BlockType.GRID || block.type === BlockType.COLUMN;
 
 const blockContentCSS = css`
+  position: relative;
   display: flex;
   align-items: stretch;
 `;
-const editableDivCSS = (block: Block): SerializedStyles => css`
+const editableDivCSS = (block: Block) => css`
   margin: 5;
   font-size: ${fontSize[block.type]};
   display: ${!isGridOrColumn(block) ? 'flex' : 'none'};
@@ -50,6 +62,13 @@ const editableDivCSS = (block: Block): SerializedStyles => css`
     cursor: text;
   }
 `;
+const dragOverCss = () => css`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 15%;
+  background-color: rgba(80, 188, 223, 0.7);
+`;
 
 function BlockContent(blockDTO: Block) {
   const contentEditableRef = useRef(null);
@@ -59,6 +78,29 @@ function BlockContent(blockDTO: Block) {
   const listCnt = useRef(1);
   const [Dispatcher] = useCommand();
   const [isBlur, setIsBlur] = useState(false);
+  const draggingBlock = useRecoilValue(draggingBlockState);
+  const [{ blockIndex }] = useManager(blockDTO.id);
+  const [dragOverToggle, setDragOverToggle] = useState(false);
+
+  useEffect(() => {
+    blockRefState[blockDTO.id] = contentEditableRef;
+    return () => {
+      blockRefState[blockDTO.id] = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (focusId === blockDTO.id) contentEditableRef.current.focus();
+  }, [focusId]);
+
+  useEffect(() => {
+    const selection = window.getSelection();
+    const nodeLength = selection.focusNode?.nodeValue?.length ?? 0;
+    if (caretRef.current > nodeLength) {
+      caretRef.current = nodeLength;
+    }
+    selection.collapse(selection.focusNode, caretRef.current);
+  }, [blockDTO.value]);
 
   const indexInSibling: number = blockMap[
     blockDTO.parentId
@@ -207,8 +249,45 @@ function BlockContent(blockDTO: Block) {
     }
   }, [blockDTO.value]);
 
+  const dragOverHandler = (event: React.DragEvent<HTMLDivElement>) => {
+    event.dataTransfer.dropEffect = 'move';
+
+    event.preventDefault();
+  };
+
+  const dropHandler = async (event: React.DragEvent<HTMLDivElement>) => {
+    setDragOverToggle(false);
+    event.dataTransfer.dropEffect = 'move';
+
+    const blockId = draggingBlock?.id;
+    if (!blockId || blockId === blockDTO.id) {
+      return;
+    }
+
+    const { block, from: fromBlock, to } = await moveBlock({
+      blockId,
+      toId: blockDTO.parentId,
+      index: blockIndex + 1,
+    });
+    setBlockMap((prev) => {
+      const next = { ...prev };
+      next[block.id] = block;
+      fromBlock && (next[fromBlock.id] = fromBlock);
+      next[to.id] = to;
+      return next;
+    });
+
+    event.preventDefault();
+  };
+
   return (
-    <div css={blockContentCSS}>
+    <div
+      css={blockContentCSS}
+      onDragOver={dragOverHandler}
+      onDrop={dropHandler}
+      onDragEnter={() => setDragOverToggle(true)}
+      onDragLeave={() => setDragOverToggle(false)}
+    >
       {listBlockType(blockDTO, listCnt.current)}
       <div
         ref={contentEditableRef}
@@ -223,6 +302,7 @@ function BlockContent(blockDTO: Block) {
       >
         {blockDTO.value}
       </div>
+      {dragOverToggle && <div css={dragOverCss()} />}
     </div>
   );
 }

frontend/src/components/molecules/BlockComponent/BlockComponent.tsx

@@ -1,6 +1,8 @@
 /** @jsx jsx */
 /** @jsxRuntime classic */
-import { jsx, css, SerializedStyles } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
+import React, { useRef } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { BlockContent } from '@atoms/index';
 import { BlockHandler, HoverArea } from '@components/molecules';
@@ -11,7 +13,6 @@ import {
   blockRefState,
   blockMapState,
 } from '@stores/page';
-import { useRecoilState, useRecoilValue } from 'recoil';
 
 const isGridOrColumn = (block: Block): boolean =>
   block.type === BlockType.GRID || block.type === BlockType.COLUMN;
@@ -26,22 +27,27 @@ const blockCss = css`
   color: inherit;
   fill: inherit;
 `;
-const descendantsCss = (block: Block): SerializedStyles => css`
+const descendantsCss = (block: Block) => css`
   display: flex;
   padding-left: ${!isGridOrColumn(block) ? '1.5rem' : 0};
   flex-direction: ${block.type !== BlockType.GRID ? 'column' : 'row'};
   color: inherit;
   fill: inherit;
 `;
 
-function BlockComponent({ blockDTO }: { blockDTO: Block }): JSX.Element {
+interface Props {
+  blockDTO: Block;
+}
+
+function BlockComponent({ blockDTO }: Props): JSX.Element {
   const blockMap = useRecoilValue(blockMapState);
   const [focusId, setFocusId] = useRecoilState<string>(focusState);
   const [hoverId, setHoverId] = useRecoilState(hoverState);
   const blockRef: any = blockRefState[blockDTO.id];
+  const blockComponentRef = useRef(null);
 
   return (
-    <div css={blockCss}>
+    <div css={blockCss} ref={blockComponentRef}>
       <div
         css={{ position: 'relative' }}
         onMouseEnter={() => setHoverId(blockDTO.id)}
@@ -51,8 +57,13 @@ function BlockComponent({ blockDTO }: { blockDTO: Block }): JSX.Element {
         }}
       >
         <BlockContent {...blockDTO} />
-        <HoverArea handleClick={() => blockRef.current.focus()} />
-        {hoverId === blockDTO.id && <BlockHandler />}
+        <HoverArea clickHandler={() => blockRef.current.focus()} />
+        {hoverId === blockDTO.id && (
+          <BlockHandler
+            blockDTO={blockDTO}
+            blockComponentRef={blockComponentRef}
+          />
+        )}
       </div>
       {blockDTO.childIdList.length ? (
         <div css={descendantsCss(blockDTO)}>

frontend/src/components/molecules/BlockHandler/BlockHandler.tsx

@@ -1,13 +1,16 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
-import styled from '@emotion/styled';
+import { jsx, css } from '@emotion/react';
 import React from 'react';
 
 import { ReactComponent as DraggableIcon } from '@assets/draggable.svg';
 import { ReactComponent as PlusIcon } from '@assets/plus.svg';
+import { useSetRecoilState } from 'recoil';
 
-const ButtonWrapper = styled.div`
+import { draggingBlockState } from '@/stores';
+import { Block } from '@/schemes';
+
+const buttonWrapperCss = () => css`
   display: flex;
   height: 100%;
   position: absolute;
@@ -23,13 +26,40 @@ const ButtonWrapper = styled.div`
     border-radius: 3px;
   }
 `;
+const buttonCss = () => css`
+  display: inline-block;
+  height: 16px;
+`;
+
+interface Props {
+  blockDTO: Block;
+  blockComponentRef: any;
+}
+
+function BlockHandler({ blockDTO, blockComponentRef }: Props): JSX.Element {
+  const setDraggingBlock = useSetRecoilState(draggingBlockState);
+
+  const dragStartHandler = (event: React.DragEvent<HTMLDivElement>) => {
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.dropEffect = 'move';
+    event.dataTransfer.setDragImage(blockComponentRef.current, 0, 0);
+
+    setDraggingBlock(blockDTO);
+  };
 
-function BlockHandler(): React.ReactElement {
   return (
-    <ButtonWrapper>
-      <PlusIcon css={{ height: '16px' }} />
-      <DraggableIcon css={{ height: '16px' }} />
-    </ButtonWrapper>
+    <div css={buttonWrapperCss()}>
+      <PlusIcon css={buttonCss()} />
+      <div
+        css={buttonCss()}
+        draggable="true"
+        onDragStart={dragStartHandler}
+        onMouseEnter={() => setDraggingBlock(blockDTO)}
+        onMouseLeave={() => setDraggingBlock(null)}
+      >
+        <DraggableIcon css={buttonCss()} />
+      </div>
+    </div>
   );
 }
 

frontend/src/components/molecules/Editor/Editor.tsx

@@ -3,10 +3,9 @@
 import { jsx, css } from '@emotion/react';
 
 import { BlockComponent } from '@components/molecules';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import { pageState, blockMapState } from '@/stores';
-import { Suspense, useEffect } from 'react';
-import { readBlockMap } from '@/utils';
+import { Suspense } from 'react';
 
 const wrapperCss = () => css`
   padding-left: calc(96px + env(safe-area-inset-left));
@@ -18,14 +17,7 @@ const wrapperCss = () => css`
 
 function Editor(): JSX.Element {
   const page = useRecoilValue(pageState);
-  // const blockMap = useRecoilValue(blockMapState);
-  const [blockMap, setBlockMap] = useRecoilState(blockMapState);
-
-  useEffect(() => {
-    (async () => {
-      setBlockMap((await readBlockMap(page.id)).blockMap);
-    })();
-  }, [page, setBlockMap]);
+  const blockMap = useRecoilValue(blockMapState);
 
   return (
     <div css={wrapperCss()}>

frontend/src/components/molecules/HoverArea/HoverArea.tsx

@@ -2,37 +2,42 @@
 /** @jsxRuntime classic */
 import { jsx, css } from '@emotion/react';
 import { MouseEvent } from 'react';
+import { useRecoilValue } from 'recoil';
+import { draggingBlockState } from '@/stores';
 
-const LeftHoverAreaCss = css`
+const leftHoverAreaCss = css`
   position: absolute;
   top: 0;
   right: 100%;
   width: calc(10% + 36px);
   height: 100%;
 `;
-const RightHoverAreaCss = css`
+const rightHoverAreaCss = css`
   position: absolute;
   top: 0;
   left: 100%;
   width: 10%;
   height: 100%;
 `;
-const CommonHoverAreaCss = css`
+const commonHoverAreaCss = css`
   &:hover {
     cursor: text;
   }
 `;
-function HoverArea({
-  handleClick,
-}: {
-  handleClick: (
+
+interface Props {
+  clickHandler: (
     event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,
   ) => void;
-}): React.ReactElement {
+}
+
+function HoverArea({ clickHandler }: Props): JSX.Element {
+  const draggingBlock = useRecoilValue(draggingBlockState);
+
   return (
-    <div css={CommonHoverAreaCss} onClick={handleClick} onKeyDown={() => {}}>
-      <div css={LeftHoverAreaCss} />
-      <div css={RightHoverAreaCss} />
+    <div css={commonHoverAreaCss} onClick={clickHandler} onKeyDown={() => {}}>
+      {!draggingBlock && <div css={leftHoverAreaCss} />}
+      <div css={rightHoverAreaCss} />
     </div>
   );
 }

frontend/src/components/molecules/Menu/Menu.tsx

@@ -65,11 +65,10 @@ function Menu(): JSX.Element {
 
   const CreatingPageHandler = async () => {
     const { pages: updated, page: created } = await createPage();
-    const { blockMap } = await readBlockMap(created.id);
-    console.log({ blockMap });
-    setBlockMap(blockMap);
-    setPages(updated);
+
+    setBlockMap((await readBlockMap(created.id)).blockMap);
     setSelectedPage(created);
+    setPages(updated);
   };
 
   const clickCloseHandler = () => {