fix: dragOver가 두번 보이는 문제 해결

Kernel360 · Dec 13, 2024 · f383549 · f383549
1 parent 53dd91e
commit f383549
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/frontend/techpick/src/components/RecommendedPickCarousel/RecommendPickDraggable.tsx b/frontend/techpick/src/components/RecommendedPickCarousel/RecommendPickDraggable.tsx
@@ -1,6 +1,7 @@
 import type { CSSProperties, PropsWithChildren } from 'react';
 import { useDraggable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
+import { draggableStyle } from './recommendPickDraggable.css';
 import { RecommendPickCategoryType, RecommendPickType } from '@/types';
 
 export function RecommendPickDraggable({
@@ -27,7 +28,8 @@ export function RecommendPickDraggable({
       ref={setNodeRef}
       {...attributes}
       {...listeners}
-      style={isDragging ? { ...style, opacity: 0 } : {}}
+      style={style}
+      className={isDragging ? draggableStyle : ''}
     >
       {children}
     </div>

diff --git a/frontend/techpick/src/components/RecommendedPickCarousel/recommendPickDraggable.css.ts b/frontend/techpick/src/components/RecommendedPickCarousel/recommendPickDraggable.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const draggableStyle = style({
+  opacity: '0',
+});