[#115] refactor: draggable 영역을 컴포넌트에서 블록 핸들러로 변경

Author: skid901

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

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 /** @jsxRuntime classic */
 import { jsx, css } from '@emotion/react';
-import React from 'react';
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import React, { useRef } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
 
 import { BlockContent } from '@atoms/index';
 import { BlockHandler, HoverArea } from '@components/molecules';
@@ -12,7 +12,6 @@ import {
   focusState,
   blockRefState,
   blockMapState,
-  draggingBlockState,
 } from '@stores/page';
 
 const isGridOrColumn = (block: Block): boolean =>
@@ -45,18 +44,10 @@ function BlockComponent({ blockDTO }: Props): JSX.Element {
   const [focusId, setFocusId] = useRecoilState<string>(focusState);
   const [hoverId, setHoverId] = useRecoilState(hoverState);
   const blockRef: any = blockRefState[blockDTO.id];
-  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);
-  };
+  const blockComponentRef = useRef(null);
 
   return (
-    <div css={blockCss} draggable="true" onDragStart={dragStartHandler}>
+    <div css={blockCss} ref={blockComponentRef}>
       <div
         css={{ position: 'relative' }}
         onMouseEnter={() => setHoverId(blockDTO.id)}
@@ -67,7 +58,12 @@ function BlockComponent({ blockDTO }: Props): JSX.Element {
       >
         <BlockContent {...blockDTO} />
         <HoverArea clickHandler={() => blockRef.current.focus()} />
-        {hoverId === blockDTO.id && <BlockHandler />}
+        {hoverId === blockDTO.id && (
+          <BlockHandler
+            blockDTO={blockDTO}
+            blockComponentRef={blockComponentRef}
+          />
+        )}
       </div>
       {blockDTO.childIdList.length ? (
         <div css={descendantsCss(blockDTO)}>

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

@@ -5,6 +5,10 @@ import React from 'react';
 
 import { ReactComponent as DraggableIcon } from '@assets/draggable.svg';
 import { ReactComponent as PlusIcon } from '@assets/plus.svg';
+import { useSetRecoilState } from 'recoil';
+
+import { draggingBlockState } from '@/stores';
+import { Block } from '@/schemes';
 
 const buttonWrapperCss = () => css`
   display: flex;
@@ -27,11 +31,32 @@ const buttonCss = () => css`
   height: 16px;
 `;
 
-function BlockHandler(): JSX.Element {
+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);
+  };
+
   return (
     <div css={buttonWrapperCss()}>
       <PlusIcon css={buttonCss()} />
-      <div css={buttonCss()}>
+      <div
+        css={buttonCss()}
+        draggable="true"
+        onDragStart={dragStartHandler}
+        onMouseEnter={() => setDraggingBlock(blockDTO)}
+        onMouseLeave={() => setDraggingBlock(null)}
+      >
         <DraggableIcon css={buttonCss()} />
       </div>
     </div>

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

@@ -2,6 +2,8 @@
 /** @jsxRuntime classic */
 import { jsx, css } from '@emotion/react';
 import { MouseEvent } from 'react';
+import { useRecoilValue } from 'recoil';
+import { draggingBlockState } from '@/stores';
 
 const leftHoverAreaCss = css`
   position: absolute;
@@ -30,9 +32,11 @@ interface Props {
 }
 
 function HoverArea({ clickHandler }: Props): JSX.Element {
+  const draggingBlock = useRecoilValue(draggingBlockState);
+
   return (
     <div css={commonHoverAreaCss} onClick={clickHandler} onKeyDown={() => {}}>
-      <div css={leftHoverAreaCss} />
+      {!draggingBlock && <div css={leftHoverAreaCss} />}
       <div css={rightHoverAreaCss} />
     </div>
   );