fix: mobile drag

Kernel360 · Mar 28, 2024 · 76f3cf2 · 76f3cf2
1 parent 7c81a93
commit 76f3cf2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/frontend/src/app/_components/add/course/without-new/AddCourseOrder.tsx b/frontend/src/app/_components/add/course/without-new/AddCourseOrder.tsx
@@ -6,6 +6,7 @@ import {
   DragOverlay,
   KeyboardSensor,
   PointerSensor,
+  TouchSensor,
   closestCenter,
   useSensor,
   useSensors,
@@ -29,8 +30,14 @@ import type { TSpotState } from '@/context/travel/schema';
 import SortableSpot from './SortableSpot';
 
 export default function AddCourseOrder() {
+  const sensor =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent,
+    )
+      ? TouchSensor
+      : PointerSensor;
   const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(sensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
     }),

diff --git a/frontend/src/app/_components/images/ImagesContainer.tsx b/frontend/src/app/_components/images/ImagesContainer.tsx
@@ -7,6 +7,7 @@ import {
   DragOverlay,
   KeyboardSensor,
   PointerSensor,
+  TouchSensor,
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
@@ -37,8 +38,15 @@ export default function ImagesContainer({
   setImages: (newImages: { type: 'new'; data: TImageData[] }) => void;
 }) {
   const [activeId, setActiveId] = useState<string | null>(null);
+
+  const sensor =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent,
+    )
+      ? TouchSensor
+      : PointerSensor;
   const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 1 } }),
+    useSensor(sensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
     }),

diff --git a/frontend/src/app/_components/mypage/course/CourseSpotContainer.tsx b/frontend/src/app/_components/mypage/course/CourseSpotContainer.tsx
@@ -10,6 +10,7 @@ import {
   DragStartEvent,
   KeyboardSensor,
   PointerSensor,
+  TouchSensor,
   UniqueIdentifier,
   useSensor,
   useSensors,
@@ -42,8 +43,15 @@ export default function CourseSpotContainer({
   onClickDeleteSpot: (e: EventFor<'span', 'onClick'>, id: number) => void;
 }) {
   const [activeId, setActiveId] = useState<number | null>(null);
+
+  const sensor =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent,
+    )
+      ? TouchSensor
+      : PointerSensor;
   const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(sensor, { activationConstraint: { distance: 5 } }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
     }),