[#115] refactor: drag & drop 이벤트 구현을 mouse 이벤트에서 drag api로 변경

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,7 +1,13 @@
 /** @jsx jsx */
 /** @jsxRuntime classic */
-import { jsx, css, SerializedStyles } from '@emotion/react';
-import { useEffect, useRef, FormEvent, KeyboardEvent } from 'react';
+import { jsx, css } from '@emotion/react';
+import React, {
+  useEffect,
+  useRef,
+  FormEvent,
+  KeyboardEvent,
+  useState,
+} from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 import {
@@ -25,10 +31,11 @@ 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'};
@@ -55,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);
@@ -65,6 +79,7 @@ function BlockContent(blockDTO: Block) {
   const [Dispatcher] = useCommand();
   const draggingBlock = useRecoilValue(draggingBlockState);
   const [{ blockIndex }] = useManager(blockDTO.id);
+  const [dragOverToggle, setDragOverToggle] = useState(false);
 
   useEffect(() => {
     blockRefState[blockDTO.id] = contentEditableRef;
@@ -224,7 +239,16 @@ function BlockContent(blockDTO: Block) {
     }
   }, [blockDTO.value]);
 
-  const dropDraggingBlockHandler = async () => {
+  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;
@@ -242,10 +266,18 @@ function BlockContent(blockDTO: Block) {
       next[to.id] = to;
       return next;
     });
+
+    event.preventDefault();
   };
 
   return (
-    <div css={blockContentCSS} onMouseUp={dropDraggingBlockHandler}>
+    <div
+      css={blockContentCSS}
+      onDragOver={dragOverHandler}
+      onDrop={dropHandler}
+      onDragEnter={() => setDragOverToggle(true)}
+      onDragLeave={() => setDragOverToggle(false)}
+    >
       {listBlockType(blockDTO, listCnt.current)}
       <div
         ref={contentEditableRef}
@@ -259,6 +291,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 from 'react';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { BlockContent } from '@atoms/index';
 import { BlockHandler, HoverArea } from '@components/molecules';
@@ -12,7 +14,6 @@ import {
   blockMapState,
   draggingBlockState,
 } from '@stores/page';
-import { useRecoilState, useRecoilValue } from 'recoil';
 
 const isGridOrColumn = (block: Block): boolean =>
   block.type === BlockType.GRID || block.type === BlockType.COLUMN;
@@ -27,7 +28,7 @@ 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'};
@@ -44,10 +45,18 @@ function BlockComponent({ blockDTO }: Props): JSX.Element {
   const [focusId, setFocusId] = useRecoilState<string>(focusState);
   const [hoverId, setHoverId] = useRecoilState(hoverState);
   const blockRef: any = blockRefState[blockDTO.id];
-  const draggingBlock = useRecoilValue(draggingBlockState);
+  const setDraggingBlock = useSetRecoilState(draggingBlockState);
+
+  const dragStartHandler = (event: React.DragEvent<HTMLDivElement>) => {
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.dropEffect = 'move';
+    event.dataTransfer.setData('text/html', event.currentTarget.innerHTML);
+
+    setDraggingBlock(blockDTO);
+  };
 
   return (
-    <div css={blockCss}>
+    <div css={blockCss} draggable="true" onDragStart={dragStartHandler}>
       <div
         css={{ position: 'relative' }}
         onMouseEnter={() => setHoverId(blockDTO.id)}
@@ -57,13 +66,8 @@ function BlockComponent({ blockDTO }: Props): JSX.Element {
         }}
       >
         <BlockContent {...blockDTO} />
-        <HoverArea
-          block={blockDTO}
-          clickHandler={() => blockRef.current.focus()}
-        />
-        {!draggingBlock && hoverId === blockDTO.id && (
-          <BlockHandler block={blockDTO} />
-        )}
+        <HoverArea clickHandler={() => blockRef.current.focus()} />
+        {hoverId === blockDTO.id && <BlockHandler />}
       </div>
       {blockDTO.childIdList.length ? (
         <div css={descendantsCss(blockDTO)}>

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

@@ -5,9 +5,6 @@ import React from 'react';
 
 import { ReactComponent as DraggableIcon } from '@assets/draggable.svg';
 import { ReactComponent as PlusIcon } from '@assets/plus.svg';
-import { Block } from '@/schemes';
-import { useSetRecoilState } from 'recoil';
-import { draggingBlockState } from '@/stores';
 
 const buttonWrapperCss = () => css`
   display: flex;
@@ -30,21 +27,11 @@ const buttonCss = () => css`
   height: 16px;
 `;
 
-interface Props {
-  block: Block;
-}
-
-function BlockHandler({ block }: Props): JSX.Element {
-  const setDraggingBlock = useSetRecoilState(draggingBlockState);
-
-  const setDraggingBlockHandler = () => {
-    setDraggingBlock(block);
-  };
-
+function BlockHandler(): JSX.Element {
   return (
     <div css={buttonWrapperCss()}>
       <PlusIcon css={buttonCss()} />
-      <div css={buttonCss()} onMouseDown={setDraggingBlockHandler}>
+      <div css={buttonCss()}>
         <DraggableIcon css={buttonCss()} />
       </div>
     </div>

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

@@ -2,9 +2,6 @@
 /** @jsxRuntime classic */
 import { jsx, css } from '@emotion/react';
 import { MouseEvent } from 'react';
-import { Block } from '@/schemes';
-import { useRecoilValue } from 'recoil';
-import { draggingBlockState, hoverState } from '@/stores';
 
 const leftHoverAreaCss = css`
   position: absolute;
@@ -25,40 +22,18 @@ const commonHoverAreaCss = css`
     cursor: text;
   }
 `;
-const draggingHoverUnderlineCss = () => css`
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 15%;
-  background-color: rgba(80, 188, 223, 0.7);
-`;
 
 interface Props {
-  block: Block;
   clickHandler: (
     event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>,
   ) => void;
 }
 
-function HoverArea({ block, clickHandler }: Props): JSX.Element {
-  const draggingBlock = useRecoilValue(draggingBlockState);
-  const hoverId = useRecoilValue(hoverState);
-
-  const leftDragEndHandler = () => {
-    console.log(draggingBlock?.value);
-  };
-
-  const rightDragEndHandler = () => {
-    console.log(draggingBlock?.value);
-  };
-
+function HoverArea({ clickHandler }: Props): JSX.Element {
   return (
     <div css={commonHoverAreaCss} onClick={clickHandler} onKeyDown={() => {}}>
-      <div css={leftHoverAreaCss} onMouseUp={leftDragEndHandler} />
-      <div css={rightHoverAreaCss} onMouseUp={rightDragEndHandler} />
-      {draggingBlock && hoverId === block.id && (
-        <div css={draggingHoverUnderlineCss()} />
-      )}
+      <div css={leftHoverAreaCss} />
+      <div css={rightHoverAreaCss} />
     </div>
   );
 }

frontend/src/components/pages/PageComponent/PageComponent.tsx

@@ -5,12 +5,7 @@ import { jsx, css } from '@emotion/react';
 import { Header, Title, Editor } from '@components/molecules';
 import { HeaderMenu } from '@components/organisms';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-import {
-  blockMapState,
-  draggingBlockState,
-  pageState,
-  staticMenuToggleState,
-} from '@/stores';
+import { blockMapState, pageState, staticMenuToggleState } from '@/stores';
 import { createBlock } from '@/utils';
 
 const staticMenuAreaCss = () => css`
@@ -45,7 +40,6 @@ function PageComponent(): JSX.Element {
   const staticMenuToggle = useRecoilValue(staticMenuToggleState);
   const page = useRecoilValue(pageState);
   const setBlockMap = useSetRecoilState(blockMapState);
-  const setDraggingBlock = useSetRecoilState(draggingBlockState);
 
   const createBlockHandler = async () => {
     const { parent, block } = await createBlock({ parentBlockId: page.rootId });
@@ -57,12 +51,8 @@ function PageComponent(): JSX.Element {
     });
   };
 
-  const resetDraggingBlockHandler = () => {
-    setDraggingBlock(null);
-  };
-
   return (
-    <div onMouseUp={resetDraggingBlockHandler}>
+    <div>
       <div css={staticMenuAreaCss()}>
         <HeaderMenu />
       </div>