From 5e5f2eff6ebad0b167f1b8a1f44558b02fd0c2c6 Mon Sep 17 00:00:00 2001
From: Jun Murakami <126404131+Jun-Murakami@users.noreply.github.com>
Date: Mon, 26 Feb 2024 00:03:08 +0900
Subject: [PATCH] Refactor drawer menu visibility logic and improve drag and
 drop behavior

---
 src/components/ResponsiveDrawer.tsx            | 13 ++++++++++---
 src/components/SortableList/SortableList.tsx   | 18 ++++--------------
 src/components/SortableList/SortableSource.tsx |  2 ++
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/ResponsiveDrawer.tsx b/src/components/ResponsiveDrawer.tsx
index 7291e47..8756b40 100644
--- a/src/components/ResponsiveDrawer.tsx
+++ b/src/components/ResponsiveDrawer.tsx
@@ -74,12 +74,19 @@ export function ResponsiveDrawer({
     if (isSwipe && drawerState) {
       setIsMenuVisible(false);
     } else if (!isSwipe && drawerState) {
-      setIsMenuVisible(true);
+      const setTimer = setTimeout(() => {
+        // drawerStateがfalseになっているかチェック
+        if (!drawerState) {
+          return;
+        }
+        setIsMenuVisible(true);
+      }, 170);
+      return () => clearTimeout(setTimer);
     } else {
       setIsMenuVisible(false);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSwipe]);
+    // drawerStateを依存配列に追加
+  }, [isSwipe, drawerState]);
 
   const theme = useTheme();
 
diff --git a/src/components/SortableList/SortableList.tsx b/src/components/SortableList/SortableList.tsx
index 7cbb9cb..5878ce3 100644
--- a/src/components/SortableList/SortableList.tsx
+++ b/src/components/SortableList/SortableList.tsx
@@ -1,5 +1,5 @@
 import { FC, useState } from 'react';
-import { DndContext, DragOverlay, UniqueIdentifier, closestCenter, defaultDropAnimationSideEffects } from '@dnd-kit/core';
+import { DndContext, DragOverlay, UniqueIdentifier, closestCenter } from '@dnd-kit/core';
 import { arrayMove, SortableContext } from '@dnd-kit/sortable';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 
@@ -31,8 +31,8 @@ export const SortableList: FC<SortableListProps> = ({
   return (
     <>
       <DndContext
-        collisionDetection={closestCenter}
-        modifiers={[restrictToVerticalAxis]}
+        collisionDetection={closestCenter} // ドラッグ中の要素の中心を検出
+        modifiers={[restrictToVerticalAxis]} // 縦方向のみの移動に制限
         onDragStart={(event) => {
           setActiveId(event.active.id as number);
         }}
@@ -60,17 +60,7 @@ export const SortableList: FC<SortableListProps> = ({
             />
           ))}
         </SortableContext>
-        <DragOverlay
-          dropAnimation={
-            isPreviewMode
-              ? {
-                  sideEffects: defaultDropAnimationSideEffects({
-                    styles: {},
-                  }),
-                }
-              : undefined
-          }
-        >
+        <DragOverlay>
           {activeItem && (
             <SortableSource
               item={activeItem}
diff --git a/src/components/SortableList/SortableSource.tsx b/src/components/SortableList/SortableSource.tsx
index 71902f5..c9e744d 100644
--- a/src/components/SortableList/SortableSource.tsx
+++ b/src/components/SortableList/SortableSource.tsx
@@ -36,6 +36,8 @@ export const SortableSource: FC<SortableSourceProps> = ({ item, handlerProps, cu
           minWidth: '20px',
           height: '20px',
           mr: '10px',
+          touchAction: 'none',
+          zIndex: 1500,
         }}
         {...handlerProps?.attributes}
         {...handlerProps?.listeners}