From f30efef74740823fa0785e39c2f998233370715b Mon Sep 17 00:00:00 2001
From: haecheonlee <dlgocjs1@gmail.com>
Date: Mon, 22 Apr 2024 01:27:45 -0400
Subject: [PATCH 1/2] Update opacity style when an item is being dragged over

---
 .../EditorSidePanel/TablesTab/TableInfo.jsx   | 45 ++++++++++++++-----
 1 file changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/components/EditorSidePanel/TablesTab/TableInfo.jsx b/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
index ca10bb5..1b99317 100644
--- a/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
+++ b/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
@@ -23,8 +23,10 @@ export default function TableInfo({ data }) {
     useTables();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const [editField, setEditField] = useState({});
-  const draggingElementIndex = useRef();
-  const isDragging = useRef();
+  const [drag, setDrag] = useState({
+    draggingElementIndex: null,
+    draggingOverIndexList: [],
+  });
 
   return (
     <div>
@@ -58,19 +60,42 @@ export default function TableInfo({ data }) {
       {data.fields.map((f, j) => (
         <div
           key={"field_" + j}
-          className="cursor-pointer"
+          className={`cursor-pointer ${drag.draggingOverIndexList.includes(j) ? "opacity-25" : ""}`}
           draggable
+          onDragStart={() => {
+            setDrag((prev) => ({ ...prev, draggingElementIndex: j }));
+          }}
+          onDragLeave={() => {
+            setDrag((prev) => ({
+              ...prev,
+              draggingOverIndexList: prev.draggingOverIndexList.filter(
+                (index) => index !== j,
+              ),
+            }));
+          }}
           onDragOver={(e) => {
             e.preventDefault();
-            if (isDragging.current) return;
-            isDragging.current = true;
-            draggingElementIndex.current = j;
+            if (drag.draggingElementIndex != null) {
+              if (j !== drag.draggingElementIndex) {
+                setDrag((prev) => {
+                  if (prev.draggingOverIndexList.includes(j)) {
+                    return prev;
+                  }
+
+                  return {
+                    ...prev,
+                    draggingOverIndexList: prev.draggingOverIndexList.concat(j),
+                  };
+                });
+              }
+
+              return;
+            }
           }}
           onDrop={(e) => {
             e.preventDefault();
-            isDragging.current = false;
-            const index = draggingElementIndex.current;
-
+            const index = drag.draggingElementIndex;
+            setDrag({ draggingElementIndex: null, draggingOverIndexList: [] });
             if (index == null || index === j) {
               return;
             }
@@ -105,7 +130,7 @@ export default function TableInfo({ data }) {
           }}
           onDragEnd={(e) => {
             e.preventDefault();
-            isDragging.current = false;
+            setDrag({ draggingElementIndex: null, draggingOverIndexList: [] });
           }}
         >
           <TableField data={f} tid={data.id} index={j} />

From f87df3f9d524182fe0f54976ac7a344bc633db9b Mon Sep 17 00:00:00 2001
From: haecheonlee <dlgocjs1@gmail.com>
Date: Mon, 22 Apr 2024 01:34:35 -0400
Subject: [PATCH 2/2] Remove unused import

---
 src/components/EditorSidePanel/TablesTab/TableInfo.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/EditorSidePanel/TablesTab/TableInfo.jsx b/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
index 1b99317..7d8e6b8 100644
--- a/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
+++ b/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useState } from "react";
 import {
   Collapse,
   Row,